Skip to content

Commit 6bf04b3

Browse files
jonrohanjonrohan
committed
chore(ActionList.Heading): Remove the CSS modules feature flag from the ActionList.Heading component (#5900)
1 parent 7fa6474 commit 6bf04b3

File tree

3 files changed

+44
-99
lines changed

3 files changed

+44
-99
lines changed

‎.changeset/beige-bags-look.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': minor
3+
---
4+
5+
Remove the CSS modules feature flag from the ActionList.Heading component

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

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import React from 'react'
33
import theme from '../theme'
44
import {ActionList} from '.'
55
import {BaseStyles, ThemeProvider, ActionMenu} from '..'
6-
import {FeatureFlags} from '../FeatureFlags'
76
import {behavesAsComponent} from '../utils/testing'
87

98
describe('ActionList.Heading', () => {
@@ -62,28 +61,13 @@ describe('ActionList.Heading', () => {
6261
})
6362

6463
it('should support a custom `className` on the outermost element', () => {
65-
const Element = () => {
66-
return (
67-
<ActionList>
68-
<ActionList.Heading as="h2" className="test-class-name">
69-
Filter by
70-
</ActionList.Heading>
71-
</ActionList>
72-
)
73-
}
74-
const FeatureFlagElement = () => {
75-
return (
76-
<FeatureFlags
77-
flags={{
78-
primer_react_css_modules_staff: true,
79-
primer_react_css_modules_ga: true,
80-
}}
81-
>
82-
<Element />
83-
</FeatureFlags>
84-
)
85-
}
86-
expect(HTMLRender(<FeatureFlagElement />).container.querySelector('h2')).toHaveClass('test-class-name')
87-
expect(HTMLRender(<Element />).container.querySelector('h2')).toHaveClass('test-class-name')
64+
const actionList = HTMLRender(
65+
<ActionList>
66+
<ActionList.Heading as="h2" className="test-class-name">
67+
Filter by
68+
</ActionList.Heading>
69+
</ActionList>,
70+
)
71+
expect(actionList.container.querySelector('h2')).toHaveClass('test-class-name')
8872
})
8973
})

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

Lines changed: 31 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React, {forwardRef} from 'react'
2-
import type {BetterSystemStyleObject, SxProp} from '../sx'
3-
import {merge} from '../sx'
4-
import {defaultSxProp} from '../utils/defaultSxProp'
2+
import type {SxProp} from '../sx'
53
import {useRefObjectAsForwardedRef} from '../hooks'
64
import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
75
import {default as HeadingComponent} from '../Heading'
@@ -10,9 +8,7 @@ import VisuallyHidden from '../_VisuallyHidden'
108
import {ActionListContainerContext} from './ActionListContainerContext'
119
import {invariant} from '../utils/invariant'
1210
import {clsx} from 'clsx'
13-
import {useFeatureFlag} from '../FeatureFlags'
1411
import classes from './Heading.module.css'
15-
import {actionListCssModulesFlag} from './featureflag'
1612

1713
type HeadingLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
1814
type HeadingVariants = 'large' | 'medium' | 'small'
@@ -23,75 +19,35 @@ export type ActionListHeadingProps = {
2319
className?: string
2420
} & SxProp
2521

26-
export const Heading = forwardRef(
27-
({as, size, children, sx = defaultSxProp, visuallyHidden = false, className, ...props}, forwardedRef) => {
28-
const innerRef = React.useRef<HTMLHeadingElement>(null)
29-
useRefObjectAsForwardedRef(forwardedRef, innerRef)
30-
31-
const enabled = useFeatureFlag(actionListCssModulesFlag)
32-
33-
const {headingId: headingId, variant: listVariant} = React.useContext(ListContext)
34-
const {container} = React.useContext(ActionListContainerContext)
35-
36-
// Semantic <menu>s don't have a place for headers within them, they should be aria-labelledby the menu button's name.
37-
invariant(
38-
container !== 'ActionMenu',
39-
`ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.`,
40-
)
41-
42-
const styles = {
43-
marginBottom: 2,
44-
marginX: listVariant === 'full' ? 2 : 3,
45-
}
46-
47-
return (
48-
<VisuallyHidden isVisible={!visuallyHidden}>
49-
{enabled ? (
50-
sx !== defaultSxProp ? (
51-
<HeadingComponent
52-
as={as}
53-
variant={size}
54-
ref={innerRef}
55-
// use custom id if it is provided. Otherwise, use the id from the context
56-
id={props.id ?? headingId}
57-
className={clsx(className, classes.ActionListHeader)}
58-
data-list-variant={listVariant}
59-
sx={sx}
60-
{...props}
61-
>
62-
{children}
63-
</HeadingComponent>
64-
) : (
65-
<HeadingComponent
66-
as={as}
67-
variant={size}
68-
ref={innerRef}
69-
// use custom id if it is provided. Otherwise, use the id from the context
70-
id={props.id ?? headingId}
71-
className={clsx(className, classes.ActionListHeader)}
72-
data-list-variant={listVariant}
73-
{...props}
74-
>
75-
{children}
76-
</HeadingComponent>
77-
)
78-
) : (
79-
<HeadingComponent
80-
as={as}
81-
variant={size}
82-
ref={innerRef}
83-
// use custom id if it is provided. Otherwise, use the id from the context
84-
id={props.id ?? headingId}
85-
sx={merge<BetterSystemStyleObject>(styles, sx)}
86-
className={className}
87-
{...props}
88-
>
89-
{children}
90-
</HeadingComponent>
91-
)}
92-
</VisuallyHidden>
93-
)
94-
},
95-
) as PolymorphicForwardRefComponent<HeadingLevels, ActionListHeadingProps>
22+
export const Heading = forwardRef(({as, size, children, visuallyHidden = false, className, ...props}, forwardedRef) => {
23+
const innerRef = React.useRef<HTMLHeadingElement>(null)
24+
useRefObjectAsForwardedRef(forwardedRef, innerRef)
25+
26+
const {headingId: headingId, variant: listVariant} = React.useContext(ListContext)
27+
const {container} = React.useContext(ActionListContainerContext)
28+
29+
// Semantic <menu>s don't have a place for headers within them, they should be aria-labelledby the menu button's name.
30+
invariant(
31+
container !== 'ActionMenu',
32+
`ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.`,
33+
)
34+
35+
return (
36+
<VisuallyHidden isVisible={!visuallyHidden}>
37+
<HeadingComponent
38+
as={as}
39+
variant={size}
40+
ref={innerRef}
41+
// use custom id if it is provided. Otherwise, use the id from the context
42+
id={props.id ?? headingId}
43+
className={clsx(className, classes.ActionListHeader)}
44+
data-list-variant={listVariant}
45+
{...props}
46+
>
47+
{children}
48+
</HeadingComponent>
49+
</VisuallyHidden>
50+
)
51+
}) as PolymorphicForwardRefComponent<HeadingLevels, ActionListHeadingProps>
9652

9753
Heading.displayName = 'ActionList.Heading'

0 commit comments

Comments
 (0)