From 890f229310a80097872e96608f350bb4830208eb Mon Sep 17 00:00:00 2001
From: Jacob Lamont <cob@jacoblamont.com>
Date: Mon, 13 May 2024 23:28:50 -0400
Subject: [PATCH] [Button]: deprecate fab prop in favor of iconOnly

---
 examples/example-ui-react/src/App.tsx         |  2 +-
 src/components/alert/alert.stories.svelte     |  2 +-
 src/components/alert/alertCenter.svelte       |  4 +--
 src/components/button/button.stories.svelte   | 13 +++----
 src/components/button/button.svelte           | 36 ++++++++++++-------
 src/components/tooltip/tooltip.stories.svelte |  2 +-
 6 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/examples/example-ui-react/src/App.tsx b/examples/example-ui-react/src/App.tsx
index 16bfd6130..237f4c7eb 100644
--- a/examples/example-ui-react/src/App.tsx
+++ b/examples/example-ui-react/src/App.tsx
@@ -45,7 +45,7 @@ function App() {
           </Dropdown>
         </div>
         <ButtonMenu>
-          <LeoButton fab kind="plain-faint" slot="anchor-content">
+          <LeoButton iconOnly kind="plain-faint" slot="anchor-content">
             <Icon name="more-horizontal" />
           </LeoButton>
           <leo-menu-item onClick={handleAction}>Llama2-13b</leo-menu-item>
diff --git a/src/components/alert/alert.stories.svelte b/src/components/alert/alert.stories.svelte
index 90c89cb49..941a4f745 100644
--- a/src/components/alert/alert.stories.svelte
+++ b/src/components/alert/alert.stories.svelte
@@ -53,7 +53,7 @@
     <Slot name="content-after" explanation="optional content after the main content of the alert">
       <Alert {...args} mode="simple">
         Some content
-        <Button kind='plain-faint' fab slot="content-after">
+        <Button kind='plain-faint' iconOnly slot="content-after">
           <Icon name="close" />
         </Button>
       </Alert>
diff --git a/src/components/alert/alertCenter.svelte b/src/components/alert/alertCenter.svelte
index 4dc7d35a1..9cabef039 100644
--- a/src/components/alert/alertCenter.svelte
+++ b/src/components/alert/alertCenter.svelte
@@ -101,7 +101,7 @@
         </div>
         <svelte:fragment slot='content-after'>
           {#if alert.canDismiss}
-            <Button kind="plain-faint" fab onClick={() => alert.dismiss()}>
+            <Button kind="plain-faint" iconOnly onClick={() => alert.dismiss()}>
               <Icon name="close" />
             </Button>
           {/if}
@@ -111,7 +111,7 @@
           {#each alert.actions as action}
             <Button
               size={alert.mode === "full" ? "medium" : "small"}
-              fab={action.icon && !action.text}
+              iconOnly={action.icon && !action.text}
               kind={action.kind || 'filled'}
               onClick={() => action.action(alert)}
             >
diff --git a/src/components/button/button.stories.svelte b/src/components/button/button.stories.svelte
index 0f227f5a4..26bac16a6 100644
--- a/src/components/button/button.stories.svelte
+++ b/src/components/button/button.stories.svelte
@@ -32,7 +32,8 @@
     },
     kind: { control: 'select', options: buttonKinds },
     size: { control: 'select', options: buttonSizes },
-    isDisabled: { control: 'boolean' }
+    isDisabled: { control: 'boolean' },
+    fab: { table: { disable: true } }
   }}
 />
 
@@ -91,20 +92,20 @@
 
 <Story name="Plain Faint" source args={{ kind: 'plain-faint' }} />
 
-<Story name="FAB" let:args>
-  <Button {...args} fab>
+<Story name="Icon Only" let:args>
+  <Button {...args} iconOnly>
     <Icon name="check-circle-outline" />
   </Button>
 </Story>
 
 <Story name="All" let:args>
