Merge branch 'hussam-i-am/preview-page' of https://github.com/primer/…

…react into hussam-i-am/preview-page

.changeset/lemon-files-complain.md

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

.changeset/mean-plants-cover.md

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

.changeset/two-apples-juggle.md

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

.changeset/two-jokes-compete.md

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

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>
 

packages/react/src/Details/Details.tsx

@@ -1,33 +1,13 @@
 import React, {useEffect, useState, type ComponentPropsWithoutRef, type ReactElement} from 'react'
-import styled from 'styled-components'
 import type {SxProp} from '../sx'
-import sx from '../sx'
-import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
-import {useFeatureFlag} from '../FeatureFlags'
 import {clsx} from 'clsx'
 import classes from './Details.module.css'
 import {useMergedRefs} from '../internal/hooks/useMergedRefs'
-
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
-
-const StyledDetails = toggleStyledComponent(
-  CSS_MODULES_FEATURE_FLAG,
-  'details',
-  styled.details<SxProp>`
-    & > summary {
-      list-style: none;
-    }
-    & > summary::-webkit-details-marker {
-      display: none;
-    }
-
-    ${sx};
-  `,
-)
+import {defaultSxProp} from '../utils/defaultSxProp'
+import Box from '../Box'
 
 const Root = React.forwardRef<HTMLDetailsElement, DetailsProps>(
-  ({className, children, ...rest}, forwardRef): ReactElement => {
-    const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
+  ({className, children, sx: sxProp = defaultSxProp, ...rest}, forwardRef): ReactElement => {
     const detailsRef = React.useRef<HTMLDetailsElement>(null)
     const ref = useMergedRefs(forwardRef, detailsRef)
     const [hasSummary, setHasSummary] = useState(false)
@@ -60,12 +40,22 @@ const Root = React.forwardRef<HTMLDetailsElement, DetailsProps>(
       }
     }, [])
 
+    if (sxProp !== defaultSxProp) {
+      return (
+        <Box as={'details'} className={clsx(className, classes.Details)} {...rest} sx={sxProp} ref={ref}>
+          {/* Include default summary if summary is not provided */}
+          {!hasSummary && <Details.Summary data-default-summary>{'See Details'}</Details.Summary>}
+          {children}
+        </Box>
+      )
+    }
+
     return (
-      <StyledDetails className={clsx(className, {[classes.Details]: enabled})} {...rest} ref={ref}>
+      <details className={clsx(className, classes.Details)} {...rest} ref={ref}>
         {/* Include default summary if summary is not provided */}
         {!hasSummary && <Details.Summary data-default-summary>{'See Details'}</Details.Summary>}
         {children}
-      </StyledDetails>
+      </details>
     )
   },
 )

packages/react/src/Details/__tests__/Details.test.tsx

@@ -7,7 +7,7 @@ import {behavesAsComponent, checkExports} from '../../utils/testing'
 import axe from 'axe-core'
 
 describe('Details', () => {
-  behavesAsComponent({Component: Details})
+  behavesAsComponent({Component: Details, options: {skipAs: true}})
 
   checkExports('Details', {
     default: Details,

packages/react/src/Pagehead/Pagehead.stories.tsx

@@ -35,22 +35,4 @@ Playground.argTypes = {
       options: ['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
     },
   },
-  forwardedAs: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
-  ref: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
-  theme: {
-    controls: false,
-    table: {
-      disable: true,
-    },
-  },
 }

packages/react/src/Pagehead/Pagehead.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import Pagehead from '../Pagehead'
-import theme from '../theme'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import axe from 'axe-core'
@@ -13,7 +12,7 @@ describe('Pagehead', () => {
   })
 
   it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Pagehead theme={theme}>Pagehead</Pagehead>)
+    const {container} = HTMLRender(<Pagehead>Pagehead</Pagehead>)
     const results = await axe.run(container)
     expect(results).toHaveNoViolations()
   })

packages/react/src/Pagehead/Pagehead.tsx

@@ -1,42 +1,22 @@
-import styled from 'styled-components'
-import React, {type ComponentProps} from 'react'
+import React from 'react'
 import {clsx} from 'clsx'
-import {get} from '../constants'
-import sx, {type SxProp} from '../sx'
-import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
+import {type SxProp} from '../sx'
 import classes from './Pagehead.module.css'
-import {useFeatureFlag} from '../FeatureFlags'
+import {defaultSxProp} from '../utils/defaultSxProp'
+import Box from '../Box'
 
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
-
-/**
- * @deprecated
- */
-const StyledComponentPagehead = toggleStyledComponent(
-  CSS_MODULES_FEATURE_FLAG,
-  'div',
-  styled.div<SxProp>`
-    position: relative;
-    padding-top: ${get('space.4')};
-    padding-bottom: ${get('space.4')};
-    margin-bottom: ${get('space.4')};
-    border-bottom: 1px solid ${get('colors.border.default')};
-    ${sx};
-  `,
-)
-
-const Pagehead = ({className, ...rest}: PageheadProps) => {
-  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
-
-  if (enabled) {
-    return <StyledComponentPagehead className={clsx(classes.Pagehead, className)} {...rest} />
+const Pagehead = ({className, sx: sxProp = defaultSxProp, ...rest}: PageheadProps) => {
+  if (sxProp !== defaultSxProp || rest.as) {
+    return <Box sx={sxProp} className={clsx(classes.Pagehead, className)} {...rest} />
   }
-
-  return <StyledComponentPagehead {...rest} />
+  return <div className={clsx(classes.Pagehead, className)} {...rest} />
 }
 
 /**
  * @deprecated
  */
-export type PageheadProps = ComponentProps<typeof StyledComponentPagehead> & SxProp
+export type PageheadProps = SxProp &
+  React.ComponentPropsWithoutRef<'div'> & {
+    as?: React.ElementType
+  }
 export default Pagehead

packages/react/src/Pagehead/Pagehead.types.test.tsx

@@ -4,7 +4,3 @@ import Pagehead from '../Pagehead'
 export function shouldAcceptCallWithNoProps() {
   return <Pagehead />
 }
-
-export function shouldNotAcceptSystemProps() {
-  return <Pagehead backgroundColor="orchid" />
-}