diff --git a/e2e/components/ButtonGroup.test.ts b/e2e/components/ButtonGroup.test.ts index 243f070df7f..38c79d95c69 100644 --- a/e2e/components/ButtonGroup.test.ts +++ b/e2e/components/ButtonGroup.test.ts @@ -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() + }) + }) + } + }) }) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx index c0d2f2645b7..6dc85d48472 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx @@ -63,3 +63,11 @@ export const LinkButtonWithIconButtons = () => ( ) + +export const SxProp = () => ( + + + + + +) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx index e3cc3e0632a..0869e1e1b92 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx @@ -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 +export type ButtonGroupProps = { + /** The role of the group */ + role?: string + /** className passed in for styling */ + className?: string +} & PropsWithChildren & + SxProp const ButtonGroup = React.forwardRef(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) =>
{child}
) const buttonRef = useProvidedRefOrCreate(forwardRef as React.RefObject) @@ -114,17 +30,18 @@ const ButtonGroup = React.forwardRef(function But focusOutBehavior: 'wrap', }) + if (sx !== defaultSxProp) { + return ( + + {buttons} + + ) + } + return ( - +
{buttons} - +
) }) as PolymorphicForwardRefComponent<'div', ButtonGroupProps>