Add missing stories, simplify Autocomplete stories (#5127)

* adds missing stories for Select, Textarea, and TextInputWithTokens * simplifies Autocomplete stories * manually updates snapshot tests * test(vrt): update snapshots * test(vrt): update snapshots * test(vrt): update snapshots * disable Textarea animations for VRTs * test(vrt): update snapshots * disables Select animations for VRTs * test(vrt): update snapshots --------- Co-authored-by: mperrotti <mperrotti@users.noreply.github.com>
primer · Oct 22, 2024 · 016f760 · 016f760
1 parent 73796d3
commit 016f760
Show file tree

Hide file tree

Showing 116 changed files with 464 additions and 862 deletions.
diff --git a/...hots/components/Select.test.ts-snapshots/Select-Error-dark-colorblind-linux.png b/...hots/components/Select.test.ts-snapshots/Select-Error-dark-colorblind-linux.png
diff --git a/...napshots/components/Select.test.ts-snapshots/Select-Error-dark-dimmed-linux.png b/...napshots/components/Select.test.ts-snapshots/Select-Error-dark-dimmed-linux.png
diff --git a/...s/components/Select.test.ts-snapshots/Select-Error-dark-high-contrast-linux.png b/...s/components/Select.test.ts-snapshots/Select-Error-dark-high-contrast-linux.png
diff --git a/...right/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-linux.png b/...right/snapshots/components/Select.test.ts-snapshots/Select-Error-dark-linux.png
diff --git a/...hots/components/Select.test.ts-snapshots/Select-Error-dark-tritanopia-linux.png b/...hots/components/Select.test.ts-snapshots/Select-Error-dark-tritanopia-linux.png
diff --git a/...ots/components/Select.test.ts-snapshots/Select-Error-light-colorblind-linux.png b/...ots/components/Select.test.ts-snapshots/Select-Error-light-colorblind-linux.png
diff --git a/.../components/Select.test.ts-snapshots/Select-Error-light-high-contrast-linux.png b/.../components/Select.test.ts-snapshots/Select-Error-light-high-contrast-linux.png
diff --git a/...ight/snapshots/components/Select.test.ts-snapshots/Select-Error-light-linux.png b/...ight/snapshots/components/Select.test.ts-snapshots/Select-Error-light-linux.png
diff --git a/...ots/components/Select.test.ts-snapshots/Select-Error-light-tritanopia-linux.png b/...ots/components/Select.test.ts-snapshots/Select-Error-light-tritanopia-linux.png
diff --git a/...ts/components/Select.test.ts-snapshots/Select-Success-dark-colorblind-linux.png b/...ts/components/Select.test.ts-snapshots/Select-Success-dark-colorblind-linux.png
diff --git a/...pshots/components/Select.test.ts-snapshots/Select-Success-dark-dimmed-linux.png b/...pshots/components/Select.test.ts-snapshots/Select-Success-dark-dimmed-linux.png
diff --git a/...components/Select.test.ts-snapshots/Select-Success-dark-high-contrast-linux.png b/...components/Select.test.ts-snapshots/Select-Success-dark-high-contrast-linux.png
diff --git a/...ght/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-linux.png b/...ght/snapshots/components/Select.test.ts-snapshots/Select-Success-dark-linux.png
diff --git a/...ts/components/Select.test.ts-snapshots/Select-Success-dark-tritanopia-linux.png b/...ts/components/Select.test.ts-snapshots/Select-Success-dark-tritanopia-linux.png
diff --git a/...s/components/Select.test.ts-snapshots/Select-Success-light-colorblind-linux.png b/...s/components/Select.test.ts-snapshots/Select-Success-light-colorblind-linux.png
diff --git a/...omponents/Select.test.ts-snapshots/Select-Success-light-high-contrast-linux.png b/...omponents/Select.test.ts-snapshots/Select-Success-light-high-contrast-linux.png
diff --git a/...ht/snapshots/components/Select.test.ts-snapshots/Select-Success-light-linux.png b/...ht/snapshots/components/Select.test.ts-snapshots/Select-Success-light-linux.png
diff --git a/...s/components/Select.test.ts-snapshots/Select-Success-light-tritanopia-linux.png b/...s/components/Select.test.ts-snapshots/Select-Success-light-tritanopia-linux.png
diff --git a/...lect.test.ts-snapshots/Select-With-Placeholder-Option-dark-colorblind-linux.png b/...lect.test.ts-snapshots/Select-With-Placeholder-Option-dark-colorblind-linux.png
diff --git a/...s/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-dimmed-linux.png b/...s/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-dimmed-linux.png
diff --git a/...t.test.ts-snapshots/Select-With-Placeholder-Option-dark-high-contrast-linux.png b/...t.test.ts-snapshots/Select-With-Placeholder-Option-dark-high-contrast-linux.png
diff --git a/...mponents/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-linux.png b/...mponents/Select.test.ts-snapshots/Select-With-Placeholder-Option-dark-linux.png
diff --git a/...lect.test.ts-snapshots/Select-With-Placeholder-Option-dark-tritanopia-linux.png b/...lect.test.ts-snapshots/Select-With-Placeholder-Option-dark-tritanopia-linux.png
diff --git a/...ect.test.ts-snapshots/Select-With-Placeholder-Option-light-colorblind-linux.png b/...ect.test.ts-snapshots/Select-With-Placeholder-Option-light-colorblind-linux.png
diff --git a/....test.ts-snapshots/Select-With-Placeholder-Option-light-high-contrast-linux.png b/....test.ts-snapshots/Select-With-Placeholder-Option-light-high-contrast-linux.png
diff --git a/...ponents/Select.test.ts-snapshots/Select-With-Placeholder-Option-light-linux.png b/...ponents/Select.test.ts-snapshots/Select-With-Placeholder-Option-light-linux.png
diff --git a/...ect.test.ts-snapshots/Select-With-Placeholder-Option-light-tritanopia-linux.png b/...ect.test.ts-snapshots/Select-With-Placeholder-Option-light-tritanopia-linux.png
diff --git a/...kens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-colorblind-linux.png b/...kens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-colorblind-linux.png
diff --git a/...thTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-dimmed-linux.png b/...thTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-dimmed-linux.png
diff --git a/...s.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-high-contrast-linux.png b/...s.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-high-contrast-linux.png
diff --git a/...InputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-linux.png b/...InputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-linux.png
diff --git a/...kens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-tritanopia-linux.png b/...kens.test.ts-snapshots/TextInputWithTokens-Max-Height-dark-tritanopia-linux.png
diff --git a/...ens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-colorblind-linux.png b/...ens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-colorblind-linux.png
diff --git a/....test.ts-snapshots/TextInputWithTokens-Max-Height-light-high-contrast-linux.png b/....test.ts-snapshots/TextInputWithTokens-Max-Height-light-high-contrast-linux.png
diff --git a/...nputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-linux.png b/...nputWithTokens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-linux.png
diff --git a/...ens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-tritanopia-linux.png b/...ens.test.ts-snapshots/TextInputWithTokens-Max-Height-light-tritanopia-linux.png
diff --git a/...hots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-colorblind-linux.png b/...hots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-colorblind-linux.png
diff --git a/...napshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-dimmed-linux.png b/...napshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-dimmed-linux.png
diff --git a/...s/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-high-contrast-linux.png b/...s/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-high-contrast-linux.png
diff --git a/...st.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-linux.png b/...st.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-linux.png
diff --git a/...hots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-tritanopia-linux.png b/...hots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-dark-tritanopia-linux.png
diff --git a/...ots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-colorblind-linux.png b/...ots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-colorblind-linux.png
diff --git a/.../TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-high-contrast-linux.png b/.../TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-high-contrast-linux.png
diff --git a/...t.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-linux.png b/...t.ts-snapshots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-linux.png
diff --git a/...ots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-tritanopia-linux.png b/...ots/TextInputWithTokens-Prevent-Tokens-From-Wrapping-light-tritanopia-linux.png
diff --git a/...WithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-colorblind-linux.png b/...WithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-colorblind-linux.png
diff --git a/...nputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-dimmed-linux.png b/...nputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-dimmed-linux.png
diff --git a/...hTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-high-contrast-linux.png b/...hTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-high-contrast-linux.png
diff --git a/...s/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-linux.png b/...s/TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-linux.png
diff --git a/...WithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-tritanopia-linux.png b/...WithTokens.test.ts-snapshots/TextInputWithTokens-Size-dark-tritanopia-linux.png
diff --git a/...ithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-colorblind-linux.png b/...ithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-colorblind-linux.png
diff --git a/...Tokens.test.ts-snapshots/TextInputWithTokens-Size-light-high-contrast-linux.png b/...Tokens.test.ts-snapshots/TextInputWithTokens-Size-light-high-contrast-linux.png
diff --git a/.../TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-linux.png b/.../TextInputWithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-linux.png
diff --git a/...ithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-tritanopia-linux.png b/...ithTokens.test.ts-snapshots/TextInputWithTokens-Size-light-tritanopia-linux.png
diff --git a/...okens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-colorblind-linux.png b/...okens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-colorblind-linux.png
diff --git a/...ithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-dimmed-linux.png b/...ithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-dimmed-linux.png
diff --git a/...ns.test.ts-snapshots/TextInputWithTokens-Truncated-dark-high-contrast-linux.png b/...ns.test.ts-snapshots/TextInputWithTokens-Truncated-dark-high-contrast-linux.png
diff --git a/...tInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-linux.png b/...tInputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-linux.png
diff --git a/...okens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-tritanopia-linux.png b/...okens.test.ts-snapshots/TextInputWithTokens-Truncated-dark-tritanopia-linux.png
diff --git a/...kens.test.ts-snapshots/TextInputWithTokens-Truncated-light-colorblind-linux.png b/...kens.test.ts-snapshots/TextInputWithTokens-Truncated-light-colorblind-linux.png
diff --git a/...s.test.ts-snapshots/TextInputWithTokens-Truncated-light-high-contrast-linux.png b/...s.test.ts-snapshots/TextInputWithTokens-Truncated-light-high-contrast-linux.png
diff --git a/...InputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-light-linux.png b/...InputWithTokens.test.ts-snapshots/TextInputWithTokens-Truncated-light-linux.png
diff --git a/...kens.test.ts-snapshots/TextInputWithTokens-Truncated-light-tritanopia-linux.png b/...kens.test.ts-snapshots/TextInputWithTokens-Truncated-light-tritanopia-linux.png
diff --git a/...nts/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-colorblind-linux.png b/...nts/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-colorblind-linux.png
diff --git a/...ponents/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-dimmed-linux.png b/...ponents/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-dimmed-linux.png
diff --git a/.../Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-high-contrast-linux.png b/.../Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-high-contrast-linux.png
diff --git a/...ots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-linux.png b/...ots/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-linux.png
diff --git a/...nts/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-tritanopia-linux.png b/...nts/Textarea.test.ts-snapshots/Textarea-Custom-Height-dark-tritanopia-linux.png
diff --git a/...ts/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-colorblind-linux.png b/...ts/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-colorblind-linux.png
diff --git a/...Textarea.test.ts-snapshots/Textarea-Custom-Height-light-high-contrast-linux.png b/...Textarea.test.ts-snapshots/Textarea-Custom-Height-light-high-contrast-linux.png
diff --git a/...ts/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-linux.png b/...ts/components/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-linux.png
diff --git a/...ts/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-tritanopia-linux.png b/...ts/Textarea.test.ts-snapshots/Textarea-Custom-Height-light-tritanopia-linux.png
diff --git a/...rea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-colorblind-linux.png b/...rea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-colorblind-linux.png
diff --git a/...extarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-dimmed-linux.png b/...extarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-dimmed-linux.png
diff --git a/....test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-high-contrast-linux.png b/....test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-high-contrast-linux.png
diff --git a/...nents/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-linux.png b/...nents/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-linux.png
diff --git a/...rea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-tritanopia-linux.png b/...rea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-dark-tritanopia-linux.png
diff --git a/...ea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-colorblind-linux.png b/...ea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-colorblind-linux.png
diff --git a/...test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-high-contrast-linux.png b/...test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-high-contrast-linux.png
diff --git a/...ents/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-linux.png b/...ents/Textarea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-linux.png
diff --git a/...ea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-tritanopia-linux.png b/...ea.test.ts-snapshots/Textarea-Custom-Resize-Behavior-light-tritanopia-linux.png
diff --git a/...ents/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-colorblind-linux.png b/...ents/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-colorblind-linux.png
diff --git a/...mponents/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-dimmed-linux.png b/...mponents/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-dimmed-linux.png
diff --git a/...s/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-high-contrast-linux.png b/...s/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-high-contrast-linux.png
diff --git a/...hots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-linux.png b/...hots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-linux.png
diff --git a/...ents/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-tritanopia-linux.png b/...ents/Textarea.test.ts-snapshots/Textarea-Custom-Width-dark-tritanopia-linux.png
diff --git a/...nts/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-colorblind-linux.png b/...nts/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-colorblind-linux.png
diff --git a/.../Textarea.test.ts-snapshots/Textarea-Custom-Width-light-high-contrast-linux.png b/.../Textarea.test.ts-snapshots/Textarea-Custom-Width-light-high-contrast-linux.png
diff --git a/...ots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-linux.png b/...ots/components/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-linux.png
diff --git a/...nts/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-tritanopia-linux.png b/...nts/Textarea.test.ts-snapshots/Textarea-Custom-Width-light-tritanopia-linux.png
diff --git a/.../components/Textarea.test.ts-snapshots/Textarea-Error-dark-colorblind-linux.png b/.../components/Textarea.test.ts-snapshots/Textarea-Error-dark-colorblind-linux.png
diff --git a/...hots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-dimmed-linux.png b/...hots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-dimmed-linux.png
diff --git a/...mponents/Textarea.test.ts-snapshots/Textarea-Error-dark-high-contrast-linux.png b/...mponents/Textarea.test.ts-snapshots/Textarea-Error-dark-high-contrast-linux.png
diff --git a/...t/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-linux.png b/...t/snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-dark-linux.png
diff --git a/.../components/Textarea.test.ts-snapshots/Textarea-Error-dark-tritanopia-linux.png b/.../components/Textarea.test.ts-snapshots/Textarea-Error-dark-tritanopia-linux.png
diff --git a/...components/Textarea.test.ts-snapshots/Textarea-Error-light-colorblind-linux.png b/...components/Textarea.test.ts-snapshots/Textarea-Error-light-colorblind-linux.png
diff --git a/...ponents/Textarea.test.ts-snapshots/Textarea-Error-light-high-contrast-linux.png b/...ponents/Textarea.test.ts-snapshots/Textarea-Error-light-high-contrast-linux.png
diff --git a/.../snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-linux.png b/.../snapshots/components/Textarea.test.ts-snapshots/Textarea-Error-light-linux.png
diff --git a/...components/Textarea.test.ts-snapshots/Textarea-Error-light-tritanopia-linux.png b/...components/Textarea.test.ts-snapshots/Textarea-Error-light-tritanopia-linux.png
diff --git a/...omponents/Textarea.test.ts-snapshots/Textarea-Success-dark-colorblind-linux.png b/...omponents/Textarea.test.ts-snapshots/Textarea-Success-dark-colorblind-linux.png
diff --git a/...ts/components/Textarea.test.ts-snapshots/Textarea-Success-dark-dimmed-linux.png b/...ts/components/Textarea.test.ts-snapshots/Textarea-Success-dark-dimmed-linux.png
diff --git a/...onents/Textarea.test.ts-snapshots/Textarea-Success-dark-high-contrast-linux.png b/...onents/Textarea.test.ts-snapshots/Textarea-Success-dark-high-contrast-linux.png
diff --git a/...snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-linux.png b/...snapshots/components/Textarea.test.ts-snapshots/Textarea-Success-dark-linux.png
diff --git a/...omponents/Textarea.test.ts-snapshots/Textarea-Success-dark-tritanopia-linux.png b/...omponents/Textarea.test.ts-snapshots/Textarea-Success-dark-tritanopia-linux.png
diff --git a/...mponents/Textarea.test.ts-snapshots/Textarea-Success-light-colorblind-linux.png b/...mponents/Textarea.test.ts-snapshots/Textarea-Success-light-colorblind-linux.png
diff --git a/...nents/Textarea.test.ts-snapshots/Textarea-Success-light-high-contrast-linux.png b/...nents/Textarea.test.ts-snapshots/Textarea-Success-light-high-contrast-linux.png
diff --git a/...napshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-linux.png b/...napshots/components/Textarea.test.ts-snapshots/Textarea-Success-light-linux.png
diff --git a/...mponents/Textarea.test.ts-snapshots/Textarea-Success-light-tritanopia-linux.png b/...mponents/Textarea.test.ts-snapshots/Textarea-Success-light-tritanopia-linux.png
diff --git a/e2e/components/Select.test.ts b/e2e/components/Select.test.ts
diff --git a/e2e/components/TextInputWithTokens.test.ts b/e2e/components/TextInputWithTokens.test.ts
@@ -2,88 +2,71 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('TextInputWithTokens', () => {
-  test.describe('Default', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinputwithtokens--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`TextInputWithTokens.Default.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinputwithtokens--default',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
-
-  test.describe('With Leading Visual', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinputwithtokens-features--with-leading-visual',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`TextInputWithTokens.With Leading Visual.${theme}.png`)
-        })
+const stories = [
+  {
+    id: 'components-textinputwithtokens--default',
+    title: 'Default',
+  },
+  {
+    id: 'components-textinputwithtokens-features--with-leading-visual',
+    title: 'With Leading Visual',
+  },
+  {
+    id: 'components-textinputwithtokens-features--with-trailing-visual',
+    title: 'With Trailing Visual',
+  },
+  {
+    id: 'components-textinputwithtokens-features--max-height',
+    title: 'Max Height',
+  },
+  {
+    id: 'components-textinputwithtokens-features--prevent-tokens-from-wrapping',
+    title: 'Prevent Tokens From Wrapping',
+  },
+  {
+    id: 'components-textinputwithtokens-features--size',
+    title: 'Size',
+  },
+  {
+    id: 'components-textinputwithtokens-features--truncated',
+    title: 'Truncated',
+  },
+] as const
 
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinputwithtokens-features--with-leading-visual',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
+test.describe('TextInputWithTokens', () => {
+  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,
+              },
+            })
 
-  test.describe('With Trailing Visual', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinputwithtokens-features--with-trailing-visual',
-            globals: {
-              colorScheme: theme,
-            },
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`TextInputWithTokens.${story.title}.${theme}.png`)
           })
 
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`TextInputWithTokens.With Trailing Visual.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-textinputwithtokens-features--with-trailing-visual',
-            globals: {
-              colorScheme: theme,
-            },
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations({
+              rules: {
+                'color-contrast': {
+                  enabled: theme !== 'dark_dimmed',
+                },
+              },
+            })
           })
-          await expect(page).toHaveNoViolations()
         })
-      })
-    }
-  })
+      }
+    })
+  }
 })