Skip to content

Commit 32f86e4

Browse files
mmalerbammalerba
authored
fix(material/chips): Tokenize the selected state (#28498)
* fix(material/chips): Tokenize the selected state This will give us the flexibility we need to implement M3 chips * more fixes * trailing icon state * fix test * fix some disabled states * Undo trailing icon changes * only apply disabled checkmark opacity when selected
1 parent fca43aa commit 32f86e4

File tree

8 files changed

+195
-48
lines changed

8 files changed

+195
-48
lines changed

‎src/dev-app/chips/chips-demo.html‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,15 +39,15 @@ <h4>With avatar, icons, and color</h4>
3939
<mat-icon matChipAvatar>home</mat-icon>
4040
Home
4141
<button matChipRemove aria-label="Remove chip">
42-
<mat-icon>cancel</mat-icon>
42+
<mat-icon>close</mat-icon>
4343
</button>
4444
</mat-chip>
4545

4646
<mat-chip highlighted="true" color="accent">
4747
<mat-chip-avatar>P</mat-chip-avatar>
4848
Portel
4949
<button matChipRemove aria-label="Remove chip">
50-
<mat-icon>cancel</mat-icon>
50+
<mat-icon>close</mat-icon>
5151
</button>
5252
</mat-chip>
5353

@@ -59,7 +59,7 @@ <h4>With avatar, icons, and color</h4>
5959
<mat-chip>
6060
Koby
6161
<button matChipRemove aria-label="Remove chip">
62-
<mat-icon>cancel</mat-icon>
62+
<mat-icon>close</mat-icon>
6363
</button>
6464
</mat-chip>
6565

@@ -76,7 +76,7 @@ <h4>With avatar, icons, and color</h4>
7676
<img src="https://material.angular.io/assets/img/examples/shiba2.jpg" matChipAvatar>
7777
Husi
7878
<button matChipRemove>
79-
<mat-icon>cancel</mat-icon>
79+
<mat-icon>close</mat-icon>
8080
</button>
8181
</mat-chip>
8282

@@ -100,7 +100,7 @@ <h4>With Events</h4>
100100
(destroyed)="displayMessage('chip destroyed')" (removed)="toggleVisible()">
101101
With Events
102102
<button matChipRemove aria-label="Remove chip">
103-
<mat-icon>cancel</mat-icon>
103+
<mat-icon>close</mat-icon>
104104
</button>
105105
</mat-chip>
106106
}
@@ -180,7 +180,7 @@ <h4>Input is last child of chip grid</h4>
180180
(edited)="edit(person, $event)">
181181
{{person.name}}
182182
<button matChipRemove aria-label="Remove contributor">
183-
<mat-icon>cancel</mat-icon>
183+
<mat-icon>close</mat-icon>
184184
</button>
185185
</mat-chip-row>
186186
}
@@ -201,7 +201,7 @@ <h4>Input is next sibling child of chip grid</h4>
201201
<mat-chip-row (removed)="remove(person)">
202202
{{person.name}}
203203
<button matChipRemove aria-label="Remove contributor">
204-
<mat-icon>cancel</mat-icon>
204+
<mat-icon>close</mat-icon>
205205
</button>
206206
</mat-chip-row>
207207
}

‎src/material-experimental/theming/_custom-tokens.scss‎

Lines changed: 65 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -190,13 +190,49 @@
190190
);
191191
}
192192

