Skip to content

Commit 7c612b7

Browse files
crisbetocrisbeto
committed
refactor(multiple): switch to non-deprecated MDC list styles
Switches the components in `mdc-autocomplete`, `mdc-core`, `mdc-menu` and `mdc-select` to the non-deprecated MDC list styles.
1 parent 5832463 commit 7c612b7

21 files changed

+738
-742
lines changed

‎package.json‎

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
"@types/googlemaps": "^3.43.1",
6363
"@types/youtube": "^0.0.42",
6464
"core-js-bundle": "^3.8.2",
65-
"material-components-web": "12.0.0-canary.03f525f9f.0",
65+
"material-components-web": "12.0.0-canary.1a8d06483.0",
6666
"rxjs": "^6.5.3",
6767
"rxjs-tslint-rules": "^4.33.1",
6868
"systemjs": "0.19.43",
@@ -91,53 +91,53 @@
9191
"@bazel/terser": "3.3.0",
9292
"@bazel/typescript": "3.3.0",
9393
"@firebase/app-types": "^0.6.1",
94-
"@material/animation": "12.0.0-canary.03f525f9f.0",
95-
"@material/auto-init": "12.0.0-canary.03f525f9f.0",
96-
"@material/banner": "12.0.0-canary.03f525f9f.0",
97-
"@material/base": "12.0.0-canary.03f525f9f.0",
98-
"@material/button": "12.0.0-canary.03f525f9f.0",
99-
"@material/card": "12.0.0-canary.03f525f9f.0",
100-
"@material/checkbox": "12.0.0-canary.03f525f9f.0",
101-
"@material/chips": "12.0.0-canary.03f525f9f.0",
102-
"@material/circular-progress": "12.0.0-canary.03f525f9f.0",
103-
"@material/data-table": "12.0.0-canary.03f525f9f.0",
104-
"@material/density": "12.0.0-canary.03f525f9f.0",
105-
"@material/dialog": "12.0.0-canary.03f525f9f.0",
106-
"@material/dom": "12.0.0-canary.03f525f9f.0",
107-
"@material/drawer": "12.0.0-canary.03f525f9f.0",
108-
"@material/elevation": "12.0.0-canary.03f525f9f.0",
109-
"@material/fab": "12.0.0-canary.03f525f9f.0",
110-
"@material/feature-targeting": "12.0.0-canary.03f525f9f.0",
111-
"@material/floating-label": "12.0.0-canary.03f525f9f.0",
112-
"@material/form-field": "12.0.0-canary.03f525f9f.0",
113-
"@material/icon-button": "12.0.0-canary.03f525f9f.0",
114-
"@material/image-list": "12.0.0-canary.03f525f9f.0",
115-
"@material/layout-grid": "12.0.0-canary.03f525f9f.0",
116-
"@material/line-ripple": "12.0.0-canary.03f525f9f.0",
117-
"@material/linear-progress": "12.0.0-canary.03f525f9f.0",
118-
"@material/list": "12.0.0-canary.03f525f9f.0",
119-
"@material/menu": "12.0.0-canary.03f525f9f.0",
120-
"@material/menu-surface": "12.0.0-canary.03f525f9f.0",
121-
"@material/notched-outline": "12.0.0-canary.03f525f9f.0",
122-
"@material/radio": "12.0.0-canary.03f525f9f.0",
123-
"@material/ripple": "12.0.0-canary.03f525f9f.0",
124-
"@material/rtl": "12.0.0-canary.03f525f9f.0",
125-
"@material/segmented-button": "12.0.0-canary.03f525f9f.0",
126-
"@material/select": "12.0.0-canary.03f525f9f.0",
127-
"@material/shape": "12.0.0-canary.03f525f9f.0",
128-
"@material/slider": "12.0.0-canary.03f525f9f.0",
129-
"@material/snackbar": "12.0.0-canary.03f525f9f.0",
130-
"@material/switch": "12.0.0-canary.03f525f9f.0",
131-
"@material/tab": "12.0.0-canary.03f525f9f.0",
132-
"@material/tab-bar": "12.0.0-canary.03f525f9f.0",
133-
"@material/tab-indicator": "12.0.0-canary.03f525f9f.0",
134-
"@material/tab-scroller": "12.0.0-canary.03f525f9f.0",
135-
"@material/textfield": "12.0.0-canary.03f525f9f.0",
136-
"@material/theme": "12.0.0-canary.03f525f9f.0",
137-
"@material/tooltip": "12.0.0-canary.03f525f9f.0",
138-
"@material/top-app-bar": "12.0.0-canary.03f525f9f.0",
139-
"@material/touch-target": "12.0.0-canary.03f525f9f.0",
140-
"@material/typography": "12.0.0-canary.03f525f9f.0",
94+
"@material/animation": "12.0.0-canary.1a8d06483.0",
95+
"@material/auto-init": "12.0.0-canary.1a8d06483.0",
96+
"@material/banner": "12.0.0-canary.1a8d06483.0",
97+
"@material/base": "12.0.0-canary.1a8d06483.0",
98+
"@material/button": "12.0.0-canary.1a8d06483.0",
99+
"@material/card": "12.0.0-canary.1a8d06483.0",
100+
"@material/checkbox": "12.0.0-canary.1a8d06483.0",
101+
"@material/chips": "12.0.0-canary.1a8d06483.0",
102+
"@material/circular-progress": "12.0.0-canary.1a8d06483.0",
103+
"@material/data-table": "12.0.0-canary.1a8d06483.0",
104+
"@material/density": "12.0.0-canary.1a8d06483.0",
105+
"@material/dialog": "12.0.0-canary.1a8d06483.0",
106+
"@material/dom": "12.0.0-canary.1a8d06483.0",
107+
"@material/drawer": "12.0.0-canary.1a8d06483.0",
108+
"@material/elevation": "12.0.0-canary.1a8d06483.0",
109+
"@material/fab": "12.0.0-canary.1a8d06483.0",
110+
"@material/feature-targeting": "12.0.0-canary.1a8d06483.0",
111+
"@material/floating-label": "12.0.0-canary.1a8d06483.0",
112+
"@material/form-field": "12.0.0-canary.1a8d06483.0",
113+
"@material/icon-button": "12.0.0-canary.1a8d06483.0",
114+
"@material/image-list": "12.0.0-canary.1a8d06483.0",
115+
"@material/layout-grid": "12.0.0-canary.1a8d06483.0",
116+
"@material/line-ripple": "12.0.0-canary.1a8d06483.0",
117+
"@material/linear-progress": "12.0.0-canary.1a8d06483.0",
118+
"@material/list": "12.0.0-canary.1a8d06483.0",
119+
"@material/menu": "12.0.0-canary.1a8d06483.0",
120+
"@material/menu-surface": "12.0.0-canary.1a8d06483.0",
121+
"@material/notched-outline": "12.0.0-canary.1a8d06483.0",
122+
"@material/radio": "12.0.0-canary.1a8d06483.0",
123+
"@material/ripple": "12.0.0-canary.1a8d06483.0",
124+
"@material/rtl": "12.0.0-canary.1a8d06483.0",
125+
"@material/segmented-button": "12.0.0-canary.1a8d06483.0",
126+
"@material/select": "12.0.0-canary.1a8d06483.0",
127+
"@material/shape": "12.0.0-canary.1a8d06483.0",
128+
"@material/slider": "12.0.0-canary.1a8d06483.0",
129+
"@material/snackbar": "12.0.0-canary.1a8d06483.0",
130+
"@material/switch": "12.0.0-canary.1a8d06483.0",
131+
"@material/tab": "12.0.0-canary.1a8d06483.0",
132+
"@material/tab-bar": "12.0.0-canary.1a8d06483.0",
133+
"@material/tab-indicator": "12.0.0-canary.1a8d06483.0",
134+
"@material/tab-scroller": "12.0.0-canary.1a8d06483.0",
135+
"@material/textfield": "12.0.0-canary.1a8d06483.0",
136+
"@material/theme": "12.0.0-canary.1a8d06483.0",
137+
"@material/tooltip": "12.0.0-canary.1a8d06483.0",
138+
"@material/top-app-bar": "12.0.0-canary.1a8d06483.0",
139+
"@material/touch-target": "12.0.0-canary.1a8d06483.0",
140+
"@material/typography": "12.0.0-canary.1a8d06483.0",
141141
"@octokit/rest": "18.3.5",
142142
"@schematics/angular": "^12.0.0",
143143
"@types/autoprefixer": "^9.7.2",

