From 02d173339a7fa747b038e99925f135f326fcc90d Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 28 Aug 2024 18:42:31 +0000 Subject: [PATCH 01/10] Convert Label to css modules --- e2e/components/Label.test.ts | 914 ++++++++++-------- .../react/src/Label/Label.dev.stories.tsx | 15 + .../src/Label/Label.features.stories.tsx | 6 + packages/react/src/Label/Label.module.css | 68 ++ packages/react/src/Label/Label.stories.tsx | 19 + packages/react/src/Label/Label.tsx | 25 +- 6 files changed, 629 insertions(+), 418 deletions(-) create mode 100644 packages/react/src/Label/Label.dev.stories.tsx create mode 100644 packages/react/src/Label/Label.module.css diff --git a/e2e/components/Label.test.ts b/e2e/components/Label.test.ts index b28b9f7fffb..cc7846e72ad 100644 --- a/e2e/components/Label.test.ts +++ b/e2e/components/Label.test.ts @@ -3,445 +3,527 @@ import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' test.describe('Label', () => { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label--default', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Default.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label--default', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + for (const enabled of [true, false]) { + test.describe(`Feature flag enabled: ${enabled}`, () => { + test.describe('Default', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label--default', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Default.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label--default', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } }) - } - }) - - test.describe('Playground', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label--playground', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Playground.${theme}.png`) - }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label--playground', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test.describe('Playground', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label--playground', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Playground.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label--playground', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } }) - } - }) - - test.describe('Accent', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--accent', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Accent.${theme}.png`) - }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--accent', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test.describe('Accent', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--accent', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Accent.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--accent', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } }) - } - }) - - test.describe('Attention', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--attention', - globals: { - colorScheme: theme, - }, - }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Attention.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--attention', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test.describe('Attention', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--attention', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Attention.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--attention', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } }) - } - }) - - test.describe('Danger', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--danger', - globals: { - colorScheme: theme, - }, - }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Danger.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--danger', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test.describe('Danger', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--danger', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Danger.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--danger', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } }) - } - }) - - test.describe('Done', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--done', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Done.${theme}.png`) - }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--done', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test.describe('Done', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--done', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Done.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--done', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } }) - } - }) - - test.describe('Primary', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--primary', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Primary.${theme}.png`) - }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--primary', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test.describe('Primary', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--primary', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Primary.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--primary', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } }) - } - }) - - test.describe('Secondary', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--secondary', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Secondary.${theme}.png`) - }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--secondary', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test.describe('Secondary', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--secondary', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Secondary.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--secondary', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } }) - } - }) - - test.describe('Severe', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--severe', - globals: { - colorScheme: theme, - }, - }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Severe.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--severe', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test.describe('Severe', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--severe', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Severe.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--severe', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } }) - } - }) - - test.describe('Size Large', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--size-large', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Size Large.${theme}.png`) - }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--size-large', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test.describe('Size Large', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--size-large', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Size Large.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--size-large', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } }) - } - }) - - test.describe('Size Small', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--size-small', - globals: { - colorScheme: theme, - }, - }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Size Small.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--size-small', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test.describe('Size Small', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--size-small', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Size Small.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--size-small', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } }) - } - }) - - test.describe('Sponsors', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--sponsors', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Sponsors.${theme}.png`) - }) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--sponsors', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test.describe('Sponsors', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--sponsors', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Sponsors.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--sponsors', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } }) - } - }) - - test.describe('Success', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-label-features--success', - globals: { - colorScheme: theme, - }, - }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`Label.Success.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-label-features--success', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) + test.describe('Success', () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: 'components-label-features--success', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + + // Default state + expect(await page.screenshot()).toMatchSnapshot(`Label.Success.${theme}.png`) + }) + + test('axe @aat', async ({page}) => { + await visit(page, { + id: 'components-label-features--success', + globals: { + colorScheme: theme, + featureFlags: { + primer_react_css_modules_team: enabled, + }, + }, + }) + await expect(page).toHaveNoViolations({ + rules: { + 'color-contrast': { + enabled: theme !== 'dark_dimmed', + }, + }, + }) + }) + }) + } }) - } - }) + }) + } }) diff --git a/packages/react/src/Label/Label.dev.stories.tsx b/packages/react/src/Label/Label.dev.stories.tsx new file mode 100644 index 00000000000..f7963cdc2cb --- /dev/null +++ b/packages/react/src/Label/Label.dev.stories.tsx @@ -0,0 +1,15 @@ +import React from 'react' +import type {Meta} from '@storybook/react' +import type {ComponentProps} from '../utils/types' +import Label from './Label' + +export default { + title: 'Components/Label/Dev', + component: Label, +} as Meta> + +export const AccentSx = () => ( + +) diff --git a/packages/react/src/Label/Label.features.stories.tsx b/packages/react/src/Label/Label.features.stories.tsx index 50f29c3c89b..de64cf62dca 100644 --- a/packages/react/src/Label/Label.features.stories.tsx +++ b/packages/react/src/Label/Label.features.stories.tsx @@ -29,3 +29,9 @@ export const Sponsors = () => export const SizeLarge = () => export const SizeSmall = () => + +export const SizeSmallSx = () => ( + +) diff --git a/packages/react/src/Label/Label.module.css b/packages/react/src/Label/Label.module.css new file mode 100644 index 00000000000..ed6ceba4f42 --- /dev/null +++ b/packages/react/src/Label/Label.module.css @@ -0,0 +1,68 @@ +:where(.Label) { + display: inline-flex; + font-size: var(--text-body-size-small); + font-weight: var(--base-text-weight-semibold); + line-height: 1; + color: var(--fgColor-default); + white-space: nowrap; + background-color: transparent; + border-style: solid; + border-width: var(--borderWidth-thin); + border-radius: var(--borderRadius-full); + align-items: center; + + &:where([data-size='small']) { + height: var(--base-size-20); + padding: 0 var(--base-size-6); + } + + &:where([data-size='large']) { + height: var(--base-size-24); + padding: 0 var(--base-size-8); + } + + &:where([data-variant='default']), + &:where([data-variant='primary']) { + border-color: var(--borderColor-default); + } + + &:where([data-variant='secondary']) { + color: var(--fgColor-muted); + border-color: var(--borderColor-muted); + } + + &:where([data-variant='accent']) { + color: var(--fgColor-accent); + border-color: var(--borderColor-accent-emphasis); + } + + &:where([data-variant='success']) { + color: var(--fgColor-success); + border-color: var(--borderColor-success-emphasis); + } + + &:where([data-variant='attention']) { + color: var(--fgColor-attention); + border-color: var(--borderColor-attention-emphasis); + } + + &:where([data-variant='severe']) { + color: var(--fgColor-severe); + border-color: var(--borderColor-severe-emphasis); + } + + &:where([data-variant='danger']) { + color: var(--fgColor-danger); + border-color: var(--borderColor-danger-emphasis); + } + + &:where([data-variant='done']) { + color: var(--fgColor-done); + border-color: var(--borderColor-done-emphasis); + } + + &:where([data-variant='sponsors']) { + color: var(--fgColor-sponsors); + border-color: var(--borderColor-sponsors-emphasis); + } +} diff --git a/packages/react/src/Label/Label.stories.tsx b/packages/react/src/Label/Label.stories.tsx index e1cd73742e1..a8fb009fee8 100644 --- a/packages/react/src/Label/Label.stories.tsx +++ b/packages/react/src/Label/Label.stories.tsx @@ -15,6 +15,25 @@ Playground.args = { size: 'small', } Playground.argTypes = { + variant: { + options: [ + 'default', + 'primary', + 'secondary', + 'accent', + 'success', + 'attention', + 'severe', + 'danger', + 'done', + 'sponsors', + ], + control: {type: 'inline-radio'}, + }, + size: { + options: ['small', 'large'], + control: {type: 'inline-radio'}, + }, ref: { control: false, table: { diff --git a/packages/react/src/Label/Label.tsx b/packages/react/src/Label/Label.tsx index 701c0f48287..178f4a81f5f 100644 --- a/packages/react/src/Label/Label.tsx +++ b/packages/react/src/Label/Label.tsx @@ -1,3 +1,7 @@ +import cx from 'clsx' +import {useFeatureFlag} from '../FeatureFlags' +import Box from '../Box' +import classes from './Label.module.css' import React from 'react' import styled from 'styled-components' import {variant} from 'styled-system' @@ -95,8 +99,25 @@ const StyledLabel = styled.span` ${sx}; ` -const Label = React.forwardRef(function Label({as, size = 'small', variant = 'default', ...rest}, ref) { - return +const Label = React.forwardRef(function Label({as, size = 'small', variant = 'default', className, ...rest}, ref) { + const enabled = useFeatureFlag('primer_react_css_modules_team') + if (enabled) { + const Component = as || 'span' + if (rest.sx) { + return ( + + ) + } + return + } + return }) as PolymorphicForwardRefComponent<'span', LabelProps> export default Label From 1178e0f5d639aff80f36511f60900ce3d1e6e419 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 28 Aug 2024 18:51:25 +0000 Subject: [PATCH 02/10] Align padding --- packages/react/src/Label/Label.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/src/Label/Label.tsx b/packages/react/src/Label/Label.tsx index 178f4a81f5f..e9105bd0acb 100644 --- a/packages/react/src/Label/Label.tsx +++ b/packages/react/src/Label/Label.tsx @@ -74,12 +74,12 @@ export const variants: Record = { const sizes: Record = { small: { - height: '20px', - padding: '0 7px', // hard-coded to align with Primer ViewComponents and Primer CSS + height: 'var(--base-size-20, 20px)', + padding: '0 var(--base-size-6, 6px)', }, large: { - height: '24px', - padding: '0 10px', // hard-coded to align with Primer ViewComponents and Primer CSS + height: 'var(--base-size-24, 24px)', + padding: '0 var(--base-size-8, 8px)', }, } From 8aae83e6a28c172caed1b4d4ec62b53ea8719c02 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 3 Sep 2024 09:29:32 -0700 Subject: [PATCH 03/10] Create purple-apricots-relax.md --- .changeset/purple-apricots-relax.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/purple-apricots-relax.md diff --git a/.changeset/purple-apricots-relax.md b/.changeset/purple-apricots-relax.md new file mode 100644 index 00000000000..c98c9a4c21a --- /dev/null +++ b/.changeset/purple-apricots-relax.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Refactor Label to use CSS modules behind the primer_react_css_modules_team feature flag From 84c7dd4dc0423f3656a75436ab14ab4453871643 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 4 Sep 2024 21:51:03 +0000 Subject: [PATCH 04/10] Adjust font-weight variable --- packages/react/src/Label/Label.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/Label/Label.module.css b/packages/react/src/Label/Label.module.css index ed6ceba4f42..691f9bb46b1 100644 --- a/packages/react/src/Label/Label.module.css +++ b/packages/react/src/Label/Label.module.css @@ -1,7 +1,7 @@ :where(.Label) { display: inline-flex; font-size: var(--text-body-size-small); - font-weight: var(--base-text-weight-semibold); + font-weight: var(--base-text-weight-medium); line-height: 1; color: var(--fgColor-default); white-space: nowrap; From 8fe61906abeec685b06e84ab576c68d0e593e70e Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 4 Sep 2024 21:58:10 +0000 Subject: [PATCH 05/10] Fix lint --- packages/react/src/Label/Label.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/Label/Label.tsx b/packages/react/src/Label/Label.tsx index e9105bd0acb..1daca76fd4a 100644 --- a/packages/react/src/Label/Label.tsx +++ b/packages/react/src/Label/Label.tsx @@ -1,4 +1,4 @@ -import cx from 'clsx' +import {clsx} from 'clsx' import {useFeatureFlag} from '../FeatureFlags' import Box from '../Box' import classes from './Label.module.css' @@ -107,7 +107,7 @@ const Label = React.forwardRef(function Label({as, size = 'small', variant = 'de return ( From 12a3f3f0d6a9f72fa3b0243c382b888d1276b152 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Wed, 4 Sep 2024 21:58:21 +0000 Subject: [PATCH 06/10] Adjust expected styles --- packages/react/src/__tests__/Label.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react/src/__tests__/Label.test.tsx b/packages/react/src/__tests__/Label.test.tsx index 940726e534d..ec4550880e7 100644 --- a/packages/react/src/__tests__/Label.test.tsx +++ b/packages/react/src/__tests__/Label.test.tsx @@ -13,8 +13,8 @@ describe('Label', () => { }) it('default size is rendered as "small"', () => { const expectedStyles = { - height: '20px', - padding: '0 7px', + height: 'var(--base-size-20,20px)', + padding: '0 var(--base-size-6,6px)', } const defaultStyles = renderStyles(