Skip to content

Commit 8a22d86

Browse files
jonrohanjonrohan
authored
chore(ProgressBar): Remove the CSS modules feature flag from the ProgressBar component (#5983)
1 parent 6d3fc05 commit 8a22d86

File tree

4 files changed

+38
-129
lines changed

4 files changed

+38
-129
lines changed

‎.changeset/tough-radios-burn.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 ProgressBar component

‎packages/react/src/ProgressBar/ProgressBar.tsx‎

Lines changed: 12 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,16 @@
11
import React, {forwardRef} from 'react'
2-
import styled, {keyframes} from 'styled-components'
32
import type {WidthProps} from 'styled-system'
4-
import {width} from 'styled-system'
5-
import {get} from '../constants'
63
import type {SxProp} from '../sx'
7-
import sx from '../sx'
8-
import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
94
import {clsx} from 'clsx'
105
import classes from './ProgressBar.module.css'
11-
import {useFeatureFlag} from '../FeatureFlags'
6+
import {BoxWithFallback} from '../internal/components/BoxWithFallback'
127

138
type ProgressProp = {
149
className?: string
1510
progress?: string | number
1611
bg?: string
1712
}
1813

19-
const shimmer = keyframes`
20-
from { mask-position: 200%; }
21-
to { mask-position: 0%; }
22-
`
23-
24-
const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
25-
26-
const ProgressItem = toggleStyledComponent(
27-
CSS_MODULES_FEATURE_FLAG,
28-
'span',
29-
styled.span<ProgressProp & SxProp>`
30-
width: ${props => (props.progress ? `${props.progress}%` : 0)};
31-
background-color: ${props => get(`colors.${props.bg || 'success.emphasis'}`)};
32-
33-
@media (prefers-reduced-motion: no-preference) {
34-
&[data-animated='true'] {
35-
mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);
36-
mask-size: 200%;
37-
animation: ${shimmer};
38-
animation-duration: 1s;
39-
animation-iteration-count: infinite;
40-
}
41-
}
42-
43-
${sx};
44-
`,
45-
)
46-
4714
const sizeMap = {
4815
small: '5px',
4916
large: '10px',
@@ -57,21 +24,6 @@ type StyledProgressContainerProps = {
5724
} & WidthProps &
5825
SxProp
5926

60-
const ProgressContainer = toggleStyledComponent(
61-
CSS_MODULES_FEATURE_FLAG,
62-
'span',
63-
styled.span<StyledProgressContainerProps>`
64-
display: ${props => (props.inline ? 'inline-flex' : 'flex')};
65-
overflow: hidden;
66-
background-color: ${get('colors.border.default')};
67-
border-radius: ${get('radii.1')};
68-
height: ${props => sizeMap[props.barSize || 'default']};
69-
gap: 2px;
70-
${width}
71-
${sx};
72-
`,
73-
)
74-
7527
export type ProgressBarItems = React.HTMLAttributes<HTMLSpanElement> & {
7628
'aria-label'?: string
7729
className?: string
@@ -100,8 +52,6 @@ export const Item = forwardRef<HTMLSpanElement, ProgressBarItems>(
10052
'aria-valuetext': ariaValueText,
10153
}
10254

103-
const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
104-
10555
const progressBarWidth = '--progress-width'
10656
const progressBarBg = '--progress-bg'
10757
const styles: {[key: string]: string} = {}
@@ -111,14 +61,15 @@ export const Item = forwardRef<HTMLSpanElement, ProgressBarItems>(
11161
styles[progressBarBg] = (bgType && `var(--bgColor-${bgType[0]}-${bgType[1]})`) || 'var(--bgColor-success-emphasis)'
11262

11363
return (
114-
<ProgressItem
115-
className={clsx(className, {[classes.ProgressBarItem]: enabled})}
64+
<BoxWithFallback
65+
as="span"
66+
className={clsx(className, classes.ProgressBarItem)}
11667
{...rest}
11768
role="progressbar"
11869
aria-label={ariaLabel}
11970
ref={forwardRef}
12071
progress={progress}
121-
style={enabled ? styles : undefined}
72+
style={styles}
12273
{...ariaAttributes}
12374
/>
12475
)
@@ -145,6 +96,7 @@ export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>(
14596
'aria-valuenow': ariaValueNow,
14697
'aria-valuetext': ariaValueText,
14798
className,
99+
inline,
148100
...rest
149101
}: ProgressBarProps,
150102
forwardRef,
@@ -156,17 +108,14 @@ export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>(
156108
// Get the number of non-empty nodes passed as children, this will exclude
157109
// booleans, null, and undefined
158110
const validChildren = React.Children.toArray(children).length
159-
const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
160-
161-
const cssModulesProps = !enabled
162-
? {barSize}
163-
: {'data-progress-display': rest.inline ? 'inline' : 'block', 'data-progress-bar-size': barSize}
164111

165112
return (
166-
<ProgressContainer
113+
<BoxWithFallback
114+
as="span"
167115
ref={forwardRef}
168-
className={clsx(className, {[classes.ProgressBarContainer]: enabled})}
169-
{...cssModulesProps}
116+
className={clsx(className, classes.ProgressBarContainer)}
117+
data-progress-display={inline ? 'inline' : 'block'}
118+
data-progress-bar-size={barSize}
170119
{...rest}
171120
>
172121
{validChildren ? (
@@ -181,7 +130,7 @@ export const ProgressBar = forwardRef<HTMLSpanElement, ProgressBarProps>(
181130
bg={bg}
182131
/>
183132
)}
184-
</ProgressContainer>
133+
</BoxWithFallback>
185134
)
186135
},
187136
)

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

Lines changed: 10 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {ProgressBar} from '..'
33
import {render, 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('ProgressBar', () => {
98
behavesAsComponent({Component: ProgressBar, toRender: () => <ProgressBar aria-valuenow={10} progress={0} />})
@@ -17,19 +16,7 @@ describe('ProgressBar', () => {
1716
const Element = () => (
1817
<ProgressBar progress={80} barSize="small" aria-label="Upload test.png" className={'test-class-name'} />
1918
)
20-
const FeatureFlagElement = () => {
21-
return (
22-
<FeatureFlags
23-
flags={{
24-
primer_react_css_modules_ga: true,
25-
}}
26-
>
27-
<Element />
28-
</FeatureFlags>
29-
)
30-
}
3119
expect(HTMLRender(<Element />).container.firstChild).toHaveClass('test-class-name')
32-
expect(HTMLRender(<FeatureFlagElement />).container.firstChild).toHaveClass('test-class-name')
3320
})
3421

3522
it('should have no axe violations', async () => {
@@ -39,32 +26,20 @@ describe('ProgressBar', () => {
3926
})
4027

4128
it('respects the "barSize" prop', () => {
42-
expect(render(<ProgressBar progress={80} barSize="small" aria-label="Upload test.png" />)).toHaveStyleRule(
43-
'height',
44-
'5px',
45-
)
46-
expect(render(<ProgressBar progress={80} barSize="default" aria-label="Upload test.png" />)).toHaveStyleRule(
47-
'height',
48-
'8px',
49-
)
50-
expect(render(<ProgressBar progress={80} barSize="large" aria-label="Upload test.png" />)).toHaveStyleRule(
51-
'height',
52-
'10px',
53-
)
29+
const barSizeSmall = HTMLRender(<ProgressBar progress={80} barSize="small" aria-label="Upload test.png" />)
30+
expect(barSizeSmall.container.firstChild).toHaveAttribute('data-progress-bar-size', 'small')
31+
32+
const barSizeDefault = HTMLRender(<ProgressBar progress={80} barSize="default" aria-label="Upload test.png" />)
33+
expect(barSizeDefault.container.firstChild).toHaveAttribute('data-progress-bar-size', 'default')
34+
35+
const barSizeLarge = HTMLRender(<ProgressBar progress={80} barSize="large" aria-label="Upload test.png" />)
36+
expect(barSizeLarge.container.firstChild).toHaveAttribute('data-progress-bar-size', 'large')
5437
})
5538

5639
it('respects the "inline" prop', () => {
57-
expect(render(<ProgressBar progress={80} inline aria-label="Upload test.png" />)).toHaveStyleRule(
58-
'display',
59-
'inline-flex',
60-
)
61-
})
40+
const {container} = HTMLRender(<ProgressBar progress={80} barSize="small" aria-label="Upload test.png" inline />)
6241

63-
it('respects the "width" prop', () => {
64-
expect(render(<ProgressBar progress={80} inline width="100px" aria-label="Upload test.png" />)).toHaveStyleRule(
65-
'width',
66-
'100px',
67-
)
42+
expect(container.firstChild).toHaveAttribute('data-progress-display', 'inline')
6843
})
6944

7045
it('respects the "progress" prop', () => {

‎packages/react/src/__tests__/__snapshots__/ProgressBar.test.tsx.snap‎

Lines changed: 11 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,28 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`ProgressBar respects the "progress" prop 1`] = `
4-
.c1 {
5-
width: 80%;
6-
background-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
7-
}
8-
94
.c0 {
10-
display: -webkit-box;
11-
display: -webkit-flex;
12-
display: -ms-flexbox;
13-
display: flex;
14-
overflow: hidden;
15-
background-color: var(--borderColor-default,var(--color-border-default,#d0d7de));
16-
border-radius: 3px;
17-
height: 8px;
18-
gap: 2px;
19-
}
20-
21-
@media (prefers-reduced-motion:no-preference) {
22-
.c1[data-animated='true'] {
23-
-webkit-mask-image: linear-gradient(75deg,#000 30%,rgba(0,0,0,0.65) 80%);
24-
mask-image: linear-gradient(75deg,#000 30%,rgba(0,0,0,0.65) 80%);
25-
-webkit-mask-size: 200%;
26-
mask-size: 200%;
27-
-webkit-animation: jiNfbM;
28-
animation: jiNfbM;
29-
-webkit-animation-duration: 1s;
30-
animation-duration: 1s;
31-
-webkit-animation-iteration-count: infinite;
32-
animation-iteration-count: infinite;
33-
}
5+
background-color: var(--bgColor-success-emphasis,var(--color-success-emphasis,#1f883d));
346
}
357
368
<span
37-
className="c0"
9+
className="ProgressBarContainer"
10+
data-progress-bar-size="default"
11+
data-progress-display="block"
3812
>
3913
<span
4014
aria-label="Upload test.png"
4115
aria-valuemax={100}
4216
aria-valuemin={0}
4317
aria-valuenow={80}
44-
className="c1"
18+
className="c0 ProgressBarItem"
4519
role="progressbar"
20+
style={
21+
{
22+
"--progress-bg": "var(--bgColor-success-emphasis)",
23+
"--progress-width": "80%",
24+
}
25+
}
4626
/>
4727
</span>
4828
`;

0 commit comments

Comments
 (0)