From 798f5ae179c63d22a83ad4a7bcf8bb085541f6a1 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Mon, 6 Nov 2023 15:38:14 -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: 579977848
---
 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 5806dd5e5a..1899999e44 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 b2e51d0103..e98682f905 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 d5d0b3db8b..9a3b6be3dc 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 7e715a06a0..c723bd2f63 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;
     }
   }