chore(SelectPanel): Add dev stories and update vrt snapshots (#5322)

* chore(SelectPanel): Add dev stories and update vrt snapshots * Adds e2e tests for SelectPanel2 * test(vrt): update snapshots * Add missing classname props and test * test(vrt): update snapshots * wait for thumbnails and fix aat tests * test(vrt): update snapshots * add missing label * test(vrt): update snapshots --------- Co-authored-by: hussam-i-am <[email protected]>
primer · Nov 21, 2024 · 82c7923 · 82c7923
1 parent 84c3e62
commit 82c7923
Show file tree

Hide file tree

Showing 108 changed files with 296 additions and 38 deletions.
diff --git a/...ts/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-colorblind-linux.png b/...ts/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-colorblind-linux.png
diff --git a/...apshots/SelectPanel-With-Css-dark-colorblind-modern-action-list--true-linux.png b/...apshots/SelectPanel-With-Css-dark-colorblind-modern-action-list--true-linux.png
diff --git a/...onents/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-dimmed-linux.png b/...onents/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-dimmed-linux.png
diff --git a/...s-snapshots/SelectPanel-With-Css-dark-dimmed-modern-action-list--true-linux.png b/...s-snapshots/SelectPanel-With-Css-dark-dimmed-modern-action-list--true-linux.png
diff --git a/...SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-high-contrast-linux.png b/...SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-high-contrast-linux.png
diff --git a/...hots/SelectPanel-With-Css-dark-high-contrast-modern-action-list--true-linux.png b/...hots/SelectPanel-With-Css-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...ts/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-linux.png b/...ts/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-linux.png
diff --git a/....test.ts-snapshots/SelectPanel-With-Css-dark-modern-action-list--true-linux.png b/....test.ts-snapshots/SelectPanel-With-Css-dark-modern-action-list--true-linux.png
diff --git a/...ts/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-tritanopia-linux.png b/...ts/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-dark-tritanopia-linux.png
diff --git a/...apshots/SelectPanel-With-Css-dark-tritanopia-modern-action-list--true-linux.png b/...apshots/SelectPanel-With-Css-dark-tritanopia-modern-action-list--true-linux.png
diff --git a/...s/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-colorblind-linux.png b/...s/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-colorblind-linux.png
diff --git a/...pshots/SelectPanel-With-Css-light-colorblind-modern-action-list--true-linux.png b/...pshots/SelectPanel-With-Css-light-colorblind-modern-action-list--true-linux.png
diff --git a/...electPanel.test.ts-snapshots/SelectPanel-With-Css-light-high-contrast-linux.png b/...electPanel.test.ts-snapshots/SelectPanel-With-Css-light-high-contrast-linux.png
diff --git a/...ots/SelectPanel-With-Css-light-high-contrast-modern-action-list--true-linux.png b/...ots/SelectPanel-With-Css-light-high-contrast-modern-action-list--true-linux.png
diff --git a/...s/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-linux.png b/...s/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-linux.png
diff --git a/...test.ts-snapshots/SelectPanel-With-Css-light-modern-action-list--true-linux.png b/...test.ts-snapshots/SelectPanel-With-Css-light-modern-action-list--true-linux.png
diff --git a/...s/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-tritanopia-linux.png b/...s/SelectPanel.test.ts-snapshots/SelectPanel-With-Css-light-tritanopia-linux.png
diff --git a/...pshots/SelectPanel-With-Css-light-tritanopia-modern-action-list--true-linux.png b/...pshots/SelectPanel-With-Css-light-tritanopia-modern-action-list--true-linux.png
diff --git a/...ctPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-colorblind-linux.png b/...ctPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-colorblind-linux.png
diff --git a/.../SelectPanel-With-Sx-and-Css-dark-colorblind-modern-action-list--true-linux.png b/.../SelectPanel-With-Sx-and-Css-dark-colorblind-modern-action-list--true-linux.png
diff --git a/...SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-dimmed-linux.png b/...SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-dimmed-linux.png
diff --git a/...hots/SelectPanel-With-Sx-and-Css-dark-dimmed-modern-action-list--true-linux.png b/...hots/SelectPanel-With-Sx-and-Css-dark-dimmed-modern-action-list--true-linux.png
diff --git a/...anel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-high-contrast-linux.png b/...anel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-high-contrast-linux.png
diff --git a/...lectPanel-With-Sx-and-Css-dark-high-contrast-modern-action-list--true-linux.png b/...lectPanel-With-Sx-and-Css-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...onents/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-linux.png b/...onents/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-linux.png
diff --git a/...s-snapshots/SelectPanel-With-Sx-and-Css-dark-modern-action-list--true-linux.png b/...s-snapshots/SelectPanel-With-Sx-and-Css-dark-modern-action-list--true-linux.png
diff --git a/...ctPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-tritanopia-linux.png b/...ctPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-dark-tritanopia-linux.png
diff --git a/.../SelectPanel-With-Sx-and-Css-dark-tritanopia-modern-action-list--true-linux.png b/.../SelectPanel-With-Sx-and-Css-dark-tritanopia-modern-action-list--true-linux.png
diff --git a/...tPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-colorblind-linux.png b/...tPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-colorblind-linux.png
diff --git a/...SelectPanel-With-Sx-and-Css-light-colorblind-modern-action-list--true-linux.png b/...SelectPanel-With-Sx-and-Css-light-colorblind-modern-action-list--true-linux.png
diff --git a/...nel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-high-contrast-linux.png b/...nel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-high-contrast-linux.png
diff --git a/...ectPanel-With-Sx-and-Css-light-high-contrast-modern-action-list--true-linux.png b/...ectPanel-With-Sx-and-Css-light-high-contrast-modern-action-list--true-linux.png
diff --git a/...nents/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-linux.png b/...nents/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-linux.png
diff --git a/...-snapshots/SelectPanel-With-Sx-and-Css-light-modern-action-list--true-linux.png b/...-snapshots/SelectPanel-With-Sx-and-Css-light-modern-action-list--true-linux.png
diff --git a/...tPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-tritanopia-linux.png b/...tPanel.test.ts-snapshots/SelectPanel-With-Sx-and-Css-light-tritanopia-linux.png
diff --git a/...SelectPanel-With-Sx-and-Css-light-tritanopia-modern-action-list--true-linux.png b/...SelectPanel-With-Sx-and-Css-light-tritanopia-modern-action-list--true-linux.png
diff --git a/...nts/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-dark-colorblind-linux.png b/...nts/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-dark-colorblind-linux.png
diff --git a/...napshots/SelectPanel-With-Sx-dark-colorblind-modern-action-list--true-linux.png b/...napshots/SelectPanel-With-Sx-dark-colorblind-modern-action-list--true-linux.png
diff --git a/...ponents/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-dark-dimmed-linux.png b/...ponents/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-dark-dimmed-linux.png
diff --git a/...ts-snapshots/SelectPanel-With-Sx-dark-dimmed-modern-action-list--true-linux.png b/...ts-snapshots/SelectPanel-With-Sx-dark-dimmed-modern-action-list--true-linux.png
diff --git a/.../SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-dark-high-contrast-linux.png b/.../SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-dark-high-contrast-linux.png
diff --git a/...shots/SelectPanel-With-Sx-dark-high-contrast-modern-action-list--true-linux.png b/...shots/SelectPanel-With-Sx-dark-high-contrast-modern-action-list--true-linux.png
diff --git a/...ots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-dark-linux.png b/...ots/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-dark-linux.png
diff --git a/...l.test.ts-snapshots/SelectPanel-With-Sx-dark-modern-action-list--true-linux.png b/...l.test.ts-snapshots/SelectPanel-With-Sx-dark-modern-action-list--true-linux.png
diff --git a/...nts/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-dark-tritanopia-linux.png b/...nts/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-dark-tritanopia-linux.png
diff --git a/...napshots/SelectPanel-With-Sx-dark-tritanopia-modern-action-list--true-linux.png b/...napshots/SelectPanel-With-Sx-dark-tritanopia-modern-action-list--true-linux.png
diff --git a/...ts/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-light-colorblind-linux.png b/...ts/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-light-colorblind-linux.png
diff --git a/...apshots/SelectPanel-With-Sx-light-colorblind-modern-action-list--true-linux.png b/...apshots/SelectPanel-With-Sx-light-colorblind-modern-action-list--true-linux.png
diff --git a/...SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-light-high-contrast-linux.png b/...SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-light-high-contrast-linux.png
diff --git a/...hots/SelectPanel-With-Sx-light-high-contrast-modern-action-list--true-linux.png b/...hots/SelectPanel-With-Sx-light-high-contrast-modern-action-list--true-linux.png
diff --git a/...ts/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-light-linux.png b/...ts/components/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-light-linux.png
diff --git a/....test.ts-snapshots/SelectPanel-With-Sx-light-modern-action-list--true-linux.png b/....test.ts-snapshots/SelectPanel-With-Sx-light-modern-action-list--true-linux.png
diff --git a/...ts/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-light-tritanopia-linux.png b/...ts/SelectPanel.test.ts-snapshots/SelectPanel-With-Sx-light-tritanopia-linux.png
diff --git a/...apshots/SelectPanel-With-Sx-light-tritanopia-modern-action-list--true-linux.png b/...apshots/SelectPanel-With-Sx-light-tritanopia-modern-action-list--true-linux.png
diff --git a/...ctPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-dark-colorblind-linux.png b/...ctPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-dark-colorblind-linux.png
diff --git a/...SelectPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-dark-dimmed-linux.png b/...SelectPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-dark-dimmed-linux.png
diff --git a/...anel.test.ts-snapshots/drafts-SelectPanel-As-Modal-dark-high-contrast-linux.png b/...anel.test.ts-snapshots/drafts-SelectPanel-As-Modal-dark-high-contrast-linux.png
diff --git a/...drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-dark-linux.png b/...drafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-dark-linux.png
diff --git a/...ctPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-dark-tritanopia-linux.png b/...ctPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-dark-tritanopia-linux.png
diff --git a/...tPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-light-colorblind-linux.png b/...tPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-light-colorblind-linux.png
diff --git a/...nel.test.ts-snapshots/drafts-SelectPanel-As-Modal-light-high-contrast-linux.png b/...nel.test.ts-snapshots/drafts-SelectPanel-As-Modal-light-high-contrast-linux.png
diff --git a/...rafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-light-linux.png b/...rafts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-light-linux.png
diff --git a/...tPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-light-tritanopia-linux.png b/...tPanel.test.ts-snapshots/drafts-SelectPanel-As-Modal-light-tritanopia-linux.png
diff --git a/....test.ts-snapshots/drafts-SelectPanel-External-Anchor-dark-colorblind-linux.png b/....test.ts-snapshots/drafts-SelectPanel-External-Anchor-dark-colorblind-linux.png
diff --git a/...anel.test.ts-snapshots/drafts-SelectPanel-External-Anchor-dark-dimmed-linux.png b/...anel.test.ts-snapshots/drafts-SelectPanel-External-Anchor-dark-dimmed-linux.png
diff --git a/...st.ts-snapshots/drafts-SelectPanel-External-Anchor-dark-high-contrast-linux.png b/...st.ts-snapshots/drafts-SelectPanel-External-Anchor-dark-high-contrast-linux.png
diff --git a/...SelectPanel.test.ts-snapshots/drafts-SelectPanel-External-Anchor-dark-linux.png b/...SelectPanel.test.ts-snapshots/drafts-SelectPanel-External-Anchor-dark-linux.png
diff --git a/....test.ts-snapshots/drafts-SelectPanel-External-Anchor-dark-tritanopia-linux.png b/....test.ts-snapshots/drafts-SelectPanel-External-Anchor-dark-tritanopia-linux.png
diff --git a/...test.ts-snapshots/drafts-SelectPanel-External-Anchor-light-colorblind-linux.png b/...test.ts-snapshots/drafts-SelectPanel-External-Anchor-light-colorblind-linux.png
diff --git a/...t.ts-snapshots/drafts-SelectPanel-External-Anchor-light-high-contrast-linux.png b/...t.ts-snapshots/drafts-SelectPanel-External-Anchor-light-high-contrast-linux.png
diff --git a/...electPanel.test.ts-snapshots/drafts-SelectPanel-External-Anchor-light-linux.png b/...electPanel.test.ts-snapshots/drafts-SelectPanel-External-Anchor-light-linux.png
diff --git a/...test.ts-snapshots/drafts-SelectPanel-External-Anchor-light-tritanopia-linux.png b/...test.ts-snapshots/drafts-SelectPanel-External-Anchor-light-tritanopia-linux.png
diff --git a/...napshots/drafts-SelectPanel-Instant-Selection-Variant-dark-colorblind-linux.png b/...napshots/drafts-SelectPanel-Instant-Selection-Variant-dark-colorblind-linux.png
diff --git a/...ts-snapshots/drafts-SelectPanel-Instant-Selection-Variant-dark-dimmed-linux.png b/...ts-snapshots/drafts-SelectPanel-Instant-Selection-Variant-dark-dimmed-linux.png
diff --git a/...shots/drafts-SelectPanel-Instant-Selection-Variant-dark-high-contrast-linux.png b/...shots/drafts-SelectPanel-Instant-Selection-Variant-dark-high-contrast-linux.png
diff --git a/...l.test.ts-snapshots/drafts-SelectPanel-Instant-Selection-Variant-dark-linux.png b/...l.test.ts-snapshots/drafts-SelectPanel-Instant-Selection-Variant-dark-linux.png
diff --git a/...napshots/drafts-SelectPanel-Instant-Selection-Variant-dark-tritanopia-linux.png b/...napshots/drafts-SelectPanel-Instant-Selection-Variant-dark-tritanopia-linux.png
diff --git a/...apshots/drafts-SelectPanel-Instant-Selection-Variant-light-colorblind-linux.png b/...apshots/drafts-SelectPanel-Instant-Selection-Variant-light-colorblind-linux.png
diff --git a/...hots/drafts-SelectPanel-Instant-Selection-Variant-light-high-contrast-linux.png b/...hots/drafts-SelectPanel-Instant-Selection-Variant-light-high-contrast-linux.png
diff --git a/....test.ts-snapshots/drafts-SelectPanel-Instant-Selection-Variant-light-linux.png b/....test.ts-snapshots/drafts-SelectPanel-Instant-Selection-Variant-light-linux.png
diff --git a/...apshots/drafts-SelectPanel-Instant-Selection-Variant-light-tritanopia-linux.png b/...apshots/drafts-SelectPanel-Instant-Selection-Variant-light-tritanopia-linux.png
diff --git a/...anel.test.ts-snapshots/drafts-SelectPanel-With-Errors-dark-colorblind-linux.png b/...anel.test.ts-snapshots/drafts-SelectPanel-With-Errors-dark-colorblind-linux.png
diff --git a/...ectPanel.test.ts-snapshots/drafts-SelectPanel-With-Errors-dark-dimmed-linux.png b/...ectPanel.test.ts-snapshots/drafts-SelectPanel-With-Errors-dark-dimmed-linux.png
diff --git a/...l.test.ts-snapshots/drafts-SelectPanel-With-Errors-dark-high-contrast-linux.png b/...l.test.ts-snapshots/drafts-SelectPanel-With-Errors-dark-high-contrast-linux.png
diff --git a/...fts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-With-Errors-dark-linux.png b/...fts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-With-Errors-dark-linux.png
diff --git a/...anel.test.ts-snapshots/drafts-SelectPanel-With-Errors-dark-tritanopia-linux.png b/...anel.test.ts-snapshots/drafts-SelectPanel-With-Errors-dark-tritanopia-linux.png
diff --git a/...nel.test.ts-snapshots/drafts-SelectPanel-With-Errors-light-colorblind-linux.png b/...nel.test.ts-snapshots/drafts-SelectPanel-With-Errors-light-colorblind-linux.png
diff --git a/....test.ts-snapshots/drafts-SelectPanel-With-Errors-light-high-contrast-linux.png b/....test.ts-snapshots/drafts-SelectPanel-With-Errors-light-high-contrast-linux.png
diff --git a/...ts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-With-Errors-light-linux.png b/...ts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-With-Errors-light-linux.png
diff --git a/...nel.test.ts-snapshots/drafts-SelectPanel-With-Errors-light-tritanopia-linux.png b/...nel.test.ts-snapshots/drafts-SelectPanel-With-Errors-light-tritanopia-linux.png
diff --git a/...nel.test.ts-snapshots/drafts-SelectPanel-With-Warning-dark-colorblind-linux.png b/...nel.test.ts-snapshots/drafts-SelectPanel-With-Warning-dark-colorblind-linux.png
diff --git a/...ctPanel.test.ts-snapshots/drafts-SelectPanel-With-Warning-dark-dimmed-linux.png b/...ctPanel.test.ts-snapshots/drafts-SelectPanel-With-Warning-dark-dimmed-linux.png
diff --git a/....test.ts-snapshots/drafts-SelectPanel-With-Warning-dark-high-contrast-linux.png b/....test.ts-snapshots/drafts-SelectPanel-With-Warning-dark-high-contrast-linux.png
diff --git a/...ts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-With-Warning-dark-linux.png b/...ts/SelectPanel.test.ts-snapshots/drafts-SelectPanel-With-Warning-dark-linux.png
diff --git a/...nel.test.ts-snapshots/drafts-SelectPanel-With-Warning-dark-tritanopia-linux.png b/...nel.test.ts-snapshots/drafts-SelectPanel-With-Warning-dark-tritanopia-linux.png
diff --git a/...el.test.ts-snapshots/drafts-SelectPanel-With-Warning-light-colorblind-linux.png b/...el.test.ts-snapshots/drafts-SelectPanel-With-Warning-light-colorblind-linux.png
diff --git a/...test.ts-snapshots/drafts-SelectPanel-With-Warning-light-high-contrast-linux.png b/...test.ts-snapshots/drafts-SelectPanel-With-Warning-light-high-contrast-linux.png
diff --git a/...s/SelectPanel.test.ts-snapshots/drafts-SelectPanel-With-Warning-light-linux.png b/...s/SelectPanel.test.ts-snapshots/drafts-SelectPanel-With-Warning-light-linux.png
diff --git a/...el.test.ts-snapshots/drafts-SelectPanel-With-Warning-light-tritanopia-linux.png b/...el.test.ts-snapshots/drafts-SelectPanel-With-Warning-light-tritanopia-linux.png
diff --git a/e2e/components/SelectPanel.test.ts b/e2e/components/SelectPanel.test.ts
@@ -32,6 +32,18 @@ const scenarios = matrix({
       id: 'components-selectpanel-examples--height-initial-with-underflowing-items-after-fetch',
       name: 'Height Initial with Underflowing Items After Fetch',
     },
+    {
+      id: 'components-selectpanel-dev--with-css',
+      name: 'With Css',
+    },
+    {
+      id: 'components-selectpanel-dev--with-sx',
+      name: 'With Sx',
+    },
+    {
+      id: 'components-selectpanel-dev--with-sx-and-css',
+      name: 'With Sx and Css',
+    },
   ],
 })
 
