chore(ActionList.Heading): Remove the CSS modules feature flag from the ActionList.Heading component

.changeset/beige-bags-look.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Remove the CSS modules feature flag from the ActionList.Heading component

packages/react/src/ActionList/Heading.test.tsx

@@ -3,7 +3,6 @@ import React from 'react'
 import theme from '../theme'
 import {ActionList} from '.'
 import {BaseStyles, ThemeProvider, ActionMenu} from '..'
-import {FeatureFlags} from '../FeatureFlags'
 import {behavesAsComponent} from '../utils/testing'
 
 describe('ActionList.Heading', () => {
@@ -62,28 +61,13 @@ describe('ActionList.Heading', () => {
   })
 
   it('should support a custom `className` on the outermost element', () => {
-    const Element = () => {
-      return (
-        <ActionList>
-          <ActionList.Heading as="h2" className="test-class-name">
-            Filter by
-          </ActionList.Heading>
-        </ActionList>
-      )
-    }
-    const FeatureFlagElement = () => {
-      return (
-        <FeatureFlags
-          flags={{
-            primer_react_css_modules_staff: true,
-            primer_react_css_modules_ga: true,
-          }}
-        >
-          <Element />
-        </FeatureFlags>
-      )
-    }
-    expect(HTMLRender(<FeatureFlagElement />).container.querySelector('h2')).toHaveClass('test-class-name')
-    expect(HTMLRender(<Element />).container.querySelector('h2')).toHaveClass('test-class-name')
+    const actionList = HTMLRender(
+      <ActionList>
+        <ActionList.Heading as="h2" className="test-class-name">
+          Filter by
+        </ActionList.Heading>
+      </ActionList>,
+    )
+    expect(actionList.container.querySelector('h2')).toHaveClass('test-class-name')
   })
 })

packages/react/src/ActionList/Heading.tsx

@@ -1,7 +1,5 @@
 import React, {forwardRef} from 'react'
-import type {BetterSystemStyleObject, SxProp} from '../sx'
-import {merge} from '../sx'
-import {defaultSxProp} from '../utils/defaultSxProp'
+import type {SxProp} from '../sx'
 import {useRefObjectAsForwardedRef} from '../hooks'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {default as HeadingComponent} from '../Heading'
@@ -10,9 +8,7 @@ import VisuallyHidden from '../_VisuallyHidden'
 import {ActionListContainerContext} from './ActionListContainerContext'
 import {invariant} from '../utils/invariant'
 import {clsx} from 'clsx'
-import {useFeatureFlag} from '../FeatureFlags'
 import classes from './Heading.module.css'
-import {actionListCssModulesFlag} from './featureflag'
 
 type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
 type HeadingVariants = 'large' | 'medium' | 'small'
@@ -23,75 +19,35 @@ export type ActionListHeadingProps = {
   className?: string
 } & SxProp
 
-export const Heading = forwardRef(
-  ({as, size, children, sx = defaultSxProp, visuallyHidden = false, className, ...props}, forwardedRef) => {
-    const innerRef = React.useRef<HTMLHeadingElement>(null)
-    useRefObjectAsForwardedRef(forwardedRef, innerRef)
-
-    const enabled = useFeatureFlag(actionListCssModulesFlag)
-
-    const {headingId: headingId, variant: listVariant} = React.useContext(ListContext)
-    const {container} = React.useContext(ActionListContainerContext)
-
-    // Semantic <menu>s don't have a place for headers within them, they should be aria-labelledby the menu button's name.
-    invariant(
-      container !== 'ActionMenu',
-      `ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.`,
-    )
-
-    const styles = {
-      marginBottom: 2,
-      marginX: listVariant === 'full' ? 2 : 3,
-    }
-
-    return (
-      <VisuallyHidden isVisible={!visuallyHidden}>
-        {enabled ? (
-          sx !== defaultSxProp ? (
-            <HeadingComponent
-              as={as}
-              variant={size}
-              ref={innerRef}
-              // use custom id if it is provided. Otherwise, use the id from the context
-              id={props.id ?? headingId}
-              className={clsx(className, classes.ActionListHeader)}
-              data-list-variant={listVariant}
-              sx={sx}
-              {...props}
-            >
-              {children}
-            </HeadingComponent>
-          ) : (
-            <HeadingComponent
-              as={as}
-              variant={size}
-              ref={innerRef}
-              // use custom id if it is provided. Otherwise, use the id from the context
-              id={props.id ?? headingId}
-              className={clsx(className, classes.ActionListHeader)}
-              data-list-variant={listVariant}
-              {...props}
-            >
-              {children}
-            </HeadingComponent>
-          )
-        ) : (
-          <HeadingComponent
-            as={as}
-            variant={size}
-            ref={innerRef}
-            // use custom id if it is provided. Otherwise, use the id from the context
-            id={props.id ?? headingId}
-            sx={merge<BetterSystemStyleObject>(styles, sx)}
-            className={className}
-            {...props}
-          >
-            {children}
-          </HeadingComponent>
-        )}
-      </VisuallyHidden>
-    )
-  },
-) as PolymorphicForwardRefComponent<HeadingLevels, ActionListHeadingProps>
+export const Heading = forwardRef(({as, size, children, visuallyHidden = false, className, ...props}, forwardedRef) => {
+  const innerRef = React.useRef<HTMLHeadingElement>(null)
+  useRefObjectAsForwardedRef(forwardedRef, innerRef)
+
+  const {headingId: headingId, variant: listVariant} = React.useContext(ListContext)
+  const {container} = React.useContext(ActionListContainerContext)
+
+  // Semantic <menu>s don't have a place for headers within them, they should be aria-labelledby the menu button's name.
+  invariant(
+    container !== 'ActionMenu',
+    `ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.`,
+  )
+
+  return (
+    <VisuallyHidden isVisible={!visuallyHidden}>
+      <HeadingComponent
+        as={as}
+        variant={size}
+        ref={innerRef}
+        // use custom id if it is provided. Otherwise, use the id from the context
+        id={props.id ?? headingId}
+        className={clsx(className, classes.ActionListHeader)}
+        data-list-variant={listVariant}
+        {...props}
+      >
+        {children}
+      </HeadingComponent>
+    </VisuallyHidden>
+  )
+}) as PolymorphicForwardRefComponent<HeadingLevels, ActionListHeadingProps>
 
 Heading.displayName = 'ActionList.Heading'