diff --git a/.changeset/modern-coins-destroy.md b/.changeset/modern-coins-destroy.md deleted file mode 100644 index 6e9e045723f..00000000000 --- a/.changeset/modern-coins-destroy.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -"@primer/react": major ---- - -Update PRC ActionList implementation to have similar semantics to PVC. -* Removes `ActionList.Group`. -* Adds `ActionList.Heading` to be used for labelling children in an `ActionList`. -* Adds `heading` slot to `ActionList` for adding headings that label internal lists correctly. - -ActionList.Groups inside an ActionList generated inaccessible markup. Previous usage: -``` - - - Create - Read - Update - Delete - - - ... - - -``` - -Instead, use `ActionList`s and stack them as needed. -``` -
- - - Create - Read - Update - Delete - - - ... - -
-``` diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png index e254d01f8ec..ca2a1de0d66 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png index 98ebae34e1e..985067256bd 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png index 9bc8f5fdf00..490bd7677af 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png index c9bf7491e66..ca2a1de0d66 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png index e254d01f8ec..ca2a1de0d66 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png index 517576b742f..4a4d40b930e 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png index 14d4cd19201..f180036cd16 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png index 04de60b7160..4a4d40b930e 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png index 517576b742f..4a4d40b930e 100644 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-colorblind-linux.png deleted file mode 100644 index 8c9edc27878..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-dimmed-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-dimmed-linux.png deleted file mode 100644 index a0987d81cb7..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-dimmed-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-high-contrast-linux.png deleted file mode 100644 index 72cc4662a6d..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-linux.png deleted file mode 100644 index 0a8f020a796..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-tritanopia-linux.png deleted file mode 100644 index d66333e9ef0..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-tritanopia-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-colorblind-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-colorblind-linux.png deleted file mode 100644 index 35957d68122..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-high-contrast-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-high-contrast-linux.png deleted file mode 100644 index e61e83ab4e8..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-linux.png deleted file mode 100644 index 9863ba1450a..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-tritanopia-linux.png b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-tritanopia-linux.png deleted file mode 100644 index fd380ac2255..00000000000 Binary files a/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-tritanopia-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png index 80ae6d7ec3b..014d7bfd33e 100644 Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-dimmed-Overflow-interaction-vrt-3-linux.png differ diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png index 3943dfd024e..8493a061de2 100644 Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-high-contrast-Overflow-interaction-vrt-3-linux.png differ diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png index c0680e0f8ad..efad31b0b44 100644 Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-dark-tritanopia-Overflow-interaction-vrt-3-linux.png differ diff --git a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png index 34898f867d0..e7cd788f147 100644 Binary files a/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png and b/.playwright/snapshots/components/UnderlineNav.test.ts-snapshots/UnderlineNav-UnderlineNav-Interactions-light-tritanopia-Overflow-interaction-vrt-3-linux.png differ diff --git a/docs/content/ActionList.mdx b/docs/content/ActionList.mdx index 724f3cb2c31..e4518d0d151 100644 --- a/docs/content/ActionList.mdx +++ b/docs/content/ActionList.mdx @@ -170,7 +170,7 @@ When you want to add links to the List instead of actions, use `ActionList.LinkI ``` -### With headings +### With groups ```javascript live noinline const SelectFields = () => { @@ -196,30 +196,29 @@ const SelectFields = () => { } return ( - <> - - + + {visibleOptions.map(option => ( toggle(option.text)}> {option.text} ))} - - + - {hiddenOptions.map((option, index) => ( toggle(option.text)}> {option.text} ))} {hiddenOptions.length === 0 && No hidden fields} - - + + ) } diff --git a/docs/content/ActionMenu.mdx b/docs/content/ActionMenu.mdx index 7cb42fb2caf..ac5b4baa651 100644 --- a/docs/content/ActionMenu.mdx +++ b/docs/content/ActionMenu.mdx @@ -110,7 +110,7 @@ You can choose to have a different _anchor_ for the Menu depending on the applic ``` -### Divided into sections +### With Groups ```jsx live @@ -118,54 +118,57 @@ You can choose to have a different _anchor_ for the Menu depending on the applic - - - - - - repo:github/memex,github/github - - - - - - - - - Table - - Information-dense table optimized for operations across teams - - - - - - - Board - Kanban-style board focused on visual states - - - - - - - - Save sort and filters to current view - - - - - - Save sort and filters to new view - - - - - - - - View settings - + + + + + + repo:github/memex,github/github + + + + + + + + + Table + + Information-dense table optimized for operations across teams + + + + + + + Board + Kanban-style board focused on visual states + + + + + + + + + Save sort and filters to current view + + + + + + Save sort and filters to new view + + + + + + + + + View settings + + diff --git a/e2e/components/ActionMenu.test.ts b/e2e/components/ActionMenu.test.ts index 9ffee2dae51..dddbaee08f5 100644 --- a/e2e/components/ActionMenu.test.ts +++ b/e2e/components/ActionMenu.test.ts @@ -15,7 +15,7 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Default.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`ActionMenu.Default.${theme}.png`) }) test('axe @aat', async ({page}) => { @@ -43,7 +43,9 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Links And Actions.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ActionMenu.Links And Actions.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { @@ -71,7 +73,9 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Multi Select.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ActionMenu.Multi Select.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { @@ -99,7 +103,9 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Single Select.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ActionMenu.Single Select.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { @@ -127,7 +133,9 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Controlled Menu.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ActionMenu.Controlled Menu.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { @@ -155,7 +163,9 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Custom Anchor.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ActionMenu.Custom Anchor.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { @@ -183,7 +193,9 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Custom Overlay Props.${theme}.png`) + expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( + `ActionMenu.Custom Overlay Props.${theme}.png`, + ) }) test('axe @aat', async ({page}) => { @@ -223,37 +235,13 @@ test.describe('ActionMenu', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - - test.describe('Multiple Sections', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-actionmenu-examples--multiple-sections', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `ActionMenu.Multiple Sections.${theme}.png`, - ) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-actionmenu-examples--multiple-sections', - globals: { - colorScheme: theme, + await expect(page).toHaveNoViolations({ + rules: { + 'aria-required-children': { + enabled: false, + }, }, }) - await expect(page).toHaveNoViolations() }) }) } diff --git a/generated/components.json b/generated/components.json index 9cfa427c3d3..aaed0eb03af 100644 --- a/generated/components.json +++ b/generated/components.json @@ -108,7 +108,7 @@ "props": [ { "name": "children", - "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Divider[]", + "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]", "defaultValue": "", "required": true, "description": "" @@ -285,34 +285,48 @@ ] }, { - "name": "ActionList.Heading", + "name": "ActionList.Group", "props": [ { - "name": "variant", - "type": "'subtle' | 'filled'", - "defaultValue": "subtle", + "name": "children", + "type": "ActionList.Item[] | ActionList.LinkItem[]", + "defaultValue": "", + "required": true, "description": "" }, { "name": "title", "type": "string", "defaultValue": "", - "required": true, - "description": "" + "description": "Title of the group." }, { - "name": "subtitle", + "name": "auxiliaryText", "type": "string", "defaultValue": "", - "required": false, - "description": "" + "description": "Secondary text that provides additional information about the group." }, { - "name": "headingLevel", - "type": "'1' | '2' | '3' | '4' | '5' | '6'", - "defaultValue": "3", - "required": false, - "description": "" + "name": "variant", + "type": "'filled' | 'subtle'", + "defaultValue": "'subtle'", + "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text." + }, + { + "name": "selectionVariant", + "type": "'single' | 'multiple' | false", + "defaultValue": "", + "description": "Set `selectionVariant` at the group level." + }, + { + "name": "role", + "type": "AriaRole", + "defaultValue": "", + "description": "ARIA role describing the function of the list inside the group. `listbox` and `menu` are a common values." + }, + { + "name": "sx", + "type": "SystemStyleObject" } ] } diff --git a/src/ActionList/ActionList.docs.json b/src/ActionList/ActionList.docs.json index d74f3a0290a..51876522efb 100644 --- a/src/ActionList/ActionList.docs.json +++ b/src/ActionList/ActionList.docs.json @@ -7,7 +7,7 @@ "props": [ { "name": "children", - "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Divider[]", + "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]", "defaultValue": "", "required": true, "description": "" @@ -184,36 +184,50 @@ ] }, { - "name": "ActionList.Heading", + "name": "ActionList.Group", "props": [ { - "name": "variant", - "type": "'subtle' | 'filled'", - "defaultValue": "subtle", + "name": "children", + "type": "ActionList.Item[] | ActionList.LinkItem[]", + "defaultValue": "", + "required": true, "description": "" }, { "name": "title", "type": "string", "defaultValue": "", - "required": true, - "description": "" + "description": "Title of the group." }, { - "name": "subtitle", + "name": "auxiliaryText", "type": "string", "defaultValue": "", - "required": false, - "description": "" + "description": "Secondary text that provides additional information about the group." }, { - "name": "headingLevel", - "type": "'1' | '2' | '3' | '4' | '5' | '6'", - "defaultValue": "3", - "required": false, - "description": "" + "name": "variant", + "type": "'filled' | 'subtle'", + "defaultValue": "'subtle'", + "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text." + }, + { + "name": "selectionVariant", + "type": "'single' | 'multiple' | false", + "defaultValue": "", + "description": "Set `selectionVariant` at the group level." + }, + { + "name": "role", + "type": "AriaRole", + "defaultValue": "", + "description": "ARIA role describing the function of the list inside the group. `listbox` and `menu` are a common values." + }, + { + "name": "sx", + "type": "SystemStyleObject" } ] } ] -} +} \ No newline at end of file diff --git a/src/ActionList/ActionList.examples.stories.tsx b/src/ActionList/ActionList.examples.stories.tsx index 654e4dcf5ee..ef5c79a08aa 100644 --- a/src/ActionList/ActionList.examples.stories.tsx +++ b/src/ActionList/ActionList.examples.stories.tsx @@ -132,25 +132,24 @@ export function MixedSelection(): JSX.Element {

