Refresh SelectMenu

[simurai]

This refreshes the SelectMenu 👀 Preview. Changes include:

• The header is now optional. But show the close button also on desktop.
• Everything has now a white background.
• The filter and tabs can be switched in order.
• The height is mostly kept at 32px (excluding the border) to match other components.
• Add option to remove the borders in the list
• Add option to disable a list item

Current	Next	Refreshed (this PR)

API changes

• Add .SelectMenu-list--borderless modifier
• Add support for disabled + aria-disabled="true" list items

/cc @primer/ds-core

[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-css/567bgohgv
✅ Preview: https://primer-css-git-next-select-menu.primer.now.sh

[simurai]

We could also consider removing the borders in the list?

Not sure about being the default? For multiline items, having a border in between is probably still needed. But maybe ok to make single line items feel more lightweight?

[simurai]

Here some screenshots with switching the order of the filter and tabs:

Global filter	Per tab filter

So if the filter should be applied to both tabs, it should be at the top. Or if a filter should only work for the content inside a tab, the filter can be moved to after the tabs.

Not sure if that will work on dotcom and if Primer Components should support that too?

/cc @ashygee @TheDamianHdez @emplums

[simurai]

There is now a "borderless" option by adding .SelectMenu-list--borderless:

This also works with dividers. You can use it with text like <div class="SelectMenu-divider">More options</div> or more like a visual separate like <hr class="SelectMenu-divider">:

Default	.SelectMenu-list--borderless

So adding .SelectMenu-list--borderless and using a <hr class="SelectMenu-divider"> would just add a single line/border between items.

[simurai]

There is now a disabled state for list items:

Markup:

<button class="SelectMenu-item">Item 1</button>
<button class="SelectMenu-item" disabled>Item 2 (disabled)</button>
<a class="SelectMenu-item" href="#">Item 3</a>
<a class="SelectMenu-item" aria-disabled="true">Item 4 (disabled)</a>

There was some back and forth about having a disabled state for list items. In the docs there is the following note: "If not obvious, try to communicate to the user why an item is disabled."

[auareyou]

Is the close icon now included on all versions or is it optional?

[auareyou]

🙌