Skip to content

Commit 8eb59f8

Browse files
mmalerbaAngular Material Team
mmalerba
and
Angular Material Team
authored
fix(material-experimental/mdc-list): update mixin and variable names (#21968)
PiperOrigin-RevId: 358465241 Co-authored-by: Angular Material Team <[email protected]>
1 parent a96fbc6 commit 8eb59f8

File tree

15 files changed

+647
-643
lines changed

15 files changed

+647
-643
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": "10.0.0",
66+
"material-components-web": "^11.0.0-canary.3201cae47.0",
6767
"rxjs": "^6.5.3",
6868
"rxjs-tslint-rules": "^4.33.1",
6969
"systemjs": "0.19.43",

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
$config: mat-get-color-config($config-or-theme);
77
@include mat-using-mdc-theme($config) {
88
@include mdc-menu-surface-core-styles($mat-theme-styles-query);
9-
@include mdc-list-without-ripple($mat-theme-styles-query);
9+
@include mdc-list-deprecated-without-ripple($mat-theme-styles-query);
1010
}
1111
}
1212

@@ -18,7 +18,7 @@
1818
.mat-mdc-autocomplete-panel {
1919
// Note that we include this private mixin, because the public one adds
2020
// a bunch of styles that we aren't using for the autocomplete panel.
21-
@include mdc-list-base_($mat-typography-styles-query);
21+
@include mdc-list-deprecated-base_($mat-typography-styles-query);
2222
}
2323
}
2424
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919

2020
// Note that we include this private mixin, because the public
2121
// one adds a bunch of styles that we aren't using for the menu.
22-
@include mdc-list-base_($query: structure);
22+
@include mdc-list-deprecated-base_($query: structure);
2323
@include cdk-high-contrast(active, off) {
2424
outline: solid 1px;
2525
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
// Since this will usually be rendered in an overlay,
1414
// we have explicitly set the default color.
1515
@include mdc-theme-prop(color, text-primary-on-background);
16-
@include mdc-list-item-disabled-text-color($mdc-list-text-disabled-color,
17-
$query: $mat-theme-styles-query);
16+
@include mdc-list-deprecated-item-disabled-text-color(
17+
$mdc-list-deprecated-text-disabled-color, $query: $mat-theme-styles-query);
1818
}
1919
}
2020
}

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
// Since this will usually be rendered in an overlay,
1515
// we have explicitly set the default color.
1616
@include mdc-theme-prop(color, text-primary-on-background);
17-
@include mdc-list-item-disabled-text-color($mdc-list-text-disabled-color,
18-
$query: $mat-theme-styles-query);
17+
@include mdc-list-deprecated-item-disabled-text-color(
18+
$mdc-list-deprecated-text-disabled-color, $query: $mat-theme-styles-query);
1919

2020
&:hover:not(.mdc-list-item--disabled),
2121
&:focus:not(.mdc-list-item--disabled),
@@ -29,15 +29,18 @@
2929
}
3030

3131
.mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
32-
@include mdc-list-item-primary-text-ink-color(primary, $query: $mat-theme-styles-query);
32+
@include mdc-list-deprecated-item-primary-text-ink-color(
33+
primary, $query: $mat-theme-styles-query);
3334
}
3435

3536
.mat-accent .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
36-
@include mdc-list-item-primary-text-ink-color(secondary, $query: $mat-theme-styles-query);
37+
@include mdc-list-deprecated-item-primary-text-ink-color(
38+
secondary, $query: $mat-theme-styles-query);
3739
}
3840

3941
.mat-warn .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
40-
@include mdc-list-item-primary-text-ink-color(error, $query: $mat-theme-styles-query);
42+
@include mdc-list-deprecated-item-primary-text-ink-color(
43+
error, $query: $mat-theme-styles-query);
4144
}
4245
}
4346
}

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
@import '../../mdc-helpers/mdc-helpers';
44

