Skip to content

Commit 25be982

Browse files
AndrewJakubowiczcopybara-github
AndrewJakubowicz
authored and
copybara-github
committed
fix(button)!: remove with-* prefix from tokens
PiperOrigin-RevId: 546883625
1 parent 1893e08 commit 25be982

11 files changed

+144
-46
lines changed

‎button/elevated-button_test.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// import 'jasmine'; (google3-only)
2+
3+
import {createTokenTests} from '../testing/tokens.js';
4+
5+
import {MdElevatedButton} from './elevated-button.js';
6+
7+
describe('<md-elevated-button>', () => {
8+
describe('.styles', () => {
9+
createTokenTests(MdElevatedButton.styles);
10+
});
11+
});

‎button/lib/_icon.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,27 +16,27 @@
1616
position: relative;
1717
writing-mode: horizontal-tb;
1818
fill: currentColor;
19-
color: var(--_with-icon-icon-color);
20-
font-size: var(--_with-icon-icon-size);
21-
inline-size: var(--_with-icon-icon-size);
22-
block-size: var(--_with-icon-icon-size);
19+
color: var(--_icon-color);
20+
font-size: var(--_icon-size);
21+
inline-size: var(--_icon-size);
22+
block-size: var(--_icon-size);
2323
}
2424

2525
.md3-button:hover & {
26-
color: var(--_with-icon-hover-icon-color);
26+
color: var(--_hover-icon-color);
2727
}
2828

2929
.md3-button:focus & {
30-
color: var(--_with-icon-focus-icon-color);
30+
color: var(--_focus-icon-color);
3131
}
3232

3333
.md3-button:active & {
34-
color: var(--_with-icon-pressed-icon-color);
34+
color: var(--_pressed-icon-color);
3535
}
3636

3737
.md3-button:disabled & {
38-
color: var(--_with-icon-disabled-icon-color);
39-
opacity: var(--_with-icon-disabled-icon-opacity);
38+
color: var(--_disabled-icon-color);
39+
opacity: var(--_disabled-icon-opacity);
4040
}
4141
}
4242
}

‎button/lib/_outlined-button.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,10 @@
4444
--_#{$token}: var(--md-outlined-button-#{$token}, #{$value});
4545
}
4646

