refactor(ButtonGroup): move files to folder. (#3117)

* Reorganize ButtonGroup component and stories.

* Update generated/components.json

* Add e2e tests.

* test(vrt): update snapshots

* refactor(CircleBadge): move files into folder, add e2e tests. (#3118)

* Reorganize CircleBadge, add e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

* Update docs reference.

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* replace createRef with useRef (#3124)

* replace createRef with useRef

* changeset

* missed null

* refactor(FilterList): add files to folder, add storybook and e2e tests. (#3122)

* Reorganize FilterList files into folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* Refactor(FilteredSearch): move files to folder, add storybook and e2e tests. (#3125)

* Move files to folder, add storybook and e2e tests.

* Add aria-label to TextInput, fix docs reference.

* Update generated/components.json

* test(vrt): update snapshots

* replace createRef with useRef (#3124)

* replace createRef with useRef

* changeset

* missed null

* refactor(FilterList): add files to folder, add storybook and e2e tests. (#3122)

* Reorganize FilterList files into folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* Fix generated components.

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>

* Refactor(LabelGroup): add files to folder, add storybook and e2e tests. (#3131)

* Move files to folder, add storybook and e2e tests.

* Update generated/components.json

* test(vrt): update snapshots

---------

Co-authored-by: radglob <radglob@users.noreply.github.com>

* test(e2e): update ActionMenu e2e test to remove custom contrast rules (#3130)

* test(e2e): update ActionMenu e2e test to remove custom contrast rules

* test(vrt): update snapshots

* test: remove multiple sections test

* test(e2e): restore rule exception for ActionMenu

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* NavList SSR: use useIsomorphicLayoutEffect instead of useLayoutEffect (#3127)

* use useIsomorphicLayoutEffect

* Create .changeset/fast-panthers-refuse.md

---------

Co-authored-by: Josh Black <joshblack@github.com>

* Bump @primer/primitives to `7.11.5` (#3120)

* npm install @primer/primitives@7.11.5

* Updating`theme-preval` snapshots

* Re-run

```
npm run build
npm run test -- -u
```

So that /themePreval.test.ts.snap also gets the new timestamp

* Update `theme-preval` snapshots docs

* Create .changeset/old-falcons-learn.md

* test(vrt): update snapshots

---------

Co-authored-by: simurai <simurai@users.noreply.github.com>

* Update RelativeTime stories (#3136)

* Update RelativeTime stories

* Update generated/components.json

---------

Co-authored-by: colebemis <colebemis@users.noreply.github.com>

* chore(deps-dev): bump @types/jest-axe from 3.5.3 to 3.5.5 (#3141)

Bumps [@types/jest-axe](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jest-axe) from 3.5.3 to 3.5.5.
- [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases)
- [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jest-axe)

---
updated-dependencies:
- dependency-name: "@types/jest-axe"
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @rollup/plugin-typescript from 11.0.0 to 11.1.0 (#3138)

Bumps [@rollup/plugin-typescript](https://github.com/rollup/plugins/tree/HEAD/packages/typescript) from 11.0.0 to 11.1.0.
- [Release notes](https://github.com/rollup/plugins/releases)
- [Changelog](https://github.com/rollup/plugins/blob/master/packages/typescript/CHANGELOG.md)
- [Commits](https://github.com/rollup/plugins/commits/commonjs-v11.1.0/packages/typescript)

---
updated-dependencies:
- dependency-name: "@rollup/plugin-typescript"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump eslint-plugin-primer-react from 2.0.2 to 2.0.3 (#3140)

* chore(deps-dev): bump eslint-plugin-primer-react from 2.0.2 to 2.0.3

Bumps [eslint-plugin-primer-react](https://github.com/primer/eslint-plugin-primer-react) from 2.0.2 to 2.0.3.
- [Release notes](https://github.com/primer/eslint-plugin-primer-react/releases)
- [Changelog](https://github.com/primer/eslint-plugin-primer-react/blob/main/CHANGELOG.md)
- [Commits](primer/eslint-plugin-primer-react@v2.0.2...v2.0.3)

---
updated-dependencies:
- dependency-name: eslint-plugin-primer-react
  dependency-type: direct:development
  update-type: version-update:semver-patch
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore(eslint): remove unnecessary disable

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* chore(deps-dev): bump babel-plugin-styled-components from 2.0.2 to 2.1.1 (#3139)

* chore(deps-dev): bump babel-plugin-styled-components from 2.0.2 to 2.1.1

Bumps [babel-plugin-styled-components](https://github.com/styled-components/babel-plugin-styled-components) from 2.0.2 to 2.1.1.
- [Release notes](https://github.com/styled-components/babel-plugin-styled-components/releases)
- [Commits](styled-components/babel-plugin-styled-components@v2.0.2...v2.1.1)

---
updated-dependencies:
- dependency-name: babel-plugin-styled-components
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>

* test(snapshots): update snapshots

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* chore(project): update project to use Node.js v18 LTS (#3133)

* chore(project): update project to use Node.js v18 LTS

* chore: add legacy openssl option for docs builds

* chore: update devcontainer image

---------

Co-authored-by: Josh Black <joshblack@users.noreply.github.com>

* Use SSR-compatible slot implementation in CheckboxGroup/RadioGroup (#3146)

* Update slots for checkbox group and radio group

* Update useSlot return type

* Update exports test

* Create .changeset/young-queens-notice.md

* Update comment indentation

* Add segments to progressbar (#3114)

* Allow ProgressBar to either be given child segments or just a progress value.

* Update ProgressBar docs.

* Fix progress bar tests.

* Create dry-weeks-compete.md

* Fix errors from CI.

* Rename ProgressBar.Segment to ProgressBar.Item.

* Pass backgroundColor instead of bg to get away from system props, simplify children check in ProgressBar.

* Updated snapshots.

* Updated snapshots using --no-cache flag.

* Update generated/components.json

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: radglob <radglob@users.noreply.github.com>
Co-authored-by: Matthew Costabile <mattcosta7@github.com>
Co-authored-by: Josh Black <joshblack@github.com>
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>
Co-authored-by: simurai <simurai@github.com>
Co-authored-by: simurai <simurai@users.noreply.github.com>
Co-authored-by: Cole Bemis <colebemis@github.com>
Co-authored-by: colebemis <colebemis@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

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",
@@ -1350,6 +1332,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'