Skip to content

Commit dc80aa6

Browse files
camertroncamertron
authored
Allow color to be customized for medium-sized IconButtons (#4989)
* Allow color to be specified for medium-sized IconButtons * Add changeset * Build * Fix Button component * Update snapshots
1 parent b82286d commit dc80aa6

File tree

6 files changed

+58
-38
lines changed

6 files changed

+58
-38
lines changed

‎.changeset/quick-feet-sip.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': patch
3+
---
4+
5+
Allow color to be customized for medium-sized IconButtons

‎packages/react/src/Button/Button.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {defaultSxProp} from '../utils/defaultSxProp'
66
import type {BetterSystemStyleObject, CSSCustomProperties} from '../sx'
77

88
const ButtonComponent = forwardRef(({children, sx: sxProp = defaultSxProp, ...props}, forwardedRef): JSX.Element => {
9-
const {block, size, leadingVisual, trailingVisual, trailingAction} = props
9+
const {block, size = 'medium', leadingVisual, trailingVisual, trailingAction} = props
1010
let sxStyles = sxProp
1111
const style: CSSCustomProperties = {}
1212

@@ -70,7 +70,7 @@ export function generateCustomSxProp(
7070
providedSx: BetterSystemStyleObject,
7171
) {
7272
// Possible data attributes: data-size, data-block, data-no-visuals
73-
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
73+
const size = `[data-size="${props.size}"]`
7474
const block = props.block ? `[data-block="block"]` : ''
7575
const noVisuals = props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals]'
7676

‎packages/react/src/Button/ButtonBase.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,7 @@ const ButtonBase = forwardRef(
352352
data-inactive={inactive ? true : undefined}
353353
data-loading={Boolean(loading)}
354354
data-no-visuals={!LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined}
355-
data-size={size === 'small' || size === 'large' ? size : undefined}
355+
data-size={size}
356356
data-label-wrap={labelWrap}
357357
aria-describedby={[loadingAnnouncementID, ariaDescribedBy]
358358
.filter(descriptionID => Boolean(descriptionID))

‎packages/react/src/Button/IconButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const IconButton = forwardRef(
2828
): JSX.Element => {
2929
let sxStyles = sxProp
3030
// grap the button props that have associated data attributes in the styles
31-
const {size} = props
31+
const {size = 'medium'} = props
3232

3333
if (sxProp !== null && Object.keys(sxProp).length > 0) {
3434
sxStyles = generateCustomSxProp({size}, sxProp)

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -301,6 +301,7 @@ exports[`Button respects block prop 1`] = `
301301
data-block="block"
302302
data-loading="false"
303303
data-no-visuals="true"
304+
data-size="medium"
304305
id="test-button"
305306
type="button"
306307
>
@@ -617,6 +618,7 @@ exports[`Button respects the alignContent prop 1`] = `
617618
class="c0"
618619
data-loading="false"
619620
data-no-visuals="true"
621+
data-size="medium"
620622
id="test-button"
621623
type="button"
622624
>
@@ -1570,6 +1572,7 @@ exports[`Button styles danger button appropriately 1`] = `
15701572
class="c0"
15711573
data-loading="false"
15721574
data-no-visuals="true"
1575+
data-size="medium"
15731576
id="test-button"
15741577
type="button"
15751578
>
@@ -1896,6 +1899,7 @@ exports[`Button styles invisible button appropriately 1`] = `
18961899
class="c0"
18971900
data-loading="false"
18981901
data-no-visuals="true"
1902+
data-size="medium"
18991903
id="test-button"
19001904
type="button"
19011905
>
@@ -2211,6 +2215,7 @@ exports[`Button styles primary button appropriately 1`] = `
22112215
class="c0"
22122216
data-loading="false"
22132217
data-no-visuals="true"
2218+
data-size="medium"
22142219
id="test-button"
22152220
type="button"
22162221
>

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

Lines changed: 44 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -2579,37 +2579,41 @@ exports[`TextInput renders trailingAction text button 1`] = `
25792579
}
25802580
25812581
.c4[data-no-visuals] {
2582-
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
2582+
color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
2583+
}
2584+
2585+
.c4:has([data-component="ButtonCounter"]) {
2586+
color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
2587+
}
2588+
2589+
.c4:disabled[data-no-visuals] {
2590+
color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
2591+
}
2592+
2593+
.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
2594+
color: inherit;
2595+
}
2596+
2597+
.c4[data-size="medium"][data-no-visuals] {
25832598
padding-top: 2px;
25842599
padding-right: 4px;
25852600
padding-bottom: 2px;
25862601
padding-left: 4px;
25872602
position: relative;
25882603
background-color: transparent;
2604+
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
25892605
}
25902606
2591-
.c4[data-no-visuals]:hover,
2592-
.c4[data-no-visuals]:focus {
2607+
.c4[data-size="medium"][data-no-visuals]:hover,
2608+
.c4[data-size="medium"][data-no-visuals]:focus {
25932609
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
25942610
}
25952611
2596-
.c4[data-no-visuals][data-component="IconButton"] {
2612+
.c4[data-size="medium"][data-no-visuals][data-component="IconButton"] {
25972613
width: var(--inner-action-size);
25982614
height: var(--inner-action-size);
25992615
}
26002616
2601-
.c4:has([data-component="ButtonCounter"]) {
2602-
color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
2603-
}
2604-
2605-
.c4:disabled[data-no-visuals] {
2606-
color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
2607-
}
2608-
2609-
.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
2610-
color: inherit;
2611-
}
2612-
26132617
.c0 {
26142618
font-size: 14px;
26152619
line-height: 20px;
@@ -2718,7 +2722,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
27182722
}
27192723
27202724
@media (pointer:coarse) {
2721-
.c4[data-no-visuals]:after {
2725+
.c4[data-size="medium"][data-no-visuals]:after {
27222726
content: "";
27232727
position: absolute;
27242728
left: 0;
@@ -2760,6 +2764,7 @@ exports[`TextInput renders trailingAction text button 1`] = `
27602764
data-block={null}
27612765
data-loading={false}
27622766
data-no-visuals={true}
2767+
data-size="medium"
27632768
onClick={[MockFunction]}
27642769
style={
27652770
{
@@ -3073,37 +3078,41 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
30733078
}
30743079
30753080
.c4[data-no-visuals] {
3076-
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
3081+
color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
3082+
}
3083+
3084+
.c4:has([data-component="ButtonCounter"]) {
3085+
color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
3086+
}
3087+
3088+
.c4:disabled[data-no-visuals] {
3089+
color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
3090+
}
3091+
3092+
.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
3093+
color: inherit;
3094+
}
3095+
3096+
.c4[data-size="medium"][data-no-visuals] {
30773097
padding-top: 2px;
30783098
padding-right: 4px;
30793099
padding-bottom: 2px;
30803100
padding-left: 4px;
30813101
position: relative;
30823102
background-color: transparent;
3103+
color: var(--fgColor-muted,var(--color-fg-subtle,#6e7781));
30833104
}
30843105
3085-
.c4[data-no-visuals]:hover,
3086-
.c4[data-no-visuals]:focus {
3106+
.c4[data-size="medium"][data-no-visuals]:hover,
3107+
.c4[data-size="medium"][data-no-visuals]:focus {
30873108
color: var(--fgColor-default,var(--color-fg-default,#1F2328));
30883109
}
30893110
3090-
.c4[data-no-visuals][data-component="IconButton"] {
3111+
.c4[data-size="medium"][data-no-visuals][data-component="IconButton"] {
30913112
width: var(--inner-action-size);
30923113
height: var(--inner-action-size);
30933114
}
30943115
3095-
.c4:has([data-component="ButtonCounter"]) {
3096-
color: var(--button-invisible-fgColor-rest,var(--button-default-fgColor-rest,var(--color-btn-text,#24292f)));
3097-
}
3098-
3099-
.c4:disabled[data-no-visuals] {
3100-
color: var(--fgColor-disabled,var(--color-primer-fg-disabled,#8c959f));
3101-
}
3102-
3103-
.c4:disabled[data-no-visuals] [data-component=ButtonCounter] {
3104-
color: inherit;
3105-
}
3106-
31073116
.c6 {
31083117
display: none;
31093118
display: inline-block;
@@ -3319,7 +3328,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
33193328
}
33203329
33213330
@media (pointer:coarse) {
3322-
.c4[data-no-visuals]:after {
3331+
.c4[data-size="medium"][data-no-visuals]:after {
33233332
content: "";
33243333
position: absolute;
33253334
left: 0;
@@ -3367,6 +3376,7 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
33673376
data-block={null}
33683377
data-loading={false}
33693378
data-no-visuals={true}
3379+
data-size="medium"
33703380
onBlur={[Function]}
33713381
onClick={[MockFunction]}
33723382
onFocus={[Function]}

0 commit comments

Comments
 (0)