Epic: Create new shared select component – for payments overview currency select initially

[Jinksi]

We are creating new UI for selecting currency on the Payment Overview page (#8765). This currency select UI requires a new component as per the design (bIfbBgyBPRzvXEl7dEg3cv-fi-2286_67401).

Differences from existing WooPayments CustomSelectControl component

• Label positioned inline, aligned left, when inactive.
• Selected option appears inline next to label, but hidden when select dropdown is open/active
• When the dropdown is open/active, the selected option marked with a checkmark ✔️, outset to the left of the option label

Future requirements (e.g. for date range select) to be aware of when implementing

• Hints (descriptions for each select option)
• The ability to add a second input in a second column with shared state (e.g. calendar input)
• Apply & reset buttons to confirm selection
• Search field to filter options

Note a similar component is used for onboarding screens – the CustomSelectControl component for OnboardingSelectField country selector:

Future

This component will also share use-case with:

• Comparison period select Show preset date ranges dropdown #8734 (inl
• Date range select with calendar input Epic: Show payment activity widget with payment volumes for Custom period selected by the user using Calendar input. #8483
• Onboarding country select (paJDYF-dgT-p2#comment-24489)

These will have extended features, e.g. multiple columns, apply button and a search field. These do not have to be supported by this issue, but should be kept in mind while implementing the currency select.

[haszari]

@Jinksi suggests strategy:

• Fork (copy) Woo CustomSelectComponent
• Adapt to our needs and give it a good name
• (later) Work with Woo core to merge our improvements upstream