chore(Pagehead): Remove the CSS module feature flag from Pagehead

.changeset/two-jokes-compete.md

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

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" />
-}