From e24e96f4070220b42559b4bc8558a4e7e391702e Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 25 Sep 2024 13:12:37 -0500 Subject: [PATCH 1/6] refactor(BranchName): update BranchName to use CSS Modules --- e2e/components/BranchName.test.ts | 164 ++++++++---------- .../src/BranchName/BranchName.module.css | 14 ++ packages/react/src/BranchName/BranchName.tsx | 39 ++++- 3 files changed, 122 insertions(+), 95 deletions(-) create mode 100644 packages/react/src/BranchName/BranchName.module.css diff --git a/e2e/components/BranchName.test.ts b/e2e/components/BranchName.test.ts index feb776b3101d..24a7ce821023 100644 --- a/e2e/components/BranchName.test.ts +++ b/e2e/components/BranchName.test.ts @@ -2,110 +2,90 @@ import {test, expect} from '@playwright/test' import {visit} from '../test-helpers/storybook' import {themes} from '../test-helpers/themes' -test.describe('BranchName', () => { - test.describe('Default', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-branchname--default', - globals: { - colorScheme: theme, - }, - }) +const stories = [ + { + title: 'Default', + id: 'components-branchname--default', + focus: true, + }, + { + title: 'Not A Link', + id: 'components-branchname-features--not-a-link', + focus: false, + }, + { + title: 'With A Branch Icon', + id: 'components-branchname-features--with-branch-icon', + focus: false, + }, +] as const - // Default state - expect(await page.screenshot()).toMatchSnapshot(`BranchName.Default.${theme}.png`) +test.describe('BranchName', () => { + for (const story of stories) { + test.describe(story.title, () => { + for (const theme of themes) { + test.describe(theme, () => { + test('default @vrt', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + primer_react_css_modules_team: true, + }, + }) - // Focus state - await page.keyboard.press('Tab') - expect(await page.screenshot()).toMatchSnapshot(`BranchName.Default.${theme}.focus.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.png`) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-branchname--default', - globals: { - colorScheme: theme, - }, + // Focus state + if (story.focus) { + await page.keyboard.press('Tab') + expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.focus.png`) + } }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - test.describe('Not A Link', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-branchname-features--not-a-link', - globals: { - colorScheme: theme, - }, - }) + test('default (styled-components) @vrt', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + primer_react_css_modules_team: false, + }, + }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`BranchName.Not A Link.${theme}.png`) - }) + // Default state + expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.png`) - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-branchname-features--not-a-link', - globals: { - colorScheme: theme, - }, + // Focus state + if (story.focus) { + await page.keyboard.press('Tab') + expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.focus.png`) + } }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - test.describe('With A Branch Icon', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-branchname-features--with-branch-icon', - globals: { - colorScheme: theme, - }, + test('axe @aat', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + primer_react_css_modules_team: true, + }, + }) + await expect(page).toHaveNoViolations() }) - // Default state - expect(await page.screenshot()).toMatchSnapshot(`BranchName.With A Branch Icon.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-branchname-features--with-branch-icon', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', + test('axe (styled-components) @aat', async ({page}) => { + await visit(page, { + id: story.id, + globals: { + colorScheme: theme, + primer_react_css_modules_team: false, }, - }, + }) + await expect(page).toHaveNoViolations() }) }) - }) - } - }) + } + }) + } }) diff --git a/packages/react/src/BranchName/BranchName.module.css b/packages/react/src/BranchName/BranchName.module.css new file mode 100644 index 000000000000..66e9abc2d509 --- /dev/null +++ b/packages/react/src/BranchName/BranchName.module.css @@ -0,0 +1,14 @@ +.BranchName { + display: inline-block; + padding: var(--base-size-2) var(--base-size-6); + font-family: var(--fontStack-monospace); + font-size: var(--text-body-size-small); + color: var(--fgColor-link); + text-decoration: none; + background-color: var(--bgColor-accent-muted); + border-radius: var(--borderRadius-medium); + + &:is(:not(a)) { + color: var(--fgColor-muted); + } +} diff --git a/packages/react/src/BranchName/BranchName.tsx b/packages/react/src/BranchName/BranchName.tsx index 010777c4a2a2..103abdb64177 100644 --- a/packages/react/src/BranchName/BranchName.tsx +++ b/packages/react/src/BranchName/BranchName.tsx @@ -1,10 +1,14 @@ +import {clsx} from 'clsx' import styled from 'styled-components' import {get} from '../constants' import type {SxProp} from '../sx' import sx from '../sx' -import type {ComponentProps} from '../utils/types' +import {useFeatureFlag} from '../FeatureFlags' +import {defaultSxProp} from '../utils/defaultSxProp' +import Box from '../Box' +import classes from './BranchName.module.css' -const BranchName = styled.a` +const StyledBranchName = styled.a` display: inline-block; padding: 2px 6px; font-size: var(--text-body-size-small, ${get('fontSizes.0')}); @@ -19,5 +23,34 @@ const BranchName = styled.a` ${sx}; ` -export type BranchNameProps = ComponentProps +type BranchNameProps = { + as?: As +} & React.ComponentPropsWithoutRef & + SxProp + +function BranchName(props: BranchNameProps) { + const {as: BaseComponent = 'a', className, children, sx = defaultSxProp, ...rest} = props + const enabled = useFeatureFlag('primer_react_css_modules_team') + if (enabled) { + if (sx) { + return ( + + {children} + + ) + } + return ( + + {children} + + ) + } + return ( + + {children} + + ) +} + +export type {BranchNameProps} export default BranchName From 7eba0be83564429baf78af86135926f92012756d Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 25 Sep 2024 13:14:21 -0500 Subject: [PATCH 2/6] chore: add changeset --- .changeset/four-schools-grin.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/four-schools-grin.md diff --git a/.changeset/four-schools-grin.md b/.changeset/four-schools-grin.md new file mode 100644 index 000000000000..72c447d1a85f --- /dev/null +++ b/.changeset/four-schools-grin.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Update BranchName to use CSS Modules behind feature flag From 5ea79c9a172f8cbed652f636f827bc0fd6b07529 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 25 Sep 2024 13:45:47 -0500 Subject: [PATCH 3/6] fix: use sx instead of defaultSxProp --- packages/react/src/BranchName/BranchName.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/react/src/BranchName/BranchName.tsx b/packages/react/src/BranchName/BranchName.tsx index 103abdb64177..b68930daf556 100644 --- a/packages/react/src/BranchName/BranchName.tsx +++ b/packages/react/src/BranchName/BranchName.tsx @@ -1,3 +1,4 @@ +import React from 'react' import {clsx} from 'clsx' import styled from 'styled-components' import {get} from '../constants' @@ -46,7 +47,7 @@ function BranchName(props: BranchNameProps) { ) } return ( - + {children} ) From 97da55d72a249b4a5d18181a79083357d1db8b20 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Wed, 25 Sep 2024 14:07:23 -0500 Subject: [PATCH 4/6] chore: remove defaultSxProp --- packages/react/src/BranchName/BranchName.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/react/src/BranchName/BranchName.tsx b/packages/react/src/BranchName/BranchName.tsx index b68930daf556..e07460191f91 100644 --- a/packages/react/src/BranchName/BranchName.tsx +++ b/packages/react/src/BranchName/BranchName.tsx @@ -5,7 +5,6 @@ import {get} from '../constants' import type {SxProp} from '../sx' import sx from '../sx' import {useFeatureFlag} from '../FeatureFlags' -import {defaultSxProp} from '../utils/defaultSxProp' import Box from '../Box' import classes from './BranchName.module.css' @@ -30,7 +29,7 @@ type BranchNameProps = { SxProp function BranchName(props: BranchNameProps) { - const {as: BaseComponent = 'a', className, children, sx = defaultSxProp, ...rest} = props + const {as: BaseComponent = 'a', className, children, sx, ...rest} = props const enabled = useFeatureFlag('primer_react_css_modules_team') if (enabled) { if (sx) { From dab3c9752b17ca84426a3f695466e2b356cd2111 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 22 Oct 2024 18:44:31 -0700 Subject: [PATCH 5/6] Remove feature flag duplication --- e2e/components/BranchName.test.ts | 32 ------------------------------- 1 file changed, 32 deletions(-) diff --git a/e2e/components/BranchName.test.ts b/e2e/components/BranchName.test.ts index 24a7ce821023..a735fa8ae312 100644 --- a/e2e/components/BranchName.test.ts +++ b/e2e/components/BranchName.test.ts @@ -30,26 +30,6 @@ test.describe('BranchName', () => { id: story.id, globals: { colorScheme: theme, - primer_react_css_modules_team: true, - }, - }) - - // Default state - expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.png`) - - // Focus state - if (story.focus) { - await page.keyboard.press('Tab') - expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.focus.png`) - } - }) - - test('default (styled-components) @vrt', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - primer_react_css_modules_team: false, }, }) @@ -68,18 +48,6 @@ test.describe('BranchName', () => { id: story.id, globals: { colorScheme: theme, - primer_react_css_modules_team: true, - }, - }) - await expect(page).toHaveNoViolations() - }) - - test('axe (styled-components) @aat', async ({page}) => { - await visit(page, { - id: story.id, - globals: { - colorScheme: theme, - primer_react_css_modules_team: false, }, }) await expect(page).toHaveNoViolations() From 9bd1aee4665d7077799c367315351a8a4dc89951 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 22 Oct 2024 18:48:01 -0700 Subject: [PATCH 6/6] Add test for `className` support in `BranchName` --- .../BranchName/__tests__/BranchName.test.tsx | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/react/src/BranchName/__tests__/BranchName.test.tsx b/packages/react/src/BranchName/__tests__/BranchName.test.tsx index 9b533e2ed34c..3687f5911948 100644 --- a/packages/react/src/BranchName/__tests__/BranchName.test.tsx +++ b/packages/react/src/BranchName/__tests__/BranchName.test.tsx @@ -3,6 +3,7 @@ import BranchName from '../BranchName' import {render, behavesAsComponent, checkExports} from '../../utils/testing' import {render as HTMLRender} from '@testing-library/react' import axe from 'axe-core' +import {FeatureFlags} from '../../FeatureFlags' describe('BranchName', () => { behavesAsComponent({Component: BranchName}) @@ -20,4 +21,23 @@ describe('BranchName', () => { it('renders an by default', () => { expect(render().type).toEqual('a') }) + + it('should support `className` on the outermost element', () => { + const Element = () => + const FeatureFlagElement = () => { + return ( + + + + ) + } + expect(HTMLRender().container.firstChild).toHaveClass('test-class-name') + expect(HTMLRender().container.firstChild).toHaveClass('test-class-name') + }) })