[Select] Option group styling is not complete #1931
Description
Provide a general summary of the issue here
When you have a mix of grouped and not grouped options the styling of the dropdown is confusing
🤔 Expected Behavior?
There should be a clear indication where a group starts and ends, either by indentation or by having a border both at the top and the bottom of a group
😯 Current Behavior
"Music" is not in either group here, but it looks like it's part of the "Languages" group. This is confusing
💁 Possible Solution
We could use the same styling/indentation as is done in the menu:
🖥️ Steps to Reproduce
https://sanomalearning.design/categories/components/select/code/
What browsers are you seeing the problem on? (only for bugs in code)
Chrome
If other, please specify.
No response
What operating system are you using?
All
👤 Your name
Diana
🧢 Your product/team
SLDS
🎨 Your Theme(s)
Sanoma Learning
To do
- dev and design should decide what is changing in the design of options and menu items
- create examples of combo box, select in figma (selected and groups)
- should we provide a danger menu item in the menu? do we need to show the danger already there or in the confimration afterwards?
- implement subtle and bold selected state
- Provide more examples in figma and storybook (options vs menu items)
- implement new design in figma and in code