‎packages.bzl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
# all in-sync. This map is passed to each ng_package rule to stamp out the appropriate
33
# version for the placeholders.
44
ANGULAR_PACKAGE_VERSION = "^12.0.0 || ^13.0.0-0"
5-
MDC_PACKAGE_VERSION = "^12.0.0-canary.af453daf8.0"
5+
MDC_PACKAGE_VERSION = "^12.0.0-canary.1a8d06483.0"
66
TSLIB_PACKAGE_VERSION = "^2.1.0"
77
RXJS_PACKAGE_VERSION = "^6.5.3"
88

‎src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use '@material/menu-surface/mixins' as mdc-menu-surface;
2-
@use '@material/list/mixins' as mdc-list;
2+
@use '@material/list/evolution-mixins' as mdc-list;
33
@use '../mdc-helpers/mdc-helpers';
44
@use '../../material/core/typography/typography';
55
@use '../../material/core/theming/theming';
@@ -8,7 +8,7 @@
88
$config: theming.get-color-config($config-or-theme);
99
@include mdc-helpers.mat-using-mdc-theme($config) {
1010
@include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query);
11-
@include mdc-list.deprecated-without-ripple(mdc-helpers.$mat-theme-styles-query);
11+
@include mdc-list.without-ripple(mdc-helpers.$mat-theme-styles-query);
1212
}
1313
}
1414

