Skip to content

Commit 4039c1c

Browse files
mmalerbammalerba
committed
Revert "refactor(multiple): switch to non-deprecated MDC list styles (#22504)"
This reverts commit 40b68a9.
1 parent 204fffe commit 4039c1c

18 files changed

+123
-119
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/evolution-mixins' as mdc-list;
2+
@use '@material/list/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.without-ripple(mdc-helpers.$mat-theme-styles-query);
11+
@include mdc-list.deprecated-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.list-base(mdc-helpers.$mat-typography-styles-query);
24+
@include mdc-list.deprecated-base_(mdc-helpers.$mat-typography-styles-query);
2525
}
2626
}
2727
}

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

Lines changed: 4 additions & 2 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/evolution-mixins' as mdc-list;
2+
@use '@material/list/mixins' as mdc-list;
33
@use '../../cdk/a11y';
44

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

18-
@include mdc-list.list-base($query: structure);
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);
1921
@include a11y.high-contrast(active, off) {
2022
outline: solid 1px;
2123
}

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1126,13 +1126,12 @@ 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;
11301129

11311130
fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT);
11321131
fixture.detectChanges();
11331132

1134-
expect(scrollContainer.scrollTop)
1135-
.toBeGreaterThan(initialScrollTop, `Expected panel to reveal last option.`);
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.`);
11361135
});
11371136

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

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
@use '@material/list' as mdc-list;
12
@use '@material/theme/theme' as mdc-theme;
23
@use '../../mdc-helpers/mdc-helpers';
34
@use '../../../material/core/theming/theming';
@@ -11,6 +12,8 @@
1112
// Since this will usually be rendered in an overlay,
1213
// we have to explicitly set the default color.
1314
@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);
1417
}
1518
}
1619
}

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

Lines changed: 18 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
// stylelint-disable max-line-length
2+
13
@use '@material/theme/theme-color' as mdc-theme-color;
24
@use '@material/theme/theme' as mdc-theme;
3-
@use '@material/list/evolution-mixins' as mdc-list-mixins;
5+
@use '@material/list' as mdc-list;
46
@use '@material/typography' as mdc-typography;
57
@use '@material/ripple' as mdc-ripple;
68
@use '../../mdc-helpers/mdc-helpers';
@@ -15,36 +17,38 @@
1517
// Since this will usually be rendered in an overlay,
1618
// we have explicitly set the default color.
1719
@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);
1822

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

2327
// In multiple mode there is a checkbox to show that the option is selected.
24-
&.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
28+
&.mdc-deprecated-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-deprecated-list-item--disabled) {
2529
$color: mdc-theme-color.$on-surface;
2630
background: rgba($color, mdc-ripple.states-opacity($color, hover));
2731
}
2832
}
2933

3034
.mat-primary {
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);
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);
3438
}
3539
}
3640

3741
.mat-accent {
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);
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);
4145
}
4246
}
4347

4448
.mat-warn {
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);
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);
4852
}
4953
}
5054
}
@@ -57,7 +61,7 @@
5761
@include mdc-helpers.mat-using-mdc-typography($config) {
5862
// MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
5963
// level. Class is repeated for increased specificity.
60-
.mat-mdc-option .mdc-list-item__primary-text {
64+
.mat-mdc-option {
6165
@include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
6266
}
6367
}

‎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-list-item--disabled]="disabled"
4+
[class.mdc-deprecated-list-item--disabled]="disabled"
55
[id]="_labelId">
6-
<span class="mdc-list-item__primary-text">{{ label }} <ng-content></ng-content></span>
6+
<span class="mdc-deprecated-list-item__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: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,12 @@
1-
@use 'sass:map';
2-
@use '@material/list/evolution-mixins' as mdc-list-mixins;
3-
@use '@material/list/evolution-variables' as mdc-list-variables;
1+
@use '@material/list' as mdc-list;
42
@use '../../mdc-helpers/mdc-helpers';
53

64
.mat-mdc-optgroup-label {
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-
}
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);
2212
}

‎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-list-item__primary-text"><ng-content></ng-content></span>
4+
<span class="mdc-deprecated-list-item__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: 17 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
1-
@use '@material/list/evolution-mixins' as mdc-list-mixins;
2-
@use '@material/list/evolution-variables' as mdc-list-variables;
1+
@use '@material/list' as mdc-list;
32
@use 'sass:map';
43
@use '../../mdc-helpers/mdc-helpers';
54
@use '../../../material/core/style/vendor-prefixes';
65
@use '../../../cdk/a11y';
76
@use '../../../material/core/style/layout-common';
87

98
.mat-mdc-option {
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);
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);
1316
@include vendor-prefixes.user-select(none);
14-
cursor: pointer;
1517

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

2223
// Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
2324
// element that will stretch the option to the correct height. See:
@@ -28,30 +29,27 @@
2829
content: '';
2930
}
3031

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;
32+
&:not(.mdc-deprecated-list-item--disabled) {
33+
cursor: pointer;
3634
}
3735

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

4341
[dir='rtl'] & {
44-
padding-left: mdc-list-variables.$side-padding;
45-
padding-right: mdc-list-variables.$side-padding * 2;
42+
padding-left: mdc-list.$deprecated-side-padding;
43+
padding-right: mdc-list.$deprecated-side-padding * 2;
4644
}
4745
}
4846

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

5250
[dir='rtl'] & {
5351
margin-right: 0;
54-
margin-left: mdc-list-variables.$side-padding;
52+
margin-left: mdc-list.$deprecated-side-padding;
5553
}
5654
}
5755

‎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-list-item--selected]': 'selected',
35+
'[class.mdc-deprecated-list-item--selected]': 'selected',
3636
'[class.mat-mdc-option-multiple]': 'multiple',
3737
'[class.mat-mdc-option-active]': 'active',
38-
'[class.mdc-list-item--disabled]': 'disabled',
38+
'[class.mdc-deprecated-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-list-item__primary-text');
18+
private _text = this.locatorFor('.mdc-deprecated-list-item__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-list-item--disabled');
48+
return (await this.host()).hasClass('mdc-deprecated-list-item--disabled');
4949
}
5050

5151
/** Gets whether the option is selected. */
5252
async isSelected(): Promise<boolean> {
53-
return (await this.host()).hasClass('mdc-list-item--selected');
53+
return (await this.host()).hasClass('mdc-deprecated-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/evolution-mixins' as mdc-list;
4+
@use '@material/list' 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.without-ripple(mdc-helpers.$mat-theme-styles-query);
15+
@include mdc-list.deprecated-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.list-base(mdc-helpers.$mat-typography-styles-query);
56+
@include mdc-list.deprecated-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 .mdc-list-item__primary-text {
60+
.mat-mdc-menu-item {
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: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
<ng-content select="mat-icon"></ng-content>
2-
<span class="mdc-list-item__primary-text"><ng-content></ng-content></span>
1+
<ng-content></ng-content>
32
<div class="mat-mdc-menu-ripple" matRipple
43
[matRippleDisabled]="disableRipple || disabled"
54
[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-list">
16+
<div class="mat-mdc-menu-content mdc-deprecated-list">
1717
<ng-content></ng-content>
1818
</div>
1919
</div>

0 commit comments

Comments
 (0)