@@ -50,8 +62,11 @@ test.describe('SelectPanel', () => {
       await visit(page, {id: scenario.story.id, globals})
 
       // Open select panel
-      await page.keyboard.press('Tab')
-      await page.keyboard.press('Enter')
+      const isPanelOpen = await page.isVisible('[role="listbox"]')
+      if (!isPanelOpen) {
+        await page.keyboard.press('Tab')
+        await page.keyboard.press('Enter')
+      }
       expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`SelectPanel.${name}.${theme}${flag}.png`)
     })
 
@@ -68,8 +83,11 @@ test.describe('SelectPanel', () => {
     })
 
     // Open select panel
-    await page.keyboard.press('Tab')
-    await page.keyboard.press('Enter')
+    const isPanelOpen = await page.isVisible('[role="listbox"]')
+    if (!isPanelOpen) {
+      await page.keyboard.press('Tab')
+      await page.keyboard.press('Enter')
+    }
 
     // windows high contrast mode: light
     await page.emulateMedia({forcedColors: 'active', colorScheme: 'light'})

diff --git a/e2e/components/drafts/SelectPanel.test.ts b/e2e/components/drafts/SelectPanel.test.ts
@@ -1,37 +1,80 @@
 import {test, expect} from '@playwright/test'
 import {visit} from '../../test-helpers/storybook'
 import {themes} from '../../test-helpers/themes'
