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

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;

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
$config: mat-get-color-config($config-or-theme);
1212
@include mat-using-mdc-theme($config) {
1313
@include mdc-menu-surface-core-styles($mat-theme-styles-query);
14-
@include mdc-list-without-ripple($mat-theme-styles-query);
14+
@include mdc-list-deprecated-without-ripple($mat-theme-styles-query);
1515

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

5656
// MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
5757
// level.

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ mat-menu {
1717
.mat-mdc-menu-content {
1818
// Note that we include this private mixin, because the public
1919
// one adds a bunch of styles that we aren't using for the menu.
20-
@include mdc-list-base_($query: structure);
20+
@include mdc-list-deprecated-base_($query: structure);
2121
}
2222

2323
.mat-mdc-menu-panel {
@@ -36,21 +36,21 @@ mat-menu {
3636

3737
.mat-mdc-menu-item {
3838
$height: density.prop-value(
39-
$density-config: $mdc-list-single-line-density-config,
40-
$density-scale: $mdc-list-single-line-density-scale,
39+
$density-config: $mdc-list-deprecated-single-line-density-config,
40+
$density-scale: $mdc-list-deprecated-single-line-density-scale,
4141
$property-name: height,
4242
);
4343

4444
// Note that we include this private mixin, because the public
4545
// one adds a bunch of styles that we aren't using for the menu.
46-
@include mdc-list-item-base_;
47-
@include mdc-list-list-item-padding-variant(
48-
$mdc-list-textual-variant-config, $query: $mat-base-styles-query);
46+
@include mdc-list-deprecated-item-base_;
47+
@include mdc-list-deprecated-list-item-padding-variant(
48+
$mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query);
4949

5050
// MDC's menu items are `<li>` nodes which don't need resets, however ours
5151
// can be anything, including buttons, so we need to do the reset ourselves.
5252
@include mat-button-reset;
53-
@include mdc-list-single-line-height($height, $query: $mat-base-styles-query);
53+
@include mdc-list-deprecated-single-line-height($height, $query: $mat-base-styles-query);
5454
cursor: pointer;
5555
width: 100%;
5656
text-align: left;
@@ -71,15 +71,15 @@ mat-menu {
7171
}
7272

7373
.mat-icon {
74-
margin-right: $mdc-list-side-padding;
74+
margin-right: $mdc-list-deprecated-side-padding;
7575
}
7676

7777
[dir='rtl'] & {
7878
text-align: right;
7979

8080
.mat-icon {
8181
margin-right: 0;
82-
margin-left: $mdc-list-side-padding;
82+
margin-left: $mdc-list-deprecated-side-padding;
8383
}
8484
}
8585

@@ -100,7 +100,7 @@ mat-menu {
100100

101101
// Renders out a chevron on menu items that trigger a sub-menu.
102102
.mat-mdc-menu-item-submenu-trigger {
103-
@include mat-menu-item-submenu-trigger($mdc-list-side-padding);
103+
@include mat-menu-item-submenu-trigger($mdc-list-deprecated-side-padding);
104104
}
105105

106106
// Increase specificity because ripple styles are part of the `mat-core` mixin and can

‎src/material-experimental/mdc-select/_select-theme.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
$mdc-select-disabled-dropdown-icon-color: rgba(mdc-theme-prop-value(on-surface), 0.38) !global;
3030

3131
@include mdc-menu-surface-core-styles($mat-theme-styles-query);
32-
@include mdc-list-without-ripple($mat-theme-styles-query);
32+
@include mdc-list-deprecated-without-ripple($mat-theme-styles-query);
3333

3434
.mat-mdc-select-value {
3535
color: $mdc-select-ink-color;
@@ -88,7 +88,7 @@
8888
.mat-mdc-select-panel {
8989
// Note that we include this private mixin, because the public one adds
9090
// a bunch of styles that we aren't using for the select panel.
91-
@include mdc-list-base_($mat-typography-styles-query);
91+
@include mdc-list-deprecated-base_($mat-typography-styles-query);
9292
}
9393

9494
.mat-mdc-select-value {

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@
77
$mat-select-arrow-size: 5px !default;
88
$mat-select-arrow-margin: 4px !default;
99
$mat-select-panel-max-height: 256px !default;
10-
$mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-arrow-margin);
10+
$mat-select-placeholder-arrow-space: 2 *
11+
($mat-select-arrow-size + $mat-select-arrow-margin);
1112
$leading-width: 12px !default;
1213
$scale: 0.75 !default;
1314

@@ -78,7 +79,7 @@ $scale: 0.75 !default;
7879

7980
// Note that we include this private mixin, because the public
8081
// one adds a bunch of styles that we aren't using for the menu.
81-
@include mdc-list-base_($query: structure);
82+
@include mdc-list-deprecated-base_($query: structure);
8283
@include cdk-high-contrast(active, off) {
8384
outline: solid 1px;
8485
}

0 commit comments

Comments
 (0)