Skip to content

Commit f960a7a

Browse files
crisbetocrisbeto
authored
refactor(multiple): switch to non-deprecated MDC list styles (#22504)
Switches the components in `mdc-autocomplete`, `mdc-core`, `mdc-menu` and `mdc-select` to the non-deprecated MDC list styles.
1 parent 2f695c4 commit f960a7a

18 files changed

+119
-123
lines changed

‎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: 14 additions & 18 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
}
@@ -61,7 +57,7 @@
6157
@include mdc-helpers.mat-using-mdc-typography($config) {
6258
// MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
6359
// level. Class is repeated for increased specificity.
64-
.mat-mdc-option {
60+
.mat-mdc-option .mdc-list-item__primary-text {
6561
@include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
6662
}
6763
}

‎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>

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

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,23 @@
1-
@use '@material/list' as mdc-list;
1+
@use '@material/list/evolution-mixins' as mdc-list-mixins;
2+
@use '@material/list/evolution-variables' as mdc-list-variables;
23
@use 'sass:map';
34
@use '../../mdc-helpers/mdc-helpers';
45
@use '../../../material/core/style/vendor-prefixes';
56
@use '../../../cdk/a11y';
67
@use '../../../material/core/style/layout-common';
78

89
.mat-mdc-option {
9-
// Note that we include this private mixin, because the public
10-
// one adds a bunch of styles that we aren't using for the menu.
11-
@include mdc-list.deprecated-item-base_;
12-
@include mdc-list.deprecated-list-item-padding-variant(
13-
mdc-list.$deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query);
14-
@include mdc-list.deprecated-item-disabled-text-opacity(
15-
mdc-list.$deprecated-text-disabled-opacity, $query: mdc-helpers.$mat-base-styles-query);
10+
@include mdc-list-mixins.item-base;
11+
@include mdc-list-mixins.item-spacing(
12+
mdc-list-variables.$side-padding, $query: mdc-helpers.$mat-base-styles-query);
1613
@include vendor-prefixes.user-select(none);
14+
cursor: pointer;
1715

1816
// Set the `min-height` here ourselves, instead of going through
19-
// the `mdc-list-list-item-height-variant` mixin, because it sets a `height`
17+
// the `mdc-list-one-line-item-density` mixin, because it sets a `height`
2018
// which doesn't work well with multi-line options.
21-
min-height: map.get(mdc-list.$deprecated-textual-variant-config, single-line-height);
19+
$height-config: map.get(mdc-list-variables.$one-line-item-density-config, height);
20+
min-height: map.get($height-config, default);
2221

2322
// Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
2423
// element that will stretch the option to the correct height. See:
@@ -29,27 +28,30 @@
2928
content: '';
3029
}
3130

32-
&:not(.mdc-deprecated-list-item--disabled) {
33-
cursor: pointer;
31+
&.mdc-list-item--disabled {
32+
// This is the same as `mdc-list-mixins.list-disabled-opacity` which
33+
// we can't use directly, because it comes with some selectors.
34+
opacity: mdc-list-variables.$content-disabled-opacity;
35+
cursor: default;
3436
}
3537

3638
// Note that we bump the padding here, rather than padding inside the
3739
// group so that ripples still reach to the edges of the panel.
3840
.mat-mdc-optgroup &:not(.mat-mdc-option-multiple) {
39-
padding-left: mdc-list.$deprecated-side-padding * 2;
41+
padding-left: mdc-list-variables.$side-padding * 2;
4042

4143
[dir='rtl'] & {
42-
padding-left: mdc-list.$deprecated-side-padding;
43-
padding-right: mdc-list.$deprecated-side-padding * 2;
44+
padding-left: mdc-list-variables.$side-padding;
45+
padding-right: mdc-list-variables.$side-padding * 2;
4446
}
4547
}
4648

4749
.mat-pseudo-checkbox {
48-
margin-right: mdc-list.$deprecated-side-padding;
50+
margin-right: mdc-list-variables.$side-padding;
4951

5052
[dir='rtl'] & {
5153
margin-right: 0;
52-
margin-left: mdc-list.$deprecated-side-padding;
54+
margin-left: mdc-list-variables.$side-padding;
5355
}
5456
}
5557

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,10 @@ import {MatOptgroup} from './optgroup';
3232
host: {
3333
'role': 'option',
3434
'[attr.tabindex]': '_getTabIndex()',
35-
'[class.mdc-deprecated-list-item--selected]': 'selected',
35+
'[class.mdc-list-item--selected]': 'selected',
3636
'[class.mat-mdc-option-multiple]': 'multiple',
3737
'[class.mat-mdc-option-active]': 'active',
38-
'[class.mdc-deprecated-list-item--disabled]': 'disabled',
38+
'[class.mdc-list-item--disabled]': 'disabled',
3939
'[id]': 'id',
4040
'[attr.aria-selected]': '_getAriaSelected()',
4141
'[attr.aria-disabled]': 'disabled.toString()',

‎src/material-experimental/mdc-core/testing/option-harness.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export class MatOptionHarness extends ComponentHarness {
1515
static hostSelector = '.mat-mdc-option';
1616

1717
/** Element containing the option's text. */
18-
private _text = this.locatorFor('.mdc-deprecated-list-item__text');
18+
private _text = this.locatorFor('.mdc-list-item__primary-text');
1919

2020
/**
2121
* Gets a `HarnessPredicate` that can be used to search for a `MatOptionsHarness` that meets
@@ -45,12 +45,12 @@ export class MatOptionHarness extends ComponentHarness {
4545

4646
/** Gets whether the option is disabled. */
4747
async isDisabled(): Promise<boolean> {
48-
return (await this.host()).hasClass('mdc-deprecated-list-item--disabled');
48+
return (await this.host()).hasClass('mdc-list-item--disabled');
4949
}
5050

5151
/** Gets whether the option is selected. */
5252
async isSelected(): Promise<boolean> {
53-
return (await this.host()).hasClass('mdc-deprecated-list-item--selected');
53+
return (await this.host()).hasClass('mdc-list-item--selected');
5454
}
5555

5656
/** Gets whether the option is active. */

‎src/material-experimental/mdc-menu/_menu-theme.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@use '@material/theme/theme-color' as mdc-theme-color;
22
@use '@material/theme/theme' as mdc-theme;
33
@use '@material/menu-surface' as mdc-menu-surface;
4-
@use '@material/list' as mdc-list;
4+
@use '@material/list/evolution-mixins' as mdc-list;
55
@use '@material/typography' as mdc-typography;
66
@use '@material/ripple' as mdc-ripple;
77
@use '../mdc-helpers/mdc-helpers';
@@ -12,7 +12,7 @@
1212
$config: theming.get-color-config($config-or-theme);
1313
@include mdc-helpers.mat-using-mdc-theme($config) {
1414
@include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query);
15-
@include mdc-list.deprecated-without-ripple(mdc-helpers.$mat-theme-styles-query);
15+
@include mdc-list.without-ripple(mdc-helpers.$mat-theme-styles-query);
1616

1717
// MDC doesn't appear to have disabled styling for menu
1818
// items so we have to grey them out ourselves.
@@ -53,11 +53,11 @@
5353
.mat-mdc-menu-content {
5454
// Note that we include this private mixin, because the public
5555
// one adds a bunch of styles that we aren't using for the menu.
56-
@include mdc-list.deprecated-base_(mdc-helpers.$mat-typography-styles-query);
56+
@include mdc-list.list-base(mdc-helpers.$mat-typography-styles-query);
5757

5858
// MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
5959
// level.
60-
.mat-mdc-menu-item {
60+
.mat-mdc-menu-item .mdc-list-item__primary-text {
6161
@include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
6262
}
6363
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<ng-content></ng-content>
1+
<ng-content select="mat-icon"></ng-content>
2+
<span class="mdc-list-item__primary-text"><ng-content></ng-content></span>
23
<div class="mat-mdc-menu-ripple" matRipple
34
[matRippleDisabled]="disableRipple || disabled"
45
[matRippleTrigger]="_getHostElement()">

‎src/material-experimental/mdc-menu/menu.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
[attr.aria-label]="ariaLabel || null"
1414
[attr.aria-labelledby]="ariaLabelledby || null"
1515
[attr.aria-describedby]="ariaDescribedby || null">
16-
<div class="mat-mdc-menu-content mdc-deprecated-list">
16+
<div class="mat-mdc-menu-content mdc-list">
1717
<ng-content></ng-content>
1818
</div>
1919
</div>

0 commit comments

Comments
 (0)