+import {waitForImages} from '../../test-helpers/waitForImages'
+
+const stories: Array<{
+  title: string
+  id: string
+  buttonText?: string
+}> = [
+  {
+    title: 'Default',
+    id: 'experimental-components-selectpanel--default',
+  },
+  {
+    id: 'experimental-components-selectpanel-features--as-modal',
+    title: 'As Modal',
+  },
+  {
+    id: 'experimental-components-selectpanel-features--external-anchor',
+    title: 'External Anchor',
+  },
+  {
+    id: 'experimental-components-selectpanel-features--instant-selection-variant',
+    title: 'Instant Selection Variant',
+    buttonText: 'Choose a tag',
+  },
+  {
+    id: 'experimental-components-selectpanel-features--with-warning',
+    title: 'With Warning',
+    buttonText: 'Assignees',
+  },
+  {
+    id: 'experimental-components-selectpanel-features--with-errors',
+    title: 'With Errors',
+    buttonText: 'Assignees',
+  },
+] as const
 
 test.describe('SelectPanel', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'experimental-components-selectpanel--default',
-            globals: {
-              colorScheme: theme,
-            },
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('default @vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            // Default state
+            const buttonText = story.buttonText || 'Assign label'
+            await page.getByText(buttonText).click()
+            await waitForImages(page)
+            expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
+              `drafts.SelectPanel.${story.title}.${theme}.png`,
+            )
           })
 