-  {#each [false, true] as fab}
+  {#each [false, true] as iconOnly}
     {#each buttonSizes as size}
       <h2 class="label capitalize">{size}</h2>
       <div class="button-group">
         {#each buttonKinds as kind}
-          <Button {kind} {size} {fab} {...args}>
-            {#if !fab}
+          <Button {kind} {size} {iconOnly} {...args}>
+            {#if !iconOnly}
               <span class="capitalize">{kind}</span>
             {:else}
               <Icon name="check-circle-outline" />
diff --git a/src/components/button/button.svelte b/src/components/button/button.svelte
index be8f41a51..5e1cc3860 100644
--- a/src/components/button/button.svelte
+++ b/src/components/button/button.svelte
@@ -23,7 +23,11 @@
   interface CommonProps {
     kind?: Props.ButtonKind
     size?: Props.ButtonSize
+    /**
+     * @deprecated Use `iconOnly` instead.
+     */
     fab?: boolean
+    iconOnly?: boolean
     onClick?: () => void
   }
 
@@ -46,7 +50,13 @@
   export let isLoading: boolean = false
   export let isDisabled: Disabled = undefined
   export let href: Href = undefined
+
+  /**
+   * @deprecated Use `iconOnly` instead.
+   */
   export let fab = false
+  export let iconOnly: boolean = false
+  $: iconOnly = iconOnly || fab
 
   export let onClick: () => void = undefined
 
@@ -67,24 +77,24 @@
   class:isMedium={size === 'medium'}
   class:isSmall={size === 'small'}
   class:isTiny={size === 'tiny'}
-  class:fab
+  class:iconOnly
   class:isLoading
   disabled={isLoading || isDisabled || undefined}
   on:click={onClick}
   {...$$restProps}
 >
   {#if isLoading}
-    <div class:content={!fab}>
+    <div class:content={!iconOnly}>
       {#if $$slots.loading}
         <slot name="loading" />
-      {:else if !fab}
+      {:else if !iconOnly}
         <slot>Leo Button</slot>
       {/if}
     </div>
     <ProgressRing />
   {:else}
     <slot name="icon-before" />
-    <div class:content={!fab}>
+    <div class:content={!iconOnly}>
       <slot>Leo Button</slot>
     </div>
     <slot name="icon-after" />
@@ -150,7 +160,7 @@
     padding: var(--leo-button-padding, var(--padding-y) var(--padding-x));
     max-height: max-content;
 
-    &.fab {
+    &.iconOnly {
       max-width: max-content;
     }
 
@@ -224,7 +234,7 @@
     --leo-icon-size: var(--leo-icon-xs);
     --icon-gap: var(--leo-spacing-m);
 
-    &.fab {
+    &.iconOnly {
       min-height: 0;
       --padding-x: 6px;
       --padding-y: 6px;
@@ -239,7 +249,7 @@
     --leo-icon-size: var(--leo-icon-s);
     --icon-gap: var(--leo-spacing-m);
 
-    &.fab {
+    &.iconOnly {
       min-height: 0;
       --padding-x: var(--leo-spacing-m);
     }
@@ -253,7 +263,7 @@
     --leo-icon-size: var(--leo-icon-m);
     --icon-gap: var(--leo-spacing-m);
 
-    &.fab {
+    &.iconOnly {
       min-height: 0;
       --padding-x: var(--leo-spacing-l);
       --padding-y: var(--leo-spacing-l);
@@ -268,7 +278,7 @@
     --leo-icon-size: var(--leo-icon-m);
     --icon-gap: 10px;
 
-    &.fab {
+    &.iconOnly {
       min-height: 0;
       --padding-x: var(--leo-spacing-xl);
       --padding-y: var(--leo-spacing-xl);
@@ -283,7 +293,7 @@
     --leo-icon-size: var(--leo-icon-l);
     --icon-gap: var(--leo-spacing-l);
 
-    &.fab {
+    &.iconOnly {
       min-height: 0;
       --padding-x: 18px;
       --padding-y: 18px;
@@ -350,7 +360,7 @@
       --color: var(--leo-color-text-primary);
     }
 
-    &.fab {
+    &.iconOnly {
       --radius: var(--leo-radius-m);
       --bg-hover: transparent;
       --padding-y: 0;
@@ -412,7 +422,7 @@
       }
     }
 
-    &.fab {
+    &.iconOnly {
       --radius: var(--leo-radius-m);
       --bg-hover: transparent;
       --padding-y: 0;
@@ -467,7 +477,7 @@
     }
   }
 
-  .leoButton.fab {
+  .leoButton.iconOnly {
     aspect-ratio: 1 / 1;
   }
 </style>
diff --git a/src/components/tooltip/tooltip.stories.svelte b/src/components/tooltip/tooltip.stories.svelte
index e6da7d4df..1f119428c 100644
--- a/src/components/tooltip/tooltip.stories.svelte
+++ b/src/components/tooltip/tooltip.stories.svelte
@@ -85,7 +85,7 @@
       <div class="close">
         <Button
           kind="plain-faint"
-          fab
+          iconOnly
           size="tiny"
           onClick={() => (showTooltip = false)}
         >