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
}

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

‎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-list',
17+
'class': 'mat-mdc-action-list mat-mdc-list-base mdc-deprecated-list',
1818
},
1919
styleUrls: ['list.css'],
2020
encapsulation: ViewEncapsulation.None,

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

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

6666
/** Whether the list-item is disabled. */
67+
@HostBinding('class.mdc-deprecated-list-item--disabled')
6768
@HostBinding('class.mdc-list-item--disabled')
6869
@HostBinding('attr.aria-disabled')
6970
@Input()
@@ -145,8 +146,9 @@ export abstract class MatListItemBase implements AfterContentInit, OnDestroy, Ri
145146
toggleClass(this._hostElement, 'mat-mdc-list-item-single-line', lines.length <= 1);
146147
lines.forEach((line: ElementRef<Element>, index: number) => {
147148
toggleClass(line.nativeElement,
148-
'mdc-list-item__primary-text', index === 0 && lines.length > 1);
149-
toggleClass(line.nativeElement, 'mdc-list-item__secondary-text', index !== 0);
149+
'mdc-deprecated-list-item__primary-text', index === 0 && lines.length > 1);
150+
toggleClass(
151+
line.nativeElement, 'mdc-deprecated-list-item__secondary-text', index !== 0);
150152
});
151153
setLines(lines, this._elementRef, 'mat-mdc');
152154
}));

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

Lines changed: 3 additions & 3 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-list-item__text"><ng-content select="[mat-line],[matLine]"></ng-content></span>
5+
<span class="mdc-deprecated-list-item__text"><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
1010
is an action that belongs in the "meta" section.
1111
-->
12-
<span [class.mdc-list-item__text]="!lines.length"
13-
[class.mdc-list-item__meta]="lines.length" #text>
12+
<span [class.mdc-deprecated-list-item__text]="!lines.length"
13+
[class.mdc-deprecated-list-item__meta]="lines.length" #text>
1414
<ng-content></ng-content>
1515
</span>
1616

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
</ng-template>
2626

2727
<!-- Container for the checkbox at start. -->
28-
<span class="mdc-list-item__graphic mat-mdc-list-option-checkbox-before"
28+
<span class="mdc-deprecated-list-item__graphic mat-mdc-list-option-checkbox-before"
2929
*ngIf="_shouldShowCheckboxAt('before')">
3030
<ng-template [ngTemplateOutlet]="checkbox"></ng-template>
3131
</span>
@@ -35,12 +35,12 @@
3535
</ng-template>
3636

3737
<!-- Text -->
38-
<span class="mdc-list-item__text" #text>
38+
<span class="mdc-deprecated-list-item__text" #text>
3939
<ng-content></ng-content>
4040
</span>
4141

4242
<!-- Container for the checkbox at the end. -->
43-
<span class="mdc-list-item__meta" *ngIf="_shouldShowCheckboxAt('after')">
43+
<span class="mdc-deprecated-list-item__meta" *ngIf="_shouldShowCheckboxAt('after')">
4444
<ng-template [ngTemplateOutlet]="checkbox"></ng-template>
4545
</span>
4646
<!-- Conditionally renders icons/avatars after the list item text. -->

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,11 +62,11 @@ export interface SelectionList extends MatListBase {
6262
exportAs: 'matListOption',
6363
styleUrls: ['list-option.css'],
6464
host: {
65-
'class': 'mat-mdc-list-item mat-mdc-list-option mdc-list-item',
65+
'class': 'mat-mdc-list-item mat-mdc-list-option mdc-deprecated-list-item',
6666
'role': 'option',
6767
// As per MDC, only list items in single selection mode should receive the `--selected`
6868
// class. For multi selection, the checkbox is used as indicator.
69-
'[class.mdc-list-item--selected]': 'selected && !_selectionList.multiple',
69+
'[class.mdc-deprecated-list-item--selected]': 'selected && !_selectionList.multiple',
7070
'[class.mat-mdc-list-item-with-avatar]': '_hasIconOrAvatar()',
7171
'[class.mat-accent]': 'color !== "primary" && color !== "warn"',
7272
'[class.mat-warn]': 'color === "warn"',

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,17 @@ import {Directive, Inject, Optional} from '@angular/core';
1010
import {LIST_OPTION, ListOption} from './list-option-types';
1111

1212
/**
13-
* MDC uses the very intuitively named classes `.mdc-list-item__graphic` and `.mat-list-item__meta`
14-
* to position content such as icons or checkboxes that comes either before or after the text
15-
* content respectively. This directive detects the placement of the checkbox and applies the
16-
* correct MDC class to position the icon/avatar on the opposite side.
13+
* MDC uses the very intuitively named classes `.mdc-deprecated-list-item__graphic` and
14+
* `.mat-list-item__meta` to position content such as icons or checkboxes that comes either before
15+
* or after the text content respectively. This directive detects the placement of the checkbox and
16+
* applies the correct MDC class to position the icon/avatar on the opposite side.
1717
* @docs-private
1818
*/
1919
@Directive({
2020
selector: '[mat-list-avatar], [matListAvatar], [mat-list-icon], [matListIcon]',
2121
host: {
22-
'[class.mdc-list-item__graphic]': '_isAlignedAtStart()',
23-
'[class.mdc-list-item__meta]': '!_isAlignedAtStart()',
22+
'[class.mdc-deprecated-list-item__graphic]': '_isAlignedAtStart()',
23+
'[class.mdc-deprecated-list-item__meta]': '!_isAlignedAtStart()',
2424
}
2525
})
2626
export class MatListGraphicAlignmentStyler {
@@ -62,6 +62,6 @@ export class MatListIconCssMatStyler {}
6262
selector: '[mat-subheader], [matSubheader]',
6363
// TODO(mmalerba): MDC's subheader font looks identical to the list item font, figure out why and
6464
// make a change in one of the repos to visually distinguish.
65-
host: {'class': 'mat-mdc-subheader mdc-list-group__subheader'}
65+
host: {'class': 'mat-mdc-subheader mdc-deprecated-list-group__subheader'}
6666
})
6767
export class MatListSubheaderCssMatStyler {}

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@
1010
display: block;
1111
}
1212

