diff --git a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss index 12bbea7e5403..41356bcb7162 100644 --- a/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss +++ b/src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss @@ -1,5 +1,5 @@ @use '@material/menu-surface/mixins' as mdc-menu-surface; -@use '@material/list/mixins' as mdc-list; +@use '@material/list/evolution-mixins' as mdc-list; @use '../mdc-helpers/mdc-helpers'; @use '../../material/core/typography/typography'; @use '../../material/core/theming/theming'; @@ -8,7 +8,7 @@ $config: theming.get-color-config($config-or-theme); @include mdc-helpers.mat-using-mdc-theme($config) { @include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query); - @include mdc-list.deprecated-without-ripple(mdc-helpers.$mat-theme-styles-query); + @include mdc-list.without-ripple(mdc-helpers.$mat-theme-styles-query); } } @@ -21,7 +21,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.deprecated-base_(mdc-helpers.$mat-typography-styles-query); + @include mdc-list.list-base(mdc-helpers.$mat-typography-styles-query); } } } diff --git a/src/material-experimental/mdc-autocomplete/autocomplete.scss b/src/material-experimental/mdc-autocomplete/autocomplete.scss index e1045195a660..5e0ce103dcda 100644 --- a/src/material-experimental/mdc-autocomplete/autocomplete.scss +++ b/src/material-experimental/mdc-autocomplete/autocomplete.scss @@ -1,5 +1,5 @@ @use '@material/menu-surface/mixins' as mdc-menu-surface; -@use '@material/list/mixins' as mdc-list; +@use '@material/list/evolution-mixins' as mdc-list; @use '../../cdk/a11y'; @include mdc-menu-surface.core-styles($query: structure); @@ -15,9 +15,7 @@ // below the input. We use our own positioning logic, so we need to set this ourselves. transform-origin: center top; - // 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.deprecated-base_($query: structure); + @include mdc-list.list-base($query: structure); @include a11y.high-contrast(active, off) { outline: solid 1px; } diff --git a/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts b/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts index 73e3db5957fd..14e378afe2e0 100644 --- a/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts +++ b/src/material-experimental/mdc-autocomplete/autocomplete.spec.ts @@ -1126,12 +1126,13 @@ describe('MDC-based MatAutocomplete', () => { it('should scroll to active options on UP arrow', () => { const scrollContainer = document.querySelector('.cdk-overlay-pane .mat-mdc-autocomplete-panel')!; + const initialScrollTop = scrollContainer.scrollTop; fixture.componentInstance.trigger._handleKeydown(UP_ARROW_EVENT); fixture.detectChanges(); - // Expect option bottom minus the panel height plus padding (528 - 256 + 8 = 272) - expect(scrollContainer.scrollTop).toEqual(280, `Expected panel to reveal last option.`); + expect(scrollContainer.scrollTop) + .toBeGreaterThan(initialScrollTop, `Expected panel to reveal last option.`); }); it('should not scroll to active options that are fully in the panel', () => { diff --git a/src/material-experimental/mdc-core/option/_optgroup-theme.scss b/src/material-experimental/mdc-core/option/_optgroup-theme.scss index a3164e68cae3..98606333a6b5 100644 --- a/src/material-experimental/mdc-core/option/_optgroup-theme.scss +++ b/src/material-experimental/mdc-core/option/_optgroup-theme.scss @@ -1,4 +1,3 @@ -@use '@material/list' as mdc-list; @use '@material/theme/theme' as mdc-theme; @use '../../mdc-helpers/mdc-helpers'; @use '../../../material/core/theming/theming'; @@ -12,8 +11,6 @@ // Since this will usually be rendered in an overlay, // we have to explicitly set the default color. @include mdc-theme.prop(color, text-primary-on-background); - @include mdc-list.deprecated-item-disabled-text-color( - mdc-list.$deprecated-text-disabled-color, $query: mdc-helpers.$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 c3a188762fc1..93ca9f354e73 100644 --- a/src/material-experimental/mdc-core/option/_option-theme.scss +++ b/src/material-experimental/mdc-core/option/_option-theme.scss @@ -1,8 +1,6 @@ -// stylelint-disable max-line-length - @use '@material/theme/theme-color' as mdc-theme-color; @use '@material/theme/theme' as mdc-theme; -@use '@material/list' as mdc-list; +@use '@material/list/evolution-mixins' as mdc-list-mixins; @use '@material/typography' as mdc-typography; @use '@material/ripple' as mdc-ripple; @use '../../mdc-helpers/mdc-helpers'; @@ -17,38 +15,36 @@ // 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.deprecated-item-disabled-text-color( - mdc-list.$deprecated-text-disabled-color, $query: mdc-helpers.$mat-theme-styles-query); - &:hover:not(.mdc-deprecated-list-item--disabled), - &:focus:not(.mdc-deprecated-list-item--disabled), + &:hover:not(.mdc-list-item--disabled), + &:focus:not(.mdc-list-item--disabled), &.mat-mdc-option-active, // In multiple mode there is a checkbox to show that the option is selected. - &.mdc-deprecated-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-deprecated-list-item--disabled) { + &.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) { $color: mdc-theme-color.$on-surface; background: rgba($color, mdc-ripple.states-opacity($color, hover)); } } .mat-primary { - .mat-mdc-option.mdc-deprecated-list-item--selected:not(.mdc-deprecated-list-item--disabled) { - @include mdc-list.deprecated-item-primary-text-ink-color( - primary, $query: mdc-helpers.$mat-theme-styles-query); + .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) { + @include mdc-list-mixins.list-primary-text-ink-color(primary, + $query: mdc-helpers.$mat-theme-styles-query); } } .mat-accent { - .mat-mdc-option.mdc-deprecated-list-item--selected:not(.mdc-deprecated-list-item--disabled) { - @include mdc-list.deprecated-item-primary-text-ink-color( - secondary, $query: mdc-helpers.$mat-theme-styles-query); + .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) { + @include mdc-list-mixins.list-primary-text-ink-color(secondary, + $query: mdc-helpers.$mat-theme-styles-query); } } .mat-warn { - .mat-mdc-option.mdc-deprecated-list-item--selected:not(.mdc-deprecated-list-item--disabled) { - @include mdc-list.deprecated-item-primary-text-ink-color( - error, $query: mdc-helpers.$mat-theme-styles-query); + .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) { + @include mdc-list-mixins.list-primary-text-ink-color(error, + $query: mdc-helpers.$mat-theme-styles-query); } } } @@ -61,7 +57,7 @@ @include mdc-helpers.mat-using-mdc-typography($config) { // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct // level. Class is repeated for increased specificity. - .mat-mdc-option { + .mat-mdc-option .mdc-list-item__primary-text { @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query); } } diff --git a/src/material-experimental/mdc-core/option/optgroup.html b/src/material-experimental/mdc-core/option/optgroup.html index 49ccc62d35d6..30b97b4a0f32 100644 --- a/src/material-experimental/mdc-core/option/optgroup.html +++ b/src/material-experimental/mdc-core/option/optgroup.html @@ -1,9 +1,9 @@ diff --git a/src/material-experimental/mdc-core/option/optgroup.scss b/src/material-experimental/mdc-core/option/optgroup.scss index 12e26fbba7a7..07f06d5d1437 100644 --- a/src/material-experimental/mdc-core/option/optgroup.scss +++ b/src/material-experimental/mdc-core/option/optgroup.scss @@ -1,12 +1,22 @@ -@use '@material/list' as mdc-list; +@use 'sass:map'; +@use '@material/list/evolution-mixins' as mdc-list-mixins; +@use '@material/list/evolution-variables' as mdc-list-variables; @use '../../mdc-helpers/mdc-helpers'; .mat-mdc-optgroup-label { - @include mdc-list.deprecated-item-base_; - @include mdc-list.deprecated-list-item-padding-variant( - mdc-list.$deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query); - @include mdc-list.deprecated-list-item-height-variant( - mdc-list.$deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query); - @include mdc-list.deprecated-item-disabled-text-opacity( - mdc-list.$deprecated-text-disabled-opacity, $query: mdc-helpers.$mat-base-styles-query); + @include mdc-list-mixins.item-base; + @include mdc-list-mixins.item-spacing( + mdc-list-variables.$side-padding, $query: mdc-helpers.$mat-base-styles-query); + + // Set the `min-height` here ourselves, instead of going through + // the `mdc-list-one-line-item-density` mixin, because it sets a `height` + // which doesn't work well with multi-line options. + $height-config: map.get(mdc-list-variables.$one-line-item-density-config, height); + min-height: map.get($height-config, default); + + &.mdc-list-item--disabled { + // This is the same as `mdc-list-mixins.list-disabled-opacity` which + // we can't use directly, because it comes with some selectors. + opacity: mdc-list-variables.$content-disabled-opacity; + } } diff --git a/src/material-experimental/mdc-core/option/option.html b/src/material-experimental/mdc-core/option/option.html index c74fe6bda338..cf0210e9cc04 100644 --- a/src/material-experimental/mdc-core/option/option.html +++ b/src/material-experimental/mdc-core/option/option.html @@ -1,7 +1,7 @@ - + ({{ group.label }}) diff --git a/src/material-experimental/mdc-core/option/option.scss b/src/material-experimental/mdc-core/option/option.scss index 59bb0fd8fa30..1bc60642aa46 100644 --- a/src/material-experimental/mdc-core/option/option.scss +++ b/src/material-experimental/mdc-core/option/option.scss @@ -1,4 +1,5 @@ -@use '@material/list' as mdc-list; +@use '@material/list/evolution-mixins' as mdc-list-mixins; +@use '@material/list/evolution-variables' as mdc-list-variables; @use 'sass:map'; @use '../../mdc-helpers/mdc-helpers'; @use '../../../material/core/style/vendor-prefixes'; @@ -6,19 +7,17 @@ @use '../../../material/core/style/layout-common'; .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.deprecated-item-base_; - @include mdc-list.deprecated-list-item-padding-variant( - mdc-list.$deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query); - @include mdc-list.deprecated-item-disabled-text-opacity( - mdc-list.$deprecated-text-disabled-opacity, $query: mdc-helpers.$mat-base-styles-query); + @include mdc-list-mixins.item-base; + @include mdc-list-mixins.item-spacing( + mdc-list-variables.$side-padding, $query: mdc-helpers.$mat-base-styles-query); @include vendor-prefixes.user-select(none); + cursor: pointer; // Set the `min-height` here ourselves, instead of going through - // the `mdc-list-list-item-height-variant` mixin, because it sets a `height` + // the `mdc-list-one-line-item-density` mixin, because it sets a `height` // which doesn't work well with multi-line options. - min-height: map.get(mdc-list.$deprecated-textual-variant-config, single-line-height); + $height-config: map.get(mdc-list-variables.$one-line-item-density-config, height); + min-height: map.get($height-config, default); // Workaround for https://goo.gl/pFmjJD in IE 11. Adds a pseudo // element that will stretch the option to the correct height. See: @@ -29,27 +28,30 @@ content: ''; } - &:not(.mdc-deprecated-list-item--disabled) { - cursor: pointer; + &.mdc-list-item--disabled { + // This is the same as `mdc-list-mixins.list-disabled-opacity` which + // we can't use directly, because it comes with some selectors. + opacity: mdc-list-variables.$content-disabled-opacity; + cursor: default; } // 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.$deprecated-side-padding * 2; + padding-left: mdc-list-variables.$side-padding * 2; [dir='rtl'] & { - padding-left: mdc-list.$deprecated-side-padding; - padding-right: mdc-list.$deprecated-side-padding * 2; + padding-left: mdc-list-variables.$side-padding; + padding-right: mdc-list-variables.$side-padding * 2; } } .mat-pseudo-checkbox { - margin-right: mdc-list.$deprecated-side-padding; + margin-right: mdc-list-variables.$side-padding; [dir='rtl'] & { margin-right: 0; - margin-left: mdc-list.$deprecated-side-padding; + margin-left: mdc-list-variables.$side-padding; } } diff --git a/src/material-experimental/mdc-core/option/option.ts b/src/material-experimental/mdc-core/option/option.ts index f1835d3c6666..3785cad24c8a 100644 --- a/src/material-experimental/mdc-core/option/option.ts +++ b/src/material-experimental/mdc-core/option/option.ts @@ -32,10 +32,10 @@ import {MatOptgroup} from './optgroup'; host: { 'role': 'option', '[attr.tabindex]': '_getTabIndex()', - '[class.mdc-deprecated-list-item--selected]': 'selected', + '[class.mdc-list-item--selected]': 'selected', '[class.mat-mdc-option-multiple]': 'multiple', '[class.mat-mdc-option-active]': 'active', - '[class.mdc-deprecated-list-item--disabled]': 'disabled', + '[class.mdc-list-item--disabled]': 'disabled', '[id]': 'id', '[attr.aria-selected]': '_getAriaSelected()', '[attr.aria-disabled]': 'disabled.toString()', diff --git a/src/material-experimental/mdc-core/testing/option-harness.ts b/src/material-experimental/mdc-core/testing/option-harness.ts index ae32eb75cee9..d716b2744f97 100644 --- a/src/material-experimental/mdc-core/testing/option-harness.ts +++ b/src/material-experimental/mdc-core/testing/option-harness.ts @@ -15,7 +15,7 @@ export class MatOptionHarness extends ComponentHarness { static hostSelector = '.mat-mdc-option'; /** Element containing the option's text. */ - private _text = this.locatorFor('.mdc-deprecated-list-item__text'); + private _text = this.locatorFor('.mdc-list-item__primary-text'); /** * Gets a `HarnessPredicate` that can be used to search for a `MatOptionsHarness` that meets @@ -45,12 +45,12 @@ export class MatOptionHarness extends ComponentHarness { /** Gets whether the option is disabled. */ async isDisabled(): Promise { - return (await this.host()).hasClass('mdc-deprecated-list-item--disabled'); + return (await this.host()).hasClass('mdc-list-item--disabled'); } /** Gets whether the option is selected. */ async isSelected(): Promise { - return (await this.host()).hasClass('mdc-deprecated-list-item--selected'); + return (await this.host()).hasClass('mdc-list-item--selected'); } /** Gets whether the option is active. */ diff --git a/src/material-experimental/mdc-menu/_menu-theme.scss b/src/material-experimental/mdc-menu/_menu-theme.scss index f9f9e7160e9f..0595365a4aaa 100644 --- a/src/material-experimental/mdc-menu/_menu-theme.scss +++ b/src/material-experimental/mdc-menu/_menu-theme.scss @@ -1,7 +1,7 @@ @use '@material/theme/theme-color' as mdc-theme-color; @use '@material/theme/theme' as mdc-theme; @use '@material/menu-surface' as mdc-menu-surface; -@use '@material/list' as mdc-list; +@use '@material/list/evolution-mixins' as mdc-list; @use '@material/typography' as mdc-typography; @use '@material/ripple' as mdc-ripple; @use '../mdc-helpers/mdc-helpers'; @@ -12,7 +12,7 @@ $config: theming.get-color-config($config-or-theme); @include mdc-helpers.mat-using-mdc-theme($config) { @include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query); - @include mdc-list.deprecated-without-ripple(mdc-helpers.$mat-theme-styles-query); + @include mdc-list.without-ripple(mdc-helpers.$mat-theme-styles-query); // MDC doesn't appear to have disabled styling for menu // items so we have to grey them out ourselves. @@ -53,11 +53,11 @@ .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.deprecated-base_(mdc-helpers.$mat-typography-styles-query); + @include mdc-list.list-base(mdc-helpers.$mat-typography-styles-query); // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct // level. - .mat-mdc-menu-item { + .mat-mdc-menu-item .mdc-list-item__primary-text { @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query); } } diff --git a/src/material-experimental/mdc-menu/menu-item.html b/src/material-experimental/mdc-menu/menu-item.html index 3092e914580e..46a2d86ca302 100644 --- a/src/material-experimental/mdc-menu/menu-item.html +++ b/src/material-experimental/mdc-menu/menu-item.html @@ -1,4 +1,5 @@ - + +
diff --git a/src/material-experimental/mdc-menu/menu.html b/src/material-experimental/mdc-menu/menu.html index 17e7323b02d4..d6efbda57cf8 100644 --- a/src/material-experimental/mdc-menu/menu.html +++ b/src/material-experimental/mdc-menu/menu.html @@ -13,7 +13,7 @@ [attr.aria-label]="ariaLabel || null" [attr.aria-labelledby]="ariaLabelledby || null" [attr.aria-describedby]="ariaDescribedby || null"> -
+
diff --git a/src/material-experimental/mdc-menu/menu.scss b/src/material-experimental/mdc-menu/menu.scss index d52d2093a41a..9cf3f66155a3 100644 --- a/src/material-experimental/mdc-menu/menu.scss +++ b/src/material-experimental/mdc-menu/menu.scss @@ -1,6 +1,7 @@ -@use '@material/density' as mdc-density; +@use 'sass:map'; @use '@material/menu-surface' as mdc-menu-surface; -@use '@material/list' as mdc-list; +@use '@material/list/evolution-mixins' as mdc-list-mixins; +@use '@material/list/evolution-variables' as mdc-list-variables; @use '../../material/core/style/menu-common'; @use '../../material/core/style/button-common'; @use '../../cdk/a11y'; @@ -14,9 +15,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.deprecated-base_($query: structure); + @include mdc-list-mixins.list-base($query: structure); } .mat-mdc-menu-panel { @@ -34,23 +33,13 @@ mat-menu { } .mat-mdc-menu-item { - $height: mdc-density.prop-value( - $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.deprecated-item-base_; - @include mdc-list.deprecated-list-item-padding-variant( - mdc-list.$deprecated-textual-variant-config, $query: mdc-helpers.$mat-base-styles-query); + @include mdc-list-mixins.item-base; + @include mdc-list-mixins.item-spacing( + mdc-list-variables.$side-padding, $query: mdc-helpers.$mat-base-styles-query); // MDC's menu items are `
  • ` nodes which don't need resets, however ours // can be anything, including buttons, so we need to do the reset ourselves. @include button-common.reset; - @include mdc-list.deprecated-single-line-height($height, - $query: mdc-helpers.$mat-base-styles-query); cursor: pointer; width: 100%; text-align: left; @@ -60,6 +49,12 @@ mat-menu { background: none; text-decoration: none; + // Set the `min-height` here ourselves, instead of going through + // the `mdc-list-one-line-item-density` mixin, because it sets a `height` + // which doesn't work well with multi-line items. + $height-config: map.get(mdc-list-variables.$one-line-item-density-config, height); + min-height: map.get($height-config, default); + &[disabled] { // Usually every click inside the menu closes it, however some browsers will stop events // when the user clicks on a disabled item, **except** when the user clicks on a non-disabled @@ -71,7 +66,7 @@ mat-menu { } .mat-icon { - margin-right: mdc-list.$deprecated-side-padding; + margin-right: mdc-list-variables.$side-padding; } [dir='rtl'] & { @@ -79,7 +74,7 @@ mat-menu { .mat-icon { margin-right: 0; - margin-left: mdc-list.$deprecated-side-padding; + margin-left: mdc-list-variables.$side-padding; } } @@ -100,7 +95,7 @@ mat-menu { // Renders out a chevron on menu items that trigger a sub-menu. .mat-mdc-menu-item-submenu-trigger { - @include menu-common.item-submenu-trigger(mdc-list.$deprecated-side-padding); + @include menu-common.item-submenu-trigger(mdc-list-variables.$side-padding); } // Increase specificity because ripple styles are part of the `mat-core` mixin and can diff --git a/src/material-experimental/mdc-select/_select-theme.scss b/src/material-experimental/mdc-select/_select-theme.scss index e0dc778de6ee..1964be8b2c6b 100644 --- a/src/material-experimental/mdc-select/_select-theme.scss +++ b/src/material-experimental/mdc-select/_select-theme.scss @@ -1,6 +1,6 @@ @use '@material/theme/theme-color' as mdc-theme-color; @use '@material/menu-surface' as mdc-menu-surface; -@use '@material/list' as mdc-list; +@use '@material/list/evolution-mixins' as mdc-list; @use '@material/select' as mdc-select; @use '@material/typography' as mdc-typography; @use '../mdc-helpers/mdc-helpers'; @@ -31,7 +31,7 @@ mdc-select.$disabled-dropdown-icon-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38); @include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query); - @include mdc-list.deprecated-without-ripple(mdc-helpers.$mat-theme-styles-query); + @include mdc-list.without-ripple(mdc-helpers.$mat-theme-styles-query); .mat-mdc-select-value { color: mdc-select.$ink-color; @@ -89,9 +89,7 @@ @include mdc-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query); .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.deprecated-base_(mdc-helpers.$mat-typography-styles-query); + @include mdc-list.list-base(mdc-helpers.$mat-typography-styles-query); } .mat-mdc-select-value { diff --git a/src/material-experimental/mdc-select/select.scss b/src/material-experimental/mdc-select/select.scss index 8acfd9c9e892..750d7bf7a743 100644 --- a/src/material-experimental/mdc-select/select.scss +++ b/src/material-experimental/mdc-select/select.scss @@ -1,5 +1,5 @@ @use '@material/menu-surface' as mdc-menu-surface; -@use '@material/list' as mdc-list; +@use '@material/list/evolution-mixins' as mdc-list; @use '../../material/core/style/variables'; @use '../../material/core/style/vendor-prefixes'; @use '../../material/core/style/private'; @@ -83,9 +83,7 @@ $scale: 0.75 !default; position: static; // MDC uses `absolute` by default which will throw off our positioning. outline: 0; - // 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.deprecated-base_($query: structure); + @include mdc-list.list-base($query: structure); @include a11y.high-contrast(active, off) { outline: solid 1px; } diff --git a/src/material-experimental/mdc-select/select.spec.ts b/src/material-experimental/mdc-select/select.spec.ts index 186d1b348eeb..01a7c7020d39 100644 --- a/src/material-experimental/mdc-select/select.spec.ts +++ b/src/material-experimental/mdc-select/select.spec.ts @@ -1468,7 +1468,7 @@ describe('MDC-based MatSelect', () => { option = overlayContainerElement.querySelector('mat-option') as HTMLElement; - expect(option.classList).toContain('mdc-deprecated-list-item--selected'); + expect(option.classList).toContain('mdc-list-item--selected'); expect(fixture.componentInstance.options.first.selected).toBe(true); expect(fixture.componentInstance.select.selected) .toBe(fixture.componentInstance.options.first); @@ -1486,7 +1486,7 @@ describe('MDC-based MatSelect', () => { optionInstances[1].select(); fixture.detectChanges(); - expect(optionNodes[1].classList).toContain('mdc-deprecated-list-item--selected'); + expect(optionNodes[1].classList).toContain('mdc-list-item--selected'); expect(optionInstances[1].selected).toBe(true); expect(fixture.componentInstance.select.selected).toBe(optionInstances[1]); })); @@ -1509,8 +1509,8 @@ describe('MDC-based MatSelect', () => { options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; - expect(options[1].classList).not.toContain('mdc-deprecated-list-item--selected'); - expect(options[2].classList).not.toContain('mdc-deprecated-list-item--selected'); + expect(options[1].classList).not.toContain('mdc-list-item--selected'); + expect(options[2].classList).not.toContain('mdc-list-item--selected'); const optionInstances = fixture.componentInstance.options.toArray(); expect(optionInstances[1].selected).toBe(false); @@ -1542,10 +1542,10 @@ describe('MDC-based MatSelect', () => { options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; expect(options[0].classList) - .not.toContain('mdc-deprecated-list-item--selected', + .not.toContain('mdc-list-item--selected', 'Expected first option to no longer be selected'); expect(options[1].classList) - .toContain('mdc-deprecated-list-item--selected', + .toContain('mdc-list-item--selected', 'Expected second option to be selected'); const optionInstances = fixture.componentInstance.options.toArray(); @@ -1650,7 +1650,7 @@ describe('MDC-based MatSelect', () => { fixture.detectChanges(); expect(fixture.componentInstance.select.panelOpen).toBe(true); - expect(options[2].classList).not.toContain('mdc-deprecated-list-item--selected'); + expect(options[2].classList).not.toContain('mdc-list-item--selected'); expect(fixture.componentInstance.select.selected).toBeUndefined(); })); @@ -1669,7 +1669,7 @@ describe('MDC-based MatSelect', () => { groupFixture.detectChanges(); expect(groupFixture.componentInstance.select.panelOpen).toBe(true); - expect(options[0].classList).not.toContain('mdc-deprecated-list-item--selected'); + expect(options[0].classList).not.toContain('mdc-list-item--selected'); expect(groupFixture.componentInstance.select.selected).toBeUndefined(); })); @@ -1795,7 +1795,7 @@ describe('MDC-based MatSelect', () => { const options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; expect(options[1].classList) - .toContain('mdc-deprecated-list-item--selected', + .toContain('mdc-list-item--selected', `Expected option with the control's initial value to be selected.`); })); @@ -1816,7 +1816,7 @@ describe('MDC-based MatSelect', () => { const options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; - expect(options[1].classList).toContain('mdc-deprecated-list-item--selected', + expect(options[1].classList).toContain('mdc-list-item--selected', `Expected option with the control's new value to be selected.`); })); @@ -1856,7 +1856,7 @@ describe('MDC-based MatSelect', () => { const options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; - expect(options[1].classList).not.toContain('mdc-deprecated-list-item--selected', + expect(options[1].classList).not.toContain('mdc-list-item--selected', `Expected option w/ the old value not to be selected.`); })); @@ -1880,7 +1880,7 @@ describe('MDC-based MatSelect', () => { const options = overlayContainerElement.querySelectorAll('mat-option') as NodeListOf; - expect(options[1].classList).not.toContain('mdc-deprecated-list-item--selected', + expect(options[1].classList).not.toContain('mdc-list-item--selected', `Expected option w/ the old value not to be selected.`); })); @@ -2782,7 +2782,7 @@ describe('MDC-based MatSelect', () => { expect(fixture.componentInstance.options.first.selected) .toBe(true, 'Expected first option to be selected'); expect(overlayContainerElement.querySelectorAll('mat-option')[0].classList) - .toContain('mdc-deprecated-list-item--selected', 'Expected first option to be selected'); + .toContain('mdc-list-item--selected', 'Expected first option to be selected'); })); }); @@ -2907,7 +2907,7 @@ describe('MDC-based MatSelect', () => { fixture.detectChanges(); flush(); - expect(options[5].classList).not.toContain('mdc-deprecated-list-item--selected'); + expect(options[5].classList).not.toContain('mdc-list-item--selected'); })); it('should not reset when any other falsy option is selected', fakeAsync(() => { @@ -3029,7 +3029,7 @@ describe('MDC-based MatSelect', () => { const option = overlayContainerElement.querySelectorAll('mat-option')[2]; - expect(option.classList).toContain('mdc-deprecated-list-item--selected'); + expect(option.classList).toContain('mdc-list-item--selected'); expect(fixture.componentInstance.select.value).toBe('sandwich-2'); })); @@ -3075,7 +3075,7 @@ describe('MDC-based MatSelect', () => { const option = overlayContainerElement.querySelectorAll('mat-option')[1]; - expect(option.classList).toContain('mdc-deprecated-list-item--selected'); + expect(option.classList).toContain('mdc-list-item--selected'); expect(fixture.componentInstance.select.value).toBe('pizza-1'); })); @@ -3475,8 +3475,8 @@ describe('MDC-based MatSelect', () => { const optionInstances = testInstance.options.toArray(); - expect(optionNodes[0].classList).toContain('mdc-deprecated-list-item--selected'); - expect(optionNodes[5].classList).toContain('mdc-deprecated-list-item--selected'); + expect(optionNodes[0].classList).toContain('mdc-list-item--selected'); + expect(optionNodes[5].classList).toContain('mdc-list-item--selected'); expect(optionInstances[0].selected).toBe(true); expect(optionInstances[5].selected).toBe(true); @@ -3492,13 +3492,13 @@ describe('MDC-based MatSelect', () => { options[0].click(); fixture.detectChanges(); - expect(options[0].classList).toContain('mdc-deprecated-list-item--selected'); + expect(options[0].classList).toContain('mdc-list-item--selected'); testInstance.control.setValue(['eggs-5']); fixture.detectChanges(); - expect(options[0].classList).not.toContain('mdc-deprecated-list-item--selected'); - expect(options[5].classList).toContain('mdc-deprecated-list-item--selected'); + expect(options[0].classList).not.toContain('mdc-list-item--selected'); + expect(options[5].classList).toContain('mdc-list-item--selected'); })); it('should not close the panel when clicking on options', fakeAsync(() => { @@ -3806,7 +3806,7 @@ describe('MDC-based MatSelect', () => { const optionNodes = Array.from(overlayContainerElement.querySelectorAll('mat-option')); const optionInstances = testInstance.options.toArray(); - expect(optionNodes.map(node => node.classList.contains('mdc-deprecated-list-item--selected'))) + expect(optionNodes.map(node => node.classList.contains('mdc-list-item--selected'))) .toEqual([true, true, true, true, false, false]); expect(optionInstances.map(instance => instance.selected)) @@ -3825,7 +3825,7 @@ describe('MDC-based MatSelect', () => { const optionInstances = testInstance.options.toArray(); expect(optionNodes.some(option => { - return option.classList.contains('mdc-deprecated-list-item--selected'); + return option.classList.contains('mdc-list-item--selected'); })).toBe(false); expect(optionInstances.some(option => option.selected)).toBe(false); @@ -3833,7 +3833,7 @@ describe('MDC-based MatSelect', () => { testInstance.control.setValue(value); fixture.detectChanges(); - expect(optionNodes[5].classList).toContain('mdc-deprecated-list-item--selected'); + expect(optionNodes[5].classList).toContain('mdc-list-item--selected'); expect(optionInstances[5].selected).toBe(true); }));