fix(button): use new elevation component

PiperOrigin-RevId: 495085105
material-components · Dec 13, 2022 · 545c2eb · 545c2eb
1 parent aef3ee3
commit 545c2eb
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 48 deletions.
diff --git a/button/elevated-button.ts b/button/elevated-button.ts
@@ -6,8 +6,6 @@
 
 import {customElement} from 'lit/decorators.js';
 
-import {styles as elevationOverlayStyles} from '../elevationold/lib/elevation-overlay-styles.css.js';
-
 import {ElevatedButton} from './lib/elevated-button.js';
 import {styles as elevatedStyles} from './lib/elevated-styles.css.js';
 import {styles as sharedElevationStyles} from './lib/shared-elevation-styles.css.js';
@@ -26,7 +24,6 @@ declare global {
  */
 @customElement('md-elevated-button')
 export class MdElevatedButton extends ElevatedButton {
-  static override styles = [
-    elevationOverlayStyles, sharedStyles, sharedElevationStyles, elevatedStyles
-  ];
+  static override styles =
+      [sharedStyles, sharedElevationStyles, elevatedStyles];
 }
diff --git a/button/elevated-link-button.ts b/button/elevated-link-button.ts
@@ -6,8 +6,6 @@
 
 import {customElement} from 'lit/decorators.js';
 
-import {styles as elevationOverlayStyles} from '../elevationold/lib/elevation-overlay-styles.css.js';
-
 import {ElevatedLinkButton} from './lib/elevated-link-button.js';
 import {styles as elevatedStyles} from './lib/elevated-styles.css.js';
 import {styles as sharedElevationStyles} from './lib/shared-elevation-styles.css.js';
@@ -26,7 +24,6 @@ declare global {
  */
 @customElement('md-elevated-link-button')
 export class MdElevatedLinkButton extends ElevatedLinkButton {
-  static override styles = [
-    elevationOverlayStyles, sharedStyles, sharedElevationStyles, elevatedStyles
-  ];
+  static override styles =
+      [sharedStyles, sharedElevationStyles, elevatedStyles];
 }
diff --git a/button/lib/_elevation.scss b/button/lib/_elevation.scss
@@ -9,68 +9,66 @@
 @use 'sass:map';
 @use 'sass:meta';
 
-@use '../../elevationold/lib/elevation-theme';
-@use '../../sass/resolvers';
+@use '../../elevation/lib/elevation';
 
 @mixin styles() {
+  md-elevation {
+    inset: 0;
+    position: absolute;
+  }
+
   .md3-button {
-    @include elevation-theme.theme-styles(
+    @include elevation.theme(
       (
-        shadow: var(--_container-elevation-shadow),
-        overlay-opacity: var(--_container-elevation-overlay-opacity),
-        surface-tint-layer-color: var(--_container-surface-tint-layer-color),
+        // TODO: replace duration with animation tokens
+        duration: 280ms,
+        level: var(--_container-elevation),
+        shadow-color: var(--_container-shadow-color),
+        surface-tint-color: var(--_container-surface-tint-layer-color)
       )
     );
   }
 
   .md3-button:hover {
-    @include elevation-theme.theme-styles(
+    @include elevation.theme(
       (
-        shadow: var(--_hover-container-elevation-shadow),
-        overlay-opacity: var(--_hover-container-elevation-overlay-opacity),
+        level: var(--_hover-container-elevation),
       )
     );
   }
 
   .md3-button:focus {
-    @include elevation-theme.theme-styles(
+    @include elevation.theme(
       (
-        shadow: var(--_focus-container-elevation-shadow),
-        overlay-opacity: var(--_focus-container-elevation-overlay-opacity),
+        level: var(--_focus-container-elevation),
       )
     );
   }
 
   .md3-button:active {
-    @include elevation-theme.theme-styles(
+    @include elevation.theme(
       (
-        shadow: var(--_pressed-container-elevation-shadow),
-        overlay-opacity: var(--_pressed-container-elevation-overlay-opacity),
+        level: var(--_pressed-container-elevation),
       )
     );
   }
 
   .md3-button:disabled {
-    @include elevation-theme.theme-styles(
+    @include elevation.theme(
       (
-        shadow: var(--_disabled-container-elevation-shadow),
-        overlay-opacity: var(--_disabled-container-elevation-overlay-opacity),
+        level: var(--_disabled-container-elevation),
       )
     );
   }
 }
 
 @function resolve-tokens($tokens) {
-  @return elevation-theme.resolve-theme(
+  @return elevation.resolve-tokens(
     $tokens,
-    map.get(resolvers.$material, elevation),
-    $shadow-color-token: container-shadow-color,
-    $elevation-tokens: (
-      container-elevation,
-      disabled-container-elevation,
-      focus-container-elevation,
-      hover-container-elevation,
-      pressed-container-elevation
-    )
+    'container-elevation',
+    'disabled-container-elevation',
+    'focus-container-elevation',
+    'hover-container-elevation',
+    'pressed-container-elevation'
   );
 }
diff --git a/button/lib/_shared.scss b/button/lib/_shared.scss
@@ -7,7 +7,6 @@
 // Selector '.md3-*' should only be used in this project.
 
 @use 'sass:map';
-@use '../../elevationold/lib/surface' as elevation-surface;
 @use '../../ripple/ripple-theme';
 @use '../../sass/color';
 @use '../../sass/dom';
@@ -49,8 +48,6 @@
   }
 
   .md3-button {
-    @include elevation-surface.root-static-styles();
-
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -65,6 +62,8 @@
     background: transparent;
     text-decoration: none;
     inline-size: 100%;
+    position: relative;
+    z-index: 0; // Place content on top of elevation and ripple
     block-size: var(--_container-height);
     font-family: var(--_label-text-font);
     font-size: var(--_label-text-size);
@@ -112,6 +111,7 @@
     border-radius: var(--_container-shape);
   }
 
+  md-elevation,
   .md3-button__ripple {
     z-index: -1; // Place behind content
   }

diff --git a/button/lib/button.ts b/button/lib/button.ts
@@ -87,7 +87,7 @@ export abstract class Button extends LitElement implements ButtonState {
           @click="${this.handleClick}"
           ${ripple(getRipple)}>
         ${this.renderFocusRing()}
-        ${this.renderOverlay()}
+        ${this.renderElevation()}
         ${when(this.showRipple, () => this.renderRipple())}
         ${this.renderOutline()}
         ${this.renderTouchTarget()}
@@ -121,7 +121,7 @@ export abstract class Button extends LitElement implements ButtonState {
   }
 
   /** @soyTemplate */
-  protected renderOverlay(): TemplateResult {
+  protected renderElevation(): TemplateResult {
     return html``;
   }
 

diff --git a/button/lib/elevated-button.ts b/button/lib/elevated-button.ts
@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '../../elevation/elevation.js';
+
 import {html, TemplateResult} from 'lit';
 import {ClassInfo} from 'lit/directives/class-map.js';
 
@@ -20,7 +22,7 @@ export class ElevatedButton extends Button {
   }
 
   /** @soyTemplate */
-  protected override renderOverlay(): TemplateResult {
-    return html`<div class="md3-elevation-overlay"></div>`;
+  protected override renderElevation(): TemplateResult {
+    return html`<md-elevation shadow surface></md-elevation>`;
   }
 }
diff --git a/button/lib/elevated-link-button.ts b/button/lib/elevated-link-button.ts
@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '../../elevation/elevation.js';
+
 import {html, TemplateResult} from 'lit';
 import {ClassInfo} from 'lit/directives/class-map.js';
 
@@ -20,7 +22,7 @@ export class ElevatedLinkButton extends LinkButton {
   }
 
   /** @soyTemplate */
-  protected override renderOverlay(): TemplateResult {
-    return html`<div class="md3-elevation-overlay"></div>`;
+  protected override renderElevation(): TemplateResult {
+    return html`<md-elevation shadow surface></md-elevation>`;
   }
 }
diff --git a/button/lib/filled-button.ts b/button/lib/filled-button.ts
@@ -4,6 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '../../elevation/elevation.js';
+
+import {html, TemplateResult} from 'lit';
 import {ClassInfo} from 'lit/directives/class-map.js';
 
 import {Button} from './button.js';
@@ -17,4 +20,9 @@ export class FilledButton extends Button {
       'md3-button--filled': true,
     };
   }
+
+  /** @soyTemplate */
+  protected override renderElevation(): TemplateResult {
+    return html`<md-elevation shadow surface></md-elevation>`;
+  }
 }
diff --git a/button/lib/filled-link-button.ts b/button/lib/filled-link-button.ts
@@ -4,6 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '../../elevation/elevation.js';
+
+import {html, TemplateResult} from 'lit';
 import {ClassInfo} from 'lit/directives/class-map.js';
 
 import {LinkButton} from './link-button.js';
@@ -17,4 +20,9 @@ export class FilledLinkButton extends LinkButton {
       'md3-button--filled': true,
     };
   }
+
+  /** @soyTemplate */
+  protected override renderElevation(): TemplateResult {
+    return html`<md-elevation shadow surface></md-elevation>`;
+  }
 }
diff --git a/button/lib/link-button.ts b/button/lib/link-button.ts
@@ -60,7 +60,7 @@ export abstract class LinkButton extends Button {
           @click="${this.handleClick}"
           ${ripple(getRipple)}>
             ${this.renderFocusRing()}
-            ${this.renderOverlay()}
+            ${this.renderElevation()}
             ${when(this.showRipple, () => this.renderRipple())}
             ${this.renderOutline()}
             ${this.renderTouchTarget()}

diff --git a/button/lib/tonal-button.ts b/button/lib/tonal-button.ts
@@ -4,6 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '../../elevation/elevation.js';
+
+import {html, TemplateResult} from 'lit';
 import {ClassInfo} from 'lit/directives/class-map.js';
 
 import {Button} from './button.js';
@@ -17,4 +20,9 @@ export class TonalButton extends Button {
       'md3-button--tonal': true,
     };
   }
+
+  /** @soyTemplate */
+  protected override renderElevation(): TemplateResult {
+    return html`<md-elevation shadow></md-elevation>`;
+  }
 }
diff --git a/button/lib/tonal-link-button.ts b/button/lib/tonal-link-button.ts
@@ -4,6 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import '../../elevation/elevation.js';
+
+import {html, TemplateResult} from 'lit';
 import {ClassInfo} from 'lit/directives/class-map.js';
 
 import {LinkButton} from './link-button.js';
@@ -17,4 +20,9 @@ export class TonalLinkButton extends LinkButton {
       'md3-button--tonal': true,
     };
   }
+
+  /** @soyTemplate */
+  protected override renderElevation(): TemplateResult {
+    return html`<md-elevation shadow></md-elevation>`;
+  }
 }