Merge 68ba31c into 6d49f61

docs/content/ButtonGroup.mdx

@@ -6,7 +6,7 @@ source: https://github.com/primer/react/tree/main/src/ButtonGroup
 storybook: '/react/storybook?path=/story/components-buttongroup--default'
 ---
 
-import data from '../../src/ButtonGroup.docs.json'
+import data from '../../src/ButtonGroup/ButtonGroup.docs.json'
 
 ```js
 import {ButtonGroup} from '@primer/react'

e2e/components/ButtonGroup.test.ts

@@ -0,0 +1,89 @@
+import {test, expect} from '@playwright/test'
+import {visit} from '../test-helpers/storybook'
+import {themes} from '../test-helpers/themes'
+
+test.describe('ButtonGroup', () => {
+  test.describe('Default', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Default.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup--default',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Playground', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Playground.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup--playground',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('Icon Buttons', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup-features--icon-buttons',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Icon Buttons.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup-features--icon-buttons',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+})

generated/components.json

@@ -1,24 +1,6 @@
 {
   "schemaVersion": 2,
   "components": {
-    "button_group": {
-      "id": "button_group",
-      "name": "ButtonGroup",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [],
-      "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        },
-        {
-          "name": "ref",
-          "type": "React.RefObject<HTMLDivElement>"
-        }
-      ],
-      "subcomponents": []
-    },
     "dialog": {
       "id": "dialog",
       "name": "Dialog",
@@ -1404,6 +1386,29 @@
       ],
       "subcomponents": []
     },
+    "button_group": {
+      "id": "button_group",
+      "name": "ButtonGroup",
+      "status": "alpha",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-buttongroup--default",
+          "code": "() => (\n  <ButtonGroup>\n    <Button>Button 1</Button>\n    <Button>Button 2</Button>\n    <Button>Button 3</Button>\n  </ButtonGroup>\n)"
+        }
+      ],
+      "props": [
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        },
+        {
+          "name": "ref",
+          "type": "React.RefObject<HTMLDivElement>"
+        }
+      ],
+      "subcomponents": []
+    },
     "checkbox": {
       "id": "checkbox",
       "name": "Checkbox",

script/generate-e2e-tests.js

@@ -245,6 +245,25 @@ const components = new Map([
       ],
     },
   ],
+  [
+    'ButtonGroup',
+    {
+      stories: [
+        {
+          id: 'components-buttongroup--default',
+          name: 'Default',
+        },
+        {
+          id: 'components-buttongroup--playground',
+          name: 'Playground',
+        },
+        {
+          id: 'components-buttongroup-features--icon-buttons',
+          name: 'Icon Buttons',
+        },
+      ],
+    },
+  ],
   [
     'Breadcrumbs',
     {

src/ButtonGroup/ButtonGroup.features.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import {ComponentMeta} from '@storybook/react'
+import ButtonGroup from './ButtonGroup'
+import {IconButton} from '../Button'
+import {PlusIcon, DashIcon} from '@primer/octicons-react'
+
+export default {
+  title: 'Components/ButtonGroup/Features',
+  component: ButtonGroup,
+} as ComponentMeta<typeof ButtonGroup>
+
+export const IconButtons = () => (
+  <ButtonGroup>
+    <IconButton icon={PlusIcon} aria-label="Add" />
+    <IconButton icon={DashIcon} aria-label="Subtract" />
+  </ButtonGroup>
+)

src/stories/ButtonGroup.stories.tsx → src/ButtonGroup/ButtonGroup.stories.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import {Story, Meta} from '@storybook/react'
-import ButtonGroup from '../ButtonGroup'
-import {Button, ButtonProps, IconButton} from '../Button'
-import {PlusIcon, DashIcon} from '@primer/octicons-react'
+import ButtonGroup from './ButtonGroup'
+import {Button, ButtonProps} from '../Button'
 
 export default {
   title: 'Components/ButtonGroup',
@@ -48,10 +47,3 @@ Playground.argTypes = {
     },
   },
 }
-
-export const IconButtons = () => (
-  <ButtonGroup>
-    <IconButton icon={PlusIcon} aria-label="Add" />
-    <IconButton icon={DashIcon} aria-label="Subtract" />
-  </ButtonGroup>
-)

src/ButtonGroup.tsx → src/ButtonGroup/ButtonGroup.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
-import {get} from './constants'
-import sx from './sx'
-import {ComponentProps} from './utils/types'
+import {get} from '../constants'
+import sx from '../sx'
+import {ComponentProps} from '../utils/types'
 
 const ButtonGroup = styled.div`
   display: inline-flex;

src/ButtonGroup/index.ts

@@ -0,0 +1 @@
+export {default, ButtonGroupProps} from './ButtonGroup'