primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-12-23 14:13:14 +03:00
Code Issues Projects Releases Wiki Activity

Doc updates: develop + action list (#1743)

Browse Source 
* sentence case + contrib doc

* update develop guide

* fix path

* update actionlist a11y semantics

* update docs, revert develop change

* reformat actionlist stories to use inline-radio
This commit is contained in:
Katie Langerman 2021-11-23 11:00:58 -08:00 committed by GitHub
parent 74724ce7c7
commit c65be7f0c8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 430 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
DEVELOP.md
View File

@ -41,6 +41,20 @@ The [docs directory](../docs/) contains all of the documentation files in our do
### Code blocks
All `html` fenced code blocks in `src/**/*.md` will be rendered as stories and listed under the relevant module's name in the left-hand nav. File changes should trigger a live reload automatically (after a brief delay).
## Storybook
Primer CSS Storybook is used for designing and prototyping components. Stories are written in HTML and leverage the Storybook API for configuring conditional logic.
```sh
npm storybook
```
### The Storybook directory
Storybook configuration files live in [.storybook](../docs/.storybook). Addons and additional global config can be added to [main.js](../docs/.storybook/main.js) or [preview.js](../docs/.storybook/preview.js)
### Stories
Stories are individual `.jsx` or `.mdx` files that contain component HTML for prototyping, typically showcasing all possible variations of a component. Stories can be found in the [stories directory](../docs/src/stories/components) and are organized by component. Storybook will build and deploy a preview on any open Pull Request.
## Scripts
Our [`package.json`](package.json) houses a collection of [run-scripts] that we use to maintain, test, build, and publish Primer CSS. Run `npm run <script>` with any of the following values for `<script>`:
@ -51,6 +65,7 @@ Our [`package.json`](package.json) houses a collection of [run-scripts] that we
* `now-build` and `now-start` are run on [Now] to build and start the docs site server. `now-test` runs them both in order.
* `start` runs the documentation site locally (alias: `dev`).
* `test` runs our test suite.
* `storybook` runs storybook local development server.
The above list may not always be up-to-date. You can list all of the available scripts by calling `npm run` with no other arguments.

290
docs/content/components/action-list.md
View File

@ -9,40 +9,11 @@ storybook: https://primer.style/css/storybook/?path=/story/components-actionlist
Reference the [Action list interface guidelines](https://primer.style/design/components/action-list) for details on where and how to use Action List.
## Accessibility
### Semantic markup
The markup for Action List changes depending on the intended use case.
In all cases, the basic structure is as follows:
```html
<ul>
<li><span>Content with action (onclick)</span></li>
<li><a href="/">Content as link</a></li>
<li>
<ul>
<li>Nested list</li>
</ul>
</li>
</ul>
```
Pay close attention to `role` attributes throughout the documentation. The `role` attribute may change depending on the context in which Action List is used. Some common use case specs:
[Menu](https://www.w3.org/TR/wai-aria-practices-1.1/#menu)
[Multi/Single Select Menu](https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-2/menubar-2.html)
[Multi/Single Select List](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox)
Note: JS is required to make Action List accessible in most cases
## Action List
## Action list
Action List is a `ul` list designed to contain Action List Items.
### Arguments
### Variants
| Class | Description |
| :- | :- |
@ -53,15 +24,15 @@ Action List is a `ul` list designed to contain Action List Items.
#### Default
```html live
<ul class="ActionList" role="menu" aria-label="Menu description">
<li class="ActionList-item" role="menuitem">
<ul class="ActionList">
<li class="ActionList-item">
<span class="ActionList-content">
<span class="ActionList-item-label">Action list item</span>
<span class="ActionList-item-label">Item label</span>
</span>
</li>
<li class="ActionList-item" role="menuitem">
<li class="ActionList-item">
<span class="ActionList-content">
<span class="ActionList-item-label">Action list item</span>
<span class="ActionList-item-label">Item label</span>
</span>
</li>
</ul>
@ -70,18 +41,18 @@ Action List is a `ul` list designed to contain Action List Items.
#### Item dividers
```html live
<ul class="ActionList ActionList--divided" role="menu" aria-label="Menu description">
<li class="ActionList-item" role="menuitem">
<ul class="ActionList ActionList--divided" aria-label="Menu description">
<li class="ActionList-item">
<span class="ActionList-content">
<span class="ActionList-item-label">Action list item</span>
</span>
</li>
<li class="ActionList-item" role="menuitem">
<li class="ActionList-item">
<span class="ActionList-content">
<span class="ActionList-item-label">Action list item</span>
</span>
</li>
<li class="ActionList-item" role="menuitem">
<li class="ActionList-item">
<span class="ActionList-content">
<span class="ActionList-item-label">Action list item</span>
</span>
@ -92,23 +63,23 @@ Action List is a `ul` list designed to contain Action List Items.
#### Nested sub list
```html live
<ul class="ActionList" role="menu" aria-label="Menu description">
<li class="ActionList-item" role="menuitem">
<ul class="ActionList" aria-label="Menu description">
<li class="ActionList-item">
<span class="ActionList-content">
<span class="ActionList-item-label">Action list item</span>
</span>
</li>
<li class="ActionList-item ActionList-item--hasSubItem" role="menuitem">
<li class="ActionList-item ActionList-item--hasSubItem">
<span class="ActionList-content">
<span class="ActionList-item-label">Sub menu label</span>
</span>
<ul class="ActionList ActionList--subGroup" role="menu" aria-label="Menu description">
<li class="ActionList-item ActionList-item--subItem" role="menuitem">
<ul class="ActionList ActionList--subGroup" aria-label="Menu description">
<li class="ActionList-item ActionList-item--subItem">
<span class="ActionList-content">
<span class="ActionList-item-label">Sub menu item</span>
</span>
</li>
<li class="ActionList-item ActionList-item--subItem" role="menuitem">
<li class="ActionList-item ActionList-item--subItem">
<span class="ActionList-content">
<span class="ActionList-item-label">Sub menu item</span>
</span>
@ -119,11 +90,11 @@ Action List is a `ul` list designed to contain Action List Items.
```
## Action List Divider
## Action list divider
List item `li` for separating groups of content
### Arguments
### Variants
| Class | Description |
| :- | :- |
@ -134,7 +105,7 @@ List item `li` for separating groups of content
#### Default
```html live
<ul class="ActionList" role="menu">
<ul class="ActionList">
<li class="ActionList-sectionDivider" role="separator"></li>
</ul>
```
@ -142,7 +113,7 @@ List item `li` for separating groups of content
#### Filled
```html live
<ul class="ActionList" role="menu">
<ul class="ActionList">
<li class="ActionList-sectionDivider ActionList-sectionDivider--filled" role="separator"></li>
</ul>
```
@ -152,12 +123,12 @@ When using a section label for a group, give the `li` an id to be referenced by
#### Filled with section label
```html live
<ul class="ActionList" role="menu">
<ul class="ActionList">
<li class="ActionList-sectionDivider ActionList-sectionDivider--filled" role="presentation" id="nested-group-id" aria-hidden="true">Section label</li>
<li class="ActionList-item" role="menuitem">
<ul class="ActionList" role="menu" aria-labelledby="nested-group-id">
<li class="ActionList-item" role="none">
<a href="/" role="menuitem" class="ActionList-content">
<li class="ActionList-item">
<ul class="ActionList" aria-labelledby="nested-group-id">
<li class="ActionList-item">
<a href="/" class="ActionList-content">
<span class="ActionList-item-label">Group Item</span>
</a>
</li>
@ -169,12 +140,12 @@ When using a section label for a group, give the `li` an id to be referenced by
#### Default with section label
```html live
<ul class="ActionList" role="menu">
<ul class="ActionList">
<li class="ActionList-sectionDivider" role="presentation" id="nested-group-id" aria-hidden="true">Section label</li>
<li class="ActionList-item" role="menuitem">
<ul class="ActionList" role="menu" aria-labelledby="nested-group-id">
<li class="ActionList-item" role="none">
<a href="/" role="menuitem" class="ActionList-content">
<li class="ActionList-item">
<ul class="ActionList" aria-labelledby="nested-group-id">
<li class="ActionList-item">
<a href="/" class="ActionList-content">
<span class="ActionList-item-label">Group Item</span>
</a>
</li>
@ -186,17 +157,17 @@ When using a section label for a group, give the `li` an id to be referenced by
#### Default with section label + description
```html live
<ul class="ActionList" role="menu">
<ul class="ActionList">
<li class="ActionList-sectionDivider" role="presentation" id="nested-group-id" aria-hidden="true">
Section label
<span class="ActionList-item-description">
Section description
</span>
</li>
<li class="ActionList-item" role="menuitem">
<ul class="ActionList" role="menu" aria-labelledby="nested-group-id">
<li class="ActionList-item" role="none">
<a href="/" role="menuitem" class="ActionList-content">
<li class="ActionList-item">
<ul class="ActionList" aria-labelledby="nested-group-id">
<li class="ActionList-item">
<a href="/" class="ActionList-content">
<span class="ActionList-item-label">Group Item</span>
</a>
</li>
@ -205,11 +176,11 @@ When using a section label for a group, give the `li` an id to be referenced by
</ul>
```
## Action List Item
## Action list item
List item `li` handling semantics, state and interactions
### Arguments
### Variants
| Class | Description |
| :- | :- |
@ -223,62 +194,62 @@ Kitchen sink
```html live
<nav>
<ul class="ActionList" role="menu" aria-label="Main menu description">
<li class="ActionList-item" role="none">
<a href="/" role="menuitem" class="ActionList-content">
<ul class="ActionList" aria-label="Main menu description">
<li class="ActionList-item">
<a href="/" class="ActionList-content">
<span class="ActionList-item-label">Nav Item</span>
</a>
</li>
<li class="ActionList-item" role="none">
<a href="/" role="menuitem" class="ActionList-content">
<li class="ActionList-item" >
<a href="/" class="ActionList-content">
<span class="ActionList-item-label">Nav Item</span>
</a>
</li>
<li class="ActionList-item" role="none">
<a href="/" role="menuitem" class="ActionList-content">
<li class="ActionList-item" >
<a href="/" class="ActionList-content">
<span class="ActionList-item-label">Nav Item</span>
</a>
</li>
<li class="ActionList-sectionDivider" role="presentation" id="some-unique-id" aria-hidden="true">Section Divider</li>
<li class="ActionList-item ActionList-item--hasSubItem" role="menuitem">
<ul class="ActionList" role="menu" aria-labelledby="some-unique-id">
<li class="ActionList-item" role="none">
<a href="/" role="menuitem" class="ActionList-content">
<li class="ActionList-item ActionList-item--hasSubItem">
<ul class="ActionList" aria-labelledby="some-unique-id">
<li class="ActionList-item" >
<a href="/" class="ActionList-content">
<span class="ActionList-item-label">Nav Item</span>
</a>
</li>
<li aria-disabled="true" class="ActionList-item" role="none">
<a href="/" role="menuitem" class="ActionList-content">
<li aria-disabled="true" class="ActionList-item" >
<a href="/" class="ActionList-content">
<span class="ActionList-item-label">Disabled Item</span>
</a>
</li>
<li class="ActionList-item ActionList-item--navActive" role="none">
<a href="#" role="menuitem" aria-current="location" class="ActionList-content">
<li class="ActionList-item ActionList-item--navActive" >
<a href="#" aria-current="location" class="ActionList-content">
<span class="ActionList-item-label">Nav Item</span>
</a>
</li>
<li class="ActionList-item ActionList-item--danger" role="none">
<a href="/" role="menuitem" class="ActionList-content">
<li class="ActionList-item ActionList-item--danger" >
<a href="/" class="ActionList-content">
<span class="ActionList-item-label">Danger Item</span>
</a>
</li>
</ul>
</li>
<li class="ActionList-sectionDivider" role="presentation" id="some-unique-id" aria-hidden="true">Section Divider</li>
<li class="ActionList-item ActionList-item--hasSubItem" role="menuitem">
<ul class="ActionList ActionList--subGroup" role="menu" aria-labelledby="some-unique-id">
<li class="ActionList-item ActionList-item--subItem" role="none">
<a href="/" role="menuitem" class="ActionList-content">
<li class="ActionList-item ActionList-item--hasSubItem">
<ul class="ActionList ActionList--subGroup" aria-labelledby="some-unique-id">
<li class="ActionList-item ActionList-item--subItem" >
<a href="/" class="ActionList-content">
<span class="ActionList-item-label">Nav Item</span>
</a>
</li>
<li class="ActionList-item ActionList-item--subItem" role="none">
<a href="#" role="menuitem" class="ActionList-content">
<li class="ActionList-item ActionList-item--subItem" >
<a href="#" class="ActionList-content">
<span class="ActionList-item-label">Nav Item</span>
</a>
</li>
<li class="ActionList-item ActionList-item--subItem" role="none">
<a href="/" role="menuitem" class="ActionList-content">
<li class="ActionList-item ActionList-item--subItem" >
<a href="/" class="ActionList-content">
<span class="ActionList-item-label">Nav Item</span>
</a>
</li>
@ -289,11 +260,11 @@ Kitchen sink
```
## Action List Item Content
## Action list item content
Contains and places all child content within Action List Item. Can be either an `a href` tag for list link items, or a `span` for items that provide an event on Action List Item `li`.
### Arguments
### Variants
| Class | Description |
| :- | :- |
@ -317,8 +288,8 @@ Contains and places all child content within Action List Item. Can be either an
### Basic text only item
```html live
<ul class="ActionList" role="menu">
<li class="ActionList-item" role="menuitem">
<ul class="ActionList">
<li class="ActionList-item">
<span class="ActionList-content">
<span class="ActionList-item-label">Basic item label</span>
</span>
@ -329,15 +300,15 @@ Contains and places all child content within Action List Item. Can be either an
### Size (all options)
```html live
<ul class="ActionList" role="menu">
<li class="ActionList-item" role="menuitem">
<ul class="ActionList">
<li class="ActionList-item">
<span class="ActionList-content ActionList-content--sizeMedium">
<span class="ActionList-item-label">Medium item</span>
</span>
</li>
</ul>
<ul class="ActionList" role="menu">
<li class="ActionList-item" role="menuitem">
<ul class="ActionList">
<li class="ActionList-item">
<span class="ActionList-content ActionList-content--sizeLarge">
<span class="ActionList-item-label">Large item</span>
</span>
@ -348,8 +319,8 @@ Contains and places all child content within Action List Item. Can be either an
### Visuals (all options- leading & trailing)
```html live
<ul class="ActionList" role="menu">
<li class="ActionList-item" role="menuitem">
<ul class="ActionList">
<li class="ActionList-item">
<span class="ActionList-content">
<span class="ActionList-item-visual ActionList-item-visual--leading">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
@ -371,8 +342,8 @@ Contains and places all child content within Action List Item. Can be either an
### Trailing visual as text
```html live
<ul class="ActionList" role="menu">
<li class="ActionList-item" role="menuitem">
<ul class="ActionList">
<li class="ActionList-item">
<span class="ActionList-content">
<span class="ActionList-item-label">Item with trailing visual</span>
<span class="ActionList-item-visual ActionList-item-visual--trailing">
@ -386,8 +357,8 @@ Contains and places all child content within Action List Item. Can be either an
### Inline description
```html live
<ul class="ActionList" role="menu">
<li class="ActionList-item" role="menuitem">
<ul class="ActionList">
<li class="ActionList-item">
<span class="ActionList-content">
<span class="ActionList-item-descriptionWrap ActionList-item-descriptionWrap--inline">
<span class="ActionList-item-label">Item label</span>
@ -401,21 +372,26 @@ Contains and places all child content within Action List Item. Can be either an
### Active navigational item
```html live
<ul class="ActionList" role="menu">
<li class="ActionList-item ActionList-item--navActive" role="none">
<a href="#someid" role="menuitem" aria-current="location" class="ActionList-content"
>
<span class="ActionList-item-label">Im an anchor link</span>
</a>
</li>
</ul>
<nav>
<ul class="ActionList" aria-label="Main menu description">
<li class="ActionList-item">
<a href="/" class="ActionList-content">
<span class="ActionList-item-label">Nav Item</span>
</a>
</li>
<li class="ActionList-item">
<a href="/" class="ActionList-content" aria-current="page">
<span class="ActionList-item-label">Nav Item</span>
</a>
</li>
</nav>
```
### Danger item
```html live
<ul class="ActionList" role="menu">
<li class="ActionList-item ActionList-item--danger" role="menuitem">
<ul class="ActionList">
<li class="ActionList-item ActionList-item--danger">
<span class="ActionList-content">
<span class="ActionList-item-label">Danger danger</span>
</span>
@ -425,29 +401,62 @@ Contains and places all child content within Action List Item. Can be either an
### Actions
### Leading action: single select
### Leading action: single select listbox
```html live
<ul class="ActionList" role="menu">
<li class="ActionList-item" role="menuitemradio" aria-checked="true">
<ul class="ActionList" role="listbox" aria-label="Select an option">
<li class="ActionList-item" role="option" aria-selected="true">
<span class="ActionList-content">
<span class="ActionList-item-action ActionList-item-action--leading">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" class="ActionList-item-singleSelectCheckmark">
<path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
></path>
</svg>
</span>
<span class="ActionList-item-label">Single select item</span>
<span class="ActionList-item-label">Option label</span>
</span>
</li>
<li class="ActionList-item" role="option" aria-selected="false">
<span class="ActionList-content">
<span class="ActionList-item-action ActionList-item-action--leading">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" class="ActionList-item-singleSelectCheckmark">
<path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
></path>
</span>
<span class="ActionList-item-label">Option label</span>
</span>
</li>
<li class="ActionList-item" role="option" aria-selected="false">
<span class="ActionList-content">
<span class="ActionList-item-action ActionList-item-action--leading">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" class="ActionList-item-singleSelectCheckmark">
<path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
></path>
</span>
<span class="ActionList-item-label">Option label</span>
</span>
</li>
</ul>
```
### Leading action: multi select
### Leading action: multi select listbox
```html live
<ul class="ActionList" role="menu">
<li class="ActionList-item" role="menuitemcheckbox" aria-checked="true">
<ul class="ActionList" role="listbox" aria-label="Select multiple options"
aria-multiselectable="true">
<li class="ActionList-item" role="option" aria-selected="true">
<span class="ActionList-content">
<span class="ActionList-item-action ActionList-item-action--leading">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="ActionList-item-multiSelectIcon">
<rect x="2" y="2" width="12" height="12" rx="4" class="ActionList-item-multiSelectIconRect"
></rect>
<path fill-rule="evenodd" d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z" class="ActionList-item-multiSelectCheckmark"
></path>
</svg>
</span>
<span class="ActionList-item-label">Multi select item</span>
</span>
</li>
<li class="ActionList-item" role="option" aria-selected="true">
<span class="ActionList-content">
<span class="ActionList-item-action ActionList-item-action--leading">
<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" class="ActionList-item-multiSelectIcon">
@ -466,8 +475,8 @@ Contains and places all child content within Action List Item. Can be either an
### Trailing action: collapse
```html live
<ul class="ActionList" role="menu">
<li class="ActionList-item" role="menuitem" aria-haspopup="true" aria-expanded="true">
<ul class="ActionList">
<li class="ActionList-item" aria-haspopup="true" aria-expanded="true">
<span class="ActionList-content">
<span class="ActionList-item-label">Collapsible</span>
<span class="ActionList-item-action ActionList-item-action--trailing">
@ -480,3 +489,32 @@ Contains and places all child content within Action List Item. Can be either an
</li>
</ul>
```
## Accessibility
### Semantic markup
The markup for Action List changes depending on the intended use case.
In all cases, the basic structure is as follows:
```html
<ul>
<li><span>Content with action (onclick)</span></li>
<li><a href="/">Content as link</a></li>
<li>
<ul>
<li>Nested list</li>
</ul>
</li>
</ul>
```
Pay close attention to `role` attributes throughout the documentation. The `role` attribute may change depending on the context in which Action List is used. Some common use case specs:
[Dropdown menu](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menu-button/menu-button-links.html)
[Multi/Single select dropdown menu](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menubar/menubar-2/menubar-2.html)
[Single select listbox](https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html)
Note: JS is required to make Action List keyboard accessible.

4
docs/content/getting-started/contributing.md
View File

@ -95,6 +95,10 @@ source: 'https://github.com/primer/css/tree/main/src/alerts'
A table of contents is automatically inserted at the top of every page published on [primer.style/css](https://primer.style/css).
### Navigation
For new components or doc pages, add the title and url to [nav.yml](https://github.com/primer/css/blob/main/docs/src/%40primer/gatsby-theme-doctocat/nav.yml).
### Live code
Check out Doctocat's [live code](https://primer.style/doctocat/usage/live-code) documentation for more information about creating live code examples.

62
docs/src/stories/components/ActionList/Accessibility.stories.mdx
View File

@ -6,7 +6,7 @@ import {Meta, Story, Canvas} from '@storybook/addon-docs'
An action list is a vertical list of interactive <strong>actions</strong> or <strong>options</strong>.
| | |
| Term | Context |
| :------ | :------------------------------------ |
| Actions | links `a href` or events `onclick` |
| Options | checkbox role `checked` or `selected` |
@ -31,11 +31,11 @@ In all cases, the basic structure is as follows:
Pay close attention to `role` attributes throughout the documentation, and find the use case that best suits your needs.
### Menu
### Dropdown Menu
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.1/#menu)
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menu-button/menu-button-links.html)
Note: JS is required for to provide keyboard handling along with [tab-index](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex)
The `menu` role should be reserved for dropdown menu scenarios
| Element | Role |
| :------ | :------------------------------ |
@ -50,21 +50,13 @@ Note: JS is required for to provide keyboard handling along with [tab-index](htt
<Story id="components-actionlist-patterns--menu-with-section-divider" />
</Canvas>
### Navigational menu
### Navigational list of links
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.1/#menu)
[Navigation spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/landmarks/navigation.html)
Note: JS is required for to provide keyboard handling along with [tab-index](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex)
Wrap `ActionList` in a `nav` element for site or page navigation, like a sidebar
| Element | Role |
| :------ | :--------------------------------------- |
| `nav` | no role needed |
| `ul` | `role="menu"` |
| `li` | no child link `role="menuitem"` |
| `li` | has child link `role="none"` |
| `li` | nested menu `aria-haspopup="true"` |
| `li` | nested menu `aria-expanded="true/false"` |
| `a` | `role="menuitem"` |
No roles needed
#### Example
@ -72,17 +64,15 @@ Note: JS is required for to provide keyboard handling along with [tab-index](htt
<Story id="components-actionlist-patterns--nav-with-sub-items" />
</Canvas>
### Multi select menu
### Multi select dropdown menu
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-2/menubar-2.html)
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menubar/menubar-2/menubar-2.html)
Note: JS is required for to provide keyboard handling along with [tab-index](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex)
| Element | Role |
| :------ | :-------------------------------------- |
| `ul` | `role="menu"` |
| `li` | no child link `role="menuitemcheckbox"` |
| `li` | `aria-checked="true/false"` |
| Element | Role |
| :------ | :-------------------------- |
| `ul` | `role="menu"` |
| `li` | `role="menuitemcheckbox"` |
| `li` | `aria-checked="true/false"` |
#### Example
@ -90,17 +80,15 @@ Note: JS is required for to provide keyboard handling along with [tab-index](htt
<Story id="components-actionlist-patterns--menu-multi-select" />
</Canvas>
### Single select menu
### Single select dropdown menu
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-2/menubar-2.html)
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menubar/menubar-2/menubar-2.html)
Note: JS is required for to provide keyboard handling along with [tab-index](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex)
| Element | Role |
| :------ | :----------------------------------- |
| `ul` | `role="menu"` |
| `li` | no child link `role="menuitemradio"` |
| `li` | `aria-checked="true/false"` |
| Element | Role |
| :------ | :-------------------------- |
| `ul` | `role="menu"` |
| `li` | `role="menuitemradio"` |
| `li` | `aria-checked="true/false"` |
#### Example
@ -110,9 +98,7 @@ Note: JS is required for to provide keyboard handling along with [tab-index](htt
### Multi select listbox
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox)
Note: JS is required for to provide [keyboard handling](https://www.w3.org/TR/wai-aria-practices-1.1/#listbox_kbd_interaction)
[Listbox spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html)
| Element | Role |
| :------ | :---------------------------- |
@ -129,7 +115,7 @@ Note: JS is required for to provide [keyboard handling](https://www.w3.org/TR/wa
### Single select listbox
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox)
[Listbox spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/listbox/listbox-collapsible.html)
Note: JS is required for to provide [keyboard handling](https://www.w3.org/TR/wai-aria-practices-1.1/#listbox_kbd_interaction)

12
docs/src/stories/components/ActionList/ActionList.stories.jsx
View File

@ -20,11 +20,9 @@ export default {
}
},
role: {
options: [0, 1, 2, 3, 4, 5, 6], // iterator
mapping: ['menu', 'group', 'listbox', 'menubar', 'none', 'radiogroup', 'list'], // values
options: [null, 'menu', 'group', 'listbox', 'menubar', 'none', 'radiogroup', 'list'],
control: {
type: 'select',
labels: ['menu', 'group', 'listbox', 'menubar', 'none', 'radiogroup', 'list']
type: 'inline-radio'
},
description: 'Semantic list role',
table: {
@ -69,7 +67,7 @@ export default {
},
listboxMultiSelect: {
name: 'listboxMultiSelect',
type: 'string',
type: 'boolean',
description: 'If ActionList has listbox role + multiselect children',
table: {
category: 'HTML'
@ -100,10 +98,12 @@ export const ListTemplate = ({
export const Playground = ListTemplate.bind({})
Playground.args = {
role: 'menu',
ariaLabel: 'Menu description',
subGroup: false,
showDividers: false,
listboxMultiSelect: false,
ariaLabelledBy: '',
groupId: '',
children: (
<>
<ListItemTemplate text="Action list item" />

2
docs/src/stories/components/ActionList/ActionListDivider.stories.jsx
View File

@ -15,7 +15,7 @@ export default {
options: [0, 1], // iterator
mapping: ['', 'ActionList-sectionDivider--filled'], // values
control: {
type: 'select',
type: 'inline-radio',
labels: ['subtle', 'filled']
},
table: {

169
docs/src/stories/components/ActionList/ActionListItem.stories.jsx
View File

@ -26,10 +26,10 @@ export default {
}
},
variant: {
options: [0, 1, 2], // iterator
options: [0, 1], // iterator
mapping: ['', 'ActionList-item--danger'], // values
control: {
type: 'select',
type: 'inline-radio',
labels: ['default', 'danger']
},
defaultValue: '',
@ -64,7 +64,7 @@ export default {
options: [0, 1, 2], // iterator
mapping: ['ActionList-content--visual16', 'ActionList-content--visual20', 'ActionList-content--visual24'], // values
control: {
type: 'select',
type: 'inline-radio',
labels: ['16px', '20px', '24px']
},
description: 'leading visual width',
@ -102,7 +102,7 @@ export default {
},
ariaCurrent: {
options: ['location', 'page'],
control: {type: 'select'},
control: {type: 'inline-radio'},
description: 'location for anchor links, page for global page navigation',
table: {
category: 'HTML'
@ -121,7 +121,7 @@ export default {
options: [0, 1], // iterator
mapping: ['', 'ActionList-item-descriptionWrap--inline'], // values
control: {
type: 'select',
type: 'inline-radio',
labels: ['block', 'inline']
},
description: 'block (default), inline',
@ -232,14 +232,14 @@ export const ListItemTemplate = ({
? undefined
: href
? 'none'
: 'menuitem'
: undefined
}
id={id}
aria-haspopup={collapsible ? 'true' : undefined}
aria-expanded={collapsible ? (isCollapsed ? 'false' : 'true') : undefined}
aria-checked={singleSelect || multiSelect ? (isChecked ? 'true' : 'false') : undefined}
aria-selected={listSingleSelect || listMultiSelect ? (isChecked ? 'true' : 'false') : undefined}
aria-disabled={ariaDisabled}
aria-disabled={ariaDisabled ? 'true' : undefined}
>
{href ? (
<>
@ -337,92 +337,94 @@ export const ListItemTemplate = ({
</>
) : (
<>
<span
className={clsx(
text && 'ActionList-content',
size && `${size}`,
(leadingVisual || trailingVisual) && description && 'ActionList-content--blockDescription',
leadingVisual && leadingVisualSize && `${leadingVisualSize}`
)}
>
{(leadingAction || singleSelect || multiSelect || listSingleSelect || listMultiSelect) && (
<span className="ActionList-item-action ActionList-item-action--leading">
{(singleSelect || listSingleSelect) && (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
width="16"
height="16"
className="ActionList-item-singleSelectCheckmark"
>
<path
fill-rule="evenodd"
d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
></path>
</svg>
)}
{(multiSelect || listMultiSelect) && (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
className="ActionList-item-multiSelectIcon"
>
<rect x="2" y="2" width="12" height="12" rx="4" className="ActionList-item-multiSelectIconRect" />
<path
fill-rule="evenodd"
d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
className="ActionList-item-multiSelectCheckmark"
/>
</svg>
)}
{leadingAction}
</span>
)}
{leadingVisual && (
<span
className="ActionList-item-visual ActionList-item-visual--leading"
dangerouslySetInnerHTML={{__html: leadingVisual}}
/>
)}
{description && (
<span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
<span className="ActionList-item-label">{text}</span>
<span className="ActionList-item-description">{description}</span>
</span>
)}
{!description && text && <span className="ActionList-item-label">{text}</span>}
{trailingVisual && (
<span
className="ActionList-item-visual ActionList-item-visual--trailing"
dangerouslySetInnerHTML={{__html: trailingVisual}}
/>
)}
{trailingAction ||
(collapsible && (
<span className="ActionList-item-action ActionList-item-action--trailing">
{collapsible && (
{text && (
<span
className={clsx(
text && 'ActionList-content',
size && `${size}`,
(leadingVisual || trailingVisual) && description && 'ActionList-content--blockDescription',
leadingVisual && leadingVisualSize && `${leadingVisualSize}`
)}
>
{(leadingAction || singleSelect || multiSelect || listSingleSelect || listMultiSelect) && (
<span className="ActionList-item-action ActionList-item-action--leading">
{(singleSelect || listSingleSelect) && (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
width="16"
height="16"
className="ActionList-item-collapseIcon"
className="ActionList-item-singleSelectCheckmark"
>
<path
fill-rule="evenodd"
d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"
d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
></path>
</svg>
)}
{trailingAction}
{(multiSelect || listMultiSelect) && (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
focusable="false"
className="ActionList-item-multiSelectIcon"
>
<rect x="2" y="2" width="12" height="12" rx="4" className="ActionList-item-multiSelectIconRect" />
<path
fill-rule="evenodd"
d="M4.03231 8.69862C3.84775 8.20646 4.49385 7.77554 4.95539 7.77554C5.41693 7.77554 6.80154 9.85246 6.80154 9.85246C6.80154 9.85246 10.2631 4.314 10.4938 4.08323C10.7246 3.85246 11.8785 4.08323 11.4169 5.00631C11.0081 5.82388 7.26308 11.4678 7.26308 11.4678C7.26308 11.4678 6.80154 12.1602 6.34 11.4678C5.87846 10.7755 4.21687 9.19077 4.03231 8.69862Z"
className="ActionList-item-multiSelectCheckmark"
/>
</svg>
)}
{leadingAction}
</span>
))}
</span>
)}
{leadingVisual && (
<span
className="ActionList-item-visual ActionList-item-visual--leading"
dangerouslySetInnerHTML={{__html: leadingVisual}}
/>
)}
{description && (
<span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
<span className="ActionList-item-label">{text}</span>
<span className="ActionList-item-description">{description}</span>
</span>
)}
{!description && text && <span className="ActionList-item-label">{text}</span>}
{trailingVisual && (
<span
className="ActionList-item-visual ActionList-item-visual--trailing"
dangerouslySetInnerHTML={{__html: trailingVisual}}
/>
)}
{trailingAction ||
(collapsible && (
<span className="ActionList-item-action ActionList-item-action--trailing">
{collapsible && (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
width="16"
height="16"
className="ActionList-item-collapseIcon"
>
<path
fill-rule="evenodd"
d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"
></path>
</svg>
)}
{trailingAction}
</span>
))}
</span>
)}
{children}
</>
)}
@ -433,8 +435,11 @@ export const ListItemTemplate = ({
export const Playground = ListItemTemplate.bind({})
Playground.decorators = [
Story => (
<ul className="ActionList" role="menu">
<ul className="ActionList">
<Story />
</ul>
)
]
Playground.args = {
id: null
}

161
docs/src/stories/components/ActionList/ActionListPatterns.stories.jsx
View File

@ -16,32 +16,32 @@ export default {
}
export const NavWithSubItems = ListTemplate.bind({})
NavWithSubItems.storyName = '[Nav] Nested collapsible menu'
NavWithSubItems.storyName = '[Nav] Links + nested collapsible group'
NavWithSubItems.args = {
...ListTemplate.args,
...ListItemTemplate.args,
role: 'menu',
role: undefined,
ariaLabel: 'Main menu description',
showDividers: false,
children: (
<>
<ListItemTemplate text="Nav Item" href="/" />
<ListItemTemplate text="Nav Item" href="/" />
<ListItemTemplate text="Nav Item" href="/" />
<ListItemTemplate text="Nav Item" href="/" listSemantic />
<ListItemTemplate text="Nav Item" href="/" listSemantic />
<ListItemTemplate text="Nav Item" href="/" listSemantic />
<ListItemTemplate
listSemantic
collapsible
containsSubItem
text="Nav Item"
children={
<ListTemplate
role="menu"
subGroup
ariaLabel="Sub nav descrioption"
ariaLabel="Sub nav description"
children={
<>
<ListItemTemplate subItem text="Sub Nav Item" href="/" />
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" />
<ListItemTemplate subItem text="Sub Nav Item" href="/" />
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" listSemantic />
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
</>
}
/>
@ -59,34 +59,38 @@ NavWithSubItems.decorators = [
]
export const NavWithSubItemsLeadingVisual16px = ListTemplate.bind({})
NavWithSubItemsLeadingVisual16px.storyName = '[Nav] Nested collapsible menu leadingVisual 16px'
NavWithSubItemsLeadingVisual16px.storyName = '[Nav] Links + nested collapsible group leadingVisual 16px'
NavWithSubItemsLeadingVisual16px.args = {
...ListTemplate.args,
...ListItemTemplate.args,
ariaLabel: 'Main menu description',
role: 'menu',
role: undefined,
showDividers: false,
children: (
<>
<ListItemTemplate
listSemantic
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual16"
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
/>
<ListItemTemplate
listSemantic
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual16"
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
/>
<ListItemTemplate
listSemantic
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual16"
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
/>
<ListItemTemplate
listSemantic
containsSubItem
collapsible
text="Nav Item"
@ -99,9 +103,10 @@ NavWithSubItemsLeadingVisual16px.args = {
ariaLabel="Sub nav descrioption"
children={
<>
<ListItemTemplate subItem text="Sub Nav Item" href="/" />
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" />
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" listSemantic />
<ListItemTemplate
listSemantic
subItem
text="Sub Nav Item"
href="/"
@ -114,12 +119,14 @@ NavWithSubItemsLeadingVisual16px.args = {
}
/>
<ListItemTemplate
listSemantic
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual16"
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8.5.75a.75.75 0 00-1.5 0v5.19L4.391 3.33a.75.75 0 10-1.06 1.061L5.939 7H.75a.75.75 0 000 1.5h5.19l-2.61 2.609a.75.75 0 101.061 1.06L7 9.561v5.189a.75.75 0 001.5 0V9.56l2.609 2.61a.75.75 0 101.06-1.061L9.561 8.5h5.189a.75.75 0 000-1.5H9.56l2.61-2.609a.75.75 0 00-1.061-1.06L8.5 5.939V.75z"></path></svg>`}
/>
<ListItemTemplate
listSemantic
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual16"
@ -137,34 +144,38 @@ NavWithSubItemsLeadingVisual16px.decorators = [
]
export const NavWithSubItemsLeadingVisual20px = ListTemplate.bind({})
NavWithSubItemsLeadingVisual20px.storyName = '[Nav] Nested collapsible menu leadingVisual 20px'
NavWithSubItemsLeadingVisual20px.storyName = '[Nav] Links + nested collapsible group leadingVisual 20px'
NavWithSubItemsLeadingVisual20px.args = {
...ListTemplate.args,
...ListItemTemplate.args,
ariaLabel: 'Main menu description',
role: 'menu',
role: undefined,
showDividers: false,
children: (
<>
<ListItemTemplate
listSemantic
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual20"
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
/>
<ListItemTemplate
listSemantic
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual20"
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
/>
<ListItemTemplate
listSemantic
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual20"
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
/>
<ListItemTemplate
listSemantic
containsSubItem
text="Nav Item"
href="/"
@ -176,9 +187,10 @@ NavWithSubItemsLeadingVisual20px.args = {
ariaLabel="Sub nav descrioption"
children={
<>
<ListItemTemplate subItem text="Sub Nav Item" href="/" />
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" />
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" listSemantic />
<ListItemTemplate
listSemantic
subItem
text="Nav Item"
href="/"
@ -191,12 +203,14 @@ NavWithSubItemsLeadingVisual20px.args = {
}
/>
<ListItemTemplate
listSemantic
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual20"
leadingVisual={`<img class="avatar avatar-small" alt="jonrohan" src="https://github.com/jonrohan.png?v=3&s=40" width="20" height="20" style="border-radius: 50%" />`}
/>
<ListItemTemplate
listSemantic
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual20"
@ -214,34 +228,38 @@ NavWithSubItemsLeadingVisual20px.decorators = [
]
export const NavWithSubItemsLeadingVisual24px = ListTemplate.bind({})
NavWithSubItemsLeadingVisual24px.storyName = '[Nav] Nested collapsible menu leadingVisual 24px'
NavWithSubItemsLeadingVisual24px.storyName = '[Nav] Links + nested collapsible group leadingVisual 24px'
NavWithSubItemsLeadingVisual24px.args = {
...ListTemplate.args,
...ListItemTemplate.args,
ariaLabel: 'Main menu description',
role: 'menu',
role: undefined,
showDividers: false,
children: (
<>
<ListItemTemplate
listSemantic
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual24"
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
/>
<ListItemTemplate
listSemantic
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual24"
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
/>
<ListItemTemplate
listSemantic
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual24"
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
/>
<ListItemTemplate
listSemantic
containsSubItem
text="Nav Item"
href="/"
@ -253,9 +271,10 @@ NavWithSubItemsLeadingVisual24px.args = {
ariaLabel="Sub nav descrioption"
children={
<>
<ListItemTemplate subItem text="Sub Nav Item" href="/" />
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" />
<ListItemTemplate subItem text="Sub Nav Item" href="/" listSemantic />
<ListItemTemplate subItem text="Sub Nav Item" href="/" ariaCurrent="page" listSemantic />
<ListItemTemplate
listSemantic
subItem
text="Nav Item"
href="/"
@ -268,12 +287,14 @@ NavWithSubItemsLeadingVisual24px.args = {
}
/>
<ListItemTemplate
listSemantic
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual24"
leadingVisual={`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12.5 1.25a.75.75 0 00-1.5 0v8.69L6.447 5.385a.75.75 0 10-1.061 1.06L9.94 11H1.25a.75.75 0 000 1.5h8.69l-4.554 4.553a.75.75 0 001.06 1.061L11 13.561v8.689a.75.75 0 001.5 0v-8.69l4.553 4.554a.75.75 0 001.061-1.06L13.561 12.5h8.689a.75.75 0 000-1.5h-8.69l4.554-4.553a.75.75 0 10-1.06-1.061L12.5 9.939V1.25z"></path></svg>`}
/>
<ListItemTemplate
listSemantic
text="Nav Item"
href="/"
leadingVisualSize="ActionList-content--visual24"
@ -291,7 +312,7 @@ NavWithSubItemsLeadingVisual24px.decorators = [
]
export const MenuWithDivider = ListTemplate.bind({})
MenuWithDivider.storyName = '[Menu] Divider'
MenuWithDivider.storyName = '[DropdownMenu] Divider'
MenuWithDivider.args = {
...ListTemplate.args,
...ListItemTemplate.args,
@ -334,9 +355,26 @@ MenuWithDivider.args = {
</>
)
}
MenuWithDivider.decorators = [
Story => (
<div>
<details class="dropdown details-reset details-overlay d-inline-block" open="true">
<summary class="btn" aria-haspopup="true">
Dropdown
<div class="dropdown-caret"></div>
</summary>
<div class="SelectMenu">
<div class="SelectMenu-modal">
<Story />
</div>
</div>
</details>
</div>
)
]
export const MenuWithSectionDivider = ListTemplate.bind({})
MenuWithSectionDivider.storyName = '[Menu] Section divider'
MenuWithSectionDivider.storyName = '[DropdownMenu] Section divider'
MenuWithSectionDivider.args = {
...ListTemplate.args,
...ListItemTemplate.args,
@ -358,7 +396,7 @@ MenuWithSectionDivider.args = {
children={
<>
<ListItemTemplate text="Nav Item" href="/" />
<ListItemTemplate text="Nav Item" href="/" ariaCurrent="page" />
<ListItemTemplate text="Nav Item" href="/" />
<ListItemTemplate text="Nav Item" href="/" variant="ActionList-item--danger" />
</>
}
@ -368,9 +406,26 @@ MenuWithSectionDivider.args = {
</>
)
}
MenuWithSectionDivider.decorators = [
Story => (
<div>
<details class="dropdown details-reset details-overlay d-inline-block" open="true">
<summary class="btn" aria-haspopup="true">
Dropdown
<div class="dropdown-caret"></div>
</summary>
<div class="SelectMenu">
<div class="SelectMenu-modal">
<Story />
</div>
</div>
</details>
</div>
)
]
export const MenuSingleSelect = ListTemplate.bind({})
MenuSingleSelect.storyName = '[Menu] Single select'
MenuSingleSelect.storyName = '[DropdownMenu] Single select'
MenuSingleSelect.args = {
...ListTemplate.args,
...ListItemTemplate.args,
@ -387,9 +442,26 @@ MenuSingleSelect.args = {
</>
)
}
MenuSingleSelect.decorators = [
Story => (
<div>
<details class="dropdown details-reset details-overlay d-inline-block" open="true">
<summary class="btn" aria-haspopup="true">
Dropdown
<div class="dropdown-caret"></div>
</summary>
<div class="SelectMenu">
<div class="SelectMenu-modal">
<Story />
</div>
</div>
</details>
</div>
)
]
export const MenuMultiSelect = ListTemplate.bind({})
MenuMultiSelect.storyName = '[Menu] Multi select'
MenuMultiSelect.storyName = '[DropdownMenu] Multi select'
MenuMultiSelect.args = {
...ListTemplate.args,
...ListItemTemplate.args,
@ -406,6 +478,23 @@ MenuMultiSelect.args = {
</>
)
}
MenuMultiSelect.decorators = [
Story => (
<div>
<details class="dropdown details-reset details-overlay d-inline-block" open="true">
<summary class="btn" aria-haspopup="true">
Dropdown
<div class="dropdown-caret"></div>
</summary>
<div class="SelectMenu">
<div class="SelectMenu-modal">
<Story />
</div>
</div>
</details>
</div>
)
]
export const ListSingleSelect = ListTemplate.bind({})
ListSingleSelect.storyName = '[Listbox] Single select'
@ -488,16 +577,17 @@ List.args = {
export const NavWithSubItemsLeadingVisual16pxSubSections = ListTemplate.bind({})
NavWithSubItemsLeadingVisual16pxSubSections.storyName =
'[Nav] Nested collapsible menu leadingVisual 16px + sub sections'
'[Nav] Links + nested collapsible group leadingVisual 16px + sub sections'
NavWithSubItemsLeadingVisual16pxSubSections.args = {
...ListTemplate.args,
...ListItemTemplate.args,
ariaLabel: 'Main menu description',
role: 'menu',
role: undefined,
showDividers: false,
children: (
<>
<ListItemTemplate
listSemantic
text="General"
href="/"
leadingVisualSize="ActionList-content--visual16"
@ -505,16 +595,17 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
/>
<DividerTemplate title="Access" id="group-id-1" />
<ListItemTemplate
listSemantic
containsSubItem
children={
<ListTemplate
subGroup
role="menu"
ariaLabelledBy="group-id-1"
ariaLabel="Sub nav descrioption"
children={
<>
<ListItemTemplate
listSemantic
text="Collaborators"
href="/"
leadingVisualSize="ActionList-content--visual16"
@ -523,6 +614,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
</svg>`}
/>
<ListItemTemplate
listSemantic
containsSubItem
text="Moderation options"
// href="/"
@ -534,12 +626,12 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
children={
<ListTemplate
containsSubItem
role="menu"
subGroup
ariaLabel="Sub nav descrioption"
children={
<>
<ListItemTemplate
listSemantic
subItem
text="Interaction limits"
href="/"
@ -556,6 +648,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
/>
<ListItemTemplate
text="Repository roles"
listSemantic
href="/"
leadingVisualSize="ActionList-content--visual16"
leadingVisual={`<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-person">
@ -569,16 +662,17 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
/>
<DividerTemplate title="Code & operations" id="group-id-2" />
<ListItemTemplate
listSemantic
containsSubItem
children={
<ListTemplate
subGroup
role="menu"
ariaLabel="Sub nav descrioption"
ariaLabelledBy="group-id-2"
children={
<>
<ListItemTemplate
listSemantic
text="Webhooks"
href="/"
leadingVisualSize="ActionList-content--visual16"
@ -587,6 +681,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
</svg>`}
/>
<ListItemTemplate
listSemantic
text="Environments"
href="/"
leadingVisualSize="ActionList-content--visual16"
@ -595,6 +690,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
</svg>`}
/>
<ListItemTemplate
listSemantic
text="Pages"
href="/"
leadingVisualSize="ActionList-content--visual16"
@ -603,6 +699,7 @@ NavWithSubItemsLeadingVisual16pxSubSections.args = {
</svg>`}
/>
<ListItemTemplate
listSemantic
text="Unpublish GitHub Pages"
href="/"
leadingVisualSize="ActionList-content--visual16"