Skip to content

Commit bc212a5

Browse files
devversiondevversion
committed
refactor(material-experimental/mdc-list): no longer use deprecated styles
We recently switched the MDC list to deprecated styles as the MDC team started reworking the MDC list and our usage is not compatible. With this change, we start using the standard non-deprecated MDC list styles. This allows us to simplify a few custom CSS overrides due the new MDC list API being more aligned with the API we want to support for backwards comaptibility with the non-MDC list (e.g. per list-item icons and avatars instead of it being a per-list setting).
1 parent 25924fa commit bc212a5

24 files changed

+387
-1002
lines changed

‎package.json

Lines changed: 48 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
"@types/googlemaps": "^3.43.1",
6464
"@types/youtube": "^0.0.42",
6565
"core-js-bundle": "^3.8.2",
66-
"material-components-web": "^12.0.0-canary.a23ecb682.0",
66+
"material-components-web": "^12.0.0-canary.00b5899dc.0",
6767
"rxjs": "^6.5.3",
6868
"rxjs-tslint-rules": "^4.33.1",
6969
"systemjs": "0.19.43",
@@ -95,53 +95,53 @@
9595
"@bazel/terser": "3.5.0",
9696
"@bazel/typescript": "3.5.0",
9797
"@firebase/app-types": "^0.6.1",
98-
"@material/animation": "^12.0.0-canary.a23ecb682.0",
99-
"@material/auto-init": "^12.0.0-canary.a23ecb682.0",
100-
"@material/banner": "^12.0.0-canary.a23ecb682.0",
101-
"@material/base": "^12.0.0-canary.a23ecb682.0",
102-
"@material/button": "^12.0.0-canary.a23ecb682.0",
103-
"@material/card": "^12.0.0-canary.a23ecb682.0",
104-
"@material/checkbox": "^12.0.0-canary.a23ecb682.0",
105-
"@material/chips": "^12.0.0-canary.a23ecb682.0",
106-
"@material/circular-progress": "^12.0.0-canary.a23ecb682.0",
107-
"@material/data-table": "^12.0.0-canary.a23ecb682.0",
108-
"@material/density": "^12.0.0-canary.a23ecb682.0",
109-
"@material/dialog": "^12.0.0-canary.a23ecb682.0",
110-
"@material/dom": "^12.0.0-canary.a23ecb682.0",
111-
"@material/drawer": "^12.0.0-canary.a23ecb682.0",
112-
"@material/elevation": "^12.0.0-canary.a23ecb682.0",
113-
"@material/fab": "^12.0.0-canary.a23ecb682.0",
114-
"@material/feature-targeting": "^12.0.0-canary.a23ecb682.0",
115-
"@material/floating-label": "^12.0.0-canary.a23ecb682.0",
116-
"@material/form-field": "^12.0.0-canary.a23ecb682.0",
117-
"@material/icon-button": "^12.0.0-canary.a23ecb682.0",
118-
"@material/image-list": "^12.0.0-canary.a23ecb682.0",
119-
"@material/layout-grid": "^12.0.0-canary.a23ecb682.0",
120-
"@material/line-ripple": "^12.0.0-canary.a23ecb682.0",
121-
"@material/linear-progress": "^12.0.0-canary.a23ecb682.0",
122-
"@material/list": "^12.0.0-canary.a23ecb682.0",
123-
"@material/menu": "^12.0.0-canary.a23ecb682.0",
124-
"@material/menu-surface": "^12.0.0-canary.a23ecb682.0",
125-
"@material/notched-outline": "^12.0.0-canary.a23ecb682.0",
126-
"@material/radio": "^12.0.0-canary.a23ecb682.0",
127-
"@material/ripple": "^12.0.0-canary.a23ecb682.0",
128-
"@material/rtl": "^12.0.0-canary.a23ecb682.0",
129-
"@material/segmented-button": "^12.0.0-canary.a23ecb682.0",
130-
"@material/select": "^12.0.0-canary.a23ecb682.0",
131-
"@material/shape": "^12.0.0-canary.a23ecb682.0",
132-
"@material/slider": "^12.0.0-canary.a23ecb682.0",
133-
"@material/snackbar": "^12.0.0-canary.a23ecb682.0",
134-
"@material/switch": "^12.0.0-canary.a23ecb682.0",
135-
"@material/tab": "^12.0.0-canary.a23ecb682.0",
136-
"@material/tab-bar": "^12.0.0-canary.a23ecb682.0",
137-
"@material/tab-indicator": "^12.0.0-canary.a23ecb682.0",
138-
"@material/tab-scroller": "^12.0.0-canary.a23ecb682.0",
139-
"@material/textfield": "^12.0.0-canary.a23ecb682.0",
140-
"@material/theme": "^12.0.0-canary.a23ecb682.0",
141-
"@material/tooltip": "^12.0.0-canary.a23ecb682.0",
142-
"@material/top-app-bar": "^12.0.0-canary.a23ecb682.0",
143-
"@material/touch-target": "^12.0.0-canary.a23ecb682.0",
144-
"@material/typography": "^12.0.0-canary.a23ecb682.0",
98+
"@material/animation": "^12.0.0-canary.00b5899dc.0",
99+
"@material/auto-init": "^12.0.0-canary.00b5899dc.0",
100+
"@material/banner": "^12.0.0-canary.00b5899dc.0",
101+
"@material/base": "^12.0.0-canary.00b5899dc.0",
102+
"@material/button": "^12.0.0-canary.00b5899dc.0",
103+
"@material/card": "^12.0.0-canary.00b5899dc.0",
104+
"@material/checkbox": "^12.0.0-canary.00b5899dc.0",
105+
"@material/chips": "^12.0.0-canary.00b5899dc.0",
106+
"@material/circular-progress": "^12.0.0-canary.00b5899dc.0",
107+
"@material/data-table": "^12.0.0-canary.00b5899dc.0",
108+
"@material/density": "^12.0.0-canary.00b5899dc.0",
109+
"@material/dialog": "^12.0.0-canary.00b5899dc.0",
110+
"@material/dom": "^12.0.0-canary.00b5899dc.0",
111+
"@material/drawer": "^12.0.0-canary.00b5899dc.0",
112+
"@material/elevation": "^12.0.0-canary.00b5899dc.0",
113+
"@material/fab": "^12.0.0-canary.00b5899dc.0",
114+
"@material/feature-targeting": "^12.0.0-canary.00b5899dc.0",
115+
"@material/floating-label": "^12.0.0-canary.00b5899dc.0",
116+
"@material/form-field": "^12.0.0-canary.00b5899dc.0",
117+
"@material/icon-button": "^12.0.0-canary.00b5899dc.0",
118+
"@material/image-list": "^12.0.0-canary.00b5899dc.0",
119+
"@material/layout-grid": "^12.0.0-canary.00b5899dc.0",
120+
"@material/line-ripple": "^12.0.0-canary.00b5899dc.0",
121+
"@material/linear-progress": "^12.0.0-canary.00b5899dc.0",
122+
"@material/list": "^12.0.0-canary.00b5899dc.0",
123+
"@material/menu": "^12.0.0-canary.00b5899dc.0",
124+
"@material/menu-surface": "^12.0.0-canary.00b5899dc.0",
125+
"@material/notched-outline": "^12.0.0-canary.00b5899dc.0",
126+
"@material/radio": "^12.0.0-canary.00b5899dc.0",
127+
"@material/ripple": "^12.0.0-canary.00b5899dc.0",
128+
"@material/rtl": "^12.0.0-canary.00b5899dc.0",
129+
"@material/segmented-button": "^12.0.0-canary.00b5899dc.0",
130+
"@material/select": "^12.0.0-canary.00b5899dc.0",
131+
"@material/shape": "^12.0.0-canary.00b5899dc.0",
132+
"@material/slider": "^12.0.0-canary.00b5899dc.0",
133+
"@material/snackbar": "^12.0.0-canary.00b5899dc.0",
134+
"@material/switch": "^12.0.0-canary.00b5899dc.0",
135+
"@material/tab": "^12.0.0-canary.00b5899dc.0",
136+
"@material/tab-bar": "^12.0.0-canary.00b5899dc.0",
137+
"@material/tab-indicator": "^12.0.0-canary.00b5899dc.0",
138+
"@material/tab-scroller": "^12.0.0-canary.00b5899dc.0",
139+
"@material/textfield": "^12.0.0-canary.00b5899dc.0",
140+
"@material/theme": "^12.0.0-canary.00b5899dc.0",
141+
"@material/tooltip": "^12.0.0-canary.00b5899dc.0",
142+
"@material/top-app-bar": "^12.0.0-canary.00b5899dc.0",
143+
"@material/touch-target": "^12.0.0-canary.00b5899dc.0",
144+
"@material/typography": "^12.0.0-canary.00b5899dc.0",
145145
"@octokit/rest": "18.3.5",
146146
"@rollup/plugin-babel": "^5.3.0",
147147
"@rollup/plugin-commonjs": "^18.0.0",

