freenowtech
Select enhancement: update UI of Select dropdown
Describe the feature you'd like
We are currently implementing a feature on one of our products, that uses a Select input with the following UI specs:
We need to select only single option, which would logically point to usage of Select component, however, we are not able to use that as the Select component uses the native dropdown styling, compared to the styling of SelectList.
Here the select dropdown also overlays the select input box
There is also misalignment with our Figma components, as the Select wave component in Figma does have the same dropdown styling as SelectList.
We need to update the Select component dropdown styling to be the same as the styling of SelectList dropdown:
- to be compatible with our Figma components
- to be able to use it, when integrating our designs that use Figma's Select component
- to unify testing strategy: right now we use userEvent to simulate select on Select component (as it uses native element), but we use react-select-event for SelectList (as it doesn't use a native element)
What is your solution @JanHamara?
The initial story behind the Select was to provide the styled native HTML control. The dropdown list cannot be styled there. We can shift toward a custom solution here, following the example and recommendations on WAI-ARIA.
Another option is to implement the same with the react-select, but the downside is the amount of logic it brings we will not use.
@nlopin @JanHamara I think we have an update here, no? From the last wave sync?