55
.mat-mdc-optgroup-label {
6-
@include mdc-list-item-base_;
7-
@include mdc-list-list-item-padding-variant(
8-
$mdc-list-textual-variant-config, $query: $mat-base-styles-query);
9-
@include mdc-list-list-item-height-variant(
10-
$mdc-list-textual-variant-config, $query: $mat-base-styles-query);
11-
@include mdc-list-item-disabled-text-opacity($mdc-list-text-disabled-opacity,
12-
$query: $mat-base-styles-query);
6+
@include mdc-list-deprecated-item-base_;
7+
@include mdc-list-deprecated-list-item-padding-variant(
8+
$mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query);
9+
@include mdc-list-deprecated-list-item-height-variant(
10+
$mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query);
11+
@include mdc-list-deprecated-item-disabled-text-opacity(
12+
$mdc-list-deprecated-text-disabled-opacity, $query: $mat-base-styles-query);
1313
}

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@
77
.mat-mdc-option {
88
// Note that we include this private mixin, because the public
99
// one adds a bunch of styles that we aren't using for the menu.
10-
@include mdc-list-item-base_;
11-
@include mdc-list-list-item-padding-variant(
12-
$mdc-list-textual-variant-config, $query: $mat-base-styles-query);
13-
@include mdc-list-item-disabled-text-opacity($mdc-list-text-disabled-opacity,
14-
$query: $mat-base-styles-query);
10+
@include mdc-list-deprecated-item-base_;
11+
@include mdc-list-deprecated-list-item-padding-variant(
12+
$mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query);
13+
@include mdc-list-deprecated-item-disabled-text-opacity(
14+
$mdc-list-deprecated-text-disabled-opacity, $query: $mat-base-styles-query);
1515
@include user-select(none);
1616

1717
// Set the `min-height` here ourselves, instead of going through
1818
// the `mdc-list-list-item-height-variant` mixin, because it sets a `height`
1919
// which doesn't work well with multi-line options.
20-
min-height: map-get($mdc-list-textual-variant-config, single-line-height);
20+
min-height: map-get($mdc-list-deprecated-textual-variant-config, single-line-height);
2121

2222
// Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
2323
// element that will stretch the option to the correct height. See:
@@ -35,20 +35,20 @@
3535
// Note that we bump the padding here, rather than padding inside the
3636
// group so that ripples still reach to the edges of the panel.
3737
.mat-mdc-optgroup &:not(.mat-mdc-option-multiple) {
38-
padding-left: $mdc-list-side-padding * 2;
38+
padding-left: $mdc-list-deprecated-side-padding * 2;
3939

4040
[dir='rtl'] & {
41-
padding-left: $mdc-list-side-padding;
42-
padding-right: $mdc-list-side-padding * 2;
41+
padding-left: $mdc-list-deprecated-side-padding;
42+
padding-right: $mdc-list-deprecated-side-padding * 2;
4343
}
4444
}
4545

4646
.mat-pseudo-checkbox {
47-
margin-right: $mdc-list-side-padding;
47+
margin-right: $mdc-list-deprecated-side-padding;
4848

4949
[dir='rtl'] & {
5050
margin-right: 0;
51-
margin-left: $mdc-list-side-padding;
51+
margin-left: $mdc-list-deprecated-side-padding;
5252
}
5353
}
5454

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@
1313
}
1414

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

1919
&::before {
2020
@include mdc-theme-prop(background, $color);

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
@include mat-mdc-private-interactive-list-item-state-colors($config);
1919

2020
@include mat-using-mdc-theme($config) {
21-
@include mdc-list-without-ripple($query: $mat-theme-styles-query);
21+
@include mdc-list-deprecated-without-ripple($query: $mat-theme-styles-query);
2222

2323
.mat-mdc-list-option {
2424
@include mat-mdc-private-list-option-color-override(primary);
@@ -35,7 +35,7 @@
3535
@mixin mat-mdc-list-density($config-or-theme) {
3636
$density-scale: mat-get-density-config($config-or-theme);
3737
$height: density.prop-value(
38-
$density-config: $mdc-list-single-line-density-config,
38+
$density-config: $mdc-list-deprecated-single-line-density-config,
3939
$density-scale: $density-scale,
4040
$property-name: height,
4141
);
@@ -45,7 +45,7 @@
4545
// the styles should actually only affect single-line list items. This has been reported as
4646
// a bug in the MDC repository: https://github.com/material-components/material-components-web/issues/5737.
4747
.mat-mdc-list-item-single-line {
48-
@include mdc-list-single-line-height($height);
48+
@include mdc-list-deprecated-single-line-height($height);
4949
}
5050

5151
@include mat-mdc-private-list-option-density-styles($density-scale);
@@ -54,7 +54,7 @@
5454
@mixin mat-mdc-list-typography($config-or-theme) {
5555
$config: mat-get-typography-config($config-or-theme);
5656
@include mat-using-mdc-typography($config) {
57-
@include mdc-list-without-ripple($query: $mat-typography-styles-query);
57+
@include mdc-list-deprecated-without-ripple($query: $mat-typography-styles-query);
5858
@include mat-mdc-private-list-option-typography-styles();
5959
}
6060
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@import '@material/list/variables.import';
33
@import '../mdc-helpers/mdc-helpers';
44

5-
@include mdc-list-without-ripple($query: $mat-base-styles-query);
5+
@include mdc-list-deprecated-without-ripple($query: $mat-base-styles-query);
66

77
// MDC expects the list element to be a `<ul>`, since we use `<mat-list>` instead we need to
88
// explicitly set `display: block`
@@ -48,7 +48,7 @@
4848
// Styles here come from `$mdc-list-graphic-size_`:
4949
// https://github.com/material-components/material-components-web/blob/3ca8c4c45a3d2a654ef3cb8fc7525bcde37badf0/packages/mdc-list/_mixins.scss#L538
5050
$size: 40px;
51-
$margin-value: 72px - $mdc-list-side-padding - $size;
51+
$margin-value: 72px - $mdc-list-deprecated-side-padding - $size;
5252

5353
width: $size;
5454
height: $size;

0 commit comments

Comments
 (0)