Skip to content

Commit ca1642c

Browse files
siddharthkpsiddharthkp
authored
Revert "refactor(BranchName): update BranchName to use CSS Modules (#5028)"
This reverts commit c2dd024.
1 parent 45f3597 commit ca1642c

File tree

4 files changed

+95
-127
lines changed

4 files changed

+95
-127
lines changed

‎.changeset/four-schools-grin.md‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎e2e/components/BranchName.test.ts‎

Lines changed: 92 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -2,90 +2,110 @@ import {test, expect} from '@playwright/test'
22
import {visit} from '../test-helpers/storybook'
33
import {themes} from '../test-helpers/themes'
44

5-
const stories = [
6-
{
7-
title: 'Default',
8-
id: 'components-branchname--default',
9-
focus: true,
10-
},
11-
{
12-
title: 'Not A Link',
13-
id: 'components-branchname-features--not-a-link',
14-
focus: false,
15-
},
16-
{
17-
title: 'With A Branch Icon',
18-
id: 'components-branchname-features--with-branch-icon',
19-
focus: false,
20-
},
21-
] as const
22-
235
test.describe('BranchName', () => {
24-
for (const story of stories) {
25-
test.describe(story.title, () => {
26-
for (const theme of themes) {
27-
test.describe(theme, () => {
28-
test('default @vrt', async ({page}) => {
29-
await visit(page, {
30-
id: story.id,
31-
globals: {
32-
colorScheme: theme,
33-
primer_react_css_modules_team: true,
34-
},
35-
})
6+
test.describe('Default', () => {
7+
for (const theme of themes) {
8+
test.describe(theme, () => {
9+
test('default @vrt', async ({page}) => {
10+
await visit(page, {
11+
id: 'components-branchname--default',
12+
globals: {
13+
colorScheme: theme,
14+
},
15+
})
3616

37-
// Default state
38-
expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.png`)
17+
// Default state
18+
expect(await page.screenshot()).toMatchSnapshot(`BranchName.Default.${theme}.png`)
3919

40-
// Focus state
41-
if (story.focus) {
42-
await page.keyboard.press('Tab')
43-
expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.focus.png`)
44-
}
45-
})
20+
// Focus state
21+
await page.keyboard.press('Tab')
22+
expect(await page.screenshot()).toMatchSnapshot(`BranchName.Default.${theme}.focus.png`)
23+
})
4624

47-
test('default (styled-components) @vrt', async ({page}) => {
48-
await visit(page, {
49-
id: story.id,
50-
globals: {
51-
colorScheme: theme,
52-
primer_react_css_modules_team: false,
25+
test('axe @aat', async ({page}) => {
26+
await visit(page, {
27+
id: 'components-branchname--default',
28+
globals: {
29+
colorScheme: theme,
30+
},
31+
})
32+
await expect(page).toHaveNoViolations({
33+
rules: {
34+
'color-contrast': {
35+
enabled: theme !== 'dark_dimmed',
5336
},
54-
})
55-
56-
// Default state
57-
expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.png`)
37+
},
38+
})
39+
})
40+
})
41+
}
42+
})
5843

59-
// Focus state
60-
if (story.focus) {
61-
await page.keyboard.press('Tab')
62-
expect(await page.screenshot()).toMatchSnapshot(`BranchName.${story.title}.${theme}.focus.png`)
63-
}
44+
test.describe('Not A Link', () => {
45+
for (const theme of themes) {
46+
test.describe(theme, () => {
47+
test('default @vrt', async ({page}) => {
48+
await visit(page, {
49+
id: 'components-branchname-features--not-a-link',
50+
globals: {
51+
colorScheme: theme,
52+
},
6453
})
6554

66-
test('axe @aat', async ({page}) => {
67-
await visit(page, {
68-
id: story.id,
69-
globals: {
70-
colorScheme: theme,
71-
primer_react_css_modules_team: true,
55+
// Default state
56+
expect(await page.screenshot()).toMatchSnapshot(`BranchName.Not A Link.${theme}.png`)
57+
})
58+
59+
test('axe @aat', async ({page}) => {
60+
await visit(page, {
61+
id: 'components-branchname-features--not-a-link',
62+
globals: {
63+
colorScheme: theme,
64+
},
65+
})
66+
await expect(page).toHaveNoViolations({
67+
rules: {
68+
'color-contrast': {
69+
enabled: theme !== 'dark_dimmed',
7270
},
73-
})
74-
await expect(page).toHaveNoViolations()
71+
},
7572
})
73+
})
74+
})
75+
}
76+
})
7677

77-
test('axe (styled-components) @aat', async ({page}) => {
78-
await visit(page, {
79-
id: story.id,
80-
globals: {
81-
colorScheme: theme,
82-
primer_react_css_modules_team: false,
78+
test.describe('With A Branch Icon', () => {
79+
for (const theme of themes) {
80+
test.describe(theme, () => {
81+
test('default @vrt', async ({page}) => {
82+
await visit(page, {
83+
id: 'components-branchname-features--with-branch-icon',
84+
globals: {
85+
colorScheme: theme,
86+
},
87+
})
88+
89+
// Default state
90+
expect(await page.screenshot()).toMatchSnapshot(`BranchName.With A Branch Icon.${theme}.png`)
91+
})
92+
93+
test('axe @aat', async ({page}) => {
94+
await visit(page, {
95+
id: 'components-branchname-features--with-branch-icon',
96+
globals: {
97+
colorScheme: theme,
98+
},
99+
})
100+
await expect(page).toHaveNoViolations({
101+
rules: {
102+
'color-contrast': {
103+
enabled: theme !== 'dark_dimmed',
83104
},
84-
})
85-
await expect(page).toHaveNoViolations()
105+
},
86106
})
87107
})
88-
}
89-
})
90-
}
108+
})
109+
}
110+
})
91111
})

‎packages/react/src/BranchName/BranchName.module.css‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎packages/react/src/BranchName/BranchName.tsx‎

Lines changed: 3 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
1-
import React from 'react'
2-
import {clsx} from 'clsx'
31
import styled from 'styled-components'
42
import {get} from '../constants'
53
import type {SxProp} from '../sx'
64
import sx from '../sx'
7-
import {useFeatureFlag} from '../FeatureFlags'
8-
import Box from '../Box'
9-
import classes from './BranchName.module.css'
5+
import type {ComponentProps} from '../utils/types'
106

11-
const StyledBranchName = styled.a<SxProp>`
7+
const BranchName = styled.a<SxProp>`
128
display: inline-block;
139
padding: 2px 6px;
1410
font-size: var(--text-body-size-small, ${get('fontSizes.0')});
@@ -23,34 +19,5 @@ const StyledBranchName = styled.a<SxProp>`
2319
${sx};
2420
`
2521

26-
type BranchNameProps<As extends React.ElementType> = {
27-
as?: As
28-
} & React.ComponentPropsWithoutRef<React.ElementType extends As ? 'a' : As> &
29-
SxProp
30-
31-
function BranchName<As extends React.ElementType>(props: BranchNameProps<As>) {
32-
const {as: BaseComponent = 'a', className, children, sx, ...rest} = props
33-
const enabled = useFeatureFlag('primer_react_css_modules_team')
34-
if (enabled) {
35-
if (sx) {
36-
return (
37-
<Box {...rest} as={BaseComponent} className={clsx(className, classes.BranchName)} sx={sx}>
38-
{children}
39-
</Box>
40-
)
41-
}
42-
return (
43-
<BaseComponent {...rest} className={clsx(className, classes.BranchName)}>
44-
{children}
45-
</BaseComponent>
46-
)
47-
}
48-
return (
49-
<StyledBranchName {...rest} as={BaseComponent} className={className} sx={sx}>
50-
{children}
51-
</StyledBranchName>
52-
)
53-
}
54-
55-
export type {BranchNameProps}
22+
export type BranchNameProps = ComponentProps<typeof BranchName>
5623
export default BranchName

0 commit comments

Comments
 (0)