@@ -21,7 +21,7 @@
2121
.mat-mdc-autocomplete-panel {
2222
// Note that we include this private mixin, because the public one adds
2323
// a bunch of styles that we aren't using for the autocomplete panel.
24-
@include mdc-list.deprecated-base_(mdc-helpers.$mat-typography-styles-query);
24+
@include mdc-list.list-base(mdc-helpers.$mat-typography-styles-query);
2525
}
2626
}
2727
}

‎src/material-experimental/mdc-autocomplete/autocomplete.scss‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
@use '@material/menu-surface/mixins' as mdc-menu-surface;
2-
@use '@material/list/mixins' as mdc-list;
2+
@use '@material/list/evolution-mixins' as mdc-list;
33
@use '../../cdk/a11y';
44

55
@include mdc-menu-surface.core-styles($query: structure);
@@ -15,9 +15,7 @@
1515
// below the input. We use our own positioning logic, so we need to set this ourselves.
1616
transform-origin: center top;
1717

18-
// Note that we include this private mixin, because the public
19-
// one adds a bunch of styles that we aren't using for the menu.
20-
@include mdc-list.deprecated-base_($query: structure);
18+
@include mdc-list.list-base($query: structure);
2119
@include a11y.high-contrast(active, off) {
2220
outline: solid 1px;
2321
}

‎src/material-experimental/mdc-autocomplete/autocomplete.spec.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1126,12 +1126,13 @@ describe('MDC-based MatAutocomplete', () => {
11261126
it('should scroll to active options on UP arrow', () => {
11271127
const scrollContainer =
11281128
document.querySelector('.cdk-overlay-pane .mat-mdc-autocomplete-panel')!;
1129+
const initialScrollTop = scrollContainer.scrollTop;
11291130

11301131
fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
11311132
fixture.detectChanges();
11321133

1133-
// Expect option bottom minus the panel height plus padding (528 - 256 + 8 = 272)
1134-
expect(scrollContainer.scrollTop).toEqual(280, `Expected panel to reveal last option.`);
1134+
expect(scrollContainer.scrollTop)
1135+
.toBeGreaterThan(initialScrollTop, `Expected panel to reveal last option.`);
11351136
});
11361137

11371138
it('should not scroll to active options that are fully in the panel', () => {

‎src/material-experimental/mdc-core/option/_optgroup-theme.scss‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@use '@material/list' as mdc-list;
21
@use '@material/theme/theme' as mdc-theme;
32
@use '../../mdc-helpers/mdc-helpers';
43
@use '../../../material/core/theming/theming';
@@ -12,8 +11,6 @@
1211
// Since this will usually be rendered in an overlay,
1312
// we have to explicitly set the default color.
1413
@include mdc-theme.prop(color, text-primary-on-background);
15-
@include mdc-list.deprecated-item-disabled-text-color(
16-
mdc-list.$deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query);
1714
}
1815
}
1916
}

‎src/material-experimental/mdc-core/option/_option-theme.scss‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
// stylelint-disable max-line-length
2-
31
@use '@material/theme/theme-color' as mdc-theme-color;
42
@use '@material/theme/theme' as mdc-theme;
5-
@use '@material/list' as mdc-list;
3+
@use '@material/list/evolution-mixins' as mdc-list-mixins;
64
@use '@material/typography' as mdc-typography;
75
@use '@material/ripple' as mdc-ripple;
86
@use '../../mdc-helpers/mdc-helpers';
@@ -17,38 +15,36 @@
1715
// Since this will usually be rendered in an overlay,
1816
// we have explicitly set the default color.
1917
@include mdc-theme.prop(color, text-primary-on-background);
20-
@include mdc-list.deprecated-item-disabled-text-color(
21-
mdc-list.$deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query);
2218

23-
&:hover:not(.mdc-deprecated-list-item--disabled),
24-
&:focus:not(.mdc-deprecated-list-item--disabled),
19+
&:hover:not(.mdc-list-item--disabled),
20+
&:focus:not(.mdc-list-item--disabled),
2521
&.mat-mdc-option-active,
2622

2723
// In multiple mode there is a checkbox to show that the option is selected.
28-
&.mdc-deprecated-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-deprecated-list-item--disabled) {
24+
&.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
2925
$color: mdc-theme-color.$on-surface;
3026
background: rgba($color, mdc-ripple.states-opacity($color, hover));
3127
}
3228
}
3329

