primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-06 05:33:07 +03:00
Code Issues Projects Releases Wiki Activity

Add disabled state

Browse Source
This commit is contained in:
simurai 2020-04-14 14:35:37 +09:00
parent afd42f2244
commit cf399883f0
2 changed files with 37 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
docs/content/components/select-menu.md
View File

@ -512,6 +512,31 @@ When fetching large lists, consider showing a `.SelectMenu-loading` animation.
<div class="d-none d-sm-block" style="height: 220px"><!-- min height for > sm --></div>
```
## Disabled
To disable a list item, use the `disabled` attribute for `<button>`s. For `<a>`s replace the `href` with an `aria-disabled="true"` attribute. Note: If not obvious, try to communicate to the user why an item is disabled.
```html live
<details class="details-reset details-overlay" open>
<summary class="btn" aria-haspopup="true">
Choose an item
</summary>
<div class="SelectMenu">
<div class="SelectMenu-modal">
<div class="SelectMenu-list">
<button class="SelectMenu-item" role="menuitem">Item 1</button>
<button class="SelectMenu-item" role="menuitem" disabled>Item 2 (disabled)</button>
<a class="SelectMenu-item" role="menuitem" href="#">Item 3</a>
<a class="SelectMenu-item" role="menuitem" aria-disabled="true">Item 4 (disabled)</a>
</div>
</div>
</div>
</details>
<div class="d-sm-none" style="height: 600px"><!-- min height for < sm --></div>
<div class="d-none d-sm-block" style="height: 160px"><!-- min height for > sm --></div>
```
## Blankslate
Sometimes a Select Menu needs to communicate a "blank slate" where there's no content in the menu's list. Usually these include a clear call to action to add said content to the list. Swap out the contents of a `.SelectMenu-list` with a `.SelectMenu-blankslate` and customize its contents as needed.

14
src/select-menu/select-menu.scss
View File

@ -188,7 +188,7 @@ $SelectMenu-max-height: 480px !default;
width: 100%;
padding: $spacer-3;
overflow: hidden;
color: $text-gray;
color: $text-gray-dark;
text-align: left;
cursor: pointer;
background-color: $bg-white;
@ -385,7 +385,7 @@ $SelectMenu-max-height: 480px !default;
// Selected
//
// Visible when a used clicks/taps on a list item
// Visible when a user clicks/taps on a list item
.SelectMenu-item[aria-checked=true] {
font-weight: $font-weight-semibold;
@ -398,6 +398,16 @@ $SelectMenu-max-height: 480px !default;
}
}
// Disabled
//
// Prevent list items to be selected
.SelectMenu-item:disabled,
.SelectMenu-item[aria-disabled=true] {
color: $text-gray-light;
pointer-events: none;
}
// Can hover states
//
// For mouse/keyboard input