diff --git a/.changeset/light-colts-burn.md b/.changeset/light-colts-burn.md new file mode 100644 index 00000000000..d7f2498e493 --- /dev/null +++ b/.changeset/light-colts-burn.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Remove support for `sx` from `ButtonGroup` diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-colorblind-linux.png deleted file mode 100644 index 0d98488a13b..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-dimmed-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-dimmed-linux.png deleted file mode 100644 index c1aa5490e02..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-dimmed-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-high-contrast-linux.png deleted file mode 100644 index bcf4048a588..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-linux.png deleted file mode 100644 index 0d98488a13b..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-tritanopia-linux.png deleted file mode 100644 index 0d98488a13b..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-dark-tritanopia-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-colorblind-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-colorblind-linux.png deleted file mode 100644 index 0a4942ddf89..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-colorblind-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-high-contrast-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-high-contrast-linux.png deleted file mode 100644 index 2359588a9c5..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-high-contrast-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-linux.png deleted file mode 100644 index 0a4942ddf89..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-linux.png and /dev/null differ diff --git a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-tritanopia-linux.png b/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-tritanopia-linux.png deleted file mode 100644 index 0a4942ddf89..00000000000 Binary files a/.playwright/snapshots/components/ButtonGroup.test.ts-snapshots/ButtonGroup-SX-Prop-light-tritanopia-linux.png and /dev/null differ diff --git a/e2e/components/ButtonGroup.test.ts b/e2e/components/ButtonGroup.test.ts index 90be6469460..c04362139d7 100644 --- a/e2e/components/ButtonGroup.test.ts +++ b/e2e/components/ButtonGroup.test.ts @@ -23,10 +23,6 @@ const stories = [ title: 'Overrides', id: 'components-buttongroup-dev--link-button-with-icon-buttons', }, - { - title: 'SX Prop', - id: 'components-buttongroup-dev--sx-prop', - }, ] as const test.describe('ButtonGroup', () => { diff --git a/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx index 683aac2b2c9..63d427e3a3e 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.dev.stories.tsx @@ -24,7 +24,7 @@ const meta: Meta = { export default meta export const LinkAndButtonWithTooltip2 = () => ( - + - - - -) diff --git a/packages/react/src/ButtonGroup/ButtonGroup.docs.json b/packages/react/src/ButtonGroup/ButtonGroup.docs.json index a27208f34c1..e43db4799db 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.docs.json +++ b/packages/react/src/ButtonGroup/ButtonGroup.docs.json @@ -22,11 +22,6 @@ ], "importPath": "@primer/react", "props": [ - { - "name": "sx", - "type": "SystemStyleObject", - "deprecated": true - }, { "name": "ref", "type": "React.RefObject" diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx index 3793d15df52..cd07d132175 100644 --- a/packages/react/src/ButtonGroup/ButtonGroup.tsx +++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx @@ -1,22 +1,19 @@ import React, {type PropsWithChildren} from 'react' -import {type SxProp} from '../sx' import classes from './ButtonGroup.module.css' import {clsx} from 'clsx' import {FocusKeys, useFocusZone} from '../hooks/useFocusZone' import {useProvidedRefOrCreate} from '../hooks' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' -import {BoxWithFallback} from '../internal/components/BoxWithFallback' -export type ButtonGroupProps = { +export type ButtonGroupProps = PropsWithChildren<{ /** 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}, +const ButtonGroup = React.forwardRef(function ButtonGroup( + {as: BaseComponent = 'div', children, className, role, ...rest}, forwardRef, ) { const buttons = React.Children.map(children, (child, index) =>
{child}
) @@ -30,9 +27,9 @@ const ButtonGroup = React.forwardRef(function But }) return ( - + {buttons} - + ) }) as PolymorphicForwardRefComponent<'div', ButtonGroupProps>