Button: Make button visuals overridable by sx

.changeset/purple-panthers-accept.md

@@ -0,0 +1,7 @@
+---
+'@primer/react': patch
+---
+
+Button: Allow leadingIcon, trailingIcon, trailingAction to be overridable with sx
+
+<!-- Changed components: Button -->

src/Button/Button.dev.stories.tsx

@@ -1,6 +1,7 @@
-import {SearchIcon, TriangleDownIcon, EyeIcon} from '@primer/octicons-react'
+import {SearchIcon, TriangleDownIcon, EyeIcon, IssueClosedIcon} from '@primer/octicons-react'
 import React from 'react'
 import {Button, IconButton} from '.'
+import {default as Text} from '../Text'
 
 export default {
   title: 'Components/Button/DevOnly',
@@ -67,8 +68,11 @@ export const TestSxProp = () => {
       >
         Red
       </Button>
-      <Button leadingIcon={SearchIcon} variant="invisible" sx={{color: 'firebrick'}}>
-        Red
+      <Button variant="invisible" sx={{color: 'firebrick'}}>
+        Invariant color overridden
+      </Button>
+      <Button leadingIcon={IssueClosedIcon} sx={{color: 'done.fg'}}>
+        <Text sx={{color: 'fg.default'}}>Close issue</Text>
       </Button>
       <Button
         size="small"

src/Button/Button.tsx

@@ -3,10 +3,11 @@ import {ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import {defaultSxProp} from '../utils/defaultSxProp'
-import {BetterSystemStyleObject} from '../sx'
+import {BetterSystemStyleObject, CSSCustomProperties} from '../sx'
 
 const ButtonComponent = forwardRef(({children, sx: sxProp = defaultSxProp, ...props}, forwardedRef): JSX.Element => {
   let sxStyles = sxProp
+  const style: CSSCustomProperties = {}
   const leadingVisual = props.leadingVisual ?? props.leadingIcon
   const trailingVisual = props.trailingVisual ?? props.trailingIcon
 
@@ -15,10 +16,14 @@ const ButtonComponent = forwardRef(({children, sx: sxProp = defaultSxProp, ...pr
 
   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
   }
 
   return (
-    <ButtonBase ref={forwardedRef} as="button" sx={sxStyles} type="button" {...props}>
+    <ButtonBase ref={forwardedRef} as="button" sx={sxStyles} style={style} type="button" {...props}>
       {children}
     </ButtonBase>
   )
@@ -71,11 +76,10 @@ export function generateCustomSxProp(
   // Possible data attributes: data-size, data-block, data-no-visuals
   const size = props.size && props.size !== 'medium' ? `[data-size="${props.size}"]` : '' // medium is a default size therefore it doesn't have a data attribute that used for styling
   const block = props.block ? `[data-block="block"]` : ''
-  const noVisuals =
-    props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals="true"]'
+  const noVisuals = props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals]'
 
-  // this is 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="true"]
+  // 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

src/Button/styles.ts

@@ -26,7 +26,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
         borderColor: 'btn.activeBorder',
       },
       '[data-component="leadingVisual"], [data-component="trailingVisual"], [data-component="trailingAction"]': {
-        color: 'fg.muted',
+        color: `var(--button-color, ${theme?.colors.fg.muted})`,
       },
     },
     primary: {

src/sx.ts

@@ -14,7 +14,7 @@ export type BetterCssProperties = {
 }
 
 // Support CSS custom properties in the `sx` prop
-type CSSCustomProperties = {
+export type CSSCustomProperties = {
   [key: `--${string}`]: string | number
 }