‎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.a23ecb682.0"
5+
MDC_PACKAGE_VERSION = "^12.0.0-canary.00b5899dc.0"
66
TSLIB_PACKAGE_VERSION = "^2.1.0"
77
RXJS_PACKAGE_VERSION = "^6.5.3"
88

‎src/dev-app/mdc-list/mdc-list-demo.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,13 @@ export class MdcListDemo {
3535
from: 'Nancy',
3636
subject: 'Brunch?',
3737
message: 'Did you want to go on Sunday? I was thinking that might work.',
38-
image: 'https://angular.io/generated/images/bios/julie-ralph.jpg'
38+
image: 'https://angular.io/generated/images/bios/cindygreenekaplan.jpg'
3939
},
4040
{
4141
from: 'Mary',
4242
subject: 'Summer BBQ',
4343
message: 'Wish I could come, but I have some prior obligations.',
44-
image: 'https://angular.io/generated/images/bios/juleskremer.jpg'
44+
image: 'https://angular.io/generated/images/bios/annieyw.jpg'
4545
},
4646
{
4747
from: 'Bobby',

‎src/material-experimental/mdc-list/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@ sass_binary(
6666
"external/npm/node_modules",
6767
],
6868
deps = [
69+
":mdc_list_scss_lib",
6970
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
7071
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
7172
],

‎src/material-experimental/mdc-list/_interactive-list-theme.scss

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,29 @@
66
// has integrated styles for these states but relies on their complex ripples for it.
77
@mixin private-interactive-list-item-state-colors($config) {
88
$is-dark-theme: map.get($config, is-dark);
9-
$state-opacities:
10-
if($is-dark-theme, mdc-ripple.$light-ink-opacities, mdc-ripple.$dark-ink-opacities);
9+
$active-base-color: if($is-dark-theme, white, black);
10+
$selected-color: theming.get-color-from-palette(map.get($config, primary));
1111

1212
.mat-mdc-list-item-interactive {
1313
&::before {
14-
background: if($is-dark-theme, white, black);
14+
background: $active-base-color;
1515
}
1616

17-
&.mdc-deprecated-list-item--selected::before {
18-
background: theming.get-color-from-palette(map.get($config, primary));
19-
opacity: map.get($state-opacities, selected);
17+
&.mdc-list-item--selected::before {
18+
background: $selected-color;
19+
opacity: mdc-ripple.states-opacity($selected-color, selected);
2020
}
2121

2222
&:focus::before {
23-
opacity: map.get($state-opacities, focus);
23+
opacity: mdc-ripple.states-opacity($active-base-color, focus);
2424
}
2525
}
2626

27-
// MDC still shows focus/selected state if the option is disabled. Just the hover
28-
// styles should not show up.
29-
.mat-mdc-list-item-interactive:not(.mdc-deprecated-list-item--disabled) {
27+
// MDC still shows focus/selected state if the item is disabled.
28+
// Just hover styles should not show up for disabled items.
29+
.mat-mdc-list-item-interactive:not(.mdc-list-item--disabled) {
3030
&:hover::before {
31-
opacity: map.get($state-opacities, hover);
31+
opacity: mdc-ripple.states-opacity($active-base-color, hover);
3232
}
3333
}
3434
}

‎src/material-experimental/mdc-list/_list-option-theme.scss

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,27 @@
1-
@use '@material/theme/theme' as mdc-theme;
21
@use '@material/checkbox' as mdc-checkbox;
3-
@use '@material/list' as mdc-list;
42
@use '../mdc-checkbox/checkbox-theme';
53
@use '../mdc-helpers/mdc-helpers';
6-
4+
@use './list-option-trailing-avatar-compat';
75

86
// Mixin that overrides the selected item and checkbox colors for list options. By
97
// default, the MDC list uses the `primary` color for list items. The MDC checkbox
108
// inside list options by default uses the `primary` color too.
119
@mixin private-list-option-color-override($color) {
12-
& .mdc-deprecated-list-item__meta, & .mdc-deprecated-list-item__graphic {
10+
& .mdc-list-item__start, & .mdc-list-item__end {
1311
@include checkbox-theme.private-checkbox-styles-with-color($color);
1412
}
15-
16-
&.mdc-deprecated-list-item--selected {
17-
@include mdc-list.deprecated-item-primary-text-ink-color($color);
18-
@include mdc-list.deprecated-item-graphic-ink-color($color);
19-
20-
&::before {
21-
@include mdc-theme.prop(background, $color);
22-
}
23-
}
2413
}
2514

2615
@mixin private-list-option-density-styles($density-scale) {
27-
.mat-mdc-list-option {
28-
.mdc-deprecated-list-item__meta, .mdc-deprecated-list-item__graphic {
29-
.mdc-checkbox {
30-
@include mdc-checkbox.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
31-
}
32-
}
33-
}
16+
@include list-option-trailing-avatar-compat.density-styles($density-scale);
3417
}
3518

3619
@mixin private-list-option-typography-styles() {
20+
@include list-option-trailing-avatar-compat.core-styles(
21+
$query: mdc-helpers.$mat-typography-styles-query);
22+
3723
.mat-mdc-list-option {
38-
.mdc-deprecated-list-item__meta, .mdc-deprecated-list-item__graphic {
24+
.mdc-list-item__start, .mdc-list-item__end {
3925
@include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
4026
}
4127
}

‎src/material-experimental/mdc-list/_list-option-trailing-avatar-compat.scss

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
@use '@material/typography/typography';
2+
@use '@material/feature-targeting/feature-targeting';
3+
@use '@material/density/functions' as density-functions;
4+
@use '@material/list/evolution-mixins' as mdc-list;
5+
@use '@material/list/evolution-variables' as mdc-list-variables;
6+
7+
// For compatibility with the non-MDC selection list, we support avatars that are
8+
// shown at the end of the list option. This is not supported by the MDC list as the
9+
// spec only defines avatars at the beginning of a list item. For selection list options,
10+
// we support changing the checkbox position to `before`. This results in the avatar from
11+
// the list start being moved to the end. Similar to MDC's `--trailing-icon` class, we
12+
// implement a `--trailing-avatar` class that is based on the original `--leading-avatar`
13+
// implementation. See: https://github.com/material-components/material-components-web/blob/3f342c3f4715fd3587f327ce4ea6b5dd314c5c55/packages/mdc-list/_evolution-mixins.scss#L198-L217
14+
15+
@mixin core-styles($query) {
16+
$feat-structure: feature-targeting.create-target($query, structure);
17+
18+
.mat-mdc-list-option-with-trailing-avatar {
19+
@include mdc-list.item-end-spacing(16px, $query: $query);
20+
@include mdc-list.item-end-size(40px, $query: $query);
21+
22+
&.mdc-list-item--with-two-lines {
23+
.mdc-list-item__primary-text {
24+
@include typography.text-baseline($top: 32px, $bottom: 20px, $query: $query);
25+
}
26+
}
27+
28+
.mdc-list-item__end {
29+
@include feature-targeting.targets($feat-structure) {
30+
border-radius: 50%;
31+
}
32+
}
33+
}
34+
}
35+
36+
@mixin density-styles($density-scale) {
37+
$one-line-tall-height: density-functions.prop-value(
38+
$density-config: mdc-list-variables.$one-line-item-tall-density-config,
39+
$density-scale: $density-scale,
40+
$property-name: height,
41+
);
42+
43+
$two-line-tall-height: density-functions.prop-value(
44+
$density-config: mdc-list-variables.$two-line-item-tall-density-config,
45+
$density-scale: $density-scale,
46+
$property-name: height,
47+
);
48+
49+
.mat-mdc-list-option-with-trailing-avatar {
50+
@include mdc-list.one-line-item-height($one-line-tall-height);
51+
@include mdc-list.two-line-item-height($two-line-tall-height);
52+
}
53+
}

‎src/material-experimental/mdc-list/_list-theme.scss

Lines changed: 7 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
@use '@material/density' as mdc-density;
2-
@use '@material/list' as mdc-list;
1+
@use '@material/list/evolution-mixins' as mdc-list;
32
@use './interactive-list-theme';
43
@use './list-option-theme';
54
@use '../mdc-helpers/mdc-helpers';
@@ -18,7 +17,7 @@
1817
@include interactive-list-theme.private-interactive-list-item-state-colors($config);
1918

2019
@include mdc-helpers.mat-using-mdc-theme($config) {
21-
@include mdc-list.deprecated-without-ripple($query: mdc-helpers.$mat-theme-styles-query);
20+
@include mdc-list.without-ripple($query: mdc-helpers.$mat-theme-styles-query);
2221

2322
.mat-mdc-list-option {
2423
@include list-option-theme.private-list-option-color-override(primary);
@@ -34,19 +33,11 @@
3433

3534
@mixin density($config-or-theme) {
3635
$density-scale: theming.get-density-config($config-or-theme);
37-
$height: mdc-density.prop-value(
38-
$density-config: mdc-list.$deprecated-single-line-density-config,
39-
$density-scale: $density-scale,
40-
$property-name: height,
41-
);
4236

43-
// MDC list provides a mixin called `mdc-list-single-line-density`, but we cannot use
44-
// that mixin, as the generated generated density styles are scoped to
45-
// `.mdc-deprecated-list-item`, while the styles should actually only affect single-line list
46-
// items. This has been reported as a bug in the MDC repository:
47-
// https://github.com/material-components/material-components-web/issues/5737.
48-
.mat-mdc-list-item-single-line {
49-
@include mdc-list.deprecated-single-line-height($height);
37+
.mat-mdc-list-item {
38+
@include mdc-list.one-line-item-density($density-scale);
39+
@include mdc-list.two-line-item-density($density-scale);
40+
@include mdc-list.three-line-item-density($density-scale);
5041
}
5142

5243
@include list-option-theme.private-list-option-density-styles($density-scale);
@@ -56,7 +47,7 @@
5647
$config: typography.private-typography-to-2018-config(
5748
theming.get-typography-config($config-or-theme));
5849
@include mdc-helpers.mat-using-mdc-typography($config) {
59-
@include mdc-list.deprecated-without-ripple($query: mdc-helpers.$mat-typography-styles-query);
50+
@include mdc-list.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
6051
@include list-option-theme.private-list-option-typography-styles();
6152
}
6253
}

‎src/material-experimental/mdc-list/action-list.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {MatListBase} from './list-base';
1414
exportAs: 'matActionList',
1515
template: '<ng-content></ng-content>',
1616
host: {
17-
'class': 'mat-mdc-action-list mat-mdc-list-base mdc-deprecated-list',
17+
'class': 'mat-mdc-action-list mat-mdc-list-base mdc--list',
1818
},
1919
styleUrls: ['list.css'],
2020
encapsulation: ViewEncapsulation.None,

‎src/material-experimental/mdc-list/list-base.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
6565
private _disableRipple: boolean = false;
6666

6767
/** Whether the list-item is disabled. */
68-
@HostBinding('class.mdc-deprecated-list-item--disabled')
6968
@HostBinding('class.mdc-list-item--disabled')
7069
@HostBinding('attr.aria-disabled')
7170
@Input()
@@ -155,11 +154,17 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
155154
this._subscriptions.add(this.lines.changes.pipe(startWith(this.lines))
156155
.subscribe((lines: QueryList<ElementRef<Element>>) => {
157156
toggleClass(this._hostElement, 'mat-mdc-list-item-single-line', lines.length <= 1);
157+
toggleClass(this._hostElement, 'mdc-list-item--with-one-line', lines.length <= 1);
158+
158159
lines.forEach((line: ElementRef<Element>, index: number) => {
160+
toggleClass(
161+
this._hostElement, 'mdc-list-item--with-two-lines', lines.length === 2);
162+
toggleClass(
163+
this._hostElement, 'mdc-list-item--with-three-lines', lines.length === 3);
159164
toggleClass(line.nativeElement,
160-
'mdc-deprecated-list-item__primary-text', index === 0 && lines.length > 1);
165+
'mdc-list-item__primary-text', index === 0 && lines.length > 1);
161166
toggleClass(
162-
line.nativeElement, 'mdc-deprecated-list-item__secondary-text', index !== 0);
167+
line.nativeElement, 'mdc-list-item__secondary-text', index !== 0);
163168
});
164169
setLines(lines, this._elementRef, 'mat-mdc');
165170
}));

‎src/material-experimental/mdc-list/list-item.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22

33
<!-- If lines were explicitly given, use those as the text. -->
44
<ng-container *ngIf="lines.length">
5-
<span class="mdc-deprecated-list-item__text"><ng-content select="[mat-line],[matLine]"></ng-content></span>
5+
<span class="mdc-list-item__content"><ng-content select="[mat-line],[matLine]"></ng-content></span>
66
</ng-container>
77

88
<!--
99
If lines were not explicitly given, assume the remaining content is the text, otherwise assume it
10-
is an action that belongs in the "meta" section.
10+
is an action that belongs in the "end" section.
1111
-->
12-
<span [class.mdc-deprecated-list-item__text]="!lines.length"
13-
[class.mdc-deprecated-list-item__meta]="lines.length" #text>
12+
<span [class.mdc-list-item__content]="!lines.length"
13+
[class.mdc-list-item__end]="lines.length" #text>
1414
<ng-content></ng-content>
1515
</span>
1616

0 commit comments

Comments
 (0)