fix(material-experimental/mdc-list): update mixin and variable names (#…

…21968)

PiperOrigin-RevId: 358465241

Co-authored-by: Angular Material Team <material@angular.io>
(cherry picked from commit 8eb59f8)

package.json

@@ -63,7 +63,7 @@
     "@types/youtube": "^0.0.40",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js-bundle": "^3.8.2",
-    "material-components-web": "10.0.0",
+    "material-components-web": "^11.0.0-canary.3201cae47.0",
     "rxjs": "^6.5.3",
     "rxjs-tslint-rules": "^4.33.1",
     "systemjs": "0.19.43",

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

@@ -6,7 +6,7 @@
   $config: mat-get-color-config($config-or-theme);
   @include mat-using-mdc-theme($config) {
     @include mdc-menu-surface-core-styles($mat-theme-styles-query);
-    @include mdc-list-without-ripple($mat-theme-styles-query);
+    @include mdc-list-deprecated-without-ripple($mat-theme-styles-query);
   }
 }
 
@@ -18,7 +18,7 @@
     .mat-mdc-autocomplete-panel {
       // Note that we include this private mixin, because the public one adds
       // a bunch of styles that we aren't using for the autocomplete panel.
-      @include mdc-list-base_($mat-typography-styles-query);
+      @include mdc-list-deprecated-base_($mat-typography-styles-query);
     }
   }
 }

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

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

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

@@ -13,8 +13,8 @@
       // Since this will usually be rendered in an overlay,
       // we have explicitly set the default color.
       @include mdc-theme-prop(color, text-primary-on-background);
-      @include mdc-list-item-disabled-text-color($mdc-list-text-disabled-color,
-        $query: $mat-theme-styles-query);
+      @include mdc-list-deprecated-item-disabled-text-color(
+        $mdc-list-deprecated-text-disabled-color, $query: $mat-theme-styles-query);
     }
   }
 }

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

@@ -14,8 +14,8 @@
       // Since this will usually be rendered in an overlay,
       // we have explicitly set the default color.
       @include mdc-theme-prop(color, text-primary-on-background);
-      @include mdc-list-item-disabled-text-color($mdc-list-text-disabled-color,
-        $query: $mat-theme-styles-query);
+      @include mdc-list-deprecated-item-disabled-text-color(
+        $mdc-list-deprecated-text-disabled-color, $query: $mat-theme-styles-query);
 
       &:hover:not(.mdc-list-item--disabled),
       &:focus:not(.mdc-list-item--disabled),
@@ -29,15 +29,18 @@
     }
 
     .mat-primary .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-      @include mdc-list-item-primary-text-ink-color(primary, $query: $mat-theme-styles-query);
+      @include mdc-list-deprecated-item-primary-text-ink-color(
+        primary, $query: $mat-theme-styles-query);
     }
 
     .mat-accent .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-      @include mdc-list-item-primary-text-ink-color(secondary, $query: $mat-theme-styles-query);
+      @include mdc-list-deprecated-item-primary-text-ink-color(
+        secondary, $query: $mat-theme-styles-query);
     }
 
     .mat-warn .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) {
-      @include mdc-list-item-primary-text-ink-color(error, $query: $mat-theme-styles-query);
+      @include mdc-list-deprecated-item-primary-text-ink-color(
+        error, $query: $mat-theme-styles-query);
     }
   }
 }

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

@@ -3,11 +3,11 @@
 @import '../../mdc-helpers/mdc-helpers';
 
 .mat-mdc-optgroup-label {
-  @include mdc-list-item-base_;
-  @include mdc-list-list-item-padding-variant(
-    $mdc-list-textual-variant-config, $query: $mat-base-styles-query);
-  @include mdc-list-list-item-height-variant(
-    $mdc-list-textual-variant-config, $query: $mat-base-styles-query);
-  @include mdc-list-item-disabled-text-opacity($mdc-list-text-disabled-opacity,
-    $query: $mat-base-styles-query);
+  @include mdc-list-deprecated-item-base_;
+  @include mdc-list-deprecated-list-item-padding-variant(
+    $mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query);
+  @include mdc-list-deprecated-list-item-height-variant(
+    $mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query);
+  @include mdc-list-deprecated-item-disabled-text-opacity(
+    $mdc-list-deprecated-text-disabled-opacity, $query: $mat-base-styles-query);
 }

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

