diff --git a/package.json b/package.json index 43e9a3b2844b..aef2fc8e741e 100644 --- a/package.json +++ b/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", diff --git a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss index 16c706fbac83..0e438094eef7 100644 --- a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss +++ b/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); } } } diff --git a/src/material-experimental/mdc-autocomplete/autocomplete.scss b/src/material-experimental/mdc-autocomplete/autocomplete.scss index 2de757dd9b6c..dcde40752a3d 100644 --- a/src/material-experimental/mdc-autocomplete/autocomplete.scss +++ b/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; } diff --git a/src/material-experimental/mdc-core/option/_optgroup-theme.scss b/src/material-experimental/mdc-core/option/_optgroup-theme.scss index dee79df87107..28eff8f71190 100644 --- a/src/material-experimental/mdc-core/option/_optgroup-theme.scss +++ b/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); } } } diff --git a/src/material-experimental/mdc-core/option/_option-theme.scss b/src/material-experimental/mdc-core/option/_option-theme.scss index 2994f60606b3..e53c48a892f6 100644 --- a/src/material-experimental/mdc-core/option/_option-theme.scss +++ b/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); } } } diff --git a/src/material-experimental/mdc-core/option/optgroup.scss b/src/material-experimental/mdc-core/option/optgroup.scss index 4f010fd690a8..693df64db37c 100644 --- a/src/material-experimental/mdc-core/option/optgroup.scss +++ b/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); } diff --git a/src/material-experimental/mdc-core/option/option.scss b/src/material-experimental/mdc-core/option/option.scss index fa271199a3d1..0c5d1a4b5ca7 100644 --- a/src/material-experimental/mdc-core/option/option.scss +++ b/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; } } diff --git a/src/material-experimental/mdc-list/_list-option-theme.scss b/src/material-experimental/mdc-list/_list-option-theme.scss index b0d6e1ff8694..c254e4c85b59 100644 --- a/src/material-experimental/mdc-list/_list-option-theme.scss +++ b/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); diff --git a/src/material-experimental/mdc-list/_list-theme.scss b/src/material-experimental/mdc-list/_list-theme.scss index 1299c23da730..972b1e073c6b 100644 --- a/src/material-experimental/mdc-list/_list-theme.scss +++ b/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(); } } diff --git a/src/material-experimental/mdc-list/list.scss b/src/material-experimental/mdc-list/list.scss index 72410643d660..ae6ba2c88977 100644 --- a/src/material-experimental/mdc-list/list.scss +++ b/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 `