SelectDropdown: Add Component

[ItsJonQ]

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.

[ItsJonQ]

Sigh... It looks like Downshift doesn't really play nicely with Portal (via Popover) (at least, I haven't figured out a good way to do this yet).

At this point, we either massage Downshift useSelect... or we massage Reakit Menu 😂 .

[ItsJonQ]

Calling in reinforcements! (aka, @diegohaz ❤️ )

Haiiiii!! I'm a bit stuck 😊 .

I basically want to remake the CustomSelect component in G2. Something we can use for this: https://wordpress.github.io/gutenberg/iframe.html?id=components-fontsizepicker--default&viewMode=story

It doesn't look like the Reakit Menu should be used for this. Alternatively, there's the experimental Combobox component. However, for this particular select, we won't need to input part of Combobox.

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

Ideally, I'd use something Reakit based because I'll be able to reuse other parts of G2. Otherwise... I'll have to rebuild many things to make Downshift happy (e.g. Dropdown menus, portal handling, Popper.js positioning, etc...)

Any thoughts and advice would be much appreciated 🙏 !!!

[ItsJonQ]

From my understanding, there was a lot of collaborative work to craft the CustomSelect component from @wordpress/components (a11y, dev, etc...).

For that reason, perhaps the SelectDropdown could use that code as it's foundation as a start?

The biggest feature it's missing at the moment is Portal'ing/Autopositioning.

Perhaps that and other adjustments to sync. it with Dropdown code can be enhanced later on.

[ItsJonQ]

It's coming together 🌈

[ItsJonQ]

Copied @diegohaz 's setup with Popper in Reakit's usePopoverState: https://github.com/reakit/reakit/blob/master/packages/reakit/src/Popover/PopoverState.ts

Got it working roughly with downshift. Neat!

We don't have Portal'ing, but we have better positioning + size control.

[ItsJonQ]

Getting closer:

Some much needed enhancements:

• Easily render as inline or block
• Can customize min-width for the dropdown menu
• Can customize max-width for the dropdown menu

At the moment, the select Element is rendering a Button. Ideally, it should be rendering the same UI as a regular Select. Going to work on that next.

[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.

[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/