193+
/// Generates custom tokens for the mat-chip.
194+
/// @param {Map} $systems The MDC system tokens
195+
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
196+
/// @return {Map} A set of custom tokens for the mat-chip
197+
@function chip($systems, $exclude-hardcoded) {
198+
@return ((
199+
disabled-container-opacity: _hardcode(1, $exclude-hardcoded),
200+
selected-trailing-icon-color: map.get($systems, md-sys-color, on-secondary-container),
201+
selected-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface),
202+
trailing-action-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
203+
selected-trailing-action-state-layer-color:
204+
map.get($systems, md-sys-color, on-secondary-container),
205+
trailing-action-hover-state-layer-opacity:
206+
map.get($systems, md-sys-state, hover-state-layer-opacity),
207+
trailing-action-focus-state-layer-opacity:
208+
map.get($systems, md-sys-state, focus-state-layer-opacity),
209+
), (
210+
primary: (
211+
selected-trailing-icon-color: map.get($systems, md-sys-color, on-primary-container),
212+
selected-trailing-action-state-layer-color:
213+
map.get($systems, md-sys-color, on-primary-container),
214+
),
215+
secondary: (), // Default, no overrides needed.
216+
tertiary: (
217+
selected-trailing-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
218+
selected-trailing-action-state-layer-color:
219+
map.get($systems, md-sys-color, on-tertiary-container),
220+
),
221+
error: (
222+
selected-trailing-icon-color: map.get($systems, md-sys-color, on-error-container),
223+
selected-trailing-action-state-layer-color:
224+
map.get($systems, md-sys-color, on-error-container),
225+
),
226+
));
227+
}
228+
193229
/// Generates custom tokens for the mdc-chip. (MDC has a chip component, but they
194230
/// seem to have made up the tokens rather than using ones generated from the token database,
195231
/// therefore we need a custom token function for it).
196232
/// @param {Map} $systems The MDC system tokens
197233
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
198234
/// @return {Map} A set of custom tokens for the mdc-chip
199-
@function chip($systems, $exclude-hardcoded) {
235+
@function mdc-chip($systems, $exclude-hardcoded) {
200236
@return (mat.private-merge-all(
201237
_generate-typography-tokens($systems, label-text, label-large),
202238
(
@@ -212,16 +248,10 @@
212248
),
213249
with-icon-icon-size: _hardcode(18px, $exclude-hardcoded),
214250
with-icon-icon-color: map.get($systems, md-sys-color, on-surface-variant),
215-
with-icon-disabled-icon-color: mat.private-safe-color-change(
216-
map.get($systems, md-sys-color, on-surface),
217-
$alpha: 0.38,
218-
),
251+
with-icon-disabled-icon-color: map.get($systems, md-sys-color, on-surface),
219252
with-icon-selected-icon-color: map.get($systems, md-sys-color, on-secondary-container),
220253
with-trailing-icon-trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant),
221-
with-trailing-icon-disabled-trailing-icon-color: mat.private-safe-color-change(
222-
map.get($systems, md-sys-color, on-surface),
223-
$alpha: 0.38,
224-
),
254+
with-trailing-icon-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface),
225255
focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
226256
focus-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
227257
outline-width: _hardcode(1px, $exclude-hardcoded),
@@ -234,18 +264,44 @@
234264
hover-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
235265
hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
236266
with-avatar-disabled-avatar-opacity: _hardcode(0.38, $exclude-hardcoded),
267+
elevated-selected-container-color: map.get($systems, md-sys-color, secondary-container),
268+
flat-selected-outline-width: _hardcode(0, $exclude-hardcoded),
269+
selected-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
270+
flat-disabled-selected-container-color: mat.private-safe-color-change(
271+
map.get($systems, md-sys-color, on-surface),
272+
$alpha: 0.12,
273+
),
274+
selected-hover-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
275+
selected-hover-state-layer-opacity:
276+
map.get($systems, md-sys-state, hover-state-layer-opacity),
277+
selected-focus-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
278+
selected-focus-state-layer-opacity:
279+
map.get($systems, md-sys-state, focus-state-layer-opacity),
280+
with-icon-disabled-icon-opacity: _hardcode(0.38, $exclude-hardcoded),
237281
),
238282
), (
239283
// Color variants:
240284
primary: (
241285
with-icon-selected-icon-color: map.get($systems, md-sys-color, on-primary-container),
286+
elevated-selected-container-color: map.get($systems, md-sys-color, primary-container),
287+
selected-label-text-color: map.get($systems, md-sys-color, on-primary-container),
288+
selected-hover-state-layer-color: map.get($systems, md-sys-color, on-primary-container),
289+
selected-focus-state-layer-color: map.get($systems, md-sys-color, on-primary-container),
242290
),
243291
secondary: (), // Default, no overrides needed.
244292
tertiary: (
245293
with-icon-selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
294+
elevated-selected-container-color: map.get($systems, md-sys-color, tertiary-container),
295+
selected-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
296+
selected-hover-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
297+
selected-focus-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
246298
),
247299
error: (
248300
with-icon-selected-icon-color: map.get($systems, md-sys-color, on-error-container),
301+
elevated-selected-container-color: map.get($systems, md-sys-color, error-container),
302+
selected-label-text-color: map.get($systems, md-sys-color, on-error-container),
303+
selected-hover-state-layer-color: map.get($systems, md-sys-color, on-error-container),
304+
selected-focus-state-layer-color: map.get($systems, md-sys-color, on-error-container),
249305
)
250306
));
251307
}

