Adapt Button to styled-react and remove sx

packages/styled-react/src/components/ActionMenu.tsx

@@ -0,0 +1,33 @@
+import {ActionMenu as PrimerActionMenu} from '@primer/react'
+import type {ComponentProps} from 'react'
+import {forwardRef} from 'react'
+import {Box} from './Box'
+import type {SxProp} from '../sx'
+
+// Derive prop types from the underlying Primer components and augment with SxProp
+export type ActionMenuProps = ComponentProps<typeof PrimerActionMenu> & SxProp
+export type ActionMenuButtonProps = ComponentProps<typeof PrimerActionMenu.Button> & SxProp
+
+const ActionMenuButton = forwardRef<HTMLButtonElement, ActionMenuButtonProps>(function ActionMenuButton(props, ref) {
+  return <Box as={PrimerActionMenu.Button} ref={ref} {...props} />
+})
+
+const ActionMenuImpl = (props: ActionMenuProps) => {
+  return <Box as={PrimerActionMenu} {...props} />
+}
+
+type ActionMenuComposite = ((props: ActionMenuProps) => JSX.Element) & {
+  Button: typeof ActionMenuButton
+  Anchor: typeof PrimerActionMenu.Anchor
+  Overlay: typeof PrimerActionMenu.Overlay
+  Divider: typeof PrimerActionMenu.Divider
+}
+
+export const ActionMenu: ActionMenuComposite = Object.assign(ActionMenuImpl, {
+  Button: ActionMenuButton,
+  Anchor: PrimerActionMenu.Anchor,
+  Overlay: PrimerActionMenu.Overlay,
+  Divider: PrimerActionMenu.Divider,
+})
+
+export {ActionMenuButton}

packages/styled-react/src/components/Button.tsx

@@ -0,0 +1,92 @@
+import {Button as PrimerButton, type ButtonProps as PrimerButtonProps} from '@primer/react'
+import type {SxProp, CSSCustomProperties} from '../sx'
+import type {BetterSystemStyleObject} from '../styled-props'
+import {Box} from './Box'
+
+type ButtonComponentProps = PrimerButtonProps & SxProp
+const ButtonComponent = ({sx, ...rest}: ButtonComponentProps) => {
+  const {block, size = 'medium', leadingVisual, trailingVisual, trailingAction} = rest
+  let sxStyles: {[key: string]: BetterSystemStyleObject} = {}
+  const style: CSSCustomProperties = {}
+
+  if (sx !== null && Object.keys(sx || {}).length > 0) {
+    sxStyles = generateCustomSxProp(
+      {block, size, leadingVisual, trailingVisual, trailingAction},
+      sx as BetterSystemStyleObject,
+    )
+
+    // @ts-ignore sx can have color attribute
+    const {color} = sx
+    if (color) style['--button-color'] = color
+  }
+
+  // @ts-expect-error type mismatch between Box usage here and PrimerButton
+  return <Box {...rest} as={PrimerButton} style={style} sx={sxStyles} />
+}
+
+// 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<PrimerButtonProps, '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, type ButtonComponentProps}

packages/styled-react/src/components/IconButton.tsx

@@ -0,0 +1,19 @@
+import {
+  IconButton as PrimerIconButton,
+  type IconButtonProps as PrimerIconButtonProps,
+  sx,
+  type SxProp,
+} from '@primer/react'
+import styled from 'styled-components'
+import {type ForwardRefComponent} from '../polymorphic'
+
+type IconButtonProps = PrimerIconButtonProps & SxProp
+
+const IconButton: ForwardRefComponent<'a' | 'button', IconButtonProps> = styled(PrimerIconButton).withConfig({
+  shouldForwardProp: prop => (prop as keyof IconButtonProps) !== 'sx',
+})<IconButtonProps>`
+  ${sx}
+`
+
+export {IconButton}
+export type {IconButtonProps}

packages/styled-react/src/components/PageHeader.tsx

@@ -6,7 +6,7 @@ import {
   type PageHeaderTitleAreaProps as PrimerPageHeaderTitleAreaProps,
 } from '@primer/react'
 import styled from 'styled-components'
-import {sx, type SxProp} from '../sx'
+import {sx, type SxProp, type CSSCustomProperties} from '../sx'
 import type {ForwardRefComponent} from '../polymorphic'
 import {Box} from './Box'
 import type {PropsWithChildren} from 'react'
@@ -39,10 +39,6 @@ function PageHeaderActions({sx, ...rest}: PageHeaderActionsProps) {
 
 type PageHeaderTitleProps = PropsWithChildren<PrimerPageHeaderTitleProps> & SxProp
 
-type CSSCustomProperties = {
-  [key: `--${string}`]: string | number
-}
-
 function PageHeaderTitle({sx, ...rest}: PageHeaderTitleProps) {
   const style: CSSCustomProperties = {}
   if (sx) {

packages/styled-react/src/index.tsx

@@ -1,17 +1,14 @@
 export {ActionList} from '@primer/react'
-export {ActionMenu} from '@primer/react'
 export {Autocomplete} from '@primer/react'
 export {Avatar} from '@primer/react'
 export {Breadcrumbs} from '@primer/react'
 export {Box, type BoxProps} from './components/Box'
-export {Button} from '@primer/react'
 export {CheckboxGroup} from '@primer/react'
 export {CircleBadge} from '@primer/react'
 export {Details} from '@primer/react'
 export {Dialog} from '@primer/react'
 export {FormControl} from '@primer/react'
 export {Heading} from '@primer/react'
-export {IconButton} from '@primer/react'
 export {Label} from '@primer/react'
 export {Link} from '@primer/react'
 export {NavList} from '@primer/react'
@@ -35,10 +32,13 @@ export {themeGet} from '@primer/react'
 export {useColorSchemeVar} from '@primer/react'
 export {useTheme} from '@primer/react'
 
+export {ActionMenu, type ActionMenuProps, type ActionMenuButtonProps} from './components/ActionMenu'
+export {ButtonComponent as Button, type ButtonComponentProps as ButtonProps} from './components/Button'
 export {Checkbox, type CheckboxProps} from './components/Checkbox'
 export {CounterLabel, type CounterLabelProps} from './components/CounterLabel'
 export {Flash} from './components/Flash'
 export {Header, type HeaderProps} from './components/Header'
+export {IconButton, type IconButtonProps} from './components/IconButton'
 export {LinkButton, type LinkButtonProps} from './components/LinkButton'
 export {
   PageHeader,

packages/styled-react/src/sx.ts

@@ -1 +1,4 @@
 export {sx, type SxProp} from '@primer/react'
+export type CSSCustomProperties = {
+  [key: `--${string}`]: string | number
+}