Button: Fix storybook playground, add missing e2e tests

e2e/components/Button.test.ts

@@ -377,6 +377,40 @@ test.describe('Button', () => {
     }
   })
 
+  test.describe('Trailing Action', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--trailing-action',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Action.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-features--trailing-action',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
   test.describe('Trailing Counter', () => {
     for (const theme of themes) {
       test.describe(theme, () => {
@@ -444,4 +478,40 @@ test.describe('Button', () => {
       })
     }
   })
+
+  test.describe('Dev: Invisible Variants', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-devonly--invisible-variants',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Button.Invisible Variants.${theme}.png`)
+        })
+      })
+    }
+  })
+
+  test.describe('Dev: sx prop', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-button-devonly--test-sx-prop',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Button.sx prop.${theme}.png`)
+        })
+      })
+    }
+  })
 })

e2e/components/drafts/Button2.test.ts

@@ -377,6 +377,40 @@ test.describe('Button', () => {
     }
   })
 
+  test.describe('Trailing Action', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-button-features--trailing-action',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Button.Trailing Action.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-button-features--trailing-action',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations({
+            rules: {
+              'color-contrast': {
+                enabled: theme !== 'dark_dimmed',
+              },
+            },
+          })
+        })
+      })
+    }
+  })
+
   test.describe('Trailing Counter', () => {
     for (const theme of themes) {
       test.describe(theme, () => {
@@ -444,4 +478,40 @@ test.describe('Button', () => {
       })
     }
   })
+
+  test.describe('Dev: Invisible Variants', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-button-devonly--invisible-variants',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Button.Invisible Variants.${theme}.png`)
+        })
+      })
+    }
+  })
+
+  test.describe('Dev: sx prop', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'drafts-components-button-devonly--test-sx-prop',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`Button.sx prop.${theme}.png`)
+        })
+      })
+    }
+  })
 })

generated/components.json

@@ -4972,6 +4972,81 @@
         }
       ]
     },
+    "drafts_button": {
+      "id": "drafts_button",
+      "name": "Button2",
+      "status": "draft",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-button2--default",
+          "code": "() => <Button>Default</Button>"
+        }
+      ],
+      "props": [
+        {
+          "name": "children",
+          "required": true,
+          "type": "React.ReactNode",
+          "description": "The content of the button."
+        },
+        {
+          "name": "variant",
+          "type": "| 'default'\n| 'primary'\n| 'danger'\n| 'outline'\n| 'invisible'",
+          "defaultValue": "'default'",
+          "description": "Change the visual style of the button."
+        },
+        {
+          "name": "size",
+          "type": "| 'small'\n| 'medium'\n| 'large'",
+          "defaultValue": "'medium'"
+        },
+        {
+          "name": "leadingIcon",
+          "type": "React.ComponentType<OcticonProps>",
+          "description": "An icon to display before the button text."
+        },
+        {
+          "name": "trailingIcon",
+          "type": "React.ComponentType<OcticonProps>",
+          "description": "An icon to display after the button text."
+        },
+        {
+          "name": "as",
+          "type": "React.ElementType",
+          "defaultValue": "'button'"
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        },
+        {
+          "name": "ref",
+          "type": "React.RefObject<HTMLButtonElement>"
+        }
+      ],
+      "passthrough": {
+        "element": "button",
+        "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes"
+      },
+      "subcomponents": [
+        {
+          "name": "Button.Counter",
+          "props": [
+            {
+              "name": "children",
+              "required": true,
+              "type": "number",
+              "description": "The counter value."
+            },
+            {
+              "name": "sx",
+              "type": "SystemStyleObject"
+            }
+          ]
+        }
+      ]
+    },
     "drafts_inline_autocomplete": {
       "id": "drafts_inline_autocomplete",
       "name": "InlineAutocomplete",

src/Button/Button.stories.tsx

@@ -21,7 +21,7 @@ export default {
     variant: {
       control: {
         type: 'radio',
-        options: ['default', 'primary', 'danger', 'invisible'],
+        options: ['default', 'primary', 'danger', 'invisible', 'outline'],
       },
     },
     alignContent: {
@@ -57,6 +57,14 @@ export default {
   },
 } as Meta<typeof Button>
 
-export const Playground: Story<typeof Button> = args => <Button {...args}>Default</Button>
+export const Playground: Story<typeof Button & {trailingVisualCount: number}> = args => {
+  const {trailingVisualCount, ...rest} = args
+  return (
+    <Button {...rest}>
+      Default
+      {typeof trailingVisualCount === 'undefined' ? null : <Button.Counter>{trailingVisualCount}</Button.Counter>}
+    </Button>
+  )
+}
 
 export const Default = () => <Button>Default</Button>

src/__tests__/__snapshots__/exports.test.ts.snap

@@ -131,6 +131,7 @@ exports[`@primer/react/decprecated should not update exports without a semver ch
 
 exports[`@primer/react/drafts should not update exports without a semver change 1`] = `
 [
+  "Button",
   "Content",
   "DataTable",
   "Dialog",

src/drafts/Button2/Button.dev.stories.tsx

@@ -1,6 +1,6 @@
 import {SearchIcon, TriangleDownIcon, EyeIcon} from '@primer/octicons-react'
 import React from 'react'
-import {Button, IconButton} from '.'
+import {Button} from '.'
 
 export default {
   title: 'Drafts/Components/Button/DevOnly',
@@ -29,7 +29,7 @@ export const InvisibleVariants = () => {
         Button
         <Button.Counter>{count}</Button.Counter>
       </Button>
-      <IconButton icon={TriangleDownIcon} variant="invisible" aria-label="Invisible" />
+      {/* <IconButton icon={TriangleDownIcon} variant="invisible" aria-label="Invisible" /> */}
     </div>
   )
 }

src/drafts/Button2/Button.docs.json

@@ -1,7 +1,7 @@
 {
-  "id": "button",
-  "name": "Button",
-  "status": "alpha",
+  "id": "drafts_button",
+  "name": "Button2",
+  "status": "draft",
   "a11yReviewed": false,
   "stories": [],
   "props": [
@@ -67,4 +67,4 @@
       ]
     }
   ]
-}
+}

src/drafts/Button2/Button.stories.tsx

@@ -21,7 +21,7 @@ export default {
     variant: {
       control: {
         type: 'radio',
-        options: ['default', 'primary', 'danger', 'invisible'],
+        options: ['default', 'primary', 'danger', 'invisible', 'outline'],
       },
     },
     alignContent: {
@@ -57,6 +57,14 @@ export default {
   },
 } as Meta<typeof Button>
 
-export const Playground: Story<typeof Button> = args => <Button {...args}>Default</Button>
+export const Playground: Story<typeof Button & {trailingVisualCount: number}> = args => {
+  const {trailingVisualCount, ...rest} = args
+  return (
+    <Button {...rest}>
+      Default
+      {typeof trailingVisualCount === 'undefined' ? null : <Button.Counter>{trailingVisualCount}</Button.Counter>}
+    </Button>
+  )
+}
 
 export const Default = () => <Button>Default</Button>