chore(ButtonGroup): Remove the CSS modules feature flag from ButtonGr…

…oup (#5339)

* Remove the CSS modules feature flag

* Create four-plants-thank.md

* test(vrt): update snapshots

* Revert changes to overlay screenshots

---------

Co-authored-by: jonrohan <[email protected]>

.changeset/four-plants-thank.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Remove the CSS modules feature flag from ButtonGroup

e2e/components/ButtonGroup.test.ts

@@ -2,116 +2,57 @@ 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()
-        })
-      })
-    }
-  })
+const stories = [
+  {
+    title: 'Default',
+    id: 'components-buttongroup--default',
+  },
+  {
+    title: 'Playground',
+    id: 'components-buttongroup--playground',
+  },
+  {
+    title: 'Icon Buttons',
+    id: 'components-buttongroup-features--icon-buttons',
+  },
+  {
+    title: 'As Toolbar',
+    id: 'components-buttongroup-features--as-toolbar',
+  },
+  {
+    title: 'SX Prop',
+    id: 'components-buttongroup-dev--sx-prop',
+  },
+] as const
 
-  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()
-        })
-      })
-    }
-  })
-
-  test.describe('As Toolbar', () => {
-    for (const theme of themes) {
-      test.describe(theme, () => {
-        test('default @vrt', async ({page}) => {
-          await visit(page, {
-            id: 'components-buttongroup-features--as-toolbar',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-
-          // Default state
-          expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.As Toolbar.${theme}.png`)
-        })
-
-        test('axe @aat', async ({page}) => {
-          await visit(page, {
-            id: 'components-buttongroup-features--as-toolbar',
-            globals: {
-              colorScheme: theme,
-            },
-          })
-          await expect(page).toHaveNoViolations()
-        })
-      })
-    }
-  })
+test.describe('ButtonGroup', () => {
+  for (const story of stories) {
+    test.describe(story.title, () => {
+      for (const theme of themes) {
+        test.describe(theme, () => {
+          test('@vrt', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+
+            // Default state
+            expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.${story.title}.${theme}.png`)
+          })
+
+          test('axe @aat', async ({page}) => {
+            await visit(page, {
+              id: story.id,
+              globals: {
+                colorScheme: theme,
+              },
+            })
+            await expect(page).toHaveNoViolations()
+          })
+        })
+      }
+    })
+  }
 })

packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import ButtonGroup from './ButtonGroup'
+import {Button} from '../Button'
+
+export default {
+  title: 'Components/ButtonGroup/Dev',
+  component: ButtonGroup,
+} as Meta<typeof ButtonGroup>
+
+export const SxProp = () => (
+  <ButtonGroup sx={{border: '1px solid red'}}>
+    <Button>Button 1</Button>
+    <Button>Button 2</Button>
+    <Button>Button 3</Button>
+  </ButtonGroup>
+)

packages/react/src/ButtonGroup/ButtonGroup.tsx

@@ -1,88 +1,24 @@
-import styled from 'styled-components'
 import React from 'react'
-import {get} from '../constants'
-import sx from '../sx'
-import type {ComponentProps} from '../utils/types'
 import classes from './ButtonGroup.module.css'
-import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
 import {clsx} from 'clsx'
-import {useFeatureFlag} from '../FeatureFlags'
 import {FocusKeys, useFocusZone} from '../hooks/useFocusZone'
 import {useProvidedRefOrCreate} from '../hooks'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import {defaultSxProp} from '../utils/defaultSxProp'
+import Box from '../Box'
+import type {SxProp} from '../sx'
 
-const StyledButtonGroup = toggleStyledComponent(
-  'primer_react_css_modules_ga',
-  'div',
-  styled.div`
-    display: inline-flex;
-    vertical-align: middle;
-    isolation: isolate;
-
-    && > *:not([data-loading-wrapper]):is(button, a) {
-      margin-inline-end: -1px;
-      position: relative;
-      border-radius: 0;
-
-      :first-of-type {
-        border-top-left-radius: ${get('radii.2')};
-        border-bottom-left-radius: ${get('radii.2')};
-      }
-
-      :last-of-type {
-        border-top-right-radius: ${get('radii.2')};
-        border-bottom-right-radius: ${get('radii.2')};
-      }
-
-      :focus,
-      :active,
-      :hover {
-        z-index: 1;
-      }
-    }
-
-    // if child is loading button
-    [data-loading-wrapper] {
-      :first-child {
-        button,
-        a {
-          border-top-left-radius: ${get('radii.2')};
-          border-bottom-left-radius: ${get('radii.2')};
-        }
-      }
-
-      :last-child {
-        button,
-        a {
-          border-top-right-radius: ${get('radii.2')};
-          border-bottom-right-radius: ${get('radii.2')};
-        }
-      }
-    }
-
-    [data-loading-wrapper] > * {
-      margin-inline-end: -1px;
-      position: relative;
-      border-radius: 0;
-
-      :focus,
-      :active,
-      :hover {
-        z-index: 1;
-      }
-    }
-
-    ${sx};
-  `,
-)
-
-export type ButtonGroupProps = ComponentProps<typeof StyledButtonGroup>
+export type ButtonGroupProps = {
+  /** The role of the group */
+  role?: string
+  /** className passed in for styling */
+  className?: string
+} & SxProp
 
 const ButtonGroup = React.forwardRef<HTMLElement, ButtonGroupProps>(function ButtonGroup(
-  {children, className, role, ...rest},
+  {className, role, sx, ...rest},
   forwardRef,
 ) {
-  const enabled = useFeatureFlag('primer_react_css_modules_ga')
   const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject<HTMLDivElement>)
 
   useFocusZone({
@@ -92,18 +28,13 @@ const ButtonGroup = React.forwardRef<HTMLElement, ButtonGroupProps>(function But
     focusOutBehavior: 'wrap',
   })
 
-  return (
-    <StyledButtonGroup
-      ref={buttonRef}
-      className={clsx(className, {
-        [classes.ButtonGroup]: enabled,
-      })}
-      role={role}
-      {...rest}
-    >
-      {children}
-    </StyledButtonGroup>
-  )
+  if (sx !== defaultSxProp) {
+    return (
+      <Box as="div" className={clsx(className, classes.ButtonGroup)} role={role} {...rest} sx={sx} ref={buttonRef} />
+    )
+  }
+
+  return <div ref={buttonRef} className={clsx(className, classes.ButtonGroup)} role={role} {...rest} />
 }) as PolymorphicForwardRefComponent<'div', ButtonGroupProps>
 
 ButtonGroup.displayName = 'ButtonGroup'