fix(button): use new elevation component

PiperOrigin-RevId: 499297613
material-components · Jan 3, 2023 · 2f1a8df · 2f1a8df
1 parent 563518b
commit 2f1a8df
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 52 deletions.
diff --git a/chips/chip/lib/_chip-theme.scss b/chips/chip/lib/_chip-theme.scss
@@ -12,7 +12,7 @@
 @use 'sass:math';
 @use 'sass:color';
 
-@use '../../../elevationold/lib/elevation-theme';
+@use '../../../elevation/lib/elevation';
 @use '../../../ripple/ripple';
 @use '../../../sass/dom';
 @use '../../../sass/resolvers';
@@ -191,10 +191,10 @@ $_custom-property-prefix: 'chip';
   @include _avatar-shape(map.get($theme, with-avatar-avatar-shape));
   @include graphic-size(map.get($theme, with-avatar-avatar-size));
   @include height(map.get($theme, container-height));
-  @include elevation-theme.theme-styles(
+  @include elevation.theme(
     (
-      surface-tint-layer-color:
-        map.get($theme, container-surface-tint-layer-color),
+      shadow-color: map.get($theme, elevated-container-shadow-color),
+      surface-tint-color: map.get($theme, container-surface-tint-layer-color),
     )
   );
   @include _container-elevation(
@@ -426,26 +426,22 @@ $_custom-property-prefix: 'chip';
 }
 
 @function _resolve-theme($theme, $resolvers) {
-  $theme: elevation-theme.resolve-theme(
+  $theme: elevation.resolve-tokens(
     $theme,
-    map.get($resolvers, elevation),
-    $shadow-color-token: elevated-container-shadow-color,
-    $elevation-tokens: (
-      container-elevation,
-      elevated-container-elevation,
-      elevated-disabled-container-elevation,
-      elevated-focus-container-elevation,
-      elevated-hover-container-elevation,
-      elevated-pressed-container-elevation,
-      elevated-selected-container-elevation,
-      flat-container-elevation,
-      flat-selected-focus-container-elevation,
-      flat-selected-hover-container-elevation,
-      flat-selected-pressed-container-elevation,
-      flat-unselected-focus-container-elevation,
-      flat-unselected-hover-container-elevation,
-      flat-unselected-pressed-container-elevation
-    )
+    'container-elevation',
+    'elevated-container-elevation',
+    'elevated-disabled-container-elevation',
+    'elevated-focus-container-elevation',
+    'elevated-hover-container-elevation',
+    'elevated-pressed-container-elevation',
+    'elevated-selected-container-elevation',
+    'flat-container-elevation',
+    'flat-selected-focus-container-elevation',
+    'flat-selected-hover-container-elevation',
+    'flat-selected-pressed-container-elevation',
+    'flat-unselected-focus-container-elevation',
+    'flat-unselected-hover-container-elevation',
+    'flat-unselected-pressed-container-elevation'
   );
   @return $theme;
 }

diff --git a/chips/chip/lib/_chip.scss b/chips/chip/lib/_chip.scss
@@ -77,8 +77,6 @@
   .md3-chip {
     position: relative;
     max-width: 100%;
-    // TODO(b/240224981): Translate to md3 elevation
-    // @include elevation-theme.overlay-dimensions(100%, $query: $query);
   }
 
   .md3-chip__cell,

diff --git a/chips/chip/lib/_input-chip-theme.scss b/chips/chip/lib/_input-chip-theme.scss
@@ -5,6 +5,7 @@
  */
 
 @use 'sass:map';
+@use '../../../elevation/lib/elevation';
 @use '../../../sass/resolvers';
 @use '../../../sass/theme';
 @use './chip-theme';
@@ -60,38 +61,27 @@ $_custom-property-prefix: 'input-chip';
 
 @mixin theme($theme, $resolvers: resolvers.$material) {
   @include theme.validate-theme($_light-theme, $theme);
-
-  // Resolve elevation.
-  @each $key
-    in (
-      flat-container-elevation,
-      elevated-container-elevation,
-      elevated-disabled-container-elevation,
-      elevated-hover-container-elevation,
-      elevated-focus-container-elevation,
-      elevated-pressed-container-elevation
-    )
-  {
-    $value: map.get($theme, $key);
-    @if $value {
-      $theme: map.set(
-        $theme,
-        $key,
-        meta.call(
-          $elevation-resolver: map.get($resolvers, elevation),
-          $elevation: $value,
-          $shadow-color: map.get($theme, elevated-container-shadow-color),
-        )
-      );
-    }
-  }
-
+  $theme: _resolve-tokens($theme);
   $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
   @include theme.emit-theme-vars($theme);
 }
 
 @mixin theme-styles($theme, $resolvers: resolvers.$material) {
   @include theme.validate-theme($_light-theme, $theme);
+  $theme: _resolve-tokens($theme);
   $theme: theme.create-theme-vars($theme, $_custom-property-prefix);
   @include chip-theme.theme-styles($theme, $resolvers: $resolvers);
 }
+
+@function _resolve-tokens($tokens) {
+  $tokens: elevation.resolve-tokens(
+    $tokens,
+    'flat-container-elevation',
+    'elevated-container-elevation',
+    'elevated-disabled-container-elevation',
+    'elevated-hover-container-elevation',
+    'elevated-focus-container-elevation',
+    'elevated-pressed-container-elevation'
+  );
+  @return $tokens;
+}
diff --git a/chips/chip/lib/chip.ts b/chips/chip/lib/chip.ts
@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '../../../elevation/elevation.js';
 import '../../action/delete-action.js';
 
 import {html, TemplateResult} from 'lit';
@@ -73,7 +74,7 @@ export abstract class Chip extends ActionElement {
   /** @soyTemplate */
   protected renderOverlay(): TemplateResult {
     return this.borderType === BorderType.ELEVATED ?
-        html`<div class="md3-elevation-overlay" aria-hidden="true"></div>` :
+        html`<md-elevation aria-hidden="true" shadow surface></md-elevation>` :
         html``;
   }