search

AlaskaAirlines / auro

Document repository to support all Auro custom element repos.
https://auro.alaskaair.com
16 stars 4 forks source link

auro-badge: type label floats a bit too high in badge #223

Closed erikalanghauser closed 3 years ago

erikalanghauser commented 3 years ago

Describe the bug

There is an issue with the line-height and padding that is causing the type to float too high in the badge and no longer match the design comps.

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://auro.alaskaair.com/components/auro/badge
  2. Look at label option
  3. Type is floating high.
  4. Compare to screenshots below of comp vs code.

Expected behavior

Ideally, the browser doesn't move the height to compensate for ascenders/descenders. Possibility to make this a config option.

Screenshots

Left: design comp; Right: code image image

Additional context

For our usage of the auro-badge label as the layover length, the format will always be "0h 0m" so there will never be any ascenders/descenders in the label field.

jason-capsule42 commented 3 years ago

I met with Scott Shepherd today to discuss options (Erika is OOF). We believe we understand the intent of what Erika is asking for. However, vertically centering the text for one content string can look unaligned for another.

For instance "PPPPP" vs "ppppp". Centering the content for the uppercase string would result in the lowercase string appearing to be too low in the badge. On the other hand "Ppppp" would generally feel centered since there is at least one uppercase character.

Scott believes it is unlikely we would see the implementation of a badge that does not include at least one uppercase character. Therefor, centering all content such that any string with 1 or more uppercase characters and no descenders are always vertically centered would achieve the intended goal.