List with mixed selection

- In this list, there is a ActionList with single selection for picking one option, followed by another ActionList - with a single Item that is an action. This pattern appears inside a menu for selection view options in Memex. + In this list, there is a ActionList.Group with single selection for picking one option, followed by a Item that + is an action. This pattern appears inside a menu for selection view options in Memex

- - - {options.map((option, index) => ( - setSelectedIndex(index)} - role="option" - > - {option.icon} - {option.text} - - ))} - + + {options.map((option, index) => ( + setSelectedIndex(index)} + role="option" + > + {option.icon} + {option.text} + + ))} + {typeof selectedIndex === 'number' && ( <> @@ -249,31 +248,37 @@ export function MemexSortable(): JSX.Element { // @ts-ignore react-dnd needs to be updated to support React 18 - - {visibleOptions.map(option => ( - toggle(option.text)} - reorder={reorder} - /> - ))} - - - - {hiddenOptions.map((option, index) => ( - toggle(option.text)} - > - {option.icon} - {option.text} - - ))} - {hiddenOptions.length === 0 && No hidden fields} + + {visibleOptions.map(option => ( + toggle(option.text)} + reorder={reorder} + /> + ))} + + + {hiddenOptions.map((option, index) => ( + toggle(option.text)} + > + {option.icon} + {option.text} + + ))} + {hiddenOptions.length === 0 && No hidden fields} + ) diff --git a/src/ActionList/ActionList.features.stories.tsx b/src/ActionList/ActionList.features.stories.tsx index 3637f6760a0..e927f5e9706 100644 --- a/src/ActionList/ActionList.features.stories.tsx +++ b/src/ActionList/ActionList.features.stories.tsx @@ -3,6 +3,7 @@ import {Meta} from '@storybook/react' import {ActionList} from '.' import {Item} from './Item' import {LinkItem} from './LinkItem' +import {Group} from './Group' import {Divider} from './Divider' import {Description} from './Description' import Avatar from '../Avatar' @@ -27,7 +28,7 @@ import { export default { title: 'Components/ActionList/Features', component: ActionList, - subcomponents: {Item, LinkItem, Divider, Description}, + subcomponents: {Item, LinkItem, Group, Divider, Description}, } as Meta export const SimpleList = () => ( @@ -427,22 +428,23 @@ export const GroupWithSubtleTitle = () => { return ( - - {users.slice(2).map(user => ( - assignee.login === user.login))} - aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))} - onSelect={() => toggleAssignee(user)} - > - - - - {user.login} - {user.name} - - ))} + + {users.slice(2).map(user => ( + assignee.login === user.login))} + aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))} + onSelect={() => toggleAssignee(user)} + > + + + + {user.login} + {user.name} + + ))} + ) } @@ -459,22 +461,23 @@ export const GroupWithFilledTitle = () => { return ( - - {users.slice(2).map(user => ( - assignee.login === user.login))} - aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))} - onSelect={() => toggleAssignee(user)} - > - - - - {user.login} - {user.name} - - ))} + + {users.slice(2).map(user => ( + assignee.login === user.login))} + aria-checked={Boolean(assignees.find(assignee => assignee.login === user.login))} + onSelect={() => toggleAssignee(user)} + > + + + + {user.login} + {user.name} + + ))} + ) } diff --git a/src/ActionList/ActionList.stories.tsx b/src/ActionList/ActionList.stories.tsx index 982dc3c2b71..de6f66ae6f5 100644 --- a/src/ActionList/ActionList.stories.tsx +++ b/src/ActionList/ActionList.stories.tsx @@ -1,9 +1,9 @@ import React from 'react' import {Story, Meta} from '@storybook/react' -import {ActionList, ActionListProps} from '.' +import {ActionList, ActionListProps, ActionListGroupProps} from '.' import {Item} from './Item' import {LinkItem} from './LinkItem' -import {Heading, ActionListHeadingProps} from './Heading' +import {Group} from './Group' import {Divider} from './Divider' import {Description} from './Description' import {TypographyIcon, VersionsIcon, SearchIcon, ArrowRightIcon, ArrowLeftIcon} from '@primer/octicons-react' @@ -11,7 +11,7 @@ import {TypographyIcon, VersionsIcon, SearchIcon, ArrowRightIcon, ArrowLeftIcon} export default { title: 'Components/ActionList', component: ActionList, - subcomponents: {Item, LinkItem, Heading, Divider, Description}, + subcomponents: {Item, LinkItem, Group, Divider, Description}, } as Meta export const Default = () => ( @@ -33,7 +33,7 @@ Playground.args = { showDividers: false, selectionVariant: undefined, variant: 'inset', - role: 'list', + role: 'listbox', } Playground.argTypes = { showDividers: { @@ -242,34 +242,34 @@ LinkItemPlayground.argTypes = { }, } -export const HeadingPlayground: Story = args => ( +export const GroupPlayground: Story = args => ( - + + Item 1 + Item 2 + ) - -HeadingPlayground.args = { - title: 'Group title', -} - -HeadingPlayground.argTypes = { +GroupPlayground.argTypes = { variant: { - type: 'string', control: { type: 'radio', }, options: ['subtle', 'filled'], }, - title: { + role: { type: 'string', }, - subtitle: { + title: { type: 'string', }, - as: { - control: { - type: 'radio', - }, - options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], + auxiliaryText: { + type: 'string', }, } +GroupPlayground.args = { + variant: 'subtle', + role: 'listbox', + title: 'Group title', + auxiliaryText: '', +} diff --git a/src/ActionList/Divider.tsx b/src/ActionList/Divider.tsx index 0eebca75cec..224140dc9ef 100644 --- a/src/ActionList/Divider.tsx +++ b/src/ActionList/Divider.tsx @@ -4,19 +4,16 @@ import {get} from '../constants' import {Theme} from '../ThemeProvider' import {SxProp, merge} from '../sx' -export type ActionListDividerProps = { - as?: React.ElementType -} & SxProp +export type ActionListDividerProps = SxProp /** * Visually separates `Item`s or `Group`s in an `ActionList`. */ -export const Divider: React.FC> = ({sx = {}, as = 'li'}) => { +export const Divider: React.FC> = ({sx = {}}) => { return (