47+
--_container-color: none;
48+
--_disabled-container-color: none;
49+
--_disabled-container-opacity: 0;
50+
4751
// Support logical shape properties
4852
--_container-shape-start-start: var(
4953
--md-outlined-button-container-shape-start-start,

‎button/outlined-button_test.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// import 'jasmine'; (google3-only)
2+
3+
import {createTokenTests} from '../testing/tokens.js';
4+
5+
import {MdOutlinedButton} from './outlined-button.js';
6+
7+
describe('<md-outlined-button>', () => {
8+
describe('.styles', () => {
9+
createTokenTests(MdOutlinedButton.styles);
10+
});
11+
});

‎button/text-button_test.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// import 'jasmine'; (google3-only)
2+
3+
import {createTokenTests} from '../testing/tokens.js';
4+
5+
import {MdTextButton} from './text-button.js';
6+
7+
describe('<md-text-button>', () => {
8+
describe('.styles', () => {
9+
createTokenTests(MdTextButton.styles);
10+
});
11+
});

‎button/tonal-button_test.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// import 'jasmine'; (google3-only)
2+
3+
import {createTokenTests} from '../testing/tokens.js';
4+
5+
import {MdTonalButton} from './tonal-button.js';
6+
7+
describe('<md-tonal-button>', () => {
8+
describe('.styles', () => {
9+
createTokenTests(MdTonalButton.styles);
10+
});
11+
});

‎tokens/_md-comp-elevated-button.scss‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,29 +26,29 @@ $supported-tokens: (
2626
'disabled-container-color',
2727
'disabled-container-elevation',
2828
'disabled-container-opacity',
29+
'disabled-icon-color',
30+
'disabled-icon-opacity',
2931
'disabled-label-text-color',
3032
'disabled-label-text-opacity',
3133
'focus-container-elevation',
34+
'focus-icon-color',
3235
'focus-label-text-color',
3336
'hover-container-elevation',
37+
'hover-icon-color',
3438
'hover-label-text-color',
3539
'hover-state-layer-color',
3640
'hover-state-layer-opacity',
41+
'icon-color',
42+
'icon-size',
3743
'label-text-color',
3844
'label-text-type',
3945
'pressed-container-elevation',
46+
'pressed-icon-color',
4047
'pressed-label-text-color',
4148
'pressed-state-layer-color',
4249
'pressed-state-layer-opacity',
4350
'spacing-leading',
4451
'spacing-trailing',
45-
'with-icon-disabled-icon-color',
46-
'with-icon-disabled-icon-opacity',
47-
'with-icon-focus-icon-color',
48-
'with-icon-hover-icon-color',
49-
'with-icon-icon-color',
50-
'with-icon-icon-size',
51-
'with-icon-pressed-icon-color',
5252
'with-icon-spacing-leading',
5353
'with-icon-spacing-trailing',
5454
'with-trailing-icon-spacing-leading',
@@ -93,6 +93,16 @@ $_default: (
9393
'with-trailing-icon-spacing-trailing':
9494
if($exclude-hardcoded-values, null, 16px),
9595
// go/keep-sorted end
96+
),
97+
$renamed-tokens: (
98+
// Remove "with-*" prefixes (b/273534858)
99+
'with-icon-disabled-icon-color': 'disabled-icon-color',
100+
'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',
101+
'with-icon-focus-icon-color': 'focus-icon-color',
102+
'with-icon-hover-icon-color': 'hover-icon-color',
103+
'with-icon-icon-color': 'icon-color',
104+
'with-icon-icon-size': 'icon-size',
105+
'with-icon-pressed-icon-color': 'pressed-icon-color'
96106
)
97107
);
98108

‎tokens/_md-comp-filled-button.scss‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,29 +26,29 @@ $supported-tokens: (
2626
'disabled-container-color',
2727
'disabled-container-elevation',
2828
'disabled-container-opacity',
29+
'disabled-icon-color',
30+
'disabled-icon-opacity',
2931
'disabled-label-text-color',
3032
'disabled-label-text-opacity',
3133
'focus-container-elevation',
34+
'focus-icon-color',
3235
'focus-label-text-color',
3336
'hover-container-elevation',
37+
'hover-icon-color',
3438
'hover-label-text-color',
3539
'hover-state-layer-color',
3640
'hover-state-layer-opacity',
41+
'icon-color',
42+
'icon-size',
3743
'label-text-color',
3844
'label-text-type',
3945
'pressed-container-elevation',
46+
'pressed-icon-color',
4047
'pressed-label-text-color',
4148
'pressed-state-layer-color',
4249
'pressed-state-layer-opacity',
4350
'spacing-leading',
4451
'spacing-trailing',
45-
'with-icon-disabled-icon-color',
46-
'with-icon-disabled-icon-opacity',
47-
'with-icon-focus-icon-color',
48-
'with-icon-hover-icon-color',
49-
'with-icon-icon-color',
50-
'with-icon-icon-size',
51-
'with-icon-pressed-icon-color',
5252
'with-icon-spacing-leading',
5353
'with-icon-spacing-trailing',
5454
'with-trailing-icon-spacing-leading',
@@ -93,6 +93,16 @@ $_default: (
9393
'with-trailing-icon-spacing-trailing':
9494
if($exclude-hardcoded-values, null, 16px),
9595
// go/keep-sorted end
96+
),
97+
$renamed-tokens: (
98+
// Remove "with-*" prefixes (b/273534858)
99+
'with-icon-disabled-icon-color': 'disabled-icon-color',
100+
'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',
101+
'with-icon-focus-icon-color': 'focus-icon-color',
102+
'with-icon-hover-icon-color': 'hover-icon-color',
103+
'with-icon-icon-color': 'icon-color',
104+
'with-icon-icon-size': 'icon-size',
105+
'with-icon-pressed-icon-color': 'pressed-icon-color'
96106
)
97107
);
98108

‎tokens/_md-comp-filled-tonal-button.scss‎

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,29 +26,29 @@ $supported-tokens: (
2626
'disabled-container-color',
2727
'disabled-container-elevation',
2828
'disabled-container-opacity',
29+
'disabled-icon-color',
30+
'disabled-icon-opacity',
2931
'disabled-label-text-color',
3032
'disabled-label-text-opacity',
3133
'focus-container-elevation',
34+
'focus-icon-color',
3235
'focus-label-text-color',
3336
'hover-container-elevation',
37+
'hover-icon-color',
3438
'hover-label-text-color',
3539
'hover-state-layer-color',
3640
'hover-state-layer-opacity',
41+
'icon-color',
42+
'icon-size',
3743
'label-text-color',
3844
'label-text-type',
3945
'pressed-container-elevation',
46+
'pressed-icon-color',
4047
'pressed-label-text-color',
4148
'pressed-state-layer-color',
4249
'pressed-state-layer-opacity',
4350
'spacing-leading',
4451
'spacing-trailing',
45-
'with-icon-disabled-icon-color',
46-
'with-icon-disabled-icon-opacity',
47-
'with-icon-focus-icon-color',
48-
'with-icon-hover-icon-color',
49-
'with-icon-icon-color',
50-
'with-icon-icon-size',
51-
'with-icon-pressed-icon-color',
5252
'with-icon-spacing-leading',
5353
'with-icon-spacing-trailing',
5454
'with-trailing-icon-spacing-leading',
@@ -93,6 +93,16 @@ $_default: (
9393
'with-trailing-icon-spacing-trailing':
9494
if($exclude-hardcoded-values, null, 16px),
9595
// go/keep-sorted end
96+
),
97+
$renamed-tokens: (
98+
// Remove "with-*" prefixes (b/273534858)
99+
'with-icon-disabled-icon-color': 'disabled-icon-color',
100+
'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',
101+
'with-icon-focus-icon-color': 'focus-icon-color',
102+
'with-icon-hover-icon-color': 'hover-icon-color',
103+
'with-icon-icon-color': 'icon-color',
104+
'with-icon-icon-size': 'icon-size',
105+
'with-icon-pressed-icon-color': 'pressed-icon-color'
96106
)
97107
);
98108

‎tokens/_md-comp-outlined-button.scss‎

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -19,33 +19,31 @@ $supported-tokens: (
1919
// go/keep-sorted start
2020
'container-height',
2121
'container-shape',
22+
'disabled-icon-color',
23+
'disabled-icon-opacity',
2224
'disabled-label-text-color',
2325
'disabled-label-text-opacity',
2426
'disabled-outline-color',
2527
'disabled-outline-opacity',
28+
'focus-icon-color',
2629
'focus-label-text-color',
27-
'focus-outline-color',
30+
'hover-icon-color',
2831
'hover-label-text-color',
29-
'hover-outline-color',
3032
'hover-state-layer-color',
3133
'hover-state-layer-opacity',
34+
'icon-color',
35+
'icon-size',
3236
'label-text-color',
3337
'label-text-type',
3438
'outline-color',
3539
'outline-width',
40+
'pressed-icon-color',
3641
'pressed-label-text-color',
3742
'pressed-outline-color',
3843
'pressed-state-layer-color',
3944
'pressed-state-layer-opacity',
4045
'spacing-leading',
4146
'spacing-trailing',
42-
'with-icon-disabled-icon-color',
43-
'with-icon-disabled-icon-opacity',
44-
'with-icon-focus-icon-color',
45-
'with-icon-hover-icon-color',
46-
'with-icon-icon-color',
47-
'with-icon-icon-size',
48-
'with-icon-pressed-icon-color',
4947
'with-icon-spacing-leading',
5048
'with-icon-spacing-trailing',
5149
'with-trailing-icon-spacing-leading',
@@ -55,8 +53,10 @@ $supported-tokens: (
5553

5654
$unsupported-tokens: (
5755
// go/keep-sorted start
56+
'focus-outline-color',
5857
'focus-state-layer-color',
5958
'focus-state-layer-opacity',
59+
'hover-outline-color',
6060
'label-text-font',
6161
'label-text-line-height',
6262
'label-text-size',
@@ -89,6 +89,16 @@ $_default: (
8989
'with-trailing-icon-spacing-trailing':
9090
if($exclude-hardcoded-values, null, 16px),
9191
// go/keep-sorted end
92+
),
93+
$renamed-tokens: (
94+
// Remove "with-*" prefixes (b/273534858)
95+
'with-icon-disabled-icon-color': 'disabled-icon-color',
96+
'with-icon-disabled-icon-opacity': 'disabled-icon-opacity',
97+
'with-icon-focus-icon-color': 'focus-icon-color',
98+
'with-icon-hover-icon-color': 'hover-icon-color',
99+
'with-icon-icon-color': 'icon-color',
100+
'with-icon-icon-size': 'icon-size',
101+
'with-icon-pressed-icon-color': 'pressed-icon-color'
92102
)
93103
);
94104

0 commit comments

Comments
 (0)