13-
// .mdc-list-item__primary-text adds its own margin settings, so only reset if it doesn't have that
14-
// class
15-
.mat-mdc-list-base .mdc-list-item__text > :not(.mdc-list-item__primary-text),
16-
.mat-mdc-list-base .mdc-list-item__text > :not(.mdc-list-item__primary-text) {
13+
// .mdc-deprecated-list-item__primary-text adds its own margin settings, so only reset if it doesn't
14+
// have that class
15+
.mat-mdc-list-base .mdc-deprecated-list-item__text > :not(.mdc-deprecated-list-item__primary-text),
16+
.mat-mdc-list-base .mdc-deprecated-list-item__text > :not(.mdc-deprecated-list-item__primary-text) {
1717
margin: 0;
1818

1919
// Fixes the gap between the 2nd & 3rd lines.
20-
&.mdc-list-item__secondary-text {
20+
&.mdc-deprecated-list-item__secondary-text {
2121
margin-top: -3px;
2222
}
2323
}
@@ -28,7 +28,7 @@
2828
.mat-mdc-2-line {
2929
height: 72px;
3030

31-
.mdc-list-item__text {
31+
.mdc-deprecated-list-item__text {
3232
align-self: flex-start;
3333
}
3434
}
@@ -37,7 +37,7 @@
3737
.mat-mdc-3-line {
3838
height: 88px;
3939

40-
.mdc-list-item__text {
40+
.mdc-deprecated-list-item__text {
4141
align-self: flex-start;
4242
}
4343
}
@@ -54,11 +54,11 @@
5454
height: $size;
5555
border-radius: 50%;
5656

57-
// Avatars that come before the text have the .mdc-list-item__graphic class.
58-
// MDC's .mdc-list--avatar-list class would normally apply overrides to set the appropriate
59-
// margins for avatar images, but since ours is a per-list-item setting we need to add similar
60-
// styles ourselves.
61-
&.mdc-list-item__graphic {
57+
// Avatars that come before the text have the .mdc-deprecated-list-item__graphic class.
58+
// MDC's .mdc-deprecated-list--avatar-list class would normally apply overrides to set the
59+
// appropriate margins for avatar images, but since ours is a per-list-item setting we need to add
60+
// similar styles ourselves.
61+
&.mdc-deprecated-list-item__graphic {
6262
margin-left: 0;
6363
margin-right: $margin-value;
6464

@@ -113,7 +113,7 @@
113113

114114
// MDC always sets the cursor to `pointer`. We do not want to show this for non-interactive
115115
// lists. See: https://github.com/material-components/material-components-web/issues/6443
116-
.mat-mdc-list-non-interactive .mdc-list-item {
116+
.mat-mdc-list-non-interactive .mdc-deprecated-list-item {
117117
cursor: default;
118118
}
119119

0 commit comments

Comments
 (0)