Skip to content

Commit dbc850b

Browse files
jonrohanhectahertz
jonrohan
authored and
hectahertz
committed
Remove CSS modules feature flag from SubNav (#5772)
1 parent 56978b7 commit dbc850b

File tree

6 files changed

+110
-250
lines changed

6 files changed

+110
-250
lines changed

‎.changeset/gentle-sloths-march.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+
Removing the CSS modules feature flag from the SubNav component.

‎packages/react/src/SubNav/SubNav.dev.stories.tsx‎

Lines changed: 34 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import React from 'react'
22
import type {Meta} from '@storybook/react'
33
import SubNav from './SubNav'
44
import type {ComponentProps} from '../utils/types'
5-
import {FeatureFlags} from '../FeatureFlags'
65

76
import styles from './SubNav.dev.module.css'
87

@@ -15,26 +14,19 @@ export default {
1514
} as Meta<ComponentProps<typeof SubNav>>
1615

1716
export const WithCss = () => (
18-
<FeatureFlags
19-
flags={{
20-
primer_react_css_modules_staff: true,
21-
primer_react_css_modules_ga: true,
22-
}}
23-
>
24-
<SubNav aria-label="Main" className={styles.SubNavDev}>
25-
<SubNav.Links className={styles.SubNavLinksDev}>
26-
<SubNav.Link href="#home" selected className={styles.SubNavLinkDev}>
27-
Home
28-
</SubNav.Link>
29-
<SubNav.Link href="#documentation" className={styles.SubNavLinkDev}>
30-
Documentation
31-
</SubNav.Link>
32-
<SubNav.Link href="#support" className={styles.SubNavLinkDev}>
33-
Support
34-
</SubNav.Link>
35-
</SubNav.Links>
36-
</SubNav>
37-
</FeatureFlags>
17+
<SubNav aria-label="Main" className={styles.SubNavDev}>
18+
<SubNav.Links className={styles.SubNavLinksDev}>
19+
<SubNav.Link href="#home" selected className={styles.SubNavLinkDev}>
20+
Home
21+
</SubNav.Link>
22+
<SubNav.Link href="#documentation" className={styles.SubNavLinkDev}>
23+
Documentation
24+
</SubNav.Link>
25+
<SubNav.Link href="#support" className={styles.SubNavLinkDev}>
26+
Support
27+
</SubNav.Link>
28+
</SubNav.Links>
29+
</SubNav>
3830
)
3931

4032
export const WithSx = () => (
@@ -58,33 +50,26 @@ export const WithSx = () => (
5850
)
5951

6052
export const WithSxAndCSS = () => (
61-
<FeatureFlags
62-
flags={{
63-
primer_react_css_modules_staff: true,
64-
primer_react_css_modules_ga: true,
65-
}}
53+
<SubNav
54+
aria-label="Main"
55+
sx={{p: 1, display: 'flex', border: '2px solid', borderColor: 'border.default'}}
56+
className={styles.SubNavDev}
6657
>
67-
<SubNav
68-
aria-label="Main"
69-
sx={{p: 1, display: 'flex', border: '2px solid', borderColor: 'border.default'}}
70-
className={styles.SubNavDev}
71-
>
72-
<SubNav.Links sx={{m: 2}} className={styles.SubNavLinksDev}>
73-
<SubNav.Link
74-
href="#home"
75-
selected
76-
className={styles.SubNavLinkDev}
77-
sx={{'&:is([data-selected])': {backgroundColor: 'danger.fg'}}}
78-
>
79-
Home
80-
</SubNav.Link>
81-
<SubNav.Link href="#documentation" className={styles.SubNavLinkDev}>
82-
Documentation
83-
</SubNav.Link>
84-
<SubNav.Link href="#support" sx={{color: 'accent.fg', fontWeight: 'bold'}} className={styles.SubNavLinkDev}>
85-
Support
86-
</SubNav.Link>
87-
</SubNav.Links>
88-
</SubNav>
89-
</FeatureFlags>
58+
<SubNav.Links sx={{m: 2}} className={styles.SubNavLinksDev}>
59+
<SubNav.Link
60+
href="#home"
61+
selected
62+
className={styles.SubNavLinkDev}
63+
sx={{'&:is([data-selected])': {backgroundColor: 'danger.fg'}}}
64+
>
65+
Home
66+
</SubNav.Link>
67+
<SubNav.Link href="#documentation" className={styles.SubNavLinkDev}>
68+
Documentation
69+
</SubNav.Link>
70+
<SubNav.Link href="#support" sx={{color: 'accent.fg', fontWeight: 'bold'}} className={styles.SubNavLinkDev}>
71+
Support
72+
</SubNav.Link>
73+
</SubNav.Links>
74+
</SubNav>
9075
)

‎packages/react/src/SubNav/SubNav.tsx‎

Lines changed: 67 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
11
import {clsx} from 'clsx'
22
import type {To} from 'history'
33
import React from 'react'
4-
import styled from 'styled-components'
5-
import {get} from '../constants'
6-
import type {SxProp} from '../sx'
7-
import sx from '../sx'
84
import type {ComponentProps} from '../utils/types'
9-
import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
10-
import {useFeatureFlag} from '../FeatureFlags'
115

126
import styles from './SubNav.module.css'
13-
14-
const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
7+
import {defaultSxProp} from '../utils/defaultSxProp'
8+
import type {SxProp} from '../sx'
9+
import Box from '../Box'
1510

1611
type StyledSubNavProps = React.ComponentProps<'nav'> & {
1712
actions?: React.ReactNode
@@ -20,150 +15,90 @@ type StyledSubNavProps = React.ComponentProps<'nav'> & {
2015
label?: string
2116
} & SxProp
2217
type StyledSubNavLinksProps = React.ComponentProps<'div'> & SxProp
23-
type StyledSubNavLinkProps = React.ComponentProps<'a'> & SxProp & {to?: To; selected?: boolean}
24-
25-
// SubNav
26-
27-
const StyledSubNav = toggleStyledComponent(
28-
CSS_MODULES_FEATURE_FLAG,
29-
'nav',
30-
styled.nav<SxProp>`
31-
display: flex;
32-
justify-content: space-between;
33-
34-
.SubNav-body {
35-
display: flex;
36-
margin-bottom: -1px;
37-
38-
> * {
39-
margin-left: ${get('space.2')};
40-
}
41-
42-
> *:first-child {
43-
margin-left: 0;
44-
}
45-
}
46-
47-
.SubNav-actions {
48-
align-self: center;
49-
}
50-
51-
${sx};
52-
`,
53-
)
18+
type StyledSubNavLinkProps = React.ComponentProps<'a'> & {to?: To; selected?: boolean} & SxProp
5419

5520
const SubNav = React.forwardRef<HTMLElement, StyledSubNavProps>(function SubNav(
56-
{actions, className, children, label, ...rest},
21+
{actions, className, children, label, sx: sxProp = defaultSxProp, ...rest},
5722
forwardRef,
5823
) {
59-
const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
24+
if (sxProp !== defaultSxProp) {
25+
return (
26+
<Box
27+
as="nav"
28+
ref={forwardRef}
29+
sx={sxProp}
30+
className={clsx(className, 'SubNav', styles.SubNav)}
31+
aria-label={label}
32+
{...rest}
33+
>
34+
<div className={clsx('SubNav-body', styles.Body)}>{children}</div>
35+
{actions && <div className={clsx('SubNav-actions', styles.Actions)}>{actions}</div>}
36+
</Box>
37+
)
38+
}
6039
return (
61-
<StyledSubNav
62-
ref={forwardRef}
63-
className={clsx(className, 'SubNav', {[styles.SubNav]: enabled})}
64-
aria-label={label}
65-
{...rest}
66-
>
67-
<div className={clsx('SubNav-body', {[styles.Body]: enabled})}>{children}</div>
68-
{actions && <div className={clsx('SubNav-actions', {[styles.Actions]: enabled})}>{actions}</div>}
69-
</StyledSubNav>
40+
<nav ref={forwardRef} className={clsx(className, 'SubNav', styles.SubNav)} aria-label={label} {...rest}>
41+
<div className={clsx('SubNav-body', styles.Body)}>{children}</div>
42+
{actions && <div className={clsx('SubNav-actions', styles.Actions)}>{actions}</div>}
43+
</nav>
7044
)
7145
})
7246
SubNav.displayName = 'SubNav'
7347

7448
// SubNav.Links
7549

76-
const StyledSubNavLinks = toggleStyledComponent(
77-
CSS_MODULES_FEATURE_FLAG,
78-
'div',
79-
styled.div<SubNavLinksProps>`
80-
display: flex;
81-
${sx};
82-
`,
50+
const SubNavLinks = React.forwardRef<HTMLDivElement, StyledSubNavLinksProps>(
51+
({children, className, sx: sxProp = defaultSxProp, ...rest}, forwardRef) => {
52+
if (sxProp !== defaultSxProp) {
53+
return (
54+
<Box as="div" ref={forwardRef} sx={sxProp} className={clsx(className, styles.Links)} {...rest}>
55+
{children}
56+
</Box>
57+
)
58+
}
59+
return (
60+
<div ref={forwardRef} className={clsx(className, styles.Links)} {...rest}>
61+
{children}
62+
</div>
63+
)
64+
},
8365
)
84-
85-
const SubNavLinks = React.forwardRef<HTMLElement, StyledSubNavLinksProps>(function SubNavLink(
86-
{children, className, ...rest},
87-
forwardRef,
88-
) {
89-
const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
90-
return (
91-
<StyledSubNavLinks ref={forwardRef} className={clsx(className, enabled && styles.Links)} {...rest}>
92-
{children}
93-
</StyledSubNavLinks>
94-
)
95-
})
9666
SubNavLinks.displayName = 'SubNav.Links'
9767

9868
// SubNav.Link
9969

100-
const StyledSubNavLink = toggleStyledComponent(
101-
CSS_MODULES_FEATURE_FLAG,
102-
'a',
103-
styled.a.attrs<StyledSubNavLinkProps>(props => ({
104-
className: clsx('SubNav-item', props.selected && 'selected', props.className),
105-
}))<StyledSubNavLinkProps>`
106-
padding-left: ${get('space.3')};
107-
padding-right: ${get('space.3')};
108-
font-weight: ${get('fontWeights.semibold')};
109-
font-size: ${get('fontSizes.1')};
110-
line-height: 20px; //custom value for SubNav
111-
min-height: 34px; //custom value for SubNav
112-
color: ${get('colors.fg.default')};
113-
text-align: center;
114-
text-decoration: none;
115-
border-top: 1px solid ${get('colors.border.default')};
116-
border-bottom: 1px solid ${get('colors.border.default')};
117-
border-right: 1px solid ${get('colors.border.default')};
118-
display: flex;
119-
align-items: center;
120-
121-
&:first-of-type {
122-
border-top-left-radius: ${get('radii.2')};
123-
border-bottom-left-radius: ${get('radii.2')};
124-
border-left: 1px solid ${get('colors.border.default')};
125-
}
126-
127-
&:last-of-type {
128-
border-top-right-radius: ${get('radii.2')};
129-
border-bottom-right-radius: ${get('radii.2')};
130-
}
131-
132-
&:hover,
133-
&:focus {
134-
text-decoration: none;
135-
background-color: ${get('colors.canvas.subtle')};
136-
transition: background-color 0.2s ease;
70+
const SubNavLink = React.forwardRef<HTMLAnchorElement, StyledSubNavLinkProps>(
71+
({children, className, sx: sxProp = defaultSxProp, ...rest}, forwardRef) => {
72+
if (sxProp !== defaultSxProp) {
73+
return (
74+
<Box
75+
as="a"
76+
ref={forwardRef}
77+
sx={sxProp}
78+
className={clsx(className, styles.Link)}
79+
data-selected={rest.selected}
80+
aria-current={rest.selected}
81+
{...rest}
82+
>
83+
{children}
84+
</Box>
85+
)
13786
}
13887

139-
&.selected {
140-
color: ${get('colors.fg.onEmphasis')};
141-
background-color: ${get('colors.accent.emphasis')};
142-
border-color: ${get('colors.accent.emphasis')};
143-
}
144-
145-
${sx};
146-
`,
88+
return (
89+
<a
90+
ref={forwardRef}
91+
className={clsx(className, styles.Link)}
92+
data-selected={rest.selected}
93+
aria-current={rest.selected}
94+
{...rest}
95+
>
96+
{children}
97+
</a>
98+
)
99+
},
147100
)
148101

149-
const SubNavLink = React.forwardRef<HTMLElement, StyledSubNavLinkProps>(function SubNavLink(
150-
{children, className, ...rest},
151-
forwardRef,
152-
) {
153-
const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
154-
return (
155-
<StyledSubNavLink
156-
ref={forwardRef}
157-
className={clsx(className, enabled && styles.Link)}
158-
data-selected={rest.selected}
159-
aria-current={rest.selected}
160-
{...rest}
161-
>
162-
{children}
163-
</StyledSubNavLink>
164-
)
165-
})
166-
167102
SubNavLink.displayName = 'SubNav.Link'
168103

169104
export type SubNavProps = ComponentProps<typeof SubNav>

‎packages/react/src/__tests__/SubNav.test.tsx‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,16 @@ import {SubNav} from '..'
33
import {render, rendersClass, behavesAsComponent, checkExports} from '../utils/testing'
44
import {render as HTMLRender} from '@testing-library/react'
55
import axe from 'axe-core'
6-
import {FeatureFlags} from '../FeatureFlags'
76

87
describe('SubNav', () => {
9-
behavesAsComponent({Component: SubNav})
8+
behavesAsComponent({Component: SubNav, options: {skipAs: true}})
109

1110
checkExports('SubNav', {
1211
default: SubNav,
1312
})
1413

1514
it('should support `className` on the outermost element', () => {
16-
const Element = () => <SubNav className={'test-class-name'} />
17-
const FeatureFlagElement = () => {
18-
return (
19-
<FeatureFlags
20-
flags={{
21-
primer_react_css_modules_staff: true,
22-
primer_react_css_modules_ga: true,
23-
}}
24-
>
25-
<Element />
26-
</FeatureFlags>
27-
)
28-
}
29-
expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
30-
expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
15+
expect(HTMLRender(<SubNav className={'test-class-name'} />).container.firstChild).toHaveClass('test-class-name')
3116
})
3217

3318
it('should have no axe violations', async () => {

‎packages/react/src/__tests__/SubNavLink.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {render as HTMLRender} from '@testing-library/react'
55
import axe from 'axe-core'
66

77
describe('SubNav.Link', () => {
8-
behavesAsComponent({Component: SubNav.Link})
8+
behavesAsComponent({Component: SubNav.Link, options: {skipAs: true}})
99

1010
it('renders an <a> by default', () => {
1111
expect(render(<SubNav.Link />).type).toEqual('a')

0 commit comments

Comments
 (0)