Design & component update - Select

[ti10le]

Current Version:

• simple Select component with variant prop

-> Figma Design

Todo:

• show select as expected in the figma design
• add error prop to make outline red and show Validation Message
• add focused and disabled
• add hover and selected

[ti10le]

first changes for this issue in #1146

[ti10le]

ToDo:

• Item defaultSelected
• Item disabled
• show select as expected in the figma design: borders when open listBox, button and listbox every time the same width
• error prop to show error like in the figma design
• required prop to show error like in the figma design

[ti10le]

• error and required prop --> in review
• itemSelected and disabledItem --> almost finished

[viktoria-schwarz]

• The select field "jumps" when you open it (border instead of outline)
• If you open the dropdown on the bottom of the page and the ListBox is displayed above, the borders are wrong
• What if you want to unselect an item/select "none"? (display placeholder as option, optionally)
• on error: doesn't it make more sense to remove the red border when listbox is opened and only display the red border when the focus is NOT on the select?
• use <Select> on docs page for ThemeSwitch

@ti10le @sebald what do you think, how close should we stick to the Figma design?

[sebald]

As close as possible? 😄

[viktoria-schwarz]

Well :D I find it difficult if it doesn't cover all cases, but fine

[sebald]

Yeah, I mean we should get 100%!

[ti10le]

fix todo: styling if select listbox opens above the select button.

[ti10le]

#1225 bugfix for jumping Select component borders