Skip to content

Commit 0f5247d

Browse files
crisbetocrisbeto
committed
feat(material-experimental/mdc-chips): switch to evolution API
Reworks the MDC-based chips to use the new `evolution` API instead of the deprecated one we're currently using. The new API comes with a lot of markup changes and some behavior differences. The new API also allows to remove the `GridKeyManager`, because the keyboard navigation is handled correctly by MDC.
1 parent 39921f4 commit 0f5247d

34 files changed

+1579
-2115
lines changed

‎scripts/check-mdc-tests-config.ts

+6
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,12 @@ export const config = {
3636

3737
// This test checks something that isn't supported in the MDC form field.
3838
'should propagate the dynamic `placeholder` value to the form field',
39+
40+
// Disabled, because the MDC-based chip input doesn't deal with focus escaping anymore.
41+
'should not allow focus to escape when tabbing backwards',
42+
43+
// Disabled, because preventing the default action isn't required.
44+
'should prevent the default click action when the chip is disabled',
3945
],
4046
'mdc-dialog': [
4147
// These tests are verifying implementation details that are not relevant for MDC.

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

+15-6
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,12 @@ <h4>With avatar, icons, and color</h4>
5555
</mat-chip>
5656

5757
<mat-chip>
58-
<img src="https://material.angularjs.org/material2_assets/ngconf/Mal.png" matChipAvatar>
58+
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" matChipAvatar>
5959
Mal
6060
</mat-chip>
6161

6262
<mat-chip highlighted="true" color="warn">
63-
<img src="https://material.angularjs.org/material2_assets/ngconf/Husi.png" matChipAvatar>
63+
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" matChipAvatar>
6464
Husi
6565
<button matChipRemove>
6666
<mat-icon>cancel</mat-icon>
@@ -105,20 +105,29 @@ <h4>With Events</h4>
105105

106106
<h4>Single selection</h4>
107107

108-
<mat-chip-listbox multiple="false" [disabled]="disabledListboxes">
108+
<mat-chip-listbox [disabled]="disabledListboxes">
109109
<mat-chip-option>Extra Small</mat-chip-option>
110110
<mat-chip-option>Small</mat-chip-option>
111111
<mat-chip-option>Medium</mat-chip-option>
112-
<mat-chip-option>Large</mat-chip-option>
112+
<mat-chip-option>
113+
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" matChipAvatar>
114+
Large
115+
<button matChipRemove>
116+
<mat-icon>cancel</mat-icon>
117+
</button>
118+
</mat-chip-option>
113119
</mat-chip-listbox>
114120

115121
<h4>Multi selection</h4>
116122

117123
<mat-chip-listbox multiple="true" [disabled]="disabledListboxes">
118124
<mat-chip-option selected="true">Open Now</mat-chip-option>
119125
<mat-chip-option>Takes Reservations</mat-chip-option>
120-
<mat-chip-option selected="true">Pet Friendly</mat-chip-option>
121-
<mat-chip-option>Good for Brunch</mat-chip-option>
126+
<mat-chip-option>
127+
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" matChipAvatar>
128+
Pet Friendly
129+
</mat-chip-option>
130+
<mat-chip-option selected="true">Good for Brunch</mat-chip-option>
122131
</mat-chip-listbox>
123132

124133
</mat-card-content>

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

+124-53
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,164 @@
1-
@use '@material/chips/deprecated' as mdc-chips;
1+
@use '@material/chips/chip' as mdc-chip;
2+
@use '@material/chips/chip-theme' as mdc-chip-theme;
3+
@use '@material/chips/chip-set' as mdc-chip-set;
24
@use '@material/theme/theme-color' as mdc-theme-color;
5+
@use '@material/theme/color-palette' as mdc-color-palette;
36
@use 'sass:color';
47
@use 'sass:map';
58
@use '../mdc-helpers/mdc-helpers';
69
@use '../../material/core/typography/typography';
710
@use '../../material/core/theming/theming';
811

9-
@mixin _selected-color($color) {
10-
@include mdc-chips.fill-color($color, $query: mdc-helpers.$mat-theme-styles-query);
11-
@include mdc-chips.ink-color(text-primary-on-dark, $query: mdc-helpers.$mat-theme-styles-query);
12-
@include mdc-chips.selected-ink-color-without-ripple_(
13-
text-primary-on-dark,
14-
$query: mdc-helpers.$mat-theme-styles-query
15-
);
16-
@include mdc-chips.leading-icon-color(text-primary-on-dark,
17-
$query: mdc-helpers.$mat-theme-styles-query);
18-
@include mdc-chips.trailing-icon-color(text-primary-on-dark,
19-
$query: mdc-helpers.$mat-theme-styles-query);
12+
@mixin _base-chip($is-dark) {
13+
$on-surface-state-content: if($is-dark, mdc-color-palette.$grey-50, mdc-color-palette.$grey-900);
14+
$surface:
15+
color.mix(mdc-theme-color.prop-value(on-surface), mdc-theme-color.prop-value(surface), 12%);
16+
17+
// TODO(crisbeto): ideally the $label-text-color would be something along the lines of:
18+
// `if($is-dark, mdc-color-palette.$grey-100, mdc-color-palette.$grey-800)`, because it allows
19+
// the user to distinguish between when the primary action is focused versus the remove icon.
20+
// The problem is that the color contrast is worse and there are a lot of Google screenshot tests
21+
// that expect the darker color.
22+
$label-text-color: $on-surface-state-content;
23+
24+
@include mdc-chip-theme.theme-styles((
25+
flat-focus-outline-color: $on-surface-state-content,
26+
flat-unselected-focus-outline-color: $on-surface-state-content,
27+
focus-label-text-color: $on-surface-state-content,
28+
focus-outline-color: $on-surface-state-content,
29+
hover-label-text-color: $on-surface-state-content,
30+
pressed-label-text-color: $on-surface-state-content,
31+
unselected-focus-label-text-color: $on-surface-state-content,
32+
unselected-hover-label-text-color: $on-surface-state-content,
33+
unselected-pressed-label-text-color: $on-surface-state-content,
34+
with-trailing-icon-trailing-icon-color: $on-surface-state-content,
35+
with-leading-icon-leading-icon-color: $on-surface-state-content,
36+
37+
elevated-disabled-container-color: $surface,
38+
elevated-container-color: $surface,
39+
elevated-unselected-container-color: $surface,
40+
41+
with-icon-unselected-icon-color: $label-text-color,
42+
unselected-label-text-color: $label-text-color,
43+
label-text-color: $label-text-color,
44+
disabled-label-text-color: $label-text-color,
45+
));
46+
47+
// We should be able to customize this using the `with-icon-selected-disabled-icon-color` key,
48+
// but the MDC validation blocks us, even though they have a lookup for it.
49+
@include mdc-chip-theme.checkmark-color((disabled: $label-text-color));
50+
}
51+
52+
@mixin _colored-chip($palette) {
53+
$background: theming.get-color-from-palette($palette);
54+
$foreground: theming.get-color-from-palette($palette, default-contrast);
55+
56+
&.mat-mdc-chip-selected {
57+
@include mdc-chip-theme.theme-styles((
58+
elevated-selected-container-color: $background,
59+
flat-selected-container-color: $background,
60+
61+
selected-focus-label-text-color: $foreground,
62+
selected-hover-label-text-color: $foreground,
63+
selected-pressed-label-text-color: $foreground,
64+
with-icon-selected-focus-icon-color: $foreground,
65+
with-icon-selected-hover-icon-color: $foreground,
66+
with-icon-selected-pressed-icon-color: $foreground,
67+
with-trailing-icon-trailing-icon-color: $foreground,
68+
69+
with-icon-focus-icon-color: $foreground,
70+
with-icon-hover-icon-color: $foreground,
71+
with-icon-pressed-icon-color: $foreground,
72+
73+
selected-label-text-color: $foreground,
74+
with-icon-selected-icon-color: $foreground,
75+
76+
// TODO: the previous styles preserved the color when disabled and selected. It seems like
77+
// this could be supported by passing in `selected-disabled-label-text-color`, but the
78+
// theme key validation rejects it.
79+
));
80+
}
81+
82+
83+
&.mat-mdc-chip-highlighted {
84+
$icon-color: $foreground;
85+
$icon-map: (
86+
enabled: $icon-color,
87+
disabled: $icon-color,
88+
hover: $icon-color,
89+
focus: $icon-color
90+
);
91+
92+
@include mdc-chip-theme.container-color($background);
93+
@include mdc-chip-theme.icon-color($icon-map);
94+
@include mdc-chip-theme.trailing-action-color($icon-map);
95+
@include mdc-chip-theme.text-label-color((
96+
enabled: $foreground,
97+
disabled: $foreground,
98+
hover: $foreground,
99+
focus: $foreground
100+
));
101+
}
20102
}
21103

22104
@mixin color($config-or-theme) {
23105
$config: theming.get-color-config($config-or-theme);
24-
$primary: theming.get-color-from-palette(map.get($config, primary));
25-
$accent: theming.get-color-from-palette(map.get($config, accent));
26-
$warn: theming.get-color-from-palette(map.get($config, warn));
27-
$background: map.get($config, background);
28-
$unselected-background: theming.get-color-from-palette($background, unselected-chip);
29-
30-
// Save original values of MDC global variables. We need to save these so we can restore the
31-
// variables to their original values and prevent unintended side effects from using this mixin.
32-
$orig-mdc-chips-fill-color-default: mdc-chips.$fill-color-default;
33-
$orig-mdc-chips-ink-color-default: mdc-chips.$ink-color-default;
34-
$orig-mdc-chips-icon-color: mdc-chips.$icon-color;
106+
$primary: map.get($config, primary);
107+
$accent: map.get($config, accent);
108+
$warn: map.get($config, warn);
109+
$foreground: map.get($config, foreground);
110+
$is-dark: map.get($config, is-dark);
35111

36112
@include mdc-helpers.mat-using-mdc-theme($config) {
37-
mdc-chips.$fill-color-default:
38-
color.mix(mdc-theme-color.prop-value(on-surface), mdc-theme-color.prop-value(surface), 12%);
39-
mdc-chips.$ink-color-default: rgba(mdc-theme-color.prop-value(on-surface), 0.87);
40-
mdc-chips.$icon-color: mdc-theme-color.prop-value(on-surface);
41-
42-
@include mdc-chips.set-core-styles($query: mdc-helpers.$mat-theme-styles-query);
43-
@include mdc-chips.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
44-
45-
.mat-mdc-chip {
46-
@include mdc-chips.fill-color-accessible($unselected-background,
47-
$query: mdc-helpers.$mat-theme-styles-query);
113+
.mat-mdc-standard-chip {
114+
@include _base-chip($is-dark);
48115

49-
// mdc-chip-fill-color-accessible includes mdc-chip-selected-ink-color which overrides the
50-
// opacity so selected chips always show a ripple.
51-
// Include the same mixins but use mdc-chip-selected-ink-color-without-ripple
52116
&.mat-primary {
53-
&.mdc-chip--selected, &.mat-mdc-chip-highlighted {
54-
@include _selected-color($primary);
55-
}
117+
@include _colored-chip($primary);
56118
}
57119

58120
&.mat-accent {
59-
&.mdc-chip--selected, &.mat-mdc-chip-highlighted {
60-
@include _selected-color($accent);
61-
}
121+
@include _colored-chip($accent);
62122
}
63123

64124
&.mat-warn {
65-
&.mdc-chip--selected, &.mat-mdc-chip-highlighted {
66-
@include _selected-color($warn);
67-
}
125+
@include _colored-chip($warn);
68126
}
69127
}
70128
}
71129

72-
// Restore original values of MDC global variables.
73-
mdc-chips.$fill-color-default: $orig-mdc-chips-fill-color-default;
74-
mdc-chips.$ink-color-default: $orig-mdc-chips-ink-color-default;
75-
mdc-chips.$icon-color: $orig-mdc-chips-icon-color;
130+
.mat-mdc-chip-focus-overlay {
131+
background: map.get($foreground, base);
132+
}
133+
134+
.mat-mdc-chip {
135+
&.mat-primary {
136+
&.mat-mdc-chip-highlighted,
137+
&.mat-mdc-chip-selected {
138+
.mat-mdc-focus-indicator::before {
139+
// Strong focus indicators use the primary color for their border which will blend in
140+
// with the background of a selected/highlighted chip. Use an accent color instead
141+
// so the indicator still stands out.
142+
border-color: theming.get-color-from-palette($accent);
143+
}
144+
}
145+
}
146+
}
76147
}
77148

78149
@mixin typography($config-or-theme) {
79150
$config: typography.private-typography-to-2018-config(
80151
theming.get-typography-config($config-or-theme));
81-
@include mdc-chips.set-core-styles($query: mdc-helpers.$mat-typography-styles-query);
152+
@include mdc-chip-set.core-styles($query: mdc-helpers.$mat-typography-styles-query);
82153
@include mdc-helpers.mat-using-mdc-typography($config) {
83-
@include mdc-chips.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
154+
@include mdc-chip.without-ripple-styles($query: mdc-helpers.$mat-typography-styles-query);
84155
}
85156
}
86157

87158
@mixin density($config-or-theme) {
88159
$density-scale: theming.get-density-config($config-or-theme);
89160
.mat-mdc-chip {
90-
@include mdc-chips.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
161+
@include mdc-chip-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
91162
}
92163
}
93164

0 commit comments

Comments
 (0)