Add icon-only button support

src/design-system/components/button/Button.stories.ts

@@ -26,6 +26,7 @@ const meta = {
     rightIcon: 'None',
     disabled: false,
     loading: false,
+    iconOnly: false,
   },
   argTypes: {
     variant: {
@@ -39,16 +40,23 @@ const meta = {
     text: { control: 'text' },
     disabled: { control: 'boolean' },
     loading: { control: 'boolean' },
+    iconOnly: { control: 'boolean' },
   },
 } as const
 
-const render = defineStoryRender<typeof meta.argTypes>(({ text, title, variant, icon, leftIcon, rightIcon, disabled, loading }) => {
+const render = defineStoryRender<typeof meta.argTypes>(({ text, title, variant, icon, leftIcon, rightIcon, disabled, loading, iconOnly }) => {
   const resolvedIcon = ICON_OPTIONS.resolve(icon)
   const resolvedLeftIcon = ICON_OPTIONS.resolve(leftIcon)
   const resolvedRightIcon = ICON_OPTIONS.resolve(rightIcon)
 
   return html`
-        <solid-ui-button variant="${variant}" .disabled=${disabled} ?loading=${loading} title=${title}>
+        <solid-ui-button
+            variant="${variant}"
+            .disabled=${disabled}
+            ?loading=${loading}
+            ?icon-only=${iconOnly}
+            title=${title}
+        >
             ${resolvedLeftIcon ? unsafeHTML(`<icon-lucide-${resolvedLeftIcon} slot="left-icon"></icon-lucide-${resolvedLeftIcon}>`) : nothing}
             ${resolvedIcon ? unsafeHTML(`<icon-lucide-${resolvedIcon} slot="icon"></icon-lucide-${resolvedIcon}>`) : nothing}
             ${text}
@@ -88,11 +96,22 @@ export const Outline = {
 }
 
 export const Ghost = {
+  render,
+  args: {
+    text: 'Help',
+    variant: 'ghost',
+    icon: 'Help',
+    title: 'Open help',
+  },
+}
+
+export const IconOnly = {
   render,
   args: {
     text: '',
     variant: 'ghost',
     icon: 'Help',
+    iconOnly: true,
     title: 'Open help',
   },
 }

src/design-system/components/button/Button.styles.css

@@ -53,15 +53,21 @@
     }
 }
 
-:host(:has([slot="icon"])) button {
-    padding: 4px;
+:host([icon-only]) button {
+    inline-size: var(--solid-ui-clickable-area);
+    block-size: var(--solid-ui-clickable-area);
+    padding: 0;
 
     ::slotted([slot="icon"]) {
-        width: var(--solid-ui-font-size-2xl);
-        height: var(--solid-ui-font-size-2xl);
+        width: 22px;
+        height: 22px;
     }
 }
 
+:host([icon-only]) slot:not([name]) {
+    display: none;
+}
+
 :host([variant='secondary']) button {
     --text-color: var(--solid-ui-color-gray-800);
     --border-color: var(--solid-ui-color-slate-400);

src/design-system/components/button/Button.ts

@@ -25,6 +25,9 @@ export default class Button extends WebComponent {
   @property({ type: Boolean })
   accessor loading = false
 
+  @property({ type: Boolean, reflect: true, attribute: 'icon-only' })
+  accessor iconOnly = false
+
   render () {
     const disabled = this.disabled ?? this.loading
 

src/design-system/components/dialog-header/DialogHeader.styles.css

@@ -4,7 +4,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 15px;
+  padding: 12px 15px;
   gap: 15px;
   background: var(--solid-ui-color-slate-50);
   border-bottom: 1px solid var(--solid-ui-color-slate-200);

src/design-system/components/dialog/Dialog.styles.css

@@ -8,6 +8,13 @@ dialog {
 
   solid-ui-dialog-header solid-ui-button {
     color: var(--solid-ui-color-gray-600);
+
+    icon-lucide-x {
+      width: 22px;
+      height: 22px;
+      justify-content: center;
+      align-items: center;
+    }
   }
 }
 

src/design-system/components/dialog/Dialog.ts

@@ -46,7 +46,7 @@ export default class Dialog extends WebComponent {
         <solid-ui-dialog-header>
             <h1>${this.title}</h1>
 
-            <solid-ui-button variant="ghost" @click=${this.close}>
+            <solid-ui-button variant="ghost" @click=${this.close} icon-only>
                 <span class="sr-only">Close</span>
                 <icon-lucide-x slot="icon"></icon-lucide-x>
             </solid-ui-button>