search

seb-oss / green

Green is an open-source design system built by SEB.
https://storybook.seb.io/
Apache License 2.0
34 stars 49 forks source link

Datepicker: Label line-height does not match other inputs #1609

Open gabrieledaugenaite opened 3 weeks ago

gabrieledaugenaite commented 3 weeks ago

Bug already reported?

For which framework/library you are reporting the bug

Angular

Component name

datepicker

Description

There seems to be inconsistencies between line-height for label in datepicker component and other input components (dropdown, label + native HTML input).

For dropdown it seems to be set to 1.25rem in transitional styles

For label elements that we use next to native HTML input it also seems to be set to 1.25rem in form mixins

However, datepicker label does not have any line-height set in transitional styles and therefore line-height from _body-default mixin is being used, which is only 1.125rem

{215D6126-DDEF-4128-B064-45A95E00E52F}

Steps To Reproduce

No response

Current Behaviour

No response

Expected Behaviour

No response

EldRoos commented 3 weeks ago

Looks like this problem is in React too. In the design it is centered. Edit: Ok I misunderstood this. Was looking at datepicker icon, which is not centered but should be.

Label have line height 20px in design, which is 1.25 rem. Correct, so the code should be changed.