‎src/material-experimental/theming/_m3-tokens.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -514,7 +514,7 @@
514514
),
515515
_namespace-tokens(
516516
(mdc, chip),
517-
custom-tokens.chip($systems, $exclude-hardcoded),
517+
custom-tokens.mdc-chip($systems, $exclude-hardcoded),
518518
$token-slots
519519
),
520520
_namespace-tokens(
@@ -753,6 +753,11 @@
753753
custom-tokens.card($systems, $exclude-hardcoded),
754754
$token-slots
755755
),
756+
_namespace-tokens(
757+
(mat, chip),
758+
custom-tokens.chip($systems, $exclude-hardcoded),
759+
$token-slots
760+
),
756761
_namespace-tokens(
757762
(mat, datepicker),
758763
custom-tokens.datepicker($systems, $exclude-hardcoded),

‎src/material/chips/_chips-theme.scss‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,16 +44,22 @@
4444
&.mat-primary {
4545
$primary-color-tokens: tokens-mdc-chip.get-color-tokens($theme, primary);
4646
@include mdc-chip-theme.theme($primary-color-tokens);
47+
@include token-utils.create-token-values(
48+
tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, primary));
4749
}
4850

4951
&.mat-accent {
5052
$accent-color-tokens: tokens-mdc-chip.get-color-tokens($theme, accent);
5153
@include mdc-chip-theme.theme($accent-color-tokens);
54+
@include token-utils.create-token-values(
55+
tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, accent));
5256
}
5357

5458
&.mat-warn {
5559
$warn-color-tokens: tokens-mdc-chip.get-color-tokens($theme, warn);
5660
@include mdc-chip-theme.theme($warn-color-tokens);
61+
@include token-utils.create-token-values(
62+
tokens-mat-chip.$prefix, tokens-mat-chip.get-color-tokens($theme, warn));
5763
}
5864
}
5965
}
@@ -121,7 +127,7 @@
121127

122128
@mixin _theme-from-tokens($tokens, $options...) {
123129
$mdc-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mdc-chip.$prefix, $options...);
124-
$mat-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mat-chip.$prefix);
130+
$mat-chip-tokens: token-utils.get-tokens-for($tokens, tokens-mat-chip.$prefix, $options...);
125131
@include mdc-chip-theme.theme($mdc-chip-tokens);
126132
@include token-utils.create-token-values(tokens-mat-chip.$prefix, $mat-chip-tokens);
127133
}

‎src/material/chips/chip.scss‎

Lines changed: 65 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,27 +27,76 @@
2727
.mat-mdc-chip-focus-overlay {
2828
@include token-utils.create-token-slot(background, focus-state-layer-color);
2929

30+
.mat-mdc-chip-selected & {
31+
@include token-utils.create-token-slot(background, selected-focus-state-layer-color);
32+
}
33+
3034
.mat-mdc-chip:hover & {
3135
@include token-utils.create-token-slot(background, hover-state-layer-color);
3236
@include token-utils.create-token-slot(opacity, hover-state-layer-opacity);
3337
}
3438

39+
.mat-mdc-chip-selected:hover & {
40+
@include token-utils.create-token-slot(background, selected-hover-state-layer-color);
41+
@include token-utils.create-token-slot(opacity, selected-hover-state-layer-opacity);
42+
}
43+
3544
.mat-mdc-chip.cdk-focused & {
3645
@include token-utils.create-token-slot(background, focus-state-layer-color);
3746
@include token-utils.create-token-slot(opacity, focus-state-layer-opacity);
3847
}
48+
49+
.mat-mdc-chip-selected.cdk-focused & {
50+
@include token-utils.create-token-slot(background, selected-focus-state-layer-color);
51+
@include token-utils.create-token-slot(opacity, selected-focus-state-layer-opacity);
52+
}
3953
}
4054

4155
.mdc-evolution-chip--disabled:not(.mdc-evolution-chip--selected) .mat-mdc-chip-avatar {
4256
@include token-utils.create-token-slot(opacity, with-avatar-disabled-avatar-opacity);
4357
}
58+
59+
.mdc-evolution-chip--disabled.mdc-evolution-chip--selected .mdc-evolution-chip__checkmark {
60+
@include token-utils.create-token-slot(opacity, with-icon-disabled-icon-opacity);
61+
}
4462
}
4563