3430
.mat-primary {
35-
.mat-mdc-option.mdc-deprecated-list-item--selected:not(.mdc-deprecated-list-item--disabled) {
36-
@include mdc-list.deprecated-item-primary-text-ink-color(
37-
primary, $query: mdc-helpers.$mat-theme-styles-query);
31+
.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
32+
@include mdc-list-mixins.list-primary-text-ink-color(primary,
33+
$query: mdc-helpers.$mat-theme-styles-query);
3834
}
3935
}
4036

4137
.mat-accent {
42-
.mat-mdc-option.mdc-deprecated-list-item--selected:not(.mdc-deprecated-list-item--disabled) {
43-
@include mdc-list.deprecated-item-primary-text-ink-color(
44-
secondary, $query: mdc-helpers.$mat-theme-styles-query);
38+
.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
39+
@include mdc-list-mixins.list-primary-text-ink-color(secondary,
40+
$query: mdc-helpers.$mat-theme-styles-query);
4541
}
4642
}
4743

4844
.mat-warn {
49-
.mat-mdc-option.mdc-deprecated-list-item--selected:not(.mdc-deprecated-list-item--disabled) {
50-
@include mdc-list.deprecated-item-primary-text-ink-color(
51-
error, $query: mdc-helpers.$mat-theme-styles-query);
45+
.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
46+
@include mdc-list-mixins.list-primary-text-ink-color(error,
47+
$query: mdc-helpers.$mat-theme-styles-query);
5248
}
5349
}
5450
}

‎src/material-experimental/mdc-core/option/optgroup.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<span
22
class="mat-mdc-optgroup-label"
33
aria-hidden="true"
4-
[class.mdc-deprecated-list-item--disabled]="disabled"
4+
[class.mdc-list-item--disabled]="disabled"
55
[id]="_labelId">
6-
<span class="mdc-deprecated-list-item__text">{{ label }} <ng-content></ng-content></span>
6+
<span class="mdc-list-item__primary-text">{{ label }} <ng-content></ng-content></span>
77
</span>
88

99
<ng-content select="mat-option, ng-container"></ng-content>

‎src/material-experimental/mdc-core/option/optgroup.scss‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
1-
@use '@material/list' as mdc-list;
1+
@use 'sass:map';
2+
@use '@material/list/evolution-mixins' as mdc-list-mixins;
3+
@use '@material/list/evolution-variables' as mdc-list-variables;
24
@use '../../mdc-helpers/mdc-helpers';
35

46
.mat-mdc-optgroup-label {
5-
@include mdc-list.deprecated-item-base_;
6-
@include mdc-list.deprecated-list-item-padding-variant(
7-
mdc-list.$deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query);
8-
@include mdc-list.deprecated-list-item-height-variant(
9-
mdc-list.$deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query);
10-
@include mdc-list.deprecated-item-disabled-text-opacity(
11-
mdc-list.$deprecated-text-disabled-opacity, $query: mdc-helpers.$mat-base-styles-query);
7+
@include mdc-list-mixins.item-base;
8+
@include mdc-list-mixins.item-spacing(
9+
mdc-list-variables.$side-padding, $query: mdc-helpers.$mat-base-styles-query);
10+
11+
// Set the `min-height` here ourselves, instead of going through
12+
// the `mdc-list-one-line-item-density` mixin, because it sets a `height`
13+
// which doesn't work well with multi-line options.
14+
$height-config: map.get(mdc-list-variables.$one-line-item-density-config, height);
15+
min-height: map.get($height-config, default);
16+
17+
&.mdc-list-item--disabled {
18+
// This is the same as `mdc-list-mixins.list-disabled-opacity` which
19+
// we can't use directly, because it comes with some selectors.
20+
opacity: mdc-list-variables.$content-disabled-opacity;
21+
}
1222
}

‎src/material-experimental/mdc-core/option/option.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<mat-pseudo-checkbox *ngIf="multiple" class="mat-mdc-option-pseudo-checkbox"
22
[state]="selected ? 'checked' : 'unchecked'" [disabled]="disabled"></mat-pseudo-checkbox>
33

4-
<span class="mdc-deprecated-list-item__text"><ng-content></ng-content></span>
4+
<span class="mdc-list-item__primary-text"><ng-content></ng-content></span>
55

66
<!-- See a11y notes inside optgroup.ts for context behind this element. -->
77
<span class="cdk-visually-hidden" *ngIf="group && group._inert">({{ group.label }})</span>

0 commit comments

Comments
 (0)