From 7767c5d22d5c1a74e3099cde2f0a7625974a1b6d Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Sun, 5 Nov 2023 10:39:35 -0800
Subject: [PATCH] fix(button): allow overriding `cursor` using CSS

Prep to move some styles to the host, which allows for better host styling, like setting padding and text wrapping. It will also support host aria by not relying on `<button>` pseudo selectors.

PiperOrigin-RevId: 579653476
---
 button/internal/_elevation.scss       | 64 ++++++++++----------
 button/internal/_icon.scss            | 44 +++++++-------
 button/internal/_outlined-button.scss | 22 +++----
 button/internal/_shared.scss          | 86 +++++++++++++--------------
 4 files changed, 107 insertions(+), 109 deletions(-)

diff --git a/button/internal/_elevation.scss b/button/internal/_elevation.scss
index 5806dd5e5a1..1899999e440 100644
--- a/button/internal/_elevation.scss
+++ b/button/internal/_elevation.scss
@@ -20,50 +20,50 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     transition-timing-function: map.get($_md-sys-motion, 'emphasized-easing');
   }
 
-  .button:disabled md-elevation {
+  :host([disabled]) md-elevation {
     transition: none;
   }
 
-  .button {
+  md-elevation {
     @include elevation.theme(
       (
         'level': var(--_container-elevation),
         'shadow-color': var(--_container-shadow-color),
       )
     );
+  }
 
-    // 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),
-        )
-      );
-    }
+  // apply elevation in order of focused, hovered, pressed, disabled
+  // this ensures a button will have hover elevation after being focused
+  :host(:focus-within) md-elevation {
+    @include elevation.theme(
+      (
+        'level': var(--_focus-container-elevation),
+      )
+    );
+  }
 
-    &:hover {
-      @include elevation.theme(
-        (
-          'level': var(--_hover-container-elevation),
-        )
-      );
-    }
+  :host(:hover) md-elevation {
+    @include elevation.theme(
+      (
+        'level': var(--_hover-container-elevation),
+      )
+    );
+  }
 
-    &:active {
-      @include elevation.theme(
-        (
-          'level': var(--_pressed-container-elevation),
-        )
-      );
-    }
+  :host(:active) md-elevation {
+    @include elevation.theme(
+      (
+        'level': var(--_pressed-container-elevation),
+      )
+    );
+  }
 
-    &:disabled {
-      @include elevation.theme(
-        (
-          'level': var(--_disabled-container-elevation),
-        )
-      );
-    }
+  :host([disabled]) md-elevation {
+    @include elevation.theme(
+      (
+        'level': var(--_disabled-container-elevation),
+      )
+    );
   }
 }
diff --git a/button/internal/_icon.scss b/button/internal/_icon.scss
index b2e51d01033..e98682f905a 100644
--- a/button/internal/_icon.scss
+++ b/button/internal/_icon.scss
@@ -8,32 +8,30 @@
   // class, which is loaded separately so the order of CSS definitions is not
   // guaranteed. Therefore, increase specifity to ensure overrides apply.
   ::slotted([slot='icon']) {
-    .button & {
-      display: inline-flex;
-      position: relative;
-      writing-mode: horizontal-tb;
-      fill: currentColor;
-      color: var(--_icon-color);
-      font-size: var(--_icon-size);
-      inline-size: var(--_icon-size);
-      block-size: var(--_icon-size);
-    }
+    display: inline-flex;
+    position: relative;
+    writing-mode: horizontal-tb;
+    fill: currentColor;
+    color: var(--_icon-color);
+    font-size: var(--_icon-size);
+    inline-size: var(--_icon-size);
+    block-size: var(--_icon-size);
+  }
 
-    .button:hover & {
-      color: var(--_hover-icon-color);
-    }
+  :host(:hover) ::slotted([slot='icon']) {
+    color: var(--_hover-icon-color);
+  }
 
-    .button:focus & {
-      color: var(--_focus-icon-color);
-    }
+  :host(:focus-within) ::slotted([slot='icon']) {
+    color: var(--_focus-icon-color);
+  }
 
-    .button:active & {
-      color: var(--_pressed-icon-color);
-    }
+  :host(:active) ::slotted([slot='icon']) {
+    color: var(--_pressed-icon-color);
+  }
 
-    .button:disabled & {
-      color: var(--_disabled-icon-color);
-      opacity: var(--_disabled-icon-opacity);
-    }
+  :host([disabled]) ::slotted([slot='icon']) {
+    color: var(--_disabled-icon-color);
+    opacity: var(--_disabled-icon-opacity);
   }
 }
