Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(material-experimental/mdc-list): update mixin and variable names after MDC's deprecation #21968

Merged
merged 1 commit into from
Feb 20, 2021
Merged

fix(material-experimental/mdc-list): update mixin and variable names after MDC's deprecation #21968

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
4 changes: 2 additions & 2 deletions src/material-experimental/mdc-autocomplete/_autocomplete-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand All @@ -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);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/material-experimental/mdc-autocomplete/autocomplete.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions src/material-experimental/mdc-core/option/_optgroup-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
Expand Down
13 changes: 8 additions & 5 deletions src/material-experimental/mdc-core/option/_option-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand All @@ -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);
}
}
}
Expand Down
14 changes: 7 additions & 7 deletions src/material-experimental/mdc-core/option/optgroup.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
22 changes: 11 additions & 11 deletions src/material-experimental/mdc-core/option/option.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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;
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/material-experimental/mdc-list/_list-option-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
8 changes: 4 additions & 4 deletions src/material-experimental/mdc-list/_list-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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,
);
Expand All @@ -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);
Expand All @@ -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();
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/material-experimental/mdc-list/list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/material-experimental/mdc-menu/_menu-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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.
Expand Down
20 changes: 10 additions & 10 deletions src/material-experimental/mdc-menu/menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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;
}
}

Expand All @@ -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
Expand Down
4 changes: 2 additions & 2 deletions src/material-experimental/mdc-select/_select-theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
5 changes: 3 additions & 2 deletions src/material-experimental/mdc-select/select.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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;
}
Expand Down
Loading