Revert "Update PRC ActionList implementation to have similar semantics to PVC. (#2878)"

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 headings
+### With groups
 
 ```javascript live noinline
 const SelectFields = () => {
@@ -196,30 +196,29 @@ const SelectFields = () => {
   }
 
   return (
-    <>
-      <ActionList selectionVariant="multiple">
-        <ActionList.Heading title="Visible fields" />
+    <ActionList selectionVariant="multiple">
+      <ActionList.Group title="Visible fields">
         {visibleOptions.map(option => (
           <ActionList.Item key={option.text} selected={true} onSelect={() => toggle(option.text)}>
             {option.text}
           </ActionList.Item>
         ))}
-      </ActionList>
-      <ActionList
+      </ActionList.Group>
+      <ActionList.Group
+        title="Hidden fields"
         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>
-    </>
+      </ActionList.Group>
+    </ActionList>
   )
 }
 

docs/content/ActionMenu.mdx

@@ -110,62 +110,65 @@ You can choose to have a different _anchor_ for the Menu depending on the applic
 </ActionMenu>
 ```
 
-### Divided into sections
+### With Groups
 
 ```jsx live
 <ActionMenu>
   <ActionMenu.Button>Open column menu</ActionMenu.Button>
 
   <ActionMenu.Overlay>
     <ActionList showDividers>
-      <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.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>
   </ActionMenu.Overlay>
 </ActionMenu>

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

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"
             }
           ]
         }