diff --git a/button/internal/_outlined-button.scss b/button/internal/_outlined-button.scss
index d5d0b3db8bd..9a3b6be3dc3 100644
--- a/button/internal/_outlined-button.scss
+++ b/button/internal/_outlined-button.scss
@@ -74,20 +74,20 @@
     border-start-end-radius: var(--_container-shape-start-end);
     border-end-start-radius: var(--_container-shape-end-start);
     border-end-end-radius: var(--_container-shape-end-end);
+  }
 
-    .button:active & {
-      border-color: var(--_pressed-outline-color);
-    }
+  :host(:active) .button__outline {
+    border-color: var(--_pressed-outline-color);
+  }
 
-    .button:disabled & {
-      border-color: var(--_disabled-outline-color);
-      opacity: var(--_disabled-outline-opacity);
-    }
+  :host([disabled]) .button__outline {
+    border-color: var(--_disabled-outline-color);
+    opacity: var(--_disabled-outline-opacity);
+  }
 
-    @media (forced-colors: active) {
-      .button:disabled & {
-        opacity: 1;
-      }
+  @media (forced-colors: active) {
+    :host([disabled]) .button__outline {
+      opacity: 1;
     }
   }
 
diff --git a/button/internal/_shared.scss b/button/internal/_shared.scss
index 7e715a06a0f..c723bd2f63c 100644
--- a/button/internal/_shared.scss
+++ b/button/internal/_shared.scss
@@ -13,6 +13,7 @@
 
 @mixin styles() {
   :host {
+    cursor: pointer;
     display: inline-flex;
     height: var(--_container-height);
     outline: none;
@@ -57,6 +58,7 @@
   }
 
   .button {
+    cursor: inherit;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -80,60 +82,58 @@
     padding-inline-end: var(--_trailing-space);
     gap: 8px;
 
-    &::before {
-      // Background color. Separate node for disabled opacity styles.
-      background-color: var(--_container-color);
-      border-radius: inherit;
-      content: '';
-      inset: 0;
-      position: absolute;
-    }
-
     &::-moz-focus-inner {
       padding: 0;
       border: 0;
     }
+  }
 
-    &:hover {
-      color: var(--_hover-label-text-color);
-      cursor: pointer;
-    }
+  :host(:hover) .button {
+    color: var(--_hover-label-text-color);
+  }
 
-    &:focus {
-      color: var(--_focus-label-text-color);
-    }
+  :host(:focus-within) .button {
+    color: var(--_focus-label-text-color);
+  }
 
-    &:active {
-      color: var(--_pressed-label-text-color);
-      outline: none;
-    }
+  :host(:active) .button {
+    color: var(--_pressed-label-text-color);
+  }
 
-    &:disabled .button__label {
-      color: var(--_disabled-label-text-color);
-      opacity: var(--_disabled-label-text-opacity);
-    }
+  .button::before {
+    // Background color. Separate node for disabled opacity styles.
+    background-color: var(--_container-color);
+    border-radius: inherit;
+    content: '';
+    inset: 0;
+    position: absolute;
+  }
 
-    &:disabled::before {
-      background-color: var(--_disabled-container-color);
-      opacity: var(--_disabled-container-opacity);
+  :host([disabled]) .button__label {
+    color: var(--_disabled-label-text-color);
+    opacity: var(--_disabled-label-text-opacity);
+  }
+
+  :host([disabled]) .button::before {
+    background-color: var(--_disabled-container-color);
+    opacity: var(--_disabled-container-opacity);
+  }
+
+  @media (forced-colors: active) {
+    .button::before {
+      content: '';
+      box-sizing: border-box;
+      border: 1px solid CanvasText;
+      border-radius: inherit;
+      inset: 0;
+      pointer-events: none;
+      position: absolute;
     }
 
-    @media (forced-colors: active) {
-      &::before {
-        content: '';
-        box-sizing: border-box;
-        border: 1px solid CanvasText;
-        border-radius: inherit;
-        inset: 0;
-        pointer-events: none;
-        position: absolute;
-      }
-
-      &:disabled {
-        --_disabled-icon-opacity: 1;
-        --_disabled-container-opacity: 1;
-        --_disabled-label-text-opacity: 1;
-      }
+    :host([disabled]) .button {
+      --_disabled-icon-opacity: 1;
+      --_disabled-container-opacity: 1;
+      --_disabled-label-text-opacity: 1;
     }
   }