Action list semantics all reverted PRs

.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:
+```
+<ActionList>
+  <ActionList.Group title="Actions">
+    <ActionList.Item>Create</ActionList.Item>
+    <ActionList.Item>Read</ActionList.Item>
+    <ActionList.Item>Update</ActionList.Item>
+    <ActionList.Item>Delete</ActionList.Item>
+  </ActionList.Group>
+  <ActionList.Group>
+    ...
+  </ActionList.Group>
+</ActionList>
+```
+
+Instead, use `ActionList`s and stack them as needed.
+```
+<div>
+  <ActionList>
+    <ActionList.Heading title="Actions" />
+    <ActionList.Item>Create</ActionList.Item>
+    <ActionList.Item>Read</ActionList.Item>
+    <ActionList.Item>Update</ActionList.Item>
+    <ActionList.Item>Delete</ActionList.Item>
+  </ActionList>
+  <ActionList>
+    ...
+  </ActionList>
+</div>
+```

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

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

docs/content/ActionList.mdx

@@ -170,7 +170,7 @@ When you want to add links to the List instead of actions, use `ActionList.LinkI
 </ActionList>
 ```
 
-### With groups
+### With headings
 
 ```javascript live noinline
 const SelectFields = () => {
@@ -196,29 +196,30 @@ const SelectFields = () => {
   }
 
   return (
-    <ActionList selectionVariant="multiple">
-      <ActionList.Group title="Visible fields">
+    <>
+      <ActionList selectionVariant="multiple">
+        <ActionList.Heading title="Visible fields" />
         {visibleOptions.map(option => (
           <ActionList.Item key={option.text} selected={true} onSelect={() => toggle(option.text)}>
             {option.text}
           </ActionList.Item>
         ))}
-      </ActionList.Group>
-      <ActionList.Group
-        title="Hidden fields"
+      </ActionList>
+      <ActionList
         selectionVariant={
           /** selectionVariant override on Group: disable selection if there are no options */
           hiddenOptions.length ? 'multiple' : false
         }
       >
+        <ActionList.Heading title="Hidden fields" />
         {hiddenOptions.map((option, index) => (
           <ActionList.Item key={option.text} selected={false} onSelect={() => toggle(option.text)}>
             {option.text}
           </ActionList.Item>
         ))}
         {hiddenOptions.length === 0 && <ActionList.Item disabled>No hidden fields</ActionList.Item>}
-      </ActionList.Group>
-    </ActionList>
+      </ActionList>
+    </>
   )
 }
 

docs/content/ActionMenu.mdx

@@ -110,65 +110,62 @@ You can choose to have a different _anchor_ for the Menu depending on the applic
 </ActionMenu>
 ```
 
-### With Groups
+### Divided into sections
 
 ```jsx live
 <ActionMenu>
   <ActionMenu.Button>Open column menu</ActionMenu.Button>
 
   <ActionMenu.Overlay>
     <ActionList showDividers>
-      <ActionList.Group title="Live query">
-        <ActionList.Item>
-          <ActionList.LeadingVisual>
-            <SearchIcon />
-          </ActionList.LeadingVisual>
-          repo:github/memex,github/github
-        </ActionList.Item>
-      </ActionList.Group>
-      <ActionList.Divider />
-      <ActionList.Group title="Layout" variant="subtle">
-        <ActionList.Item>
-          <ActionList.LeadingVisual>
-            <NoteIcon />
-          </ActionList.LeadingVisual>
-          Table
-          <ActionList.Description variant="block">
-            Information-dense table optimized for operations across teams
-          </ActionList.Description>
-        </ActionList.Item>
-        <ActionList.Item role="listitem">
-          <ActionList.LeadingVisual>
-            <ProjectIcon />
-          </ActionList.LeadingVisual>
-          Board
-          <ActionList.Description variant="block">Kanban-style board focused on visual states</ActionList.Description>
-        </ActionList.Item>
-      </ActionList.Group>
-      <ActionList.Divider />
-      <ActionList.Group>
-        <ActionList.Item>
-          <ActionList.LeadingVisual>
-            <FilterIcon />
-          </ActionList.LeadingVisual>
-          Save sort and filters to current view
-        </ActionList.Item>
-        <ActionList.Item>
-          <ActionList.LeadingVisual>
-            <FilterIcon />
-          </ActionList.LeadingVisual>
-          Save sort and filters to new view
-        </ActionList.Item>
-      </ActionList.Group>
-      <ActionList.Divider />
-      <ActionList.Group>
-        <ActionList.Item>
-          <ActionList.LeadingVisual>
-            <GearIcon />
-          </ActionList.LeadingVisual>
-          View settings
-        </ActionList.Item>
-      </ActionList.Group>
+      <ActionList.Heading title="Live query" />
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <SearchIcon />
+        </ActionList.LeadingVisual>
+        repo:github/memex,github/github
+      </ActionList.Item>
+    </ActionList>
+    <ActionList showDividers>
+      <ActionList.Heading title="Layout" variant="subtle" />
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <NoteIcon />
+        </ActionList.LeadingVisual>
+        Table
+        <ActionList.Description variant="block">
+          Information-dense table optimized for operations across teams
+        </ActionList.Description>
+      </ActionList.Item>
+      <ActionList.Item role="listitem">
+        <ActionList.LeadingVisual>
+          <ProjectIcon />
+        </ActionList.LeadingVisual>
+        Board
+        <ActionList.Description variant="block">Kanban-style board focused on visual states</ActionList.Description>
+      </ActionList.Item>
+    </ActionList>
+    <ActionList showDividers>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <FilterIcon />
+        </ActionList.LeadingVisual>
+        Save sort and filters to current view
+      </ActionList.Item>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <FilterIcon />
+        </ActionList.LeadingVisual>
+        Save sort and filters to new view
+      </ActionList.Item>
+    </ActionList>
+    <ActionList>
+      <ActionList.Item>
+        <ActionList.LeadingVisual>
+          <GearIcon />
+        </ActionList.LeadingVisual>
+        View settings
+      </ActionList.Item>
     </ActionList>
   </ActionMenu.Overlay>
 </ActionMenu>

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 (
-      <Box
-        borderWidth="1px"
-        borderStyle="solid"
-        bg={color}
-        borderColor={color}
-        width={14}
-        height={14}
-        borderRadius={10}
-        margin="auto"
-      />
-    )
-  }
+  return (
+    <Box
+      borderWidth="1px"
+      borderStyle="solid"
+      bg={color}
+      borderColor={color}
+      width={14}
+      height={14}
+      borderRadius={10}
+      margin="auto"
+    />
+  )
 }
 
 const items = [

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()
         })
       })
     }