SelectMenu

[emplums]

SelectMenu components! This PR contains a wrapper SelectMenu and ✨
6 ✨ subcomponents to build out our complex SelectMenu :) I've also added ButtonTableList

Select Menu Components

SelectMenu

• Main component wrapper
• Sets wrapper styles
• Wraps whole SelectMenu in a context provider
• takes initialTab prop and sets that tab to be open initially
• Manages selectedTab state
• Manages open state for menu content

Screenshot 📸

SelectMenu.Modal

• Wrapper for menu content
• Manages keyboard focus
• Sets modal styles
• Applies correct role attribute for a11y on wrapper component
• also wraps the modal content in a role="menu" with a ul and provides list styling
• uses the title prop to add a heading for the select menu content

Screenshot 📸

SelectMenu.Filter

• Focuses the input when the SelectMenu is open
• Adds styles for input padding/margin/border & responsive styles

Screenshot 📸

SelectMenu.Tabs

• Wrapper component for tab navigation
• Applied role="tablist" for a11y
• Adds styling to tablist

Screenshot 📸

SelectMenu.Tab

• handles showing the first tab, or whatever tab name is passed to initialTab as selected
• updates the selectedTab context when a tab is clicked
• exposes onClick
• adds appropriate aria-selected & role for a11y
• adds styling

SelectMenu.Item

• Styles the list items
• Adds Icon + styles selected state based off of selected prop
• Applies appropriate aria-checked="true" to selected items
• Provides proper semantic markup (list items wrapped around links)

Screenshot 📸

SelectMenu.Divider

• Used to divide items within a select menu list
• Styles only

Screenshot 📸

SelectMenu.Footer

• Footer used at the bottom of select menu
• Styles only

Screenshot 📸

Other Components

ButtonTableList (this needs a new name 😂 )

TO DO:

• Tests
• Typings
• Background color on SelectMenu.Filter is off
• Focus management is not working correctly
• Clean up responsive tab styles

Note: This is marked as a major release change because React recommends marking a change as breaking when introducing forwardRef: https://reactjs.org/docs/forwarding-refs.html#note-for-component-library-maintainers

[vercel]

This pull request is being automatically deployed with ZEIT Now (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://zeit.co/primer/primer-components/oc9137i72
✅ Preview: https://primer-components-git-select-menu.primer.now.sh

[colebemis]

Holy cow. Nice work, @emplums! 🎉 I left a few minor comments but nothing blocking.

I have a couple visual notes as well:

• Using the Filter component above the tabs looks a little weird because filter has a white background. It should probably have a gray background to match.
  

• I noticed that navigating between tabs using the keyboard is a little different in this SelectMenu vs the one on dotcom. On dotcom, you navigate between tabs using the left and right arrow keys. In this component, you navigate between tabs using the tab key. I don't know if that's an issue but thought it was worth pointing out.

[JedWatson]

This is awesome! Found this PR when you mentioned me on Twitter and just popped by for a look, it's always fun seeing other Select implementations 😀

Really nice work 👏

[emplums]

Thanks @JedWatson!! 🙏

[BinaryMuse]

No further feedback from me! This looks great ✨

[BinaryMuse]

🔥