Skip to content

Commit cf23b4c

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 69598f1 commit cf23b4c

32 files changed

+1465
-2087
lines changed

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

Lines changed: 6 additions & 0 deletions
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

Lines changed: 12 additions & 6 deletions
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,26 @@ <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+
</mat-chip-option>
113116
</mat-chip-listbox>
114117

115118
<h4>Multi selection</h4>
116119

117120
<mat-chip-listbox multiple="true" [disabled]="disabledListboxes">
118121
<mat-chip-option selected="true">Open Now</mat-chip-option>
119122
<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>
123+
<mat-chip-option>
124+
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" matChipAvatar>
125+
Pet Friendly
126+
</mat-chip-option>
127+
<mat-chip-option selected="true">Good for Brunch</mat-chip-option>
122128
</mat-chip-listbox>
123129

124130
</mat-card-content>

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

Lines changed: 123 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,163 @@
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+
&.mdc-evolution-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+
68+
with-icon-focus-icon-color: $foreground,
69+
with-icon-hover-icon-color: $foreground,
70+
with-icon-pressed-icon-color: $foreground,
71+
72+
selected-label-text-color: $foreground,
73+
with-icon-selected-icon-color: $foreground,
74+
75+
// TODO: the previous styles preserved the color when disabled and selected. It seems like
76+
// this could be supported by passing in `selected-disabled-label-text-color`, but the
77+
// theme key validation rejects it.
78+
));
79+
}
80+
81+
82+
&.mat-mdc-chip-highlighted {
83+
$icon-color: $foreground;
84+
$icon-map: (
85+
enabled: $icon-color,
86+
disabled: $icon-color,
87+
hover: $icon-color,
88+
focus: $icon-color
89+
);
90+
91+
@include mdc-chip-theme.container-color($background);
92+
@include mdc-chip-theme.icon-color($icon-map);
93+
@include mdc-chip-theme.trailing-action-color($icon-map);
94+
@include mdc-chip-theme.text-label-color((
95+
enabled: $foreground,
96+
disabled: $foreground,
97+
hover: $foreground,
98+
focus: $foreground
99+
));
100+
}
20101
}
21102

22103
@mixin color($config-or-theme) {
23104
$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;
105+
$primary: map.get($config, primary);
106+
$accent: map.get($config, accent);
107+
$warn: map.get($config, warn);
108+
$foreground: map.get($config, foreground);
109+
$is-dark: map.get($config, is-dark);
35110

36111
@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);
112+
.mat-mdc-standard-chip {
113+
@include _base-chip($is-dark);
48114

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
52115
&.mat-primary {
53-
&.mdc-chip--selected, &.mat-mdc-chip-highlighted {
54-
@include _selected-color($primary);
55-
}
116+
@include _colored-chip($primary);
56117
}
57118

58119
&.mat-accent {
59-
&.mdc-chip--selected, &.mat-mdc-chip-highlighted {
60-
@include _selected-color($accent);
61-
}
120+
@include _colored-chip($accent);
62121
}
63122

64123
&.mat-warn {
65-
&.mdc-chip--selected, &.mat-mdc-chip-highlighted {
66-
@include _selected-color($warn);
67-
}
124+
@include _colored-chip($warn);
68125
}
69126
}
70127
}
71128

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;
129+
.mat-mdc-chip-focus-overlay {
130+
background: map.get($foreground, base);
131+
}
132+
133+
.mat-mdc-chip {
134+
&.mat-primary {
135+
&.mat-mdc-chip-highlighted,
136+
&.mdc-evolution-chip--selected {
137+
.mat-mdc-focus-indicator::before {
138+
// Strong focus indicators use the primary color for their border which will blend in
139+
// with the background of a selected/highlighted chip. Use an accent color instead
140+
// so the indicator still stands out.
141+
border-color: theming.get-color-from-palette($accent);
142+
}
143+
}
144+
}
145+
}
76146
}
77147

78148
@mixin typography($config-or-theme) {
79149
$config: typography.private-typography-to-2018-config(
80150
theming.get-typography-config($config-or-theme));
81-
@include mdc-chips.set-core-styles($query: mdc-helpers.$mat-typography-styles-query);
151+
@include mdc-chip-set.core-styles($query: mdc-helpers.$mat-typography-styles-query);
82152
@include mdc-helpers.mat-using-mdc-typography($config) {
83-
@include mdc-chips.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
153+
@include mdc-chip.without-ripple-styles($query: mdc-helpers.$mat-typography-styles-query);
84154
}
85155
}
86156

87157
@mixin density($config-or-theme) {
88158
$density-scale: theming.get-density-config($config-or-theme);
89159
.mat-mdc-chip {
90-
@include mdc-chips.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
160+
@include mdc-chip-theme.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
91161
}
92162
}
93163

0 commit comments

Comments
 (0)