SelectDropdown: Add Component

For integration with Gutenberg, we may need to replace the current FontSizePicker component from @wordpress/components (as it related to Typography Tools in Global Styles).

As such, we’ll need some sort of custom select component:

I’m not a fan of the name CustomSelect (from @wordpress/components). Ultimately, we can go with that if it’s the best option.

I feel like either SelectDropdown or SelectMenu is a better description.

[diegohaz]

From your perspective, should we use Menu or Combobox? 😃.

A bit late here! 😅

That’s a great question. I’ve seen people using Menu for that in the past: https://codesandbox.io/s/gaudi-0bp08?file=/src/components/Listbox/Listbox.tsx

But I think Combobox is the best base for that, although it would still require a lot of work to make a select completely accessible with that.

Anyway, the best resources I know for accessible select components are these articles by Sarah Higley:

• https://www.24a11y.com/2019/select-your-poison/
• https://www.24a11y.com/2019/select-your-poison-part-2/

[ItsJonQ]

Update: We did it! ✨

In addition to reusing 99% of existing components and styles for SelectDropdown, I also have Portaling + Popper working.

Check out this demo: https://d.pr/v/RIRg1p

In it, you can see the Dropdown repositioning itself to the left/right if there’s a chance it may be “cut off” from view in the browser (this is thanks to the positioning engine that is popper.js). The content is also Portal’ed. So it doesn’t absorb lineHeight/fontSize styles from the inline text content.