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

…5457)

* Remove CSS modules feature flag from ButtonGroup

* test(vrt): update snapshots

* Revert Avatar snapshot change

* Create lemon-files-complain.md

---------

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

.changeset/lemon-files-complain.md

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

e2e/components/ButtonGroup.test.ts

@@ -142,4 +142,32 @@ test.describe('ButtonGroup', () => {
       })
     }
   })
+
+  test.describe('SX Prop', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup-devonly--sx-prop',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.SX Prop.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-buttongroup-devonly--sx-prop',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
 })

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

@@ -63,3 +63,11 @@ export const LinkButtonWithIconButtons = () => (
     <IconButton icon={CopilotIcon} aria-label="Open GitHub Copilot chat" />
   </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,109 +1,25 @@
-import styled from 'styled-components'
-import React from 'react'
-import sx from '../sx'
-import type {ComponentProps} from '../utils/types'
+import React, {type PropsWithChildren} from 'react'
+import {type SxProp} from '../sx'
 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 Box from '../Box'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
-const StyledButtonGroup = toggleStyledComponent(
-  'primer_react_css_modules_ga',
-  'div',
-  styled.div`
-    display: inline-flex;
-    vertical-align: middle;
-    isolation: isolate;
-
-    & > *:not([data-loading-wrapper]) {
-      /* stylelint-disable-next-line primer/spacing */
-      margin-inline-end: -1px;
-      position: relative;
-
-      /* reset border-radius */
-      button,
-      a {
-        border-radius: 0;
-      }
-
-      &:first-child {
-        button,
-        a {
-          border-top-left-radius: var(--borderRadius-medium);
-          border-bottom-left-radius: var(--borderRadius-medium);
-        }
-      }
-
-      &:last-child {
-        button,
-        a {
-          border-top-right-radius: var(--borderRadius-medium);
-          border-bottom-right-radius: var(--borderRadius-medium);
-        }
-      }
-
-      &:focus,
-      &:active,
-      &:hover {
-        z-index: 1;
-      }
-    }
-
-    /* this is a workaround until portal based tooltips are fully removed from dotcom */
-    &:has(div:last-child:empty) {
-      button,
-      a {
-        border-radius: var(--borderRadius-medium);
-      }
-    }
-
-    /* if child is loading button */
-    & > *[data-loading-wrapper] {
-      /* stylelint-disable-next-line primer/spacing */
-      margin-inline-end: -1px;
-      position: relative;
-      /* reset border-radius */
-      button,
-      a {
-        border-radius: 0;
-      }
-
-      &:focus,
-      &:active,
-      &:hover {
-        z-index: 1;
-      }
-      &:first-child {
-        button,
-        a {
-          border-top-left-radius: var(--borderRadius-medium);
-          border-bottom-left-radius: var(--borderRadius-medium);
-        }
-      }
-
-      &:last-child {
-        button,
-        a {
-          border-top-right-radius: var(--borderRadius-medium);
-          border-bottom-right-radius: var(--borderRadius-medium);
-        }
-      }
-    }
-
-    ${sx};
-  `,
-)
-
-export type ButtonGroupProps = ComponentProps<typeof StyledButtonGroup>
+export type ButtonGroupProps = {
+  /** The role of the group */
+  role?: string
+  /** className passed in for styling */
+  className?: string
+} & PropsWithChildren &
+  SxProp
 
 const ButtonGroup = React.forwardRef<HTMLElement, ButtonGroupProps>(function ButtonGroup(
-  {children, className, role, ...rest},
+  {children, className, role, sx, ...rest},
   forwardRef,
 ) {
-  const enabled = useFeatureFlag('primer_react_css_modules_ga')
   const buttons = React.Children.map(children, (child, index) => <div key={index}>{child}</div>)
   const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject<HTMLDivElement>)
 
@@ -114,17 +30,18 @@ const ButtonGroup = React.forwardRef<HTMLElement, ButtonGroupProps>(function But
     focusOutBehavior: 'wrap',
   })
 
+  if (sx !== defaultSxProp) {
+    return (
+      <Box as="div" className={clsx(className, classes.ButtonGroup)} role={role} {...rest} sx={sx} ref={buttonRef}>
+        {buttons}
+      </Box>
+    )
+  }
+
   return (
-    <StyledButtonGroup
-      ref={buttonRef}
-      className={clsx(className, {
-        [classes.ButtonGroup]: enabled,
-      })}
-      role={role}
-      {...rest}
-    >
+    <div ref={buttonRef} className={clsx(className, classes.ButtonGroup)} role={role} {...rest}>
       {buttons}
-    </StyledButtonGroup>
+    </div>
   )
 }) as PolymorphicForwardRefComponent<'div', ButtonGroupProps>