refactor(material/core): remove usages of deprecated Sass functions (#20811)

crisbeto · jelbourn · commit 02f756189846 · 2020-10-20T07:43:13.000-07:00
We had a bunch of places using the deprecated variants of functions like `map_get`, `map_has_key` and `map_merge`. These changes migrate to the non-deprecated variants. These changes are also necessary in order for the `sass-migrator` script to migrate the function calls. (cherry picked from commit 63a8ff5)
diff --git a/src/material-experimental/mdc-form-field/_form-field-density.scss b/src/material-experimental/mdc-form-field/_form-field-density.scss
@@ -7,14 +7,14 @@
 // provided by MDC in order to support arbitrary form-field controls.
 @mixin _mat-mdc-form-field-infix-vertical-spacing-filled($with-label-padding, $no-label-padding) {
   .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {
-    padding-top: map_get($with-label-padding, top);
-    padding-bottom: map_get($with-label-padding, bottom);
+    padding-top: map-get($with-label-padding, top);
+    padding-bottom: map-get($with-label-padding, bottom);
   }
 
   .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea)
   .mat-mdc-form-field-infix {
-    padding-top: map_get($no-label-padding, top);
-    padding-bottom: map_get($no-label-padding, bottom);
+    padding-top: map-get($no-label-padding, top);
+    padding-bottom: map-get($no-label-padding, bottom);
   }
 }
 
@@ -23,8 +23,8 @@
 // provided by MDC in order to support arbitrary form-field controls.
 @mixin _mat-mdc-form-field-infix-vertical-spacing-outlined($padding) {
   .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
-    padding-top: map_get($padding, top);
-    padding-bottom: map_get($padding, bottom);
+    padding-top: map-get($padding, top);
+    padding-bottom: map-get($padding, bottom);
   }
 }
 
diff --git a/src/material-experimental/mdc-helpers/_focus-indicators.scss b/src/material-experimental/mdc-helpers/_focus-indicators.scss
@@ -96,7 +96,7 @@
 
 @mixin mat-mdc-strong-focus-indicators-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
-  @include _mat-mdc-strong-focus-indicators-border-color(mat-color(map_get($config, primary)));
+  @include _mat-mdc-strong-focus-indicators-border-color(mat-color(map-get($config, primary)));
 }
 
 /// Mixin that sets the color of the focus indicators.
diff --git a/src/material-experimental/mdc-list/_interactive-list-theme.scss b/src/material-experimental/mdc-list/_interactive-list-theme.scss
@@ -14,7 +14,7 @@
     }
 
     &.mdc-list-item--selected::before {
-      background: mat-color(map_get($config, primary));
+      background: mat-color(map-get($config, primary));
       opacity: map-get($state-opacities, selected);
     }
 
diff --git a/src/material/button/_button-theme.scss b/src/material/button/_button-theme.scss
@@ -113,7 +113,7 @@ $_mat-button-ripple-opacity: 0.1;
   }
 
   .mat-button-focus-overlay {
-    background: map_get($foreground, base);
+    background: map-get($foreground, base);
   }
 
   // Note: this needs a bit extra specificity, because we're not guaranteed the inclusion
diff --git a/src/material/checkbox/_checkbox-theme.scss b/src/material/checkbox/_checkbox-theme.scss
@@ -77,7 +77,7 @@
   // Switch this to a solid color since we're using `opacity`
   // to control how opaque the ripple should be.
   .mat-checkbox .mat-ripple-element {
-    background-color: map_get(map-get($config, foreground), base);
+    background-color: map-get(map-get($config, foreground), base);
   }
 
   .mat-checkbox-checked:not(.mat-checkbox-disabled),
diff --git a/src/material/chips/_chips-theme.scss b/src/material/chips/_chips-theme.scss
@@ -68,7 +68,7 @@ $mat-chip-remove-font-size: 18px;
     }
 
     &::after {
-      background: map_get($foreground, base);
+      background: map-get($foreground, base);
     }
   }
 
diff --git a/src/material/core/density/_index.scss b/src/material/core/density/_index.scss
@@ -47,17 +47,17 @@ $_mat-density-generate-styles: true;
   }
 
   $value: null;
-  $property-scale-map: map_get($density-config, $property-name);
+  $property-scale-map: map-get($density-config, $property-name);
 
