Allow color to be customized for medium-sized IconButtons

.changeset/quick-feet-sip.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Allow color to be customized for medium-sized IconButtons

packages/react/src/Button/Button.tsx

@@ -6,7 +6,7 @@ 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, leadingVisual, trailingVisual, trailingAction} = props
+  const {block, size = 'medium', leadingVisual, trailingVisual, trailingAction} = props
   let sxStyles = sxProp
   const style: CSSCustomProperties = {}
 
@@ -70,7 +70,7 @@ export function generateCustomSxProp(
   providedSx: BetterSystemStyleObject,
 ) {
   // 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 size = `[data-size="${props.size}"]`
   const block = props.block ? `[data-block="block"]` : ''
   const noVisuals = props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals]'
 

packages/react/src/Button/ButtonBase.tsx

@@ -352,7 +352,7 @@ const ButtonBase = forwardRef(
           data-inactive={inactive ? true : undefined}
           data-loading={Boolean(loading)}
           data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined}
-          data-size={size === 'small' || size === 'large' ? size : undefined}
+          data-size={size}
           data-label-wrap={labelWrap}
           aria-describedby={[loadingAnnouncementID, ariaDescribedBy]
             .filter(descriptionID => Boolean(descriptionID))

packages/react/src/Button/IconButton.tsx

@@ -28,7 +28,7 @@ const IconButton = forwardRef(
   ): JSX.Element => {
     let sxStyles = sxProp
     // grap the button props that have associated data attributes in the styles
-    const {size} = props
+    const {size = 'medium'} = props
 
     if (sxProp !== null && Object.keys(sxProp).length > 0) {
       sxStyles = generateCustomSxProp({size}, sxProp)

packages/react/src/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -301,6 +301,7 @@ exports[`Button respects block prop 1`] = `
   data-block="block"
   data-loading="false"
   data-no-visuals="true"
+  data-size="medium"
   id="test-button"
   type="button"
 >
@@ -617,6 +618,7 @@ exports[`Button respects the alignContent prop 1`] = `
   class="c0"
   data-loading="false"
   data-no-visuals="true"
+  data-size="medium"
   id="test-button"
   type="button"
 >
@@ -1570,6 +1572,7 @@ exports[`Button styles danger button appropriately 1`] = `
   class="c0"
   data-loading="false"
   data-no-visuals="true"
+  data-size="medium"
   id="test-button"
   type="button"
 >
@@ -1896,6 +1899,7 @@ exports[`Button styles invisible button appropriately 1`] = `
   class="c0"
   data-loading="false"
   data-no-visuals="true"
+  data-size="medium"
   id="test-button"
   type="button"
 >
@@ -2211,6 +2215,7 @@ exports[`Button styles primary button appropriately 1`] = `
   class="c0"
   data-loading="false"
   data-no-visuals="true"
+  data-size="medium"
   id="test-button"
   type="button"
 >

packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap

@@ -2579,37 +2579,41 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 .c4[data-no-visuals] {
-  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+  color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
+}
+
+.c4:has([data-component="ButtonCounter"]) {
+  color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
+}
+
+.c4:disabled[data-no-visuals] {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+}
+
+.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
+  color: inherit;
+}
+
+.c4[data-size="medium"][data-no-visuals] {
   padding-top: 2px;
   padding-right: 4px;
   padding-bottom: 2px;
   padding-left: 4px;
   position: relative;
   background-color: transparent;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
-.c4[data-no-visuals]:hover,
-.c4[data-no-visuals]:focus {
+.c4[data-size="medium"][data-no-visuals]:hover,
+.c4[data-size="medium"][data-no-visuals]:focus {
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c4[data-no-visuals][data-component="IconButton"] {
+.c4[data-size="medium"][data-no-visuals][data-component="IconButton"] {
   width: var(--inner-action-size);
   height: var(--inner-action-size);
 }
 
-.c4:has([data-component="ButtonCounter"]) {
-  color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
-}
-
-.c4:disabled[data-no-visuals] {
-  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
-}
-
-.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
-  color: inherit;
-}
-
 .c0 {
   font-size: 14px;
   line-height: 20px;
@@ -2718,7 +2722,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
 }
 
 @media (pointer:coarse) {
-  .c4[data-no-visuals]:after {
+  .c4[data-size="medium"][data-no-visuals]:after {
     content: "";
     position: absolute;
     left: 0;
@@ -2760,6 +2764,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
       data-block={null}
       data-loading={false}
       data-no-visuals={true}
+      data-size="medium"
       onClick={[MockFunction]}
       style={
         {
@@ -3073,37 +3078,41 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 .c4[data-no-visuals] {
-  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
+  color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
+}
+
+.c4:has([data-component="ButtonCounter"]) {
+  color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
+}
+
+.c4:disabled[data-no-visuals] {
+  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
+}
+
+.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
+  color: inherit;
+}
+
+.c4[data-size="medium"][data-no-visuals] {
   padding-top: 2px;
   padding-right: 4px;
   padding-bottom: 2px;
   padding-left: 4px;
   position: relative;
   background-color: transparent;
+  color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
 }
 
-.c4[data-no-visuals]:hover,
-.c4[data-no-visuals]:focus {
+.c4[data-size="medium"][data-no-visuals]:hover,
+.c4[data-size="medium"][data-no-visuals]:focus {
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
-.c4[data-no-visuals][data-component="IconButton"] {
+.c4[data-size="medium"][data-no-visuals][data-component="IconButton"] {
   width: var(--inner-action-size);
   height: var(--inner-action-size);
 }
 
-.c4:has([data-component="ButtonCounter"]) {
-  color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
-}
-
-.c4:disabled[data-no-visuals] {
-  color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
-}
-
-.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
-  color: inherit;
-}
-
 .c6 {
   display: none;
   display: inline-block;
@@ -3319,7 +3328,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
 }
 
 @media (pointer:coarse) {
-  .c4[data-no-visuals]:after {
+  .c4[data-size="medium"][data-no-visuals]:after {
     content: "";
     position: absolute;
     left: 0;
@@ -3367,6 +3376,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
       data-block={null}
       data-loading={false}
       data-no-visuals={true}
+      data-size="medium"
       onBlur={[Function]}
       onClick={[MockFunction]}
       onFocus={[Function]}