@@ -7,17 +7,17 @@
 .mat-mdc-option {
   // Note that we include this private mixin, because the public
   // one adds a bunch of styles that we aren't using for the menu.
-  @include mdc-list-item-base_;
-  @include mdc-list-list-item-padding-variant(
-    $mdc-list-textual-variant-config, $query: $mat-base-styles-query);
-  @include mdc-list-item-disabled-text-opacity($mdc-list-text-disabled-opacity,
-    $query: $mat-base-styles-query);
+  @include mdc-list-deprecated-item-base_;
+  @include mdc-list-deprecated-list-item-padding-variant(
+    $mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query);
+  @include mdc-list-deprecated-item-disabled-text-opacity(
+    $mdc-list-deprecated-text-disabled-opacity, $query: $mat-base-styles-query);
   @include user-select(none);
 
   // Set the `min-height` here ourselves, instead of going through
   // the `mdc-list-list-item-height-variant` mixin, because it sets a `height`
   // which doesn't work well with multi-line options.
-  min-height: map-get($mdc-list-textual-variant-config, single-line-height);
+  min-height: map-get($mdc-list-deprecated-textual-variant-config, single-line-height);
 
   // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo
   // element that will stretch the option to the correct height. See:
@@ -35,20 +35,20 @@
   // Note that we bump the padding here, rather than padding inside the
   // group so that ripples still reach to the edges of the panel.
   .mat-mdc-optgroup &:not(.mat-mdc-option-multiple) {
-    padding-left: $mdc-list-side-padding * 2;
+    padding-left: $mdc-list-deprecated-side-padding * 2;
 
     [dir='rtl'] & {
-      padding-left: $mdc-list-side-padding;
-      padding-right: $mdc-list-side-padding * 2;
+      padding-left: $mdc-list-deprecated-side-padding;
+      padding-right: $mdc-list-deprecated-side-padding * 2;
     }
   }
 
   .mat-pseudo-checkbox {
-    margin-right: $mdc-list-side-padding;
+    margin-right: $mdc-list-deprecated-side-padding;
 
     [dir='rtl'] & {
       margin-right: 0;
-      margin-left: $mdc-list-side-padding;
+      margin-left: $mdc-list-deprecated-side-padding;
     }
   }
 

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

@@ -13,8 +13,8 @@
   }
 
   &.mdc-list-item--selected {
-    @include mdc-list-item-primary-text-ink-color($color);
-    @include mdc-list-item-graphic-ink-color($color);
+    @include mdc-list-deprecated-item-primary-text-ink-color($color);
+    @include mdc-list-deprecated-item-graphic-ink-color($color);
 
     &::before {
       @include mdc-theme-prop(background, $color);

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

@@ -18,7 +18,7 @@
   @include mat-mdc-private-interactive-list-item-state-colors($config);
 
   @include mat-using-mdc-theme($config) {
-    @include mdc-list-without-ripple($query: $mat-theme-styles-query);
+    @include mdc-list-deprecated-without-ripple($query: $mat-theme-styles-query);
 
     .mat-mdc-list-option {
       @include mat-mdc-private-list-option-color-override(primary);
@@ -35,7 +35,7 @@
 @mixin mat-mdc-list-density($config-or-theme) {
   $density-scale: mat-get-density-config($config-or-theme);
   $height: density.prop-value(
-    $density-config: $mdc-list-single-line-density-config,
+    $density-config: $mdc-list-deprecated-single-line-density-config,
     $density-scale: $density-scale,
     $property-name: height,
   );
@@ -45,7 +45,7 @@
   // the styles should actually only affect single-line list items. This has been reported as
   // a bug in the MDC repository: https://github.com/material-components/material-components-web/issues/5737.
   .mat-mdc-list-item-single-line {
-    @include mdc-list-single-line-height($height);
+    @include mdc-list-deprecated-single-line-height($height);
   }
 
   @include mat-mdc-private-list-option-density-styles($density-scale);
@@ -54,7 +54,7 @@
 @mixin mat-mdc-list-typography($config-or-theme) {
   $config: mat-get-typography-config($config-or-theme);
   @include mat-using-mdc-typography($config) {
-    @include mdc-list-without-ripple($query: $mat-typography-styles-query);
+    @include mdc-list-deprecated-without-ripple($query: $mat-typography-styles-query);
     @include mat-mdc-private-list-option-typography-styles();
   }
 }

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

@@ -2,7 +2,7 @@
 @import '@material/list/variables.import';
 @import '../mdc-helpers/mdc-helpers';
 
-@include mdc-list-without-ripple($query: $mat-base-styles-query);
+@include mdc-list-deprecated-without-ripple($query: $mat-base-styles-query);
 
 // MDC expects the list element to be a `<ul>`, since we use `<mat-list>` instead we need to
 // explicitly set `display: block`
@@ -48,7 +48,7 @@
   // Styles here come from `$mdc-list-graphic-size_`:
   // https://github.com/material-components/material-components-web/blob/3ca8c4c45a3d2a654ef3cb8fc7525bcde37badf0/packages/mdc-list/_mixins.scss#L538
   $size: 40px;
-  $margin-value: 72px - $mdc-list-side-padding - $size;
+  $margin-value: 72px - $mdc-list-deprecated-side-padding - $size;
 
   width: $size;
   height: $size;

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

@@ -11,7 +11,7 @@
   $config: mat-get-color-config($config-or-theme);
   @include mat-using-mdc-theme($config) {
     @include mdc-menu-surface-core-styles($mat-theme-styles-query);
-    @include mdc-list-without-ripple($mat-theme-styles-query);
+    @include mdc-list-deprecated-without-ripple($mat-theme-styles-query);
 
     // MDC doesn't appear to have disabled styling for menu
     // items so we have to grey them out ourselves.
@@ -51,7 +51,7 @@
     .mat-mdc-menu-content {
       // Note that we include this private mixin, because the public
       // one adds a bunch of styles that we aren't using for the menu.
-      @include mdc-list-base_($mat-typography-styles-query);
+      @include mdc-list-deprecated-base_($mat-typography-styles-query);
 
       // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
       // level.

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

@@ -17,7 +17,7 @@ mat-menu {
 .mat-mdc-menu-content {
   // Note that we include this private mixin, because the public
   // one adds a bunch of styles that we aren't using for the menu.
-  @include mdc-list-base_($query: structure);
+  @include mdc-list-deprecated-base_($query: structure);
 }
 
 .mat-mdc-menu-panel {
@@ -36,21 +36,21 @@ mat-menu {
 
 .mat-mdc-menu-item {
   $height: density.prop-value(
-    $density-config: $mdc-list-single-line-density-config,
-    $density-scale: $mdc-list-single-line-density-scale,
+    $density-config: $mdc-list-deprecated-single-line-density-config,
+    $density-scale: $mdc-list-deprecated-single-line-density-scale,
     $property-name: height,
   );
 
   // Note that we include this private mixin, because the public
   // one adds a bunch of styles that we aren't using for the menu.
-  @include mdc-list-item-base_;
-  @include mdc-list-list-item-padding-variant(
-    $mdc-list-textual-variant-config, $query: $mat-base-styles-query);
+  @include mdc-list-deprecated-item-base_;
+  @include mdc-list-deprecated-list-item-padding-variant(
+    $mdc-list-deprecated-textual-variant-config, $query: $mat-base-styles-query);
 
   // MDC's menu items are `<li>` nodes which don't need resets, however ours
   // can be anything, including buttons, so we need to do the reset ourselves.
   @include mat-button-reset;
-  @include mdc-list-single-line-height($height, $query: $mat-base-styles-query);
+  @include mdc-list-deprecated-single-line-height($height, $query: $mat-base-styles-query);
   cursor: pointer;
   width: 100%;
   text-align: left;
@@ -71,15 +71,15 @@ mat-menu {
   }
 
   .mat-icon {
-    margin-right: $mdc-list-side-padding;
+    margin-right: $mdc-list-deprecated-side-padding;
   }
 
   [dir='rtl'] & {
     text-align: right;
 
     .mat-icon {
       margin-right: 0;
-      margin-left: $mdc-list-side-padding;
+      margin-left: $mdc-list-deprecated-side-padding;
     }
   }
 
@@ -100,7 +100,7 @@ mat-menu {
 
 // Renders out a chevron on menu items that trigger a sub-menu.
 .mat-mdc-menu-item-submenu-trigger {
-  @include mat-menu-item-submenu-trigger($mdc-list-side-padding);
+  @include mat-menu-item-submenu-trigger($mdc-list-deprecated-side-padding);
 }
 
 // Increase specificity because ripple styles are part of the `mat-core` mixin and can

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

@@ -29,7 +29,7 @@
     $mdc-select-disabled-dropdown-icon-color: rgba(mdc-theme-prop-value(on-surface), 0.38) !global;
 
     @include mdc-menu-surface-core-styles($mat-theme-styles-query);
-    @include mdc-list-without-ripple($mat-theme-styles-query);
+    @include mdc-list-deprecated-without-ripple($mat-theme-styles-query);
 
     .mat-mdc-select-value {
       color: $mdc-select-ink-color;
@@ -88,7 +88,7 @@
     .mat-mdc-select-panel {
       // Note that we include this private mixin, because the public one adds
       // a bunch of styles that we aren't using for the select panel.
-      @include mdc-list-base_($mat-typography-styles-query);
+      @include mdc-list-deprecated-base_($mat-typography-styles-query);
     }
 
     .mat-mdc-select-value {

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

@@ -7,7 +7,8 @@
 $mat-select-arrow-size: 5px !default;
 $mat-select-arrow-margin: 4px !default;
 $mat-select-panel-max-height: 256px !default;
-$mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-arrow-margin);
+$mat-select-placeholder-arrow-space: 2 *
+  ($mat-select-arrow-size + $mat-select-arrow-margin);
 $leading-width: 12px !default;
 $scale: 0.75 !default;
 
@@ -78,7 +79,7 @@ $scale: 0.75 !default;
 
   // Note that we include this private mixin, because the public
   // one adds a bunch of styles that we aren't using for the menu.
-  @include mdc-list-base_($query: structure);
+  @include mdc-list-deprecated-base_($query: structure);
   @include cdk-high-contrast(active, off) {
     outline: solid 1px;
   }