Skip to content

Commit 5ce7323

Browse files
pksjcepksjce
committed
Update with PR review comments
1 parent a6388eb commit 5ce7323

File tree

3 files changed

+46
-32
lines changed

3 files changed

+46
-32
lines changed

‎src/Button/styles.ts‎

Lines changed: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,8 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
2222
},
2323
'&:disabled': {
2424
color: 'primer.fg.disabled',
25-
backgroundColor: 'btn.disabledBg',
26-
'[data-component="ButtonCounter"]': {
27-
backgroundColor: 'btn.disableBg',
28-
color: 'primer.fg.disabled'
25+
'[data-component=ButtonCounter]': {
26+
color: 'inherit'
2927
}
3028
},
3129
'&[aria-expanded=true]': {
@@ -53,11 +51,11 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
5351
'&:disabled': {
5452
color: 'btn.primary.disabledText',
5553
backgroundColor: 'btn.primary.disabledBg',
56-
'[data-component="ButtonCounter"]': {
57-
color: 'btn.primary.disabledText'
54+
'[data-component=ButtonCounter]': {
55+
color: 'inherit'
5856
}
5957
},
60-
'[data-component="ButtonCounter"]': {
58+
'[data-component=ButtonCounter]': {
6159
backgroundColor: 'btn.primary.counterBg',
6260
color: 'btn.primary.text'
6361
},
@@ -75,7 +73,7 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
7573
backgroundColor: 'btn.danger.hoverBg',
7674
borderColor: 'btn.danger.hoverBorder',
7775
boxShadow: `${theme?.shadows.btn.danger.hoverShadow}`,
78-
'[data-component="ButtonCounter"]': {
76+
'[data-component=ButtonCounter]': {
7977
backgroundColor: 'btn.danger.hoverCounterBg',
8078
color: 'btn.danger.hoverText'
8179
}
@@ -95,12 +93,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
9593
color: 'btn.danger.disabledText',
9694
backgroundColor: 'btn.danger.disabledBg',
9795
borderColor: 'btn.danger.disabledBorder',
98-
'[data-component="ButtonCounter"]': {
99-
color: 'btn.danger.disabledText',
96+
'[data-component=ButtonCounter]': {
97+
color: 'inherit',
10098
backgroundColor: 'btn.danger.disabledCounterBg'
10199
}
102100
},
103-
'[data-component="ButtonCounter"]': {
101+
'[data-component=ButtonCounter]': {
104102
color: 'btn.danger.text',
105103
backgroundColor: 'btn.danger.counterBg'
106104
},
@@ -128,8 +126,8 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
128126
},
129127
'&:disabled': {
130128
color: 'primer.fg.disabled',
131-
'[data-component="ButtonCounter"]': {
132-
color: 'primer.fg.disabled'
129+
'[data-component=ButtonCounter]': {
130+
color: 'inherit'
133131
}
134132
},
135133
'&[aria-expanded=true]': {
@@ -147,9 +145,9 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
147145
backgroundColor: 'btn.outline.hoverBg',
148146
borderColor: 'outline.hoverBorder',
149147
boxShadow: `${theme?.shadows.btn.outline.hoverShadow}`,
150-
'[data-component="ButtonCounter"]': {
148+
'[data-component=ButtonCounter]': {
151149
backgroundColor: 'btn.outline.hoverCounterBg',
152-
color: 'btn.outline.hoverText'
150+
color: 'inherit'
153151
}
154152
},
155153
// focus must come before :active so that the active box shadow overrides
@@ -169,12 +167,12 @@ export const getVariantStyles = (variant: VariantType = 'default', theme?: Theme
169167
color: 'btn.outline.disabledText',
170168
backgroundColor: 'btn.outline.disabledBg',
171169
borderColor: 'btn.border',
172-
'[data-component="ButtonCounter"]': {
170+
'[data-component=ButtonCounter]': {
173171
backgroundColor: 'btn.outline.disabledCounterBg',
174-
color: 'btn.outline.disabledText'
172+
color: 'inherit'
175173
}
176174
},
177-
'[data-component="ButtonCounter"]': {
175+
'[data-component=ButtonCounter]': {
178176
backgroundColor: 'btn.outline.counterBg',
179177
color: 'btn.outline.text'
180178
},
@@ -224,7 +222,7 @@ export const getSizeStyles = (size = 'medium', variant: VariantType = 'default',
224222
paddingY: `${paddingY}px`,
225223
paddingX: `${paddingX}px`,
226224
fontSize,
227-
'[data-component="ButtonCounter"]': {
225+
'[data-component=ButtonCounter]': {
228226
fontSize
229227
}
230228
}

‎src/__tests__/__snapshots__/ActionMenu.test.tsx.snap‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,10 @@ exports[`ActionMenu renders consistently 1`] = `
5151
.c1:disabled {
5252
cursor: default;
5353
color: #8c959f;
54-
background-color: btn.disabledBg;
54+
}
55+
56+
.c1:disabled [data-component=ButtonCounter] {
57+
color: inherit;
5558
}
5659
5760
.c1:disabled svg {
@@ -74,7 +77,7 @@ exports[`ActionMenu renders consistently 1`] = `
7477
grid-area: trailingIcon;
7578
}
7679
77-
.c1 [data-component="ButtonCounter"] {
80+
.c1 [data-component=ButtonCounter] {
7881
font-size: 14px;
7982
}
8083

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

Lines changed: 24 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,10 @@ exports[`Button renders consistently 1`] = `
4040
.c0:disabled {
4141
cursor: default;
4242
color: #8c959f;
43-
background-color: btn.disabledBg;
43+
}
44+
45+
.c0:disabled [data-component=ButtonCounter] {
46+
color: inherit;
4447
}
4548
4649
.c0:disabled svg {
@@ -63,7 +66,7 @@ exports[`Button renders consistently 1`] = `
6366
grid-area: trailingIcon;
6467
}
6568
66-
.c0 [data-component="ButtonCounter"] {
69+
.c0 [data-component=ButtonCounter] {
6770
font-size: 14px;
6871
}
6972
@@ -133,7 +136,8 @@ exports[`Button styles danger button appropriately 1`] = `
133136
border-color: btn.danger.disabledBorder;
134137
}
135138
136-
.c0:disabled [data-component="ButtonCounter"] {
139+
.c0:disabled [data-component=ButtonCounter] {
140+
color: inherit;
137141
background-color: btn.danger.disabledCounterBg;
138142
}
139143
@@ -157,7 +161,7 @@ exports[`Button styles danger button appropriately 1`] = `
157161
grid-area: trailingIcon;
158162
}
159163
160-
.c0 [data-component="ButtonCounter"] {
164+
.c0 [data-component=ButtonCounter] {
161165
font-size: 14px;
162166
color: btn.danger.text;
163167
background-color: btn.danger.counterBg;
@@ -170,7 +174,7 @@ exports[`Button styles danger button appropriately 1`] = `
170174
box-shadow: undefined;
171175
}
172176
173-
.c0:hover:not([disabled]) [data-component="ButtonCounter"] {
177+
.c0:hover:not([disabled]) [data-component=ButtonCounter] {
174178
background-color: btn.danger.hoverCounterBg;
175179
color: btn.danger.hoverText;
176180
}
@@ -246,6 +250,10 @@ exports[`Button styles invisible button appropriately 1`] = `
246250
color: primer.fg.disabled;
247251
}
248252
253+
.c0:disabled [data-component=ButtonCounter] {
254+
color: inherit;
255+
}
256+
249257
.c0:disabled svg {
250258
opacity: 0.6;
251259
}
@@ -266,7 +274,7 @@ exports[`Button styles invisible button appropriately 1`] = `
266274
grid-area: trailingIcon;
267275
}
268276
269-
.c0 [data-component="ButtonCounter"] {
277+
.c0 [data-component=ButtonCounter] {
270278
font-size: 14px;
271279
}
272280
@@ -341,8 +349,9 @@ exports[`Button styles outline button appropriately 1`] = `
341349
border-color: btn.border;
342350
}
343351
344-
.c0:disabled [data-component="ButtonCounter"] {
352+
.c0:disabled [data-component=ButtonCounter] {
345353
background-color: btn.outline.disabledCounterBg;
354+
color: inherit;
346355
}
347356
348357
.c0:disabled svg {
@@ -365,7 +374,7 @@ exports[`Button styles outline button appropriately 1`] = `
365374
grid-area: trailingIcon;
366375
}
367376
368-
.c0 [data-component="ButtonCounter"] {
377+
.c0 [data-component=ButtonCounter] {
369378
font-size: 14px;
370379
background-color: btn.outline.counterBg;
371380
color: btn.outline.text;
@@ -378,9 +387,9 @@ exports[`Button styles outline button appropriately 1`] = `
378387
box-shadow: undefined;
379388
}
380389
381-
.c0:hover:not([disabled]) [data-component="ButtonCounter"] {
390+
.c0:hover:not([disabled]) [data-component=ButtonCounter] {
382391
background-color: btn.outline.hoverCounterBg;
383-
color: btn.outline.hoverText;
392+
color: inherit;
384393
}
385394
386395
.c0:focus:not([disabled]) {
@@ -456,6 +465,10 @@ exports[`Button styles primary button appropriately 1`] = `
456465
background-color: btn.primary.disabledBg;
457466
}
458467
468+
.c0:disabled [data-component=ButtonCounter] {
469+
color: inherit;
470+
}
471+
459472
.c0:disabled svg {
460473
opacity: 0.6;
461474
}
@@ -476,7 +489,7 @@ exports[`Button styles primary button appropriately 1`] = `
476489
grid-area: trailingIcon;
477490
}
478491
479-
.c0 [data-component="ButtonCounter"] {
492+
.c0 [data-component=ButtonCounter] {
480493
font-size: 14px;
481494
background-color: btn.primary.counterBg;
482495
color: btn.primary.text;

0 commit comments

Comments
 (0)