From 6e0775ded3e90aa56f6e38903b2e15f68b7a4de4 Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Thu, 5 Jan 2023 16:11:12 -0800
Subject: [PATCH] fix(button, fab): Ensure elevation is correct when focused
 and hovering

PiperOrigin-RevId: 500032153
---
 button/lib/_elevation.scss | 58 ++++++++++++++++++++------------------
 fab/lib/_shared.scss       | 20 +++++++------
 2 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/button/lib/_elevation.scss b/button/lib/_elevation.scss
index 889f473468..85e9fe8cf9 100644
--- a/button/lib/_elevation.scss
+++ b/button/lib/_elevation.scss
@@ -27,38 +27,40 @@
         surface-tint-color: var(--_container-surface-tint-layer-color)
       )
     );
-  }
 
-  .md3-button:hover {
-    @include elevation.theme(
-      (
-        level: var(--_hover-container-elevation),
-      )
-    );
-  }
+    // apply elevation in order of focused, hovered, pressed, disabled
+    // this ensures a button will have hover elevation after being focused
+    &:focus {
+      @include elevation.theme(
+        (
+          level: var(--_focus-container-elevation),
+        )
+      );
+    }
 
-  .md3-button:focus {
-    @include elevation.theme(
-      (
-        level: var(--_focus-container-elevation),
-      )
-    );
-  }
+    &:hover {
+      @include elevation.theme(
+        (
+          level: var(--_hover-container-elevation),
+        )
+      );
+    }
 
-  .md3-button:active {
-    @include elevation.theme(
-      (
-        level: var(--_pressed-container-elevation),
-      )
-    );
-  }
+    &:active {
+      @include elevation.theme(
+        (
+          level: var(--_pressed-container-elevation),
+        )
+      );
+    }
 
-  .md3-button:disabled {
-    @include elevation.theme(
-      (
-        level: var(--_disabled-container-elevation),
-      )
-    );
+    &:disabled {
+      @include elevation.theme(
+        (
+          level: var(--_disabled-container-elevation),
+        )
+      );
+    }
   }
 }
 
diff --git a/fab/lib/_shared.scss b/fab/lib/_shared.scss
index 628b2b42ac..dc3ea1d95c 100644
--- a/fab/lib/_shared.scss
+++ b/fab/lib/_shared.scss
@@ -81,35 +81,37 @@
       );
     }
 
-    &:hover {
-      cursor: pointer;
-
+    // apply elevation in order of focused, hovered, pressed
+    // this ensures a button will have hover elevation after being focused
+    &:focus {
       @include elevation.theme(
         (
-          level: var(--_hover-container-elevation),
+          level: var(--_focus-container-elevation),
         )
       );
 
       &.md3-fab--lowered {
         @include elevation.theme(
           (
-            level: var(--_lowered-hover-container-elevation),
+            level: var(--_lowered-focus-container-elevation),
           )
         );
       }
     }
 
-    &:focus {
+    &:hover {
+      cursor: pointer;
+
       @include elevation.theme(
         (
-          level: var(--_focus-container-elevation),
+          level: var(--_hover-container-elevation),
         )
       );
 
       &.md3-fab--lowered {
         @include elevation.theme(
           (
-            level: var(--_lowered-focus-container-elevation),
+            level: var(--_lowered-hover-container-elevation),
           )
         );
       }
@@ -158,7 +160,7 @@
     @include touch-target.touch-target();
   }
 
-  ::slotted(*),
+  .md3-fab__icon ::slotted(*),
   .md3-fab__icon {
     color: var(--_icon-color);
     font-size: var(--_icon-size);