From 5bb4a422de35e953a35c032a66949cacea1e0496 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Wed, 8 Nov 2023 09:54:46 -0800
Subject: [PATCH] fix(button): allow overriding `padding` and `gap`

More customization and necessary prep to move styles to host for host aria and text wrapping customization.

PiperOrigin-RevId: 580565272
---
 button/internal/_shared.scss | 18 +++++++++---------
 button/internal/button.ts    | 16 +++++-----------
 2 files changed, 14 insertions(+), 20 deletions(-)

diff --git a/button/internal/_shared.scss b/button/internal/_shared.scss
index df2dccbe91..e44343db96 100644
--- a/button/internal/_shared.scss
+++ b/button/internal/_shared.scss
@@ -13,11 +13,16 @@
 
 @mixin styles() {
   :host {
+    box-sizing: border-box;
     cursor: pointer;
     display: inline-flex;
+    gap: 8px;
     height: var(--_container-height);
     min-width: 64px;
     outline: none;
+    padding-inline-start: var(--_leading-space);
+    padding-inline-end: var(--_trailing-space);
+    position: relative;
     font-family: var(--_label-text-font);
     font-size: var(--_label-text-size);
     line-height: var(--_label-text-line-height);
@@ -64,7 +69,6 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    box-sizing: border-box;
     border: none;
     outline: none;
     -webkit-appearance: none;
@@ -72,15 +76,12 @@
     background: transparent;
     text-decoration: none;
     width: 100%;
-    position: relative;
     z-index: 0; // Place content on top of elevation and ripple
     height: 100%;
     font: inherit;
     color: var(--_label-text-color);
-    // TODO(b/181413732): Verify token below are named correctly
-    padding-inline-start: var(--_leading-space);
-    padding-inline-end: var(--_trailing-space);
-    gap: 8px;
+    padding: 0;
+    gap: inherit;
 
     &::-moz-focus-inner {
       padding: 0;
@@ -139,13 +140,12 @@
     z-index: -1; // Place behind content
   }
 
-  // TODO(b/181413732): Verify token below are named correctly
-  .icon-leading {
+  :host([has-icon]:not([trailing-icon])) {
     padding-inline-start: var(--_with-leading-icon-leading-space);
     padding-inline-end: var(--_with-leading-icon-trailing-space);
   }
 
-  .icon-trailing {
+  :host([has-icon][trailing-icon]) {
     padding-inline-start: var(--_with-trailing-icon-leading-space);
     padding-inline-end: var(--_with-trailing-icon-trailing-space);
   }
diff --git a/button/internal/button.ts b/button/internal/button.ts
index dc54564b07..07db75c0ea 100644
--- a/button/internal/button.ts
+++ b/button/internal/button.ts
@@ -9,7 +9,6 @@ import '../../ripple/ripple.js';
 
 import {html, isServer, LitElement, nothing} from 'lit';
 import {property, query, queryAssignedElements} from 'lit/decorators.js';
-import {classMap} from 'lit/directives/class-map.js';
 import {literal, html as staticHtml} from 'lit/static-html.js';
 
 import {ARIAMixinStrict} from '../../internal/aria/aria.js';
@@ -71,12 +70,14 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
    *
    * _Note:_ Link buttons cannot have trailing icons.
    */
-  @property({type: Boolean, attribute: 'trailing-icon'}) trailingIcon = false;
+  @property({type: Boolean, attribute: 'trailing-icon', reflect: true})
+  trailingIcon = false;
 
   /**
    * Whether to display the icon or not.
    */
-  @property({type: Boolean, attribute: 'has-icon'}) hasIcon = false;
+  @property({type: Boolean, attribute: 'has-icon', reflect: true}) hasIcon =
+    false;
 
   @property() type: FormSubmitterType = 'submit';
 
@@ -125,7 +126,7 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
     const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;
     return staticHtml`
       <${button}
-        class="button ${classMap(this.getRenderClasses())}"
+        class="button"
         ?disabled=${isDisabled}
         aria-label="${ariaLabel || nothing}"
         aria-haspopup="${ariaHasPopup || nothing}"
@@ -135,13 +136,6 @@ export abstract class Button extends buttonBaseClass implements FormSubmitter {
       >${this.renderContent()}</${button}>`;
   }
 
-  protected getRenderClasses() {
-    return {
-      'icon-leading': !this.trailingIcon && this.hasIcon,
-      'icon-trailing': this.trailingIcon && this.hasIcon,
-    };
-  }
-
   protected renderElevation?(): unknown;
 
   protected renderOutline?(): unknown;