Problem/Motivation

Follow up to Issue #3116377: Autocomplete input in views exposed filters does not align with select and text inputs.
There are several places on the code where line-height is directly defined per the component and makes the code less maintainable. Also, a lot of times measures are based on pixels (px or rems) while using percentages would be more reusable.

Proposed resolution

  • Define a set of line-height to reuse as variables
  • Use percentage-based line-height (line-height: 1.2) instead or individual pixel-based values(line-height: 18px or line-height: 1.125rem;)

Remaining tasks

  1. Define the set of line heights to use and rules to implement them
  2. Create the new variables and replace line-height across the code.

User interface changes

Line-height will change on several components.

API changes

Release notes snippet

Comments

ckrina created an issue. See original summary.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue summary: View changes
gauravvvv’s picture

gauravvvv commented

Unitless Line Heights
The recommended method for defining line-height is using a number value, referred to as a “unitless” line-height. A number value can be any number, including a decimal-based number, as is used in the first code example on this page.

Unitless line heights are recommended due to the fact that child elements will inherit the raw number value, rather than the computed value. With this, child elements can compute their line heights based on their computed font size, rather than inheriting an arbitrary value from a parent that is more likely to need overriding.

https://css-tricks.com/almanac/properties/l/line-height/#unitless-line-h...

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

quietone’s picture

quietone commented
Title: Claro: review line-heigh usage accross components » Review line-heigh usage accross components
Status: Active » Postponed
smustgrave’s picture

smustgrave commented
Project: Drupal core » Claro
Version: main » 3.0.x-dev
Component: Claro theme » Code
Status: Postponed » Active

Claro has moved to contrib