feat: remove sx prop from Button, LinkButton, IconButton, and ButtonG…

e2e/components/Button.test.ts

@@ -75,10 +75,6 @@ const stories = [
  title: 'Dev Invisible Variants',
  id: 'components-button-dev--invisible-variants',
  },
- {
- title: 'Dev Sx Prop',
- id: 'components-button-dev--test-sx-prop',
- },
  {
  title: 'Aria Expanded Buttons',
  id: 'components-button-features--expanded-button',

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', () => {

packages/react/src/Button/Button.dev.stories.tsx

@@ -1,4 +1,4 @@
 import {SearchIcon, TriangleDownIcon, EyeIcon, IssueClosedIcon, HeartFillIcon} from '@primer/octicons-react'
 import {Button, IconButton} from '.'
 import {default as Text} from '../Text'
 import {Stack} from '../Stack'
@@ -32,69 +32,6 @@
  )
 }
 
-export const TestSxProp = () => {
- const count = 4
- return (
- <div style={{display: 'flex', flexDirection: 'row', gap: '1rem'}}>
- <Button
- size="medium"
- sx={{
- color: 'firebrick',
- backgroundColor: '#F6F8FA',
- }}
- >
- Medium Red
- </Button>
- <Button
- size="small"
- sx={{
- ':hover': {
- color: 'deepskyblue',
- },
- [`@media screen and (max-width: 768px)`]: {
- color: 'maroon',
- backgroundColor: '#F6F8FA',
- },
- '@media (min-width: 1440)': {
- color: 'firebrick',
- backgroundColor: '#F6F8FA',
- },
- }}
- >
- Red
- </Button>
- <Button variant="invisible" sx={{color: 'firebrick', backgroundColor: '#F6F8FA'}}>
- Invariant color overridden
- </Button>
- <Button leadingVisual={IssueClosedIcon} sx={{color: 'done.fg'}}>
- <Text sx={{color: 'fg.default'}}>Close issue</Text>
- </Button>
- <Button
- size="small"
- variant="invisible"
- sx={{
- width: 32,
- height: 32,
- '&:focus': {
- outline: 0,
- '& > span': {
- boxShadow: `inset 0 0 0 2px deeppink`,
- },
- },
- }}
- >
- Custom size
- </Button>
- <Button size="small" block variant="invisible" sx={{width: 320}}>
- Overridden Block
- </Button>
- <Button sx={{fontSize: 32}} count={count}>
- Watch
- </Button>
- </div>
- )
-}
-
 export const DisabledButtonVariants = () => {
  return (
  <Stack direction="horizontal">

packages/react/src/Button/Button.docs.json

@@ -151,11 +151,6 @@
  "type": "'small'\n| 'medium'\n| 'large'",
  "defaultValue": "'medium'"
  },
- {
- "name": "sx",
- "type": "SystemStyleObject",
- "deprecated": true
- },
  {
  "name": "trailingIcon",
  "type": "React.ComponentType<OcticonProps>",

packages/react/src/Button/Button.tsx

@@ -2,92 +2,15 @@ import {forwardRef} from 'react'
 import type {ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
-import {defaultSxProp} from '../utils/defaultSxProp'
-import type {BetterSystemStyleObject, CSSCustomProperties} from '../sx'
-
-const ButtonComponent = forwardRef(({children, sx: sxProp = defaultSxProp, ...props}, forwardedRef): JSX.Element => {
- const {block, size = 'medium', leadingVisual, trailingVisual, trailingAction} = props
- let sxStyles = sxProp
- const style: CSSCustomProperties = {}
-
- if (sxProp !== null && Object.keys(sxProp).length > 0) {
- sxStyles = generateCustomSxProp({block, size, leadingVisual, trailingVisual, trailingAction}, sxProp)
-
- // @ts-ignore sxProp can have color attribute
- const {color} = sxProp
- if (color) style['--button-color'] = color
- }
 
+const ButtonComponent = forwardRef(({children, ...props}, forwardedRef): JSX.Element => {
  return (
- <ButtonBase ref={forwardedRef} as="button" sx={sxStyles} style={style} type="button" {...props}>
+ <ButtonBase ref={forwardedRef} as="button" type="button" {...props}>
  {children}
  </ButtonBase>
  )
 }) as PolymorphicForwardRefComponent<'button', ButtonProps>
 
-// This function is used to generate a custom cssSelector for the sxProp
-
-// The usual sx prop can like this:
-// sx={{
-// [`@media (max-width: 768px)`]: {
-// '& > ul': {
-// backgroundColor: 'deeppink',
-// },
-// '&:hover': {
-// backgroundColor: 'yellow',
-// },
-// },
-// '&:hover': {
-// backgroundColor: 'yellow',
-// },
-// '&': {
-// width : 320px
-// }
-// }}
-//*
-/* What we want for Button styles is this:
-sx={{
-// [`@media (max-width: 768px)`]: {
-// '&[data-attribute="something"] > ul': {
-// backgroundColor: 'deeppink',
-// },
-// '&[data-attribute="something"]:hover': {
-// backgroundColor: 'yellow',
-// },
-// },
-// '&[data-attribute="something"]:hover': {
-// backgroundColor: 'yellow',
-// },
-// '&[data-attribute="something"]': {
-// width : 320px
-// }
-// }}
-
-// We need to make sure we append the customCSSSelector to the original class selector. i.e & - > &[data-attribute="Icon"][data-size="small"]
-*/
-export function generateCustomSxProp(
- props: Partial<Pick<ButtonProps, 'size' | 'block' | 'leadingVisual' | 'trailingVisual' | 'trailingAction'>>,
- providedSx: BetterSystemStyleObject,
-) {
- // Possible data attributes: data-size, data-block, data-no-visuals
- const size = `[data-size="${props.size}"]`
- const block = props.block ? `[data-block="block"]` : ''
- const noVisuals = props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals]'
-
- // this is a custom selector. We need to make sure we add the data attributes to the base css class (& -> &[data-attributename="value"]])
- const cssSelector = `&${size}${block}${noVisuals}` // &[data-size="small"][data-block="block"][data-no-visuals]
-
- const customSxProp: {
- [key: string]: BetterSystemStyleObject
- } = {}
-
- if (!providedSx) return customSxProp
- else {
- customSxProp[cssSelector] = providedSx
- return customSxProp
- }
-}
-
 ButtonComponent.displayName = 'Button'
 
 export {ButtonComponent}