From e3662ed6e1d1fe65ac26ab57d6032358c9ccbc0e Mon Sep 17 00:00:00 2001 From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com> Date: Wed, 4 Dec 2024 17:58:22 +0000 Subject: [PATCH 1/7] Create css modules for BaseStyles --- packages/react/src/BaseStyles.module.css | 49 ++++++++++++++++++++++++ packages/react/src/BaseStyles.tsx | 1 - 2 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 packages/react/src/BaseStyles.module.css diff --git a/packages/react/src/BaseStyles.module.css b/packages/react/src/BaseStyles.module.css new file mode 100644 index 00000000000..18c90ea67de --- /dev/null +++ b/packages/react/src/BaseStyles.module.css @@ -0,0 +1,49 @@ +/* stylelint-disable selector-max-specificity */ +/* stylelint-disable selector-type-no-unknown */ + +/* -------------------------------- + * Global Styles + *--------------------------------- */ +* { + box-sizing: border-box; +} + +body { + margin: 0; +} + +table { + border-collapse: collapse; +} + +[role='button']:focus:not(:focus-visible):not(.focus-visible), +[role='tabpanel'][tabindex='0']:focus:not(:focus-visible):not(.focus-visible), +button:focus:not(:focus-visible):not(.focus-visible), +summary:focus:not(:focus-visible):not(.focus-visible), +a:focus:not(:focus-visible):not(.focus-visible) { + outline: none; + box-shadow: none; +} + +[tabindex='0']:focus:not(:focus-visible):not(.focus-visible), +details-dialog:focus:not(:focus-visible):not(.focus-visible) { + outline: none; +} + +/* -------------------------------------------------------------------------- */ + +.BaseStyles { + /* Global styles for light mode */ + &:has([data-color-mode='light']) { + input & { + color-scheme: light; + } + } + + /* Global styles for dark mode */ + &:has([data-color-mode='dark']) { + input & { + color-scheme: dark; + } + } +} diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx index 351c1cb39f2..123c839508b 100644 --- a/packages/react/src/BaseStyles.tsx +++ b/packages/react/src/BaseStyles.tsx @@ -46,7 +46,6 @@ function BaseStyles(props: BaseStylesProps) { * valid color modes for primer/primitives: auto | light | dark * valid color modes for primer/primer: auto | day | night | light | dark */ - return ( Date: Wed, 4 Dec 2024 18:04:31 +0000 Subject: [PATCH 2/7] Convert BaseStyles to CSS modules behind team feature flag --- packages/react/src/BaseStyles.module.css | 1 + packages/react/src/BaseStyles.tsx | 35 ++++++++++++++----- .../react/src/__tests__/BaseStyles.test.tsx | 12 +++++++ 3 files changed, 40 insertions(+), 8 deletions(-) diff --git a/packages/react/src/BaseStyles.module.css b/packages/react/src/BaseStyles.module.css index 18c90ea67de..f1c0e87ec64 100644 --- a/packages/react/src/BaseStyles.module.css +++ b/packages/react/src/BaseStyles.module.css @@ -13,6 +13,7 @@ body { } table { + /* stylelint-disable-next-line primer/borders */ border-collapse: collapse; } diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx index 123c839508b..cf664741a45 100644 --- a/packages/react/src/BaseStyles.tsx +++ b/packages/react/src/BaseStyles.tsx @@ -1,13 +1,19 @@ -import React from 'react' +import React, {type PropsWithChildren} from 'react' +import {clsx} from 'clsx' import styled, {createGlobalStyle} from 'styled-components' import type {SystemCommonProps, SystemTypographyProps} from './constants' import {COMMON, TYPOGRAPHY} from './constants' import {useTheme} from './ThemeProvider' import type {ComponentProps} from './utils/types' +import {useFeatureFlag} from './FeatureFlags' +import {toggleStyledComponent} from './internal/utils/toggleStyledComponent' +import classes from './BaseStyles.module.css' // load polyfill for :focus-visible import 'focus-visible' +const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_team' + const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>` * { box-sizing: border-box; } body { margin: 0; } @@ -29,17 +35,29 @@ const GlobalStyle = createGlobalStyle<{colorScheme?: 'light' | 'dark'}>` } ` -const Base = styled.div` - ${TYPOGRAPHY}; - ${COMMON}; -` +const Base = toggleStyledComponent( + CSS_MODULES_FEATURE_FLAG, + 'div', + styled.div` + ${TYPOGRAPHY}; + ${COMMON}; + `, +) -export type BaseStylesProps = ComponentProps +export type BaseStylesProps = PropsWithChildren & + SystemTypographyProps & + SystemCommonProps & { + className?: string + style?: React.CSSProperties + } function BaseStyles(props: BaseStylesProps) { - const {children, color = 'fg.default', fontFamily = 'normal', lineHeight = 'default', ...rest} = props + const {children, color = 'fg.default', fontFamily = 'normal', lineHeight = 'default', className, ...rest} = props const {colorScheme, dayScheme, nightScheme} = useTheme() + const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG) + + const stylingProps = enabled ? {className: clsx(classes.BaseStyles, className)} : {className} /** * We need to map valid primer/react color modes onto valid color modes for primer/primitives @@ -49,6 +67,7 @@ function BaseStyles(props: BaseStylesProps) { return ( - + {!enabled && } {children} ) diff --git a/packages/react/src/__tests__/BaseStyles.test.tsx b/packages/react/src/__tests__/BaseStyles.test.tsx index e7608955463..8895f46d3d8 100644 --- a/packages/react/src/__tests__/BaseStyles.test.tsx +++ b/packages/react/src/__tests__/BaseStyles.test.tsx @@ -30,4 +30,16 @@ describe('BaseStyles', () => { const {container} = render() expect(container.children[0]).toHaveStyle({color: '#f00', 'font-family': 'Arial', 'line-height': '3.5'}) }) + + it('accepts className and style props', () => { + const styles = { + style: {margin: '10px'}, + className: 'test-classname', + sx: {}, + } + + const {container} = render() + expect(container.children[0]).toHaveClass('test-classname') + expect(container.children[0]).toHaveStyle({margin: '10px'}) + }) }) From 81a7d4b40e86f344a2d72a03da798e829ef3433f Mon Sep 17 00:00:00 2001 From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com> Date: Wed, 4 Dec 2024 18:06:01 +0000 Subject: [PATCH 3/7] Add changeset --- .changeset/grumpy-numbers-eat.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/grumpy-numbers-eat.md diff --git a/.changeset/grumpy-numbers-eat.md b/.changeset/grumpy-numbers-eat.md new file mode 100644 index 00000000000..5b3a723c7e0 --- /dev/null +++ b/.changeset/grumpy-numbers-eat.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Convert BaseStyles to CSS modules behind team feature flag From c3da528176f8fc52c0d5f471d858145dad3d7ab1 Mon Sep 17 00:00:00 2001 From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com> Date: Wed, 4 Dec 2024 20:55:59 +0000 Subject: [PATCH 4/7] Update anchoroverlay snapshot for BaseStyles --- .../__snapshots__/AnchoredOverlay.test.tsx.snap | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap index 38a2450ee5b..f572cbb8e85 100644 --- a/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap @@ -1,12 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AnchoredOverlay should render consistently when open 1`] = ` -.c0 { - font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; - line-height: 1.5; - color: var(--fgColor-default,var(--color-fg-default,#1F2328)); -} - .c2 { -webkit-box-pack: center; -webkit-justify-content: center; @@ -14,6 +8,12 @@ exports[`AnchoredOverlay should render consistently when open 1`] = ` justify-content: center; } +.c0 { + font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; + line-height: 1.5; + color: var(--fgColor-default,var(--color-fg-default,#1F2328)); +} + .c1 { border-radius: 6px; border: 1px solid; From b2cb3579daab01f0c57d2195d515deb6557695cb Mon Sep 17 00:00:00 2001 From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com> Date: Thu, 5 Dec 2024 19:15:11 +0000 Subject: [PATCH 5/7] Fix lint --- packages/react/src/BaseStyles.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx index cf664741a45..3084256dbf1 100644 --- a/packages/react/src/BaseStyles.tsx +++ b/packages/react/src/BaseStyles.tsx @@ -4,7 +4,6 @@ import styled, {createGlobalStyle} from 'styled-components' import type {SystemCommonProps, SystemTypographyProps} from './constants' import {COMMON, TYPOGRAPHY} from './constants' import {useTheme} from './ThemeProvider' -import type {ComponentProps} from './utils/types' import {useFeatureFlag} from './FeatureFlags' import {toggleStyledComponent} from './internal/utils/toggleStyledComponent' import classes from './BaseStyles.module.css' From 9d6dd733d0e16f9e0184831474c76bd4a7de122a Mon Sep 17 00:00:00 2001 From: Stephanie Hong <41085564+JelloBagel@users.noreply.github.com> Date: Thu, 5 Dec 2024 20:03:23 +0000 Subject: [PATCH 6/7] Fix integration regression --- packages/react/src/BaseStyles.tsx | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/react/src/BaseStyles.tsx b/packages/react/src/BaseStyles.tsx index 3084256dbf1..2a5ffb24347 100644 --- a/packages/react/src/BaseStyles.tsx +++ b/packages/react/src/BaseStyles.tsx @@ -1,6 +1,7 @@ -import React, {type PropsWithChildren} from 'react' +import React from 'react' import {clsx} from 'clsx' import styled, {createGlobalStyle} from 'styled-components' +import type {ComponentProps} from './utils/types' import type {SystemCommonProps, SystemTypographyProps} from './constants' import {COMMON, TYPOGRAPHY} from './constants' import {useTheme} from './ThemeProvider' @@ -43,12 +44,7 @@ const Base = toggleStyledComponent( `, ) -export type BaseStylesProps = PropsWithChildren & - SystemTypographyProps & - SystemCommonProps & { - className?: string - style?: React.CSSProperties - } +export type BaseStylesProps = ComponentProps function BaseStyles(props: BaseStylesProps) { const {children, color = 'fg.default', fontFamily = 'normal', lineHeight = 'default', className, ...rest} = props From d91d75674527b02693c99d235623343a068ed87d Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Fri, 6 Dec 2024 23:00:33 +0000 Subject: [PATCH 7/7] Update snapshot to remove unnecessary whitespace --- .../src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap index 23822d94159..b09b34fe96f 100644 --- a/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/AnchoredOverlay.test.tsx.snap @@ -1,7 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`AnchoredOverlay should render consistently when open 1`] = ` - .c0 { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"; line-height: 1.5;