-          // Default state
-          await page.getByText('Assign label').click()
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `drafts.SelectPanel.Default.${theme}.png`,
-          )
-        })
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
 
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'experimental-components-selectpanel--default',
-            globals: {
-              colorScheme: theme,
-            },
+            // Default state
+            const buttonText = story.buttonText || 'Assign label'
+            await page.getByText(buttonText).click()
+            await waitForImages(page)
+            await expect(page).toHaveNoViolations()
           })
-          await page.getByText('Assign label').click()
-          await expect(page).toHaveNoViolations()
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })
diff --git a/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx
@@ -30,6 +30,7 @@ export interface FilteredActionListProps
   onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void
   textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
   inputRef?: React.RefObject<HTMLInputElement>
+  className?: string
 }
 
 const StyledHeader = styled.div`
@@ -46,6 +47,7 @@ export function FilteredActionList({
   textInputProps,
   inputRef: providedInputRef,
   sx,
+  className,
   ...listProps
 }: FilteredActionListProps): JSX.Element {
   const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '')
@@ -110,7 +112,14 @@ export function FilteredActionList({
   useScrollFlash(scrollContainerRef)
 
   return (
-    <Box display="flex" flexDirection="column" overflow="hidden" sx={sx}>
+    <Box
+      display="flex"
+      flexDirection="column"
+      overflow="hidden"
+      sx={sx}
+      className={className}
+      data-testid="filtered-action-list"
+    >
       <StyledHeader>
         <TextInput
           ref={inputRef}

diff --git a/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
@@ -34,6 +34,7 @@ export interface FilteredActionListProps
   onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void
   textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>
   inputRef?: React.RefObject<HTMLInputElement>
+  className?: string
 }
 
 const StyledHeader = styled.div`
