diff --git a/.changeset/quick-wasps-kick.md b/.changeset/quick-wasps-kick.md new file mode 100644 index 0000000000..c7de2f8fc6 --- /dev/null +++ b/.changeset/quick-wasps-kick.md @@ -0,0 +1,5 @@ +--- +"@primer/css": major +--- + +Remove `ActionList` diff --git a/docs/content/components/action-list.md b/docs/content/components/action-list.md deleted file mode 100644 index 1296346e2f..0000000000 --- a/docs/content/components/action-list.md +++ /dev/null @@ -1,445 +0,0 @@ ---- -title: Action List -path: components/action-list -status: alpha -source: 'https://github.com/primer/css/tree/main/src/actionlist' -bundle: action-list -storybook: https://primer.style/css/storybook/?path=/story/components-actionlist-actionlistitem--playground ---- - -Reference the [Action list interface guidelines](https://primer.style/design/components/action-list) for details on where and how to use Action list. - -## Action list - -Action list is a `ul` list designed to contain list items. - -### Variants - -| Class | Description | -| :- | :- | -| `ActionList` | Default styles | -| `ActionList--divided` | Show dividers between items | -| `ActionList--subGroup` | If Action List is nested as a sub-list | -| `ActionList--tree` | Tree-view specific styles | - -#### Default - -```html live - -``` - -#### Item dividers - -```html live - -``` - -#### Nested sub list - -```html live - -``` - - -## Action list divider - -List item `li` for separating groups of content - -### Variants - -| Class | Description | -| :- | :- | -| `ActionList-sectionDivider` | Default subtle divider line | -| `ActionList-sectionDivider--filled` | Thicker divider line | -| `ActionList-item-description` | Optional section header secondary text | - -#### Default - -```html live - -``` - -#### Filled - -```html live - -``` -### Divider with label text - -When using a section label for a group, give the `h3` an id to be referenced by the group `ul` -#### Filled with section label - -```html live - -``` - -#### Default with section label - -```html live - -``` - -#### Default with section label + description - -```html live - -``` - -## Action list item - -List item `li` handling semantics, state and interactions - -### Variants - -| Class | Description | -| :- | :- | -| `ActionList-item` | Default styles | -| `ActionList-item--hasSubItem` | Item contains a sub item `ul` | -| `ActionList-item--subItem` | Indent + small font size for sub item `li` (optional) | -| `ActionList-item--navActive` | Nav item and `aria-current` | -| `ActionList-item--danger` | Item is destructive | - - -## Action list item content - -Contains and places all child elements within action list item. Can be either an `a href` tag for list link items, or a `button` for items that provide an event on Action List Item `li`. - -### Variants - -| Class | Description | -| :- | :- | -| `ActionList-content` | Defines the overall layout grid | -| `ActionList-content--sizeMedium` | 40px row height | -| `ActionList-content--sizeLarge` | 48px row height, default for touch devices | -| `ActionList-content--visual16` | Creates left padding for sub list if leading visual exists | -| `ActionList-content--visual20` | Creates left padding for sub list if leading visual exists | -| `ActionList-content--visual24` | Creates left padding for sub list if leading visual exists | -| `ActionList-content--hasActiveSubItem` | Handles active nav state if child item is active | -| `ActionList-item-action` | min-height + default styles for visual slot | -| `ActionList-item-action--leading` | Slot: multi/single select | -| `ActionList-item-action--trailing` | Slot: Button, collapse icon | -| `ActionList-item-visual` | min-height + default styles for visual slot | -| `ActionList-item-visual--leading` | Slot: SVG or graphic like Avatar | -| `ActionList-item-visual--trailing` | Slot: SVG or text | -| `ActionList-item-label` | Item text | -| `ActionList-item-descriptionWrap` | Wraps label/description | -| `ActionList-item-descriptionWrap--inline` | Display description inline with label | -| `ActionList-item-description` | Item description (block by default) | - -### Basic text only item - -```html live - -``` - -### Size (all options) - -```html live - - -``` - -### Visuals (all options- leading & trailing) - -```html live - -``` - -### Trailing visual as text - -```html live - -``` - -### Inline description - -```html live - -``` - -### Active navigational item - -```html live - -``` - -### Danger item - -```html live - -``` - -### Actions - -### Leading action: single select listbox - -```html live - -``` - -### Leading action: multi select listbox - -```html live - -``` - -### Trailing action: collapse - -```html live - -``` diff --git a/docs/src/stories/components/ActionList/ActionList.stories.jsx b/docs/src/stories/components/ActionList/ActionList.stories.jsx deleted file mode 100644 index 2dbad09abd..0000000000 --- a/docs/src/stories/components/ActionList/ActionList.stories.jsx +++ /dev/null @@ -1,77 +0,0 @@ -import React from 'react' -import {ListItemTemplate} from '../../ui-patterns/ActionList/ActionListItem.stories' -import {ListTemplate} from '../../ui-patterns/ActionList/ActionList.stories.jsx' - -export default { - title: 'Components/ActionList/ActionList', - excludeStories: ['ActionListTemplate'], - argTypes: { - showDividers: { - control: {type: 'boolean'}, - description: 'Show dividers between items', - table: { - category: 'CSS' - } - }, - role: { - options: ['list'], - control: { - type: 'inline-radio' - }, - description: 'Semantic list role', - table: { - category: 'HTML' - } - }, - ariaLabel: { - name: 'ariaLabel', - type: 'string', - description: 'If no list ActionListDivider is provided, include an aria-label', - table: { - category: 'HTML' - } - }, - ariaLabelledBy: { - name: 'ariaLabelledBy', - type: 'string', - description: 'Reference ID of ActionListDivider', - table: { - category: 'HTML' - } - }, - listPadding: { - options: [0, 1], // iterator - mapping: [null, 'ActionList--full'], // values - control: { - type: 'inline-radio', - labels: ['inset', 'full-bleed'] - }, - description: 'ActionList includes 8px padding by default, full-bleed removes all padding', - table: { - category: 'CSS' - } - }, - children: { - table: { - disable: true - } - } - } -} - -export const ActionListTemplate = ListTemplate.bind({}) - -export const Playground = ActionListTemplate.bind({}) -Playground.args = { - showDividers: false, - listPadding: 0, - role: 'list', - ariaLabel: '', - ariaLabelledBy: '', - children: ( - <> - - - - ) -} diff --git a/docs/src/stories/components/ActionList/ActionListDivider.stories.jsx b/docs/src/stories/components/ActionList/ActionListDivider.stories.jsx deleted file mode 100644 index eab957deaf..0000000000 --- a/docs/src/stories/components/ActionList/ActionListDivider.stories.jsx +++ /dev/null @@ -1,65 +0,0 @@ -import React from 'react' -import clsx from 'clsx' -import {ListTemplate} from '../../ui-patterns/ActionList/ActionList.stories.jsx' -import {DividerTemplate} from '../../ui-patterns/ActionList/ActionListDivider.stories.jsx' - -export default { - title: 'Components/ActionList/ActionListDivider', - excludeStories: ['ActionDividerTemplate'], - argTypes: { - variant: { - options: [0, 1], // iterator - mapping: ['', 'ActionList-sectionDivider--filled'], // values - control: { - type: 'inline-radio', - labels: ['subtle', 'filled'] - }, - table: { - category: 'CSS' - } - }, - title: { - defaultValue: '', - type: 'string', - name: 'title', - description: 'string', - table: { - category: 'HTML' - } - }, - description: { - defaultValue: '', - type: 'string', - name: 'description', - description: 'string', - table: { - category: 'HTML' - } - }, - id: { - defaultValue: '', - type: 'string', - name: 'id', - description: 'Provide label for NavigationList