diff --git a/.changeset/modern-coins-destroy.md b/.changeset/modern-coins-destroy.md new file mode 100644 index 00000000000..6e9e045723f --- /dev/null +++ b/.changeset/modern-coins-destroy.md @@ -0,0 +1,39 @@ +--- +"@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/.changeset/purple-crabs-matter.md b/.changeset/purple-crabs-matter.md new file mode 100644 index 00000000000..261665de8d8 --- /dev/null +++ b/.changeset/purple-crabs-matter.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Refactor(ActionList): ActionList.Item should render content as a button if parent is not interactive. diff --git a/.changeset/weak-jokes-chew.md b/.changeset/weak-jokes-chew.md new file mode 100644 index 00000000000..1c2445cec20 --- /dev/null +++ b/.changeset/weak-jokes-chew.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +FilteredActionList now uses new ActionList as a base, and SelectPanel reflects those changes. 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 ca2a1de0d66..e254d01f8ec 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 985067256bd..98ebae34e1e 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 490bd7677af..9bc8f5fdf00 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 ca2a1de0d66..c9bf7491e66 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 ca2a1de0d66..e254d01f8ec 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 4a4d40b930e..517576b742f 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 f180036cd16..14d4cd19201 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 4a4d40b930e..04de60b7160 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 4a4d40b930e..517576b742f 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 new file mode 100644 index 00000000000..8c9edc27878 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-colorblind-linux.png 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 new file mode 100644 index 00000000000..a0987d81cb7 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-dimmed-linux.png 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 new file mode 100644 index 00000000000..72cc4662a6d Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-high-contrast-linux.png 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 new file mode 100644 index 00000000000..0a8f020a796 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-linux.png 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 new file mode 100644 index 00000000000..d66333e9ef0 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-dark-tritanopia-linux.png 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 new file mode 100644 index 00000000000..35957d68122 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-colorblind-linux.png 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 new file mode 100644 index 00000000000..e61e83ab4e8 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-high-contrast-linux.png 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 new file mode 100644 index 00000000000..9863ba1450a Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-linux.png 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 new file mode 100644 index 00000000000..fd380ac2255 Binary files /dev/null and b/.playwright/snapshots/components/ActionMenu.test.ts-snapshots/ActionMenu-Multiple-Sections-light-tritanopia-linux.png 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 014d7bfd33e..80ae6d7ec3b 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 8493a061de2..3943dfd024e 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 efad31b0b44..c0680e0f8ad 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 e7cd788f147..34898f867d0 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 e4518d0d151..724f3cb2c31 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 groups +### With headings ```javascript live noinline const SelectFields = () => { @@ -196,29 +196,30 @@ 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 ac5b4baa651..7cb42fb2caf 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 ``` -### With Groups +### Divided into sections ```jsx live @@ -118,57 +118,54 @@ 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/docs/content/SelectPanel.mdx b/docs/content/SelectPanel.mdx index 0134547dccc..b07b87c8731 100644 --- a/docs/content/SelectPanel.mdx +++ b/docs/content/SelectPanel.mdx @@ -12,20 +12,18 @@ A `SelectPanel` provides an anchor that will open an overlay with a list of sele ```javascript live noinline function getColorCircle(color) { - return function () { - return ( - - ) - } + return ( + + ) } const items = [ diff --git a/e2e/components/ActionMenu.test.ts b/e2e/components/ActionMenu.test.ts index dddbaee08f5..9ffee2dae51 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({animations: 'disabled'})).toMatchSnapshot(`ActionMenu.Default.${theme}.png`) + expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Default.${theme}.png`) }) test('axe @aat', async ({page}) => { @@ -43,9 +43,7 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `ActionMenu.Links And Actions.${theme}.png`, - ) + expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Links And Actions.${theme}.png`) }) test('axe @aat', async ({page}) => { @@ -73,9 +71,7 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `ActionMenu.Multi Select.${theme}.png`, - ) + expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Multi Select.${theme}.png`) }) test('axe @aat', async ({page}) => { @@ -103,9 +99,7 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `ActionMenu.Single Select.${theme}.png`, - ) + expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Single Select.${theme}.png`) }) test('axe @aat', async ({page}) => { @@ -133,9 +127,7 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `ActionMenu.Controlled Menu.${theme}.png`, - ) + expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Controlled Menu.${theme}.png`) }) test('axe @aat', async ({page}) => { @@ -163,9 +155,7 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `ActionMenu.Custom Anchor.${theme}.png`, - ) + expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Custom Anchor.${theme}.png`) }) test('axe @aat', async ({page}) => { @@ -193,9 +183,7 @@ test.describe('ActionMenu', () => { }) // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot( - `ActionMenu.Custom Overlay Props.${theme}.png`, - ) + expect(await page.screenshot()).toMatchSnapshot(`ActionMenu.Custom Overlay Props.${theme}.png`) }) test('axe @aat', async ({page}) => { @@ -235,13 +223,37 @@ test.describe('ActionMenu', () => { colorScheme: theme, }, }) - await expect(page).toHaveNoViolations({ - rules: { - 'aria-required-children': { - enabled: false, - }, + 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() }) }) } diff --git a/generated/components.json b/generated/components.json index 63660e4327b..2e89de51dc5 100644 --- a/generated/components.json +++ b/generated/components.json @@ -108,7 +108,7 @@ "props": [ { "name": "children", - "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Group[]", + "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Divider[]", "defaultValue": "", "required": true, "description": "" @@ -285,48 +285,34 @@ ] }, { - "name": "ActionList.Group", + "name": "ActionList.Heading", "props": [ { - "name": "children", - "type": "ActionList.Item[] | ActionList.LinkItem[]", - "defaultValue": "", - "required": true, + "name": "variant", + "type": "'subtle' | 'filled'", + "defaultValue": "subtle", "description": "" }, { "name": "title", "type": "string", "defaultValue": "", - "description": "Title of the group." + "required": true, + "description": "" }, { - "name": "auxiliaryText", + "name": "subtitle", "type": "string", "defaultValue": "", - "description": "Secondary text that provides additional information about the group." - }, - { - "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." + "required": false, + "description": "" }, { - "name": "sx", - "type": "SystemStyleObject" + "name": "headingLevel", + "type": "'1' | '2' | '3' | '4' | '5' | '6'", + "defaultValue": "3", + "required": false, + "description": "" } ] } @@ -3652,7 +3638,7 @@ "stories": [ { "id": "components-selectpanel--default", - "code": "() => {\n const [selected, setSelected] = React.useState([\n items[0],\n items[1],\n ])\n const [filter, setFilter] = React.useState('')\n const filteredItems = items.filter((item) =>\n item.text.toLowerCase().startsWith(filter.toLowerCase()),\n )\n const [open, setOpen] = useState(false)\n return (\n <>\n

Multi Select Panel

\n (\n \n {children ?? 'Select Labels'}\n \n )}\n placeholderText=\"Filter labels\"\n open={open}\n onOpenChange={setOpen}\n items={filteredItems}\n selected={selected}\n onSelectedChange={setSelected}\n onFilterChange={setFilter}\n showItemDividers={true}\n overlayProps={{\n width: 'small',\n height: 'xsmall',\n }}\n />\n \n )\n}" + "code": "() => {\n const [selected, setSelected] = React.useState([\n items[0],\n items[1],\n ])\n const [filter, setFilter] = React.useState('')\n const filteredItems = items.filter((item) =>\n item.text.toLowerCase().startsWith(filter.toLowerCase()),\n )\n const [open, setOpen] = useState(false)\n return (\n <>\n

Multi Select Panel

\n (\n \n {children ?? 'Select Labels'}\n \n )}\n placeholderText=\"Filter labels\"\n open={open}\n onOpenChange={setOpen}\n items={filteredItems}\n selected={selected}\n onSelectedChange={setSelected}\n onFilterChange={setFilter}\n overlayProps={{\n width: 'small',\n height: 'xsmall',\n }}\n />\n \n )\n}" } ], "props": [ diff --git a/src/ActionList/ActionList.docs.json b/src/ActionList/ActionList.docs.json index 392c6db523a..18610f7f622 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.Group[]", + "type": "ActionList.Item[] | ActionList.LinkItem[] | ActionList.Divider[]", "defaultValue": "", "required": true, "description": "" @@ -184,50 +184,36 @@ ] }, { - "name": "ActionList.Group", + "name": "ActionList.Heading", "props": [ { - "name": "children", - "type": "ActionList.Item[] | ActionList.LinkItem[]", - "defaultValue": "", - "required": true, + "name": "variant", + "type": "'subtle' | 'filled'", + "defaultValue": "subtle", "description": "" }, { "name": "title", "type": "string", "defaultValue": "", - "description": "Title of the group." + "required": true, + "description": "" }, { - "name": "auxiliaryText", + "name": "subtitle", "type": "string", "defaultValue": "", - "description": "Secondary text that provides additional information about the group." - }, - { - "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." + "required": false, + "description": "" }, { - "name": "sx", - "type": "SystemStyleObject" + "name": "headingLevel", + "type": "'1' | '2' | '3' | '4' | '5' | '6'", + "defaultValue": "3", + "required": false, + "description": "" } ] } ] -} \ No newline at end of file +} diff --git a/src/ActionList/ActionList.examples.stories.tsx b/src/ActionList/ActionList.examples.stories.tsx index ef5c79a08aa..654e4dcf5ee 100644 --- a/src/ActionList/ActionList.examples.stories.tsx +++ b/src/ActionList/ActionList.examples.stories.tsx @@ -132,24 +132,25 @@ export function MixedSelection(): JSX.Element {

List with mixed selection

- 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 + 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.

+ + + {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' && ( <> @@ -248,37 +249,31 @@ 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 a27e2181d3c..2888ad1108f 100644 --- a/src/ActionList/ActionList.features.stories.tsx +++ b/src/ActionList/ActionList.features.stories.tsx @@ -3,7 +3,6 @@ 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' @@ -28,7 +27,7 @@ import { export default { title: 'Components/ActionList/Features', component: ActionList, - subcomponents: {Item, LinkItem, Group, Divider, Description}, + subcomponents: {Item, LinkItem, Divider, Description}, } as Meta export const SimpleList = () => ( @@ -428,23 +427,22 @@ 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} + + ))} ) } @@ -461,23 +459,22 @@ 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 de6f66ae6f5..982dc3c2b71 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, ActionListGroupProps} from '.' +import {ActionList, ActionListProps} from '.' import {Item} from './Item' import {LinkItem} from './LinkItem' -import {Group} from './Group' +import {Heading, ActionListHeadingProps} from './Heading' 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, Group, Divider, Description}, + subcomponents: {Item, LinkItem, Heading, Divider, Description}, } as Meta export const Default = () => ( @@ -33,7 +33,7 @@ Playground.args = { showDividers: false, selectionVariant: undefined, variant: 'inset', - role: 'listbox', + role: 'list', } Playground.argTypes = { showDividers: { @@ -242,34 +242,34 @@ LinkItemPlayground.argTypes = { }, } -export const GroupPlayground: Story = args => ( +export const HeadingPlayground: Story = args => ( - - Item 1 - Item 2 - + ) -GroupPlayground.argTypes = { + +HeadingPlayground.args = { + title: 'Group title', +} + +HeadingPlayground.argTypes = { variant: { + type: 'string', control: { type: 'radio', }, options: ['subtle', 'filled'], }, - role: { - type: 'string', - }, title: { type: 'string', }, - auxiliaryText: { + subtitle: { type: 'string', }, -} -GroupPlayground.args = { - variant: 'subtle', - role: 'listbox', - title: 'Group title', - auxiliaryText: '', + as: { + control: { + type: 'radio', + }, + options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], + }, } diff --git a/src/ActionList/Description.tsx b/src/ActionList/Description.tsx index 4027ec22f58..011c1a800b8 100644 --- a/src/ActionList/Description.tsx +++ b/src/ActionList/Description.tsx @@ -44,7 +44,6 @@ export const Description: React.FC {props.children} diff --git a/src/ActionList/Divider.tsx b/src/ActionList/Divider.tsx index 224140dc9ef..0eebca75cec 100644 --- a/src/ActionList/Divider.tsx +++ b/src/ActionList/Divider.tsx @@ -4,16 +4,19 @@ import {get} from '../constants' import {Theme} from '../ThemeProvider' import {SxProp, merge} from '../sx' -export type ActionListDividerProps = SxProp +export type ActionListDividerProps = { + as?: React.ElementType +} & SxProp /** * Visually separates `Item`s or `Group`s in an `ActionList`. */ -export const Divider: React.FC> = ({sx = {}}) => { +export const Divider: React.FC> = ({sx = {}, as = 'li'}) => { return (