4664
@include token-utils.use-tokens(tokens-mat-chip.$prefix, $mat-chip-token-slots) {
4765
// Historically, MDC did not support disabled chips, so we needed our own disabled styles.
4866
// Now that MDC supports disabled styles, we should switch to using theirs.
49-
.mat-mdc-standard-chip.mdc-evolution-chip--disabled {
50-
@include token-utils.create-token-slot(opacity, disabled-container-opacity);
67+
.mat-mdc-standard-chip {
68+
&.mdc-evolution-chip--disabled {
69+
@include token-utils.create-token-slot(opacity, disabled-container-opacity);
70+
}
71+
72+
&.mdc-evolution-chip--selected {
73+
.mdc-evolution-chip__icon--trailing {
74+
@include token-utils.create-token-slot(color, selected-trailing-icon-color);
75+
}
76+
77+
&.mdc-evolution-chip--disabled .mdc-evolution-chip__icon--trailing {
78+
@include token-utils.create-token-slot(color, selected-disabled-trailing-icon-color);
79+
}
80+
}
81+
}
82+
83+
.mat-mdc-chip-remove {
84+
&::after {
85+
@include token-utils.create-token-slot(background, trailing-action-state-layer-color);
86+
}
87+
88+
&:hover::after {
89+
@include token-utils.create-token-slot(opacity, trailing-action-hover-state-layer-opacity);
90+
}
91+
92+
&:focus::after {
93+
@include token-utils.create-token-slot(opacity, trailing-action-focus-state-layer-opacity);
94+
}
95+
}
96+
97+
.mat-mdc-chip-selected .mat-mdc-chip-remove::after {
98+
@include token-utils.create-token-slot(
99+
background, selected-trailing-action-state-layer-color);
51100
}
52101
}
53102
}
@@ -79,13 +128,6 @@
79128
mdc-chip-theme.$trailing-action-leading-padding,
80129
mdc-chip-theme.$trailing-action-trailing-padding
81130
);
82-
83-
// MDC has some code looking for a `with-icon-selected-disabled-icon-color` token for this
84-
// color, but the token isn't defined in the theme map so the validation throws an error.
85-
// We don't change the color anyway so we can point it to the enable color instead.
86-
&.mdc-evolution-chip--disabled .mdc-evolution-chip__checkmark {
87-
color: var(--mdc-chip-with-icon-selected-icon-color, currentColor);
88-
}
89131
}
90132

91133
.mdc-evolution-chip--with-avatar {
@@ -283,6 +325,20 @@
283325
right: 8px;
284326
}
285327

328+
// Used as a state overlay.
329+
&::after {
330+
$offset: 2px;
331+
content: '';
332+
display: block;
333+
opacity: 0;
334+
position: absolute;
335+
top: 0 - $offset;
336+
bottom: 0 - $offset;
337+
left: 8px - $offset;
338+
right: 8px - $offset;
339+
border-radius: 50%;
340+
}
341+
286342
.mat-icon {
287343
width: inherit;
288344
height: inherit;

‎src/material/core/tokens/m2/_index.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
@use './mat/dialog' as tokens-mat-dialog;
1212
@use './mat/bottom-sheet' as tokens-mat-bottom-sheet;
1313
@use './mat/card' as tokens-mat-card;
14+
@use './mat/chip' as tokens-mat-chip;
1415
@use './mat/datepicker' as tokens-mat-datepicker;
1516
@use './mat/divider' as tokens-mat-divider;
1617
@use './mat/expansion' as tokens-mat-expansion;
@@ -119,6 +120,7 @@
119120
_get-tokens-for-module($theme, tokens-mat-bottom-sheet),
120121
_get-tokens-for-module($theme, tokens-mat-button-toggle),
121122
_get-tokens-for-module($theme, tokens-mat-card),
123+
_get-tokens-for-module($theme, tokens-mat-chip),
122124
_get-tokens-for-module($theme, tokens-mat-datepicker),
123125
_get-tokens-for-module($theme, tokens-mat-dialog),
124126
_get-tokens-for-module($theme, tokens-mat-divider),

0 commit comments

Comments
 (0)