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]}