Select - fix size of select

[thrbnhrtmnn]

Description / User Story

The following differences were found when comparing the Select in Storybook with the Select in Design:

• Size
  • SM: Height in code is 18.5 px, in design it is 16px
  • Size in pressed state increases 1px to each side in code (ie when pressing the icon), but not in design
• Border
  • Border in code is applied out side of the select, in design it is applied inside the defined size

---

Acceptance Criteria

• The Select field has the same size in SM in code as in design (16px)
• The Select field size does not change in pressed state in code
• In case props were changed: Props Excel has been updated / comments have been resolved and props changed from red to black font color > @thrbnhrtmnn or @angelicahoyss can support here

---

Background information

• ...

[thrbnhrtmnn]

Review findings @ashk1996 :

• I think the height of the input field in SM is still not correct. In code the inner container has a height of 18 px, but it should be 16 px according to design. In total the height should be 32 px, but it is currently 34 px.
• The outline adds another 1 px in all directions, whereas the border in design is part of the input field height/widht. This occurs for all sizes, not only in SM.
• In pressed state the border now does not increase the size anymore, but it has the wrong color token (should be sem/forms/inputfield/container/bordercolor/default/pressed, which is hsla(220, 10%, 70%, 1)).
• The focus state still increases the size of the component by 1 px in each direction, but this could also be solved via another issue, as this was not part of the scope initially

[thrbnhrtmnn]

Hey @larserbach , I think we need your support on this topic, maybe we can have a quick sync next week.

As I see it, borders in Figma can be applied "inside", "outside" and "centered". This design decision however is currently not saved within a design token.

Also the behaviour of borders seems to be different in Figma in that regard, that a border is not increasing the size of a container, whereas in code it does. This means, that we would need to implement a logic in code that reduces i.e. padding by 1 px if the border is applied "inside" the padding in design or that it would use an outline instead of a border.

[thrbnhrtmnn]

As just discussed this ticket now can get approved and be merged. We fixed most issues, the only misalignment between design and code currently is that in design the border is applied inside, and in code it is applied outside (as an outline which does not increase the component size though).

After a sync with @larserbach about this we should decide if we need a follow up task to fix this misalignment as well.