Merge pull request #281 from Tap30/refactor/button/add-parts

feat(button): add css parts
Tap30 · Nov 25, 2024 · bc27206 · bc27206
2 parents 1f119d7 + 5e16668
commit bc27206
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/packages/web-components/src/button/base/base-button.ts b/packages/web-components/src/button/base/base-button.ts
@@ -138,8 +138,8 @@ export abstract class BaseButton extends BaseClass implements FormSubmitter {
     return html`
       <button
         id="root"
+        part="root"
         class=${rootClasses}
-        part="button"
         @click=${this._handleClick}
         ?disabled=${this.disabled}
         type=${ifDefined(this.type)}

diff --git a/packages/web-components/src/button/icon-button/icon-button.ts b/packages/web-components/src/button/icon-button/icon-button.ts
@@ -20,6 +20,11 @@ export class IconButton extends BaseButton {
   }
 
   protected override renderContent(): TemplateResult {
-    return html`<div class="icon"><slot></slot></div>`;
+    return html`<div
+      class="icon"
+      part="icon"
+    >
+      <slot></slot>
+    </div>`;
   }
 }
diff --git a/packages/web-components/src/button/standard/button.ts b/packages/web-components/src/button/standard/button.ts
@@ -1,7 +1,6 @@
-import { runAfterRepaint } from "../../utils";
 import { html, type TemplateResult } from "lit";
 import { state } from "lit/decorators.js";
-import { getRenderRootSlot } from "../../utils";
+import { getRenderRootSlot, runAfterRepaint } from "../../utils";
 import { BaseButton } from "../base";
 import { Slots } from "./constants";
 
@@ -37,18 +36,26 @@ export class Button extends BaseButton {
 
   protected override renderContent(): TemplateResult {
     return html`
-      <div class="body">
+      <div
+        class="body"
+        part="body"
+      >
         <div
           class="icon"
+          part=${Slots.LEADING_ICON}
           ?hidden=${!this._hasLeadingIcon}
         >
           <slot name=${Slots.LEADING_ICON}></slot>
         </div>
-        <div class="content">
+        <div
+          class="content"
+          part="content"
+        >
           <slot></slot>
         </div>
         <div
           class="icon"
+          part=${Slots.TRAILING_ICON}
           ?hidden=${!this._hasTrailingIcon}
         >
           <slot name=${Slots.TRAILING_ICON}></slot>