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
material-components · Nov 6, 2023 · 798f5ae · 798f5ae
1 parent 7d78580
commit 798f5ae
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 109 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;
     }
   }