search

grommet / hpe-design-system

HPE Design System
45 stars 23 forks source link

Select - Re-visit styling for all select inputs #3889

Open vavalos5 opened 4 weeks ago

vavalos5 commented 4 weeks ago

Slack conversation with Tales

Problem: In our design system channel, Tales brought to our attention how the drop from the select multiple component blends when placed of a form field. After chatting with Kenny and Jessica, we thought it would be best to revisit the styling as the elevation doesn't seem to help distinguish the fact that it is a part of the select component. See image below:

Image

In addition, Jessica included a video of how it looks from the code. I'm including the Slack conversation from the team here too.

Let's revisit and identify a new solution to ensure the drop is not blending with the rest of the form fields.

KennyAtHPE commented 4 weeks ago

The borders in the code use outside positioning however in Figma we are currently using inside positioning. Not entirely sure if this is the main or only issue but it doesn't quite explain why only parts of the dropdown are clipping as opposed to the whole thing. Could we include a white 1px outside border on the dropdown to sit it above all content below?