@@ -52,6 +53,7 @@ export function FilteredActionList({
   sx,
   groupMetadata,
   showItemDividers,
+  className,
   ...listProps
 }: FilteredActionListProps): JSX.Element {
   const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '')
@@ -129,7 +131,14 @@ export function FilteredActionList({
   }
 
   return (
-    <Box display="flex" flexDirection="column" overflow="hidden" sx={sx}>
+    <Box
+      display="flex"
+      flexDirection="column"
+      overflow="hidden"
+      sx={sx}
+      className={className}
+      data-testid="filtered-action-list"
+    >
       <StyledHeader>
         <TextInput
           ref={inputRef}

diff --git a/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.dev.stories.tsx
@@ -0,0 +1,166 @@
+import {TriangleDownIcon} from '@primer/octicons-react'
+import type {Meta} from '@storybook/react'
+import React, {useState} from 'react'
+
+import Box from '../Box'
+import {Button} from '../Button'
+import {SelectPanel} from '.'
+import type {ItemInput} from '../deprecated/ActionList/List'
+import {FeatureFlags} from '../FeatureFlags'
+
+const meta = {
+  title: 'Components/SelectPanel/Dev',
+  component: SelectPanel,
+} satisfies Meta<typeof SelectPanel>
+
+export default meta
+
+function getColorCircle(color: string) {
+  return function () {
+    return (
+      <Box
+        sx={{
+          backgroundColor: color,
+          borderColor: color,
+          width: 14,
+          height: 14,
+          borderRadius: 10,
+          margin: 'auto',
+          borderWidth: '1px',
+          borderStyle: 'solid',
+        }}
+      />
+    )
+  }
+}
+
+const items: ItemInput[] = [
+  {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', description: 'New feature or request', id: 1},
+  {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', description: "Something isn't working", id: 2},
+  {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', description: 'Good for newcomers', id: 3},
+  {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
+  {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
+  {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
+  {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7},
+].map(item => ({...item, descriptionVariant: 'block'}))
+
+export const WithCss = () => {
+  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text?.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = useState(true)
+
+  return (
+    <FeatureFlags
+      flags={{
+        primer_react_css_modules_team: true,
+        primer_react_css_modules_staff: true,
+        primer_react_css_modules_ga: true,
+      }}
+    >
+      <h1>Multi Select Panel</h1>
+      <SelectPanel
+        title="Select labels"
+        subtitle="Use labels to organize issues and pull requests"
+        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+          <Button
+            trailingAction={TriangleDownIcon}
+            aria-labelledby={` ${ariaLabelledBy}`}
+            {...anchorProps}
+            aria-haspopup="dialog"
+          >
+            {children ?? 'Select Labels'}
+          </Button>
+        )}
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+        className="testCustomClassnameMono"
+      />
+    </FeatureFlags>
+  )
+}
+
+export const WithSx = () => {
+  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text?.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = useState(true)
+
+  return (
+    <FeatureFlags
+      flags={{
+        primer_react_css_modules_team: true,
+        primer_react_css_modules_staff: true,
+        primer_react_css_modules_ga: true,
+      }}
+    >
+      <h1>Multi Select Panel</h1>
+      <SelectPanel
+        title="Select labels"
+        subtitle="Use labels to organize issues and pull requests"
+        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+          <Button
+            trailingAction={TriangleDownIcon}
+            aria-labelledby={` ${ariaLabelledBy}`}
+            {...anchorProps}
+            aria-haspopup="dialog"
+          >
+            {children ?? 'Select Labels'}
+          </Button>
+        )}
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+        sx={{fontFamily: 'Times New Roman'}}
+      />
+    </FeatureFlags>
+  )
+}
+
+export const WithSxAndCSS = () => {
+  const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
+  const [filter, setFilter] = React.useState('')
+  const filteredItems = items.filter(item => item.text?.toLowerCase().startsWith(filter.toLowerCase()))
+  const [open, setOpen] = useState(true)
+
+  return (
+    <FeatureFlags
+      flags={{
+        primer_react_css_modules_team: true,
+        primer_react_css_modules_staff: true,
+        primer_react_css_modules_ga: true,
+      }}
+    >
+      <h1>Multi Select Panel</h1>
+      <SelectPanel
+        title="Select labels"
+        subtitle="Use labels to organize issues and pull requests"
+        renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+          <Button
+            trailingAction={TriangleDownIcon}
+            aria-labelledby={` ${ariaLabelledBy}`}
+            {...anchorProps}
+            aria-haspopup="dialog"
+          >
+            {children ?? 'Select Labels'}
+          </Button>
+        )}
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+        sx={{fontFamily: 'Times New Roman'}}
+        className="testCustomClassnameMono"
+      />
+    </FeatureFlags>
+  )
+}