-  @if map_has_key($property-scale-map, $density-scale) {
-    $value: map_get($property-scale-map, $density-scale);
+  @if map-has-key($property-scale-map, $density-scale) {
+    $value: map-get($property-scale-map, $density-scale);
   }
   @else {
-    $value: map_get($property-scale-map, default) + $density-scale * $_mat-density-interval;
+    $value: map-get($property-scale-map, default) + $density-scale * $_mat-density-interval;
   }
 
-  $min-value: map_get($property-scale-map, $_mat-density-minimum-scale);
-  $max-value: map_get($property-scale-map, $_mat-density-maximum-scale);
+  $min-value: map-get($property-scale-map, $_mat-density-minimum-scale);
+  $max-value: map-get($property-scale-map, $_mat-density-maximum-scale);
 
   @if ($value < $min-value or $value > $max-value) {
     @error 'mat-density: #{$property-name} must be between #{$min-value} and ' +
diff --git a/src/material/core/focus-indicators/_focus-indicators.scss b/src/material/core/focus-indicators/_focus-indicators.scss
@@ -87,7 +87,7 @@
 
 @mixin mat-strong-focus-indicators-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
-  @include _mat-strong-focus-indicators-border-color(mat-color(map_get($config, primary)));
+  @include _mat-strong-focus-indicators-border-color(mat-color(map-get($config, primary)));
 }
 
 /// Mixin that sets the color of the focus indicators.
diff --git a/src/material/core/ripple/_ripple.scss b/src/material/core/ripple/_ripple.scss
@@ -47,8 +47,8 @@ $mat-ripple-color-opacity: 0.1;
 /* Colors for the ripple elements.*/
 @mixin mat-ripple-color($config-or-theme) {
   $config: mat-get-color-config($config-or-theme);
-  $foreground: map_get($config, foreground);
-  $foreground-base: map_get($foreground, base);
+  $foreground: map-get($config, foreground);
+  $foreground-base: map-get($foreground, base);
 
   .mat-ripple-element {
     // If the ripple color is resolves to a color *type*, we can use it directly, otherwise
diff --git a/src/material/core/theming/_check-duplicate-styles.scss b/src/material/core/theming/_check-duplicate-styles.scss
@@ -31,9 +31,9 @@ $_mat-theme-emitted-density: () !default;
   $density-config: mat-get-density-config($theme);
   $typography-config: mat-get-typography-config($theme);
   // Lists of previous `color`, `density` and `typography` configurations.
-  $previous-color: map_get($_mat-theme-emitted-color, $id) or ();
-  $previous-typography: map_get($_mat-theme-emitted-typography, $id) or ();
-  $previous-density: map_get($_mat-theme-emitted-density, $id) or ();
+  $previous-color: map-get($_mat-theme-emitted-color, $id) or ();
+  $previous-typography: map-get($_mat-theme-emitted-typography, $id) or ();
+  $previous-density: map-get($_mat-theme-emitted-density, $id) or ();
   // Whether duplicate legacy density styles would be generated.
   $duplicate-legacy-density: false;
 
@@ -74,11 +74,11 @@ $_mat-theme-emitted-density: () !default;
     $previous-density: append($previous-density, $density-config);
   }
 
-  $_mat-theme-emitted-color: map_merge(
+  $_mat-theme-emitted-color: map-merge(
       $_mat-theme-emitted-color, ($id: $previous-color)) !global;
-  $_mat-theme-emitted-density: map_merge(
+  $_mat-theme-emitted-density: map-merge(
       $_mat-theme-emitted-density, ($id: $previous-density)) !global;
-  $_mat-theme-emitted-typography: map_merge(
+  $_mat-theme-emitted-typography: map-merge(
       $_mat-theme-emitted-typography, ($id: $previous-typography)) !global;
 
   // Optionally, consumers of this mixin can wrap contents inside so that nested
diff --git a/src/material/core/theming/_palette.scss b/src/material/core/theming/_palette.scss
@@ -672,40 +672,40 @@ $mat-blue-gray: $mat-blue-grey;
 
 // Background palette for light themes.
 $mat-light-theme-background: (
-  status-bar: map_get($mat-grey, 300),
-  app-bar:    map_get($mat-grey, 100),
-  background: map_get($mat-grey, 50),
+  status-bar: map-get($mat-grey, 300),
+  app-bar:    map-get($mat-grey, 100),
+  background: map-get($mat-grey, 50),
   hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
   card:       white,
   dialog:     white,
   disabled-button: rgba(black, 0.12),
   raised-button: white,
   focused-button: $dark-focused,
-  selected-button: map_get($mat-grey, 300),
-  selected-disabled-button: map_get($mat-grey, 400),
-  disabled-button-toggle: map_get($mat-grey, 200),
-  unselected-chip: map_get($mat-grey, 300),
-  disabled-list-option: map_get($mat-grey, 200),
-  tooltip: map_get($mat-grey, 700),
+  selected-button: map-get($mat-grey, 300),
+  selected-disabled-button: map-get($mat-grey, 400),
+  disabled-button-toggle: map-get($mat-grey, 200),
+  unselected-chip: map-get($mat-grey, 300),
+  disabled-list-option: map-get($mat-grey, 200),
+  tooltip: map-get($mat-grey, 700),
 );
 
 // Background palette for dark themes.
 $mat-dark-theme-background: (
   status-bar: black,
-  app-bar:    map_get($mat-grey, 900),
+  app-bar:    map-get($mat-grey, 900),
   background: #303030,
   hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX
-  card:       map_get($mat-grey, 800),
-  dialog:     map_get($mat-grey, 800),
+  card:       map-get($mat-grey, 800),
+  dialog:     map-get($mat-grey, 800),
   disabled-button: rgba(white, 0.12),
   raised-button: map-get($mat-grey, 800),
   focused-button: $light-focused,
-  selected-button: map_get($mat-grey, 900),
-  selected-disabled-button: map_get($mat-grey, 800),
+  selected-button: map-get($mat-grey, 900),
+  selected-disabled-button: map-get($mat-grey, 800),
   disabled-button-toggle: black,
-  unselected-chip: map_get($mat-grey, 700),
+  unselected-chip: map-get($mat-grey, 700),
   disabled-list-option: black,
-  tooltip: map_get($mat-grey, 700),
+  tooltip: map-get($mat-grey, 700),
 );
 
 // Foreground palette for light themes.
diff --git a/src/material/core/theming/_theming.scss b/src/material/core/theming/_theming.scss
@@ -17,7 +17,7 @@ $_mat-theme-generate-default-density: true !default;
 // @param $primary
 // @param $lighter
 @function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700, $text: $default) {
-  $result: map_merge($base-palette, (
+  $result: map-merge($base-palette, (
     default: map-get($base-palette, $default),
     lighter: map-get($base-palette, $lighter),
     darker: map-get($base-palette, $darker),
@@ -30,7 +30,7 @@ $_mat-theme-generate-default-density: true !default;
 
   // For each hue in the palette, add a "-contrast" color to the map.
   @each $hue, $color in $base-palette {
-    $result: map_merge($result, (
+    $result: map-merge($result, (
       '#{$hue}-contrast': mat-contrast($base-palette, $hue)
     ));
   }
@@ -69,15 +69,15 @@ $_mat-theme-generate-default-density: true !default;
 // Validates the specified theme by ensuring that the optional color config defines
 // a primary, accent and warn palette. Returns the theme if no failures were found.
 @function _mat-validate-theme($theme) {
-  @if map_get($theme, color) {
-    $color: map_get($theme, color);
-    @if not map_get($color, primary) {
+  @if map-get($theme, color) {
+    $color: map-get($theme, color);
+    @if not map-get($color, primary) {
       @error 'Theme does not define a valid "primary" palette.';
     }
-    @else if not map_get($color, accent) {
+    @else if not map-get($color, accent) {
       @error 'Theme does not define a valid "accent" palette.';
     }
-    @else if not map_get($color, warn) {
+    @else if not map-get($color, warn) {
       @error 'Theme does not define a valid "warn" palette.';
     }
   }
@@ -94,19 +94,19 @@ $_mat-theme-generate-default-density: true !default;
 //
 //    @mixin my-custom-component-theme($theme) {
 //      .my-comp {
-//        background-color: mat-color(map_get($theme, primary));
+//        background-color: mat-color(map-get($theme, primary));
 //      }
 //    }
 //
 // Note that the `$theme.primary` key does usually not exist since the color configuration
 // is stored in `$theme.color` which contains a property for `primary`. This method copies
 // the map from `$theme.color` to `$theme` for backwards compatibility.
 @function _mat-create-backwards-compatibility-theme($theme) {
-  @if not map_get($theme, color) {
+  @if not map-get($theme, color) {
     @return $theme;
   }
-  $color: map_get($theme, color);
-  @return map_merge($theme, $color);
+  $color: map-get($theme, color);
+  @return map-merge($theme, $color);
 }
 
 // Creates a light-themed color configuration from the specified
@@ -162,12 +162,12 @@ $_mat-theme-generate-default-density: true !default;
   // parts of the theming system, but update the `color` configuration if set. As explained
   // above, the color shorthand will be expanded to an actual light-themed color configuration.
   $result: $primary;
-  @if map_get($primary, color) {
-    $color-settings: map_get($primary, color);
-    $primary: map_get($color-settings, primary);
-    $accent: map_get($color-settings, accent);
-    $warn: map_get($color-settings, warn);
-    $result: map_merge($result, (color: _mat-create-light-color-config($primary, $accent, $warn)));
+  @if map-get($primary, color) {
+    $color-settings: map-get($primary, color);
+    $primary: map-get($color-settings, primary);
+    $accent: map-get($color-settings, accent);
+    $warn: map-get($color-settings, warn);
+    $result: map-merge($result, (color: _mat-create-light-color-config($primary, $accent, $warn)));
   }
   @return _mat-create-backwards-compatibility-theme(_mat-validate-theme($result));
 }
@@ -199,12 +199,12 @@ $_mat-theme-generate-default-density: true !default;
   // parts of the theming system, but update the `color` configuration if set. As explained
   // above, the color shorthand will be expanded to an actual dark-themed color configuration.
   $result: $primary;
-  @if map_get($primary, color) {
-    $color-settings: map_get($primary, color);
-    $primary: map_get($color-settings, primary);
-    $accent: map_get($color-settings, accent);
-    $warn: map_get($color-settings, warn);
-    $result: map_merge($result, (color: _mat-create-dark-color-config($primary, $accent, $warn)));
+  @if map-get($primary, color) {
+    $color-settings: map-get($primary, color);
+    $primary: map-get($color-settings, primary);
+    $accent: map-get($color-settings, accent);
+    $warn: map-get($color-settings, warn);
+    $result: map-merge($result, (color: _mat-create-dark-color-config($primary, $accent, $warn)));
   }
   @return _mat-create-backwards-compatibility-theme(_mat-validate-theme($result));
 }
@@ -223,8 +223,8 @@ $_mat-theme-generate-default-density: true !default;
   @if _mat-is-legacy-constructed-theme($theme) {
     @return $theme;
   }
-  @if map_has_key($theme, color) {
-    @return map_get($theme, color);
+  @if map-has-key($theme, color) {
+    @return map-get($theme, color);
   }
   @return $default;
 }
@@ -237,8 +237,8 @@ $_mat-theme-generate-default-density: true !default;
   }
   // In case a theme has been passed, extract the configuration if present,
   // or fall back to the default density config.
-  @if map_has_key($theme-or-config, density) {
-    @return map_get($theme-or-config, density);
+  @if map-has-key($theme-or-config, density) {
+    @return map-get($theme-or-config, density);
   }
   @return $default;
 }
@@ -252,8 +252,8 @@ $_mat-theme-generate-default-density: true !default;
   }
   // In case a theme has been passed, extract the configuration if present,
   // or fall back to the default typography config.
-  @if (map_has_key($theme-or-config, typography)) {
-    @return map_get($theme-or-config, typography);
+  @if (map-has-key($theme-or-config, typography)) {
+    @return map-get($theme-or-config, typography);
   }
   @return $default;
 }
@@ -262,16 +262,16 @@ $_mat-theme-generate-default-density: true !default;
 // of type `map` and can optionally only specify `color`, `density` or `typography`.
 @function _mat-is-theme-object($value) {
   @return type-of($value) == 'map' and (
-    map_has_key($value, color) or
-    map_has_key($value, density) or
-    map_has_key($value, typography) or
+    map-has-key($value, color) or
+    map-has-key($value, density) or
+    map-has-key($value, typography) or
     length($value) == 0
   );
 }
 
 // Checks whether a given value corresponds to a legacy constructed theme.
 @function _mat-is-legacy-constructed-theme($value) {
-  @return type-of($value) == 'map' and map_get($value, '_is-legacy-theme');
+  @return type-of($value) == 'map' and map-get($value, '_is-legacy-theme');
 }
 
 // Gets the theme from the given value that is either already a theme, or a color configuration.
diff --git a/src/material/core/theming/tests/test-theming-api.scss b/src/material/core/theming/tests/test-theming-api.scss
diff --git a/src/material/core/theming/tests/theming-api.spec.ts b/src/material/core/theming/tests/theming-api.spec.ts
diff --git a/src/material/radio/_radio-theme.scss b/src/material/radio/_radio-theme.scss
diff --git a/src/material/slide-toggle/_slide-toggle-theme.scss b/src/material/slide-toggle/_slide-toggle-theme.scss

Original file line number	Diff line number	Diff line change
`@@ -7,14 +7,14 @@`
`7`	`7`	`// provided by MDC in order to support arbitrary form-field controls.`
`8`	`8`	`@mixin _mat-mdc-form-field-infix-vertical-spacing-filled($with-label-padding, $no-label-padding) {`
`9`	`9`	`.mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {`
`10`		`- padding-top: map_get($with-label-padding, top);`
`11`		`- padding-bottom: map_get($with-label-padding, bottom);`
	`10`	`+ padding-top: map-get($with-label-padding, top);`
	`11`	`+ padding-bottom: map-get($with-label-padding, bottom);`
`12`	`12`	`}`
`13`	`13`
`14`	`14`	`.mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea)`
`15`	`15`	`.mat-mdc-form-field-infix {`
`16`		`- padding-top: map_get($no-label-padding, top);`
`17`		`- padding-bottom: map_get($no-label-padding, bottom);`
	`16`	`+ padding-top: map-get($no-label-padding, top);`
	`17`	`+ padding-bottom: map-get($no-label-padding, bottom);`
`18`	`18`	`}`
`19`	`19`	`}`
`20`	`20`
`@@ -23,8 +23,8 @@`
`23`	`23`	`// provided by MDC in order to support arbitrary form-field controls.`
`24`	`24`	`@mixin _mat-mdc-form-field-infix-vertical-spacing-outlined($padding) {`
`25`	`25`	`.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {`
`26`		`- padding-top: map_get($padding, top);`
`27`		`- padding-bottom: map_get($padding, bottom);`
	`26`	`+ padding-top: map-get($padding, top);`
	`27`	`+ padding-bottom: map-get($padding, bottom);`
`28`	`28`	`}`
`29`	`29`	`}`
`30`	`30`
Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@`
`96`	`96`
`97`	`97`	`@mixin mat-mdc-strong-focus-indicators-color($config-or-theme) {`
`98`	`98`	`$config: mat-get-color-config($config-or-theme);`
`99`		`- @include _mat-mdc-strong-focus-indicators-border-color(mat-color(map_get($config, primary)));`
	`99`	`+ @include _mat-mdc-strong-focus-indicators-border-color(mat-color(map-get($config, primary)));`
`100`	`100`	`}`
`101`	`101`
`102`	`102`	`/// Mixin that sets the color of the focus indicators.`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`&.mdc-list-item--selected::before {`
`17`		`- background: mat-color(map_get($config, primary));`
	`17`	`+ background: mat-color(map-get($config, primary));`
`18`	`18`	`opacity: map-get($state-opacities, selected);`
`19`	`19`	`}`
`20`	`20`
Original file line number	Diff line number	Diff line change
`@@ -113,7 +113,7 @@ $_mat-button-ripple-opacity: 0.1;`
`113`	`113`	`}`
`114`	`114`
`115`	`115`	`.mat-button-focus-overlay {`
`116`		`- background: map_get($foreground, base);`
	`116`	`+ background: map-get($foreground, base);`
`117`	`117`	`}`
`118`	`118`
`119`	`119`	`// Note: this needs a bit extra specificity, because we're not guaranteed the inclusion`
Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,7 @@`
`77`	`77`	// Switch this to a solid color since we're using `opacity`
`78`	`78`	`// to control how opaque the ripple should be.`
`79`	`79`	`.mat-checkbox .mat-ripple-element {`
`80`		`- background-color: map_get(map-get($config, foreground), base);`
	`80`	`+ background-color: map-get(map-get($config, foreground), base);`
`81`	`81`	`}`
`82`	`82`
`83`	`83`	`.mat-checkbox-checked:not(.mat-checkbox-disabled),`
Original file line number	Diff line number	Diff line change
`@@ -68,7 +68,7 @@ $mat-chip-remove-font-size: 18px;`
`68`	`68`	`}`
`69`	`69`
`70`	`70`	`&::after {`
`71`		`- background: map_get($foreground, base);`
	`71`	`+ background: map-get($foreground, base);`
`72`	`72`	`}`
`73`	`73`	`}`
`74`	`74`
Original file line number	Diff line number	Diff line change
`@@ -87,7 +87,7 @@`
`87`	`87`
`88`	`88`	`@mixin mat-strong-focus-indicators-color($config-or-theme) {`
`89`	`89`	`$config: mat-get-color-config($config-or-theme);`
`90`		`- @include _mat-strong-focus-indicators-border-color(mat-color(map_get($config, primary)));`
	`90`	`+ @include _mat-strong-focus-indicators-border-color(mat-color(map-get($config, primary)));`
`91`	`91`	`}`
`92`	`92`
`93`	`93`	`/// Mixin that sets the color of the focus indicators.`