From 4974edeb734fec6439b9122d8e3b977cd1ad94bd Mon Sep 17 00:00:00 2001
From: Daniel Freedman <dfreedm@google.com>
Date: Mon, 9 Jan 2023 17:14:36 -0800
Subject: [PATCH] refactor(button): Use flex gap for internal layout

PiperOrigin-RevId: 500845959
---
 button/lib/_icon.scss     | 38 ++++++++++++++------------------------
 button/lib/_shared.scss   |  1 +
 button/lib/button.ts      | 14 ++------------
 button/lib/link-button.ts |  6 ------
 4 files changed, 17 insertions(+), 42 deletions(-)

diff --git a/button/lib/_icon.scss b/button/lib/_icon.scss
index 3bbfba6069..a40bfd673a 100644
--- a/button/lib/_icon.scss
+++ b/button/lib/_icon.scss
@@ -10,10 +10,8 @@
   // The icon CSS class overrides styles defined in the .material-icons CSS
   // class, which is loaded separately so the order of CSS definitions is not
   // guaranteed. Therefore, increase specifity to ensure overrides apply.
-  .md3-button__icon-slot-container {
-    display: inline-flex;
-
-    ::slotted([slot='icon']) {
+  ::slotted([slot='icon']) {
+    .md3-button & {
       display: inline-flex;
       position: relative;
       writing-mode: horizontal-tb;
@@ -21,30 +19,22 @@
       font-size: var(--_with-icon-icon-size);
       inline-size: var(--_with-icon-icon-size);
       block-size: var(--_with-icon-icon-size);
+    }
 
-      .md3-button:hover & {
-        color: var(--_with-icon-hover-icon-color);
-      }
-
-      .md3-button:focus & {
-        color: var(--_with-icon-focus-icon-color);
-      }
-
-      .md3-button:active & {
-        color: var(--_with-icon-pressed-icon-color);
-      }
+    .md3-button:hover & {
+      color: var(--_with-icon-hover-icon-color);
+    }
 
-      .md3-button:disabled & {
-        color: var(--_with-icon-disabled-icon-color);
-      }
+    .md3-button:focus & {
+      color: var(--_with-icon-focus-icon-color);
     }
-  }
 
-  .md3-button__icon--leading ::slotted([slot='icon']) {
-    margin-inline-end: 8px;
-  }
+    .md3-button:active & {
+      color: var(--_with-icon-pressed-icon-color);
+    }
 
-  .md3-button__icon--trailing ::slotted([slot='icon']) {
-    margin-inline-start: 8px;
+    .md3-button:disabled & {
+      color: var(--_with-icon-disabled-icon-color);
+    }
   }
 }
diff --git a/button/lib/_shared.scss b/button/lib/_shared.scss
index e4afd263ea..3c036d8989 100644
--- a/button/lib/_shared.scss
+++ b/button/lib/_shared.scss
@@ -81,6 +81,7 @@
     // TODO(b/181413732): Verify token below are named correctly
     padding-inline-start: var(--_spacing-leading);
     padding-inline-end: var(--_spacing-trailing);
+    gap: 8px;
 
     &::-moz-focus-inner {
       padding: 0;
diff --git a/button/lib/button.ts b/button/lib/button.ts
index 553dc69af7..958c1ecf2b 100644
--- a/button/lib/button.ts
+++ b/button/lib/button.ts
@@ -137,13 +137,6 @@ export abstract class Button extends LitElement implements ButtonState {
     };
   }
 
-  protected getIconContainerClasses(): ClassInfo {
-    return {
-      'md3-button__icon--leading': !this.trailingIcon,
-      'md3-button__icon--trailing': this.trailingIcon,
-    };
-  }
-
   protected renderTouchTarget(): TemplateResult {
     return html`
       <span class="md3-button__touch"></span>
@@ -181,11 +174,8 @@ export abstract class Button extends LitElement implements ButtonState {
   }
 
   protected renderIcon(): TemplateResult {
-    return html`<span class="md3-button__icon-slot-container ${
-        classMap(this.getIconContainerClasses())}">
-                  <slot name="icon" @slotchange="${this.handleSlotChange}">
-                  </slot>
-                </span>`;
+    return html`<slot name="icon" @slotchange="${
+        this.handleSlotChange}"></slot>`;
   }
 
   protected handlePointerDown(e: PointerEvent) {
diff --git a/button/lib/link-button.ts b/button/lib/link-button.ts
index 477063a5e9..7a7b2a809d 100644
--- a/button/lib/link-button.ts
+++ b/button/lib/link-button.ts
@@ -46,12 +46,6 @@ export abstract class LinkButton extends Button {
     };
   }
 
-  protected override getIconContainerClasses(): ClassInfo {
-    return {
-      'md3-button__icon--leading': true,
-    };
-  }
-
   protected override render(): TemplateResult {
     return html`
       <span class="md3-link-button-wrapper">