Adapt Button to styled-react and remove sx

.changeset/tasty-suns-behave.md

@@ -0,0 +1,6 @@
+
+---
+"@primer/react": major
+"@primer/styled-react": patch
+---
+Remove sx property from Button

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

@@ -1,5 +1,6 @@
 import {SearchIcon, TriangleDownIcon, EyeIcon, IssueClosedIcon, HeartFillIcon} from '@primer/octicons-react'
 import {Button, IconButton} from '.'
+import classes from './Button.dev.stories.module.css'
 import {default as Text} from '../Text'
 import {Stack} from '../Stack'
 
@@ -32,69 +33,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}
+export {ButtonComponent, type ButtonProps}