Skip to content

Commit

Permalink
Remove the CSS modules feature flag
Browse files Browse the repository at this point in the history
  • Loading branch information
@jonrohan
jonrohan committed Nov 27, 2024
1 parent 1d79cc5 commit 58a164f
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 197 deletions.
163 changes: 52 additions & 111 deletions e2e/components/ButtonGroup.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,116 +2,57 @@ import {test, expect} from '@playwright/test'
import {visit} from '../test-helpers/storybook'
import {themes} from '../test-helpers/themes'

test.describe('ButtonGroup', () => {
test.describe('Default', () => {
for (const theme of themes) {
test.describe(theme, () => {
test('default @vrt', async ({page}) => {
await visit(page, {
id: 'components-buttongroup--default',
globals: {
colorScheme: theme,
},
})

// Default state
expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Default.${theme}.png`)
})

test('axe @aat', async ({page}) => {
await visit(page, {
id: 'components-buttongroup--default',
globals: {
colorScheme: theme,
},
})
await expect(page).toHaveNoViolations()
})
})
}
})

test.describe('Playground', () => {
for (const theme of themes) {
test.describe(theme, () => {
test('default @vrt', async ({page}) => {
await visit(page, {
id: 'components-buttongroup--playground',
globals: {
colorScheme: theme,
},
})

// Default state
expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Playground.${theme}.png`)
})

test('axe @aat', async ({page}) => {
await visit(page, {
id: 'components-buttongroup--playground',
globals: {
colorScheme: theme,
},
})
await expect(page).toHaveNoViolations()
})
})
}
})
const stories = [
{
title: 'Default',
id: 'components-buttongroup--default',
},
{
title: 'Playground',
id: 'components-buttongroup--playground',
},
{
title: 'Icon Buttons',
id: 'components-buttongroup-features--icon-buttons',
},
{
title: 'As Toolbar',
id: 'components-buttongroup-features--as-toolbar',
},
{
title: 'SX Prop',
id: 'components-buttongroup-dev--sx-prop',
},
] as const

test.describe('Icon Buttons', () => {
for (const theme of themes) {
test.describe(theme, () => {
test('default @vrt', async ({page}) => {
await visit(page, {
id: 'components-buttongroup-features--icon-buttons',
globals: {
colorScheme: theme,
},
})

// Default state
expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.Icon Buttons.${theme}.png`)
})

test('axe @aat', async ({page}) => {
await visit(page, {
id: 'components-buttongroup-features--icon-buttons',
globals: {
colorScheme: theme,
},
})
await expect(page).toHaveNoViolations()
})
})
}
})

test.describe('As Toolbar', () => {
for (const theme of themes) {
test.describe(theme, () => {
test('default @vrt', async ({page}) => {
await visit(page, {
id: 'components-buttongroup-features--as-toolbar',
globals: {
colorScheme: theme,
},
})

// Default state
expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.As Toolbar.${theme}.png`)
})

test('axe @aat', async ({page}) => {
await visit(page, {
id: 'components-buttongroup-features--as-toolbar',
globals: {
colorScheme: theme,
},
})
await expect(page).toHaveNoViolations()
})
})
}
})
test.describe('ButtonGroup', () => {
for (const story of stories) {
test.describe(story.title, () => {
for (const theme of themes) {
test.describe(theme, () => {
test('@vrt', async ({page}) => {
await visit(page, {
id: story.id,
globals: {
colorScheme: theme,
},
})

// Default state
expect(await page.screenshot()).toMatchSnapshot(`ButtonGroup.${story.title}.${theme}.png`)
})

test('axe @aat', async ({page}) => {
await visit(page, {
id: story.id,
globals: {
colorScheme: theme,
},
})
await expect(page).toHaveNoViolations()
})
})
}
})
}
})
17 changes: 17 additions & 0 deletions packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from 'react'
import type {Meta} from '@storybook/react'
import ButtonGroup from './ButtonGroup'
import {Button} from '../Button'

export default {
title: 'Components/ButtonGroup/Dev',
component: ButtonGroup,
} as Meta<typeof ButtonGroup>

export const SxProp = () => (
<ButtonGroup sx={{border: '1px solid red'}}>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</ButtonGroup>
)
103 changes: 17 additions & 86 deletions packages/react/src/ButtonGroup/ButtonGroup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,24 @@
import styled from 'styled-components'
import React from 'react'
import {get} from '../constants'
import sx from '../sx'
import type {ComponentProps} from '../utils/types'
import classes from './ButtonGroup.module.css'
import {toggleStyledComponent} from '../internal/utils/toggleStyledComponent'
import {clsx} from 'clsx'
import {useFeatureFlag} from '../FeatureFlags'
import {FocusKeys, useFocusZone} from '../hooks/useFocusZone'
import {useProvidedRefOrCreate} from '../hooks'
import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
import {defaultSxProp} from '../utils/defaultSxProp'
import Box from '../Box'
import type {SxProp} from '../sx'

const StyledButtonGroup = toggleStyledComponent(
'primer_react_css_modules_ga',
'div',
styled.div`
display: inline-flex;
vertical-align: middle;
isolation: isolate;
&& > *:not([data-loading-wrapper]) {
margin-inline-end: -1px;
position: relative;
border-radius: 0;
:first-child {
border-top-left-radius: ${get('radii.2')};
border-bottom-left-radius: ${get('radii.2')};
}
:last-child {
border-top-right-radius: ${get('radii.2')};
border-bottom-right-radius: ${get('radii.2')};
}
:focus,
:active,
:hover {
z-index: 1;
}
}
// if child is loading button
[data-loading-wrapper] {
:first-child {
button,
a {
border-top-left-radius: ${get('radii.2')};
border-bottom-left-radius: ${get('radii.2')};
}
}
:last-child {
button,
a {
border-top-right-radius: ${get('radii.2')};
border-bottom-right-radius: ${get('radii.2')};
}
}
}
[data-loading-wrapper] > * {
margin-inline-end: -1px;
position: relative;
border-radius: 0;
:focus,
:active,
:hover {
z-index: 1;
}
}
${sx};
`,
)

export type ButtonGroupProps = ComponentProps<typeof StyledButtonGroup>
export type ButtonGroupProps = {
/** The role of the group */
role?: string
/** className passed in for styling */
className?: string
} & SxProp

const ButtonGroup = React.forwardRef<HTMLElement, ButtonGroupProps>(function ButtonGroup(
{children, className, role, ...rest},
{className, role, sx, ...rest},
forwardRef,
) {
const enabled = useFeatureFlag('primer_react_css_modules_ga')
const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject<HTMLDivElement>)

useFocusZone({
Expand All @@ -92,18 +28,13 @@ const ButtonGroup = React.forwardRef<HTMLElement, ButtonGroupProps>(function But
focusOutBehavior: 'wrap',
})

return (
<StyledButtonGroup
ref={buttonRef}
className={clsx(className, {
[classes.ButtonGroup]: enabled,
})}
role={role}
{...rest}
>
{children}
</StyledButtonGroup>
)
if (sx !== defaultSxProp) {
return (
<Box as="div" className={clsx(className, classes.ButtonGroup)} role={role} {...rest} sx={sx} ref={buttonRef} />
)
}

return <div ref={buttonRef} className={clsx(className, classes.ButtonGroup)} role={role} {...rest} />
}) as PolymorphicForwardRefComponent<'div', ButtonGroupProps>

ButtonGroup.displayName = 'ButtonGroup'
Expand Down

0 comments on commit 58a164f

Please sign in to comment.