Skip to content

Commit

Permalink
Remove CSS modules feature flag from ButtonGroup
Browse files Browse the repository at this point in the history
  • Loading branch information
jonrohan committed Dec 18, 2024
1 parent f03ae58 commit f4d2bf0
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 105 deletions.
28 changes: 28 additions & 0 deletions e2e/components/ButtonGroup.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -142,4 +142,32 @@ test.describe('ButtonGroup', () => {
})
}
})

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

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

test('axe @aat', async ({page}) => {
await visit(page, {
id: 'components-buttongroup-devonly--sx-prop',
globals: {
colorScheme: theme,
},
})
await expect(page).toHaveNoViolations()
})
})
}
})
})
8 changes: 8 additions & 0 deletions packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,11 @@ export const LinkButtonWithIconButtons = () => (
<IconButton icon={CopilotIcon} aria-label="Open GitHub Copilot chat" />
</ButtonGroup>
)

export const SxProp = () => (
<ButtonGroup sx={{border: '1px solid red'}}>
<Button>Button 1</Button>
<Button>Button 2</Button>
<Button>Button 3</Button>
</ButtonGroup>
)
127 changes: 22 additions & 105 deletions packages/react/src/ButtonGroup/ButtonGroup.tsx
Original file line number Diff line number Diff line change
@@ -1,109 +1,25 @@
import styled from 'styled-components'
import React from 'react'
import sx from '../sx'
import type {ComponentProps} from '../utils/types'
import React, {type PropsWithChildren} from 'react'
import {type SxProp} from '../sx'
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 Box from '../Box'
import {defaultSxProp} from '../utils/defaultSxProp'

const StyledButtonGroup = toggleStyledComponent(
'primer_react_css_modules_ga',
'div',
styled.div`
display: inline-flex;
vertical-align: middle;
isolation: isolate;
& > *:not([data-loading-wrapper]) {
/* stylelint-disable-next-line primer/spacing */
margin-inline-end: -1px;
position: relative;
/* reset border-radius */
button,
a {
border-radius: 0;
}
&:first-child {
button,
a {
border-top-left-radius: var(--borderRadius-medium);
border-bottom-left-radius: var(--borderRadius-medium);
}
}
&:last-child {
button,
a {
border-top-right-radius: var(--borderRadius-medium);
border-bottom-right-radius: var(--borderRadius-medium);
}
}
&:focus,
&:active,
&:hover {
z-index: 1;
}
}
/* this is a workaround until portal based tooltips are fully removed from dotcom */
&:has(div:last-child:empty) {
button,
a {
border-radius: var(--borderRadius-medium);
}
}
/* if child is loading button */
& > *[data-loading-wrapper] {
/* stylelint-disable-next-line primer/spacing */
margin-inline-end: -1px;
position: relative;
/* reset border-radius */
button,
a {
border-radius: 0;
}
&:focus,
&:active,
&:hover {
z-index: 1;
}
&:first-child {
button,
a {
border-top-left-radius: var(--borderRadius-medium);
border-bottom-left-radius: var(--borderRadius-medium);
}
}
&:last-child {
button,
a {
border-top-right-radius: var(--borderRadius-medium);
border-bottom-right-radius: var(--borderRadius-medium);
}
}
}
${sx};
`,
)

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

const ButtonGroup = React.forwardRef<HTMLElement, ButtonGroupProps>(function ButtonGroup(
{children, className, role, ...rest},
{children, className, role, sx, ...rest},
forwardRef,
) {
const enabled = useFeatureFlag('primer_react_css_modules_ga')
const buttons = React.Children.map(children, (child, index) => <div key={index}>{child}</div>)
const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject<HTMLDivElement>)

Expand All @@ -114,17 +30,18 @@ const ButtonGroup = React.forwardRef<HTMLElement, ButtonGroupProps>(function But
focusOutBehavior: 'wrap',
})

if (sx !== defaultSxProp) {
return (
<Box as="div" className={clsx(className, classes.ButtonGroup)} role={role} {...rest} sx={sx} ref={buttonRef}>
{buttons}
</Box>
)
}

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

Expand Down

0 comments on commit f4d2bf0

Please sign in to comment.