fix(button, fab): Ensure elevation is correct when focused and hovering

PiperOrigin-RevId: 500032153
material-components · Jan 6, 2023 · 6e0775d · 6e0775d
1 parent bab6ebc
commit 6e0775d
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 37 deletions.
diff --git 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
@@ -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);