refactor(button): Use flex gap for internal layout

PiperOrigin-RevId: 500845959
material-components · Jan 10, 2023 · 4974ede · 4974ede
1 parent f3383cd
commit 4974ede
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 42 deletions.
diff --git a/button/lib/_icon.scss b/button/lib/_icon.scss
@@ -10,41 +10,31 @@
   // 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;
       color: var(--_with-icon-icon-color);
       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
@@ -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
@@ -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
@@ -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">