mirror of
https://github.com/primer/css.git
synced 2024-12-23 22:24:11 +03:00
Doc updates: develop + action list (#1743)
* 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
GitHub
parent
74724ce7c7
commit
c65be7f0c8
15
DEVELOP.md
15
DEVELOP.md
@ -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.
|
||||
|
||||
|
||||
@ -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>
|
||||
<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>
|
||||
</ul>
|
||||
<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.
|
||||
|
||||
@ -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.
|
||||
|
||||
@ -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,16 +64,14 @@ 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)
|
||||
|
||||
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)
|
||||
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menubar/menubar-2/menubar-2.html)
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :-------------------------------------- |
|
||||
| :------ | :-------------------------- |
|
||||
| `ul` | `role="menu"` |
|
||||
| `li` | no child link `role="menuitemcheckbox"` |
|
||||
| `li` | `role="menuitemcheckbox"` |
|
||||
| `li` | `aria-checked="true/false"` |
|
||||
|
||||
#### Example
|
||||
@ -90,16 +80,14 @@ 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)
|
||||
|
||||
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)
|
||||
[Menu spec](https://www.w3.org/TR/wai-aria-practices-1.2/examples/menubar/menubar-2/menubar-2.html)
|
||||
|
||||
| Element | Role |
|
||||
| :------ | :----------------------------------- |
|
||||
| :------ | :-------------------------- |
|
||||
| `ul` | `role="menu"` |
|
||||
| `li` | no child link `role="menuitemradio"` |
|
||||
| `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)
|
||||
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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: {
|
||||
|
||||
@ -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,6 +337,7 @@ export const ListItemTemplate = ({
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{text && (
|
||||
<span
|
||||
className={clsx(
|
||||
text && 'ActionList-content',
|
||||
@ -423,6 +424,7 @@ export const ListItemTemplate = ({
|
||||
</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
|
||||
}
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user