Skip to content

Commit dd2a649

Browse files
jonrohanjonrohan
committed
chore: update BaseStyles component to remove CSS modules feature flag and enhance storybook tests
1 parent 08c8700 commit dd2a649

File tree

6 files changed

+81
-126
lines changed

6 files changed

+81
-126
lines changed

‎.changeset/cuddly-facts-speak.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 BaseStyles component

‎e2e/components/BaseStyles.test.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,18 @@ const stories = [
77
id: 'behaviors-basestyles-dev--default',
88
title: 'Dev Default',
99
},
10+
{
11+
id: 'behaviors-basestyles-dev--with-style-props',
12+
title: 'Dev With Style Props',
13+
},
14+
{
15+
id: 'behaviors-basestyles-dev--with-sx-props',
16+
title: 'Dev With Sx Props',
17+
},
18+
{
19+
id: 'behaviors-basestyles-dev--with-system-props',
20+
title: 'Dev With System Props',
21+
},
1022
] as const
1123

1224
test.describe('BaseStyles', () => {

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,43 @@
11
import {BaseStyles} from '.'
22
import type {Meta} from '@storybook/react'
33
import type {ComponentProps} from './utils/types'
4+
import React from 'react'
45

56
export default {
67
title: 'Behaviors/BaseStyles/Dev',
78
component: BaseStyles,
89
} as Meta<ComponentProps<typeof BaseStyles>>
910

1011
export const Default = () => 'Hello'
12+
13+
export const WithSxProps = () => (
14+
<BaseStyles
15+
sx={{
16+
color: 'red',
17+
backgroundColor: 'blue',
18+
fontFamily: 'Arial',
19+
lineHeight: '1.5',
20+
}}
21+
>
22+
Hello
23+
</BaseStyles>
24+
)
25+
26+
export const WithSystemProps = () => (
27+
<BaseStyles color="red" backgroundColor="blue" fontFamily="Arial" fontSize="14px" lineHeight="1.5" display="flex">
28+
Hello
29+
</BaseStyles>
30+
)
31+
32+
export const WithStyleProps = () => (
33+
<BaseStyles
34+
style={{
35+
color: 'red',
36+
backgroundColor: 'blue',
37+
fontFamily: 'Arial',
38+
lineHeight: '1.5',
39+
}}
40+
>
41+
Hello
42+
</BaseStyles>
43+
)

‎packages/react/src/BaseStyles.tsx‎

Lines changed: 24 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,13 @@
11
import React, {type CSSProperties, type PropsWithChildren} from 'react'
22
import {clsx} from 'clsx'
3-
import styled, {createGlobalStyle} from 'styled-components'
43
import type {SystemCommonProps, SystemTypographyProps} from './constants'
5-
import {COMMON, TYPOGRAPHY} from './constants'
64
import {useTheme} from './ThemeProvider'
7-
import {useFeatureFlag} from './FeatureFlags'
8-
import Box from './Box'
95
import type {SxProp} from './sx'
10-
import {includesSystemProps, getTypographyAndCommonProps} from './utils/includeSystemProps'
116

127
import classes from './BaseStyles.module.css'
138

14-
// load polyfill for :focus-visible
159
import 'focus-visible'
16-
17-
const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
18-
19-
const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>`
20-
* { box-sizing: border-box; }
21-
body { margin: 0; }
22-
table { border-collapse: collapse; }
23-
input { color-scheme: ${props => props.colorScheme}; }
24-
25-
[role="button"]:focus:not(:focus-visible):not(.focus-visible),
26-
[role="tabpanel"][tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
27-
button:focus:not(:focus-visible):not(.focus-visible),
28-
summary:focus:not(:focus-visible):not(.focus-visible),
29-
a:focus:not(:focus-visible):not(.focus-visible) {
30-
outline: none;
31-
box-shadow: none;
32-
}
33-
34-
[tabindex="0"]:focus:not(:focus-visible):not(.focus-visible),
35-
details-dialog:focus:not(:focus-visible):not(.focus-visible) {
36-
outline: none;
37-
}
38-
`
39-
40-
const StyledDiv = styled.div<SystemTypographyProps & SystemCommonProps>`
41-
${TYPOGRAPHY};
42-
${COMMON};
43-
`
10+
import {BoxWithFallback} from './internal/components/BoxWithFallback'
4411

4512
export type BaseStylesProps = PropsWithChildren & {
4613
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -52,77 +19,29 @@ export type BaseStylesProps = PropsWithChildren & {
5219
SystemCommonProps &
5320
SxProp
5421

55-
function BaseStyles(props: BaseStylesProps) {
56-
const {children, color, fontFamily, lineHeight, className, as: Component = 'div', style, ...rest} = props
22+
function BaseStyles({
23+
children,
24+
color,
25+
fontFamily,
26+
lineHeight,
27+
className,
28+
as: Component = 'div',
29+
style,
30+
...rest
31+
}: BaseStylesProps) {
5732
const {colorMode, colorScheme, dayScheme, nightScheme} = useTheme()
58-
const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG)
59-
60-
if (enabled) {
61-
const newClassName = clsx(classes.BaseStyles, className)
62-
const baseStyles = {
63-
['--BaseStyles-fgColor']: color,
64-
['--BaseStyles-fontFamily']: fontFamily,
65-
['--BaseStyles-lineHeight']: lineHeight,
66-
}
67-
68-
// If props includes TYPOGRAPHY or COMMON props, pass them to the Box component
69-
if (includesSystemProps(props)) {
70-
const systemProps = getTypographyAndCommonProps(props)
71-
return (
72-
// @ts-ignore shh
73-
<Box
74-
as={Component}
75-
className={newClassName}
76-
data-portal-root
77-
/**
78-
* We need to map valid primer/react color modes onto valid color modes for primer/primitives
79-
* valid color modes for primer/primitives: auto | light | dark
80-
* valid color modes for primer/primer: auto | day | night | light | dark
81-
*/
82-
data-color-mode={colorMode === 'auto' ? 'auto' : colorScheme?.includes('dark') ? 'dark' : 'light'}
83-
data-light-theme={dayScheme}
84-
data-dark-theme={nightScheme}
85-
style={{
86-
...systemProps,
87-
...baseStyles,
88-
...style,
89-
}}
90-
{...rest}
91-
>
92-
{children}
93-
</Box>
94-
)
95-
}
9633

97-
return (
98-
<Component
99-
className={newClassName}
100-
data-portal-root
101-
/**
102-
* We need to map valid primer/react color modes onto valid color modes for primer/primitives
103-
* valid color modes for primer/primitives: auto | light | dark
104-
* valid color modes for primer/primer: auto | day | night | light | dark
105-
*/
106-
data-color-mode={colorMode === 'auto' ? 'auto' : colorScheme?.includes('dark') ? 'dark' : 'light'}
107-
data-light-theme={dayScheme}
108-
data-dark-theme={nightScheme}
109-
style={{
110-
...baseStyles,
111-
...style,
112-
}}
113-
{...rest}
114-
>
115-
{children}
116-
</Component>
117-
)
34+
const newClassName = clsx(classes.BaseStyles, className)
35+
const baseStyles = {
36+
['--BaseStyles-fgColor']: color,
37+
['--BaseStyles-fontFamily']: fontFamily,
38+
['--BaseStyles-lineHeight']: lineHeight,
11839
}
11940

12041
return (
121-
<StyledDiv
122-
className={className}
123-
color={color ?? 'var(--fgColor-default)'}
124-
fontFamily={fontFamily ?? 'normal'}
125-
lineHeight={lineHeight ?? 'default'}
42+
<BoxWithFallback
43+
as={Component}
44+
className={newClassName}
12645
data-portal-root
12746
/**
12847
* We need to map valid primer/react color modes onto valid color modes for primer/primitives
@@ -132,12 +51,14 @@ function BaseStyles(props: BaseStylesProps) {
13251
data-color-mode={colorMode === 'auto' ? 'auto' : colorScheme?.includes('dark') ? 'dark' : 'light'}
13352
data-light-theme={dayScheme}
13453
data-dark-theme={nightScheme}
135-
style={style}
54+
style={{
55+
...baseStyles,
56+
...style,
57+
}}
13658
{...rest}
13759
>
138-
<GlobalStyle colorScheme={colorScheme?.includes('dark') ? 'dark' : 'light'} />
13960
{children}
140-
</StyledDiv>
61+
</BoxWithFallback>
14162
)
14263
}
14364

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

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,6 @@
22

33
exports[`AnchoredOverlay should render consistently when open 1`] = `
44
.c0 {
5-
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
6-
line-height: 1.5;
7-
color: var(--fgColor-default);
8-
}
9-
10-
.c1 {
115
background-color: var(--overlay-bgColor,var(--color-canvas-overlay,#ffffff));
126
box-shadow: var(--shadow-floating-small,var(--color-overlay-shadow,0 1px 3px rgba(31,35,40,0.12),0 8px 24px rgba(66,74,83,0.12)));
137
position: absolute;
@@ -22,22 +16,22 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
2216
visibility: var(--styled-overlay-visibility);
2317
}
2418
25-
.c1:focus {
19+
.c0:focus {
2620
outline: none;
2721
}
2822
29-
.c1[data-reflow-container='true'] {
23+
.c0[data-reflow-container='true'] {
3024
max-width: calc(100vw - 2rem);
3125
}
3226
3327
@media (forced-colors:active) {
34-
.c1 {
28+
.c0 {
3529
outline: solid 1px transparent;
3630
}
3731
}
3832
3933
@media screen and (max-width:calc(768px - 0.02px)) {
40-
.c1:where([data-responsive='fullscreen']) {
34+
.c0:where([data-responsive='fullscreen']) {
4135
position: fixed;
4236
top: 0;
4337
left: 0;
@@ -50,13 +44,11 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
5044
5145
<div>
5246
<div
53-
class="c0"
54-
color="var(--fgColor-default)"
47+
class="BaseStyles"
5548
data-color-mode="light"
5649
data-dark-theme="dark"
5750
data-light-theme="light"
5851
data-portal-root="true"
59-
font-family="normal"
6052
>
6153
<button
6254
aria-describedby=":rj:-loading-announcement"
@@ -92,7 +84,7 @@ exports[`AnchoredOverlay should render consistently when open 1`] = `
9284
style="position: relative; z-index: 1;"
9385
>
9486
<div
95-
class="c1"
87+
class="c0"
9688
data-focus-trap="active"
9789
data-variant="anchored"
9890
height="auto"

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

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,11 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`BaseStyles has default styles 1`] = `
4-
.c0 {
5-
font-family: normal;
6-
line-height: default;
7-
color: var(--fgColor-default);
8-
}
9-
104
<div>
115
<div
12-
class="c0"
13-
color="var(--fgColor-default)"
6+
class="BaseStyles"
147
data-color-mode="light"
158
data-portal-root="true"
16-
font-family="normal"
179
>
1810
Hello
1911
</div>

0 commit comments

Comments
 (0)