Skip to content

Commit 5524942

Browse files
annieywAngular Material Teammmalerba
authored
fix(material-experimental/mdc-list): rename mdc-list-* classes (#22157)
Co-authored-by: Angular Material Team <material@angular.io> Co-authored-by: Miles Malerba <mmalerba@google.com>
1 parent 4381b8e commit 5524942

27 files changed

+823
-172
lines changed

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
"@types/youtube": "^0.0.40",
6464
"@webcomponents/custom-elements": "^1.1.0",
6565
"core-js-bundle": "^3.8.2",
66-
"material-components-web": "11.0.0-canary.3201cae47.0",
66+
"material-components-web": "11.0.0-canary.73a227194.0",
6767
"rxjs": "^6.5.3",
6868
"rxjs-tslint-rules": "^4.33.1",
6969
"systemjs": "0.19.43",

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

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -17,30 +17,38 @@
1717
@include mdc-list.deprecated-item-disabled-text-color(
1818
mdc-list.$deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query);
1919

20-
&:hover:not(.mdc-list-item--disabled),
21-
&:focus:not(.mdc-list-item--disabled),
20+
&:hover:not(.mdc-deprecated-list-item--disabled),
21+
&:focus:not(.mdc-deprecated-list-item--disabled),
2222
&.mat-mdc-option-active,
2323

2424
// In multiple mode there is a checkbox to show that the option is selected.
25-
&.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
26-
$color: mdc-theme-color.$on-surface;
27-
background: rgba($color, mdc-ripple.states-opacity($color, hover));
25+
&.mdc-deprecated-list-item--selected {
26+
&:not(.mat-mdc-option-multiple):not(.mdc-deprecated-list-item--disabled) {
27+
$color: mdc-theme-color.$on-surface;
28+
background: rgba($color, mdc-ripple.states-opacity($color, hover));
29+
}
2830
}
2931
}
3032

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

36-
.mat-accent .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
37-
@include mdc-list.deprecated-item-primary-text-ink-color(
38-
secondary, $query: mdc-helpers.$mat-theme-styles-query);
40+
.mat-accent {
41+
.mat-mdc-option.mdc-deprecated-list-item--selected:not(.mdc-deprecated-list-item--disabled) {
42+
@include mdc-list.deprecated-item-primary-text-ink-color(
43+
secondary, $query: mdc-helpers.$mat-theme-styles-query);
44+
}
3945
}
4046

41-
.mat-warn .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
42-
@include mdc-list.deprecated-item-primary-text-ink-color(
43-
error, $query: mdc-helpers.$mat-theme-styles-query);
47+
.mat-warn {
48+
.mat-mdc-option.mdc-deprecated-list-item--selected:not(.mdc-deprecated-list-item--disabled) {
49+
@include mdc-list.deprecated-item-primary-text-ink-color(
50+
error, $query: mdc-helpers.$mat-theme-styles-query);
51+
}
4452
}
4553
}
4654
}
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__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/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__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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
content: '';
3030
}
3131

32-
&:not(.mdc-list-item--disabled) {
32+
&:not(.mdc-deprecated-list-item--disabled) {
3333
cursor: pointer;
3434
}
3535

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__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-list/_interactive-list-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
background: if($is-dark-theme, white, black);
1616
}
1717

18-
&.mdc-list-item--selected::before {
18+
&.mdc-deprecated-list-item--selected::before {
1919
background: theming.color(map.get($config, primary));
2020
opacity: map.get($state-opacities, selected);
2121
}
@@ -27,7 +27,7 @@
2727

2828
// MDC still shows focus/selected state if the option is disabled. Just the hover
2929
// styles should not show up.
30-
.mat-mdc-list-item-interactive:not(.mdc-list-item--disabled) {
30+
.mat-mdc-list-item-interactive:not(.mdc-deprecated-list-item--disabled) {
3131
&:hover::before {
3232
opacity: map.get($state-opacities, hover);
3333
}

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@
99
// default, the MDC list uses the `primary` color for list items. The MDC checkbox
1010
// inside list options by default uses the `primary` color too.
1111
@mixin private-list-option-color-override($color) {
12-
& .mdc-list-item__meta, & .mdc-list-item__graphic {
12+
& .mdc-deprecated-list-item__meta, & .mdc-deprecated-list-item__graphic {
1313
@include checkbox-theme.private-checkbox-styles-with-color($color);
1414
}
1515

16-
&.mdc-list-item--selected {
16+
&.mdc-deprecated-list-item--selected {
1717
@include mdc-list.deprecated-item-primary-text-ink-color($color);
1818
@include mdc-list.deprecated-item-graphic-ink-color($color);
1919

@@ -25,7 +25,7 @@
2525

2626
@mixin private-list-option-density-styles($density-scale) {
2727
.mat-mdc-list-option {
28-
.mdc-list-item__meta, .mdc-list-item__graphic {
28+
.mdc-deprecated-list-item__meta, .mdc-deprecated-list-item__graphic {
2929
.mdc-checkbox {
3030
@include mdc-checkbox.density($density-scale, $query: mdc-helpers.$mat-base-styles-query);
3131
}
@@ -35,7 +35,7 @@
3535

3636
@mixin private-list-option-typography-styles() {
3737
.mat-mdc-list-option {
38-
.mdc-list-item__meta, .mdc-list-item__graphic {
38+
.mdc-deprecated-list-item__meta, .mdc-deprecated-list-item__graphic {
3939
@include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
4040
}
4141
}

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,10 @@
4040
);
4141

4242
// MDC list provides a mixin called `mdc-list-single-line-density`, but we cannot use
43-
// that mixin, as the generated generated density styles are scoped to `.mdc-list-item`, while
44-
// the styles should actually only affect single-line list items. This has been reported as
45-
// a bug in the MDC repository: https://github.com/material-components/material-components-web/issues/5737.
43+
// that mixin, as the generated generated density styles are scoped to
44+
// `.mdc-deprecated-list-item`, while the styles should actually only affect single-line list
45+
// items. This has been reported as a bug in the MDC repository:
46+
// https://github.com/material-components/material-components-web/issues/5737.
4647
.mat-mdc-list-item-single-line {
4748
@include mdc-list.deprecated-single-line-height($height);
4849
}

0 commit comments

Comments
 (0)