From 793ecd8dc2dea2437cfbe052d11dc07c337ac7bb Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 18 Jul 2021 05:53:56 -0700
Subject: [PATCH] fix(button): only set disabled attribute if true #755 (#757)

* fix(button): only set disabled attribute if true #755

Fixes #755

* Improve docs (#756)

* docs: remove Theme from new components

* docs: add styling instructions

* docs: add styling instructions

* docs: update copy

* fix(button): only set disabled attribute if true #755

Fixes #755

* docs(button): use inline notification for note [ci skip]
---
 docs/src/pages/components/Button.svx | 17 +++++++++++++++--
 src/Button/Button.svelte             |  2 +-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/docs/src/pages/components/Button.svx b/docs/src/pages/components/Button.svx
index c0b06446..b01bf4dd 100644
--- a/docs/src/pages/components/Button.svx
+++ b/docs/src/pages/components/Button.svx
@@ -5,6 +5,7 @@
   import TextBold16 from "carbon-icons-svelte/lib/TextBold16";
   import TextItalic16 from "carbon-icons-svelte/lib/TextItalic16";
   import TextUnderline16 from "carbon-icons-svelte/lib/TextUnderline16";
+  import Login16 from "carbon-icons-svelte/lib/Login16";
   import Preview from "../../components/Preview.svelte";
 
   let index = 1;
@@ -36,7 +37,11 @@
 
 ### Danger tertiary, icon-only button
 
-**Note:** you must provide an `iconDescription` for the button tooltip.
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">
+    You must provide an `iconDescription` for the button tooltip.
+  </div>
+</InlineNotification>
 
 <Button kind="danger-tertiary"iconDescription="Delete" icon={TrashCan16} />
 
@@ -50,10 +55,18 @@
 
 ### Icon-only button
 
-**Note:** you must provide an `iconDescription` for the button tooltip.
+<InlineNotification svx-ignore title="Note:" kind="info" hideCloseButton>
+  <div class="body-short-01">
+    You must provide an `iconDescription` for the button tooltip.
+  </div>
+</InlineNotification>
 
 <Button iconDescription="Tooltip text" icon={Add16} />
 
+### Icon-only, link button
+
+<Button iconDescription="Login" icon={Login16} href="#" />
+
 ### Icon-only button (custom tooltip position)
 
 The tooltip position and alignment can be controlled by `tooltipPosition` and `tooltipAlignment`.
diff --git a/src/Button/Button.svelte b/src/Button/Button.svelte
index bd291be1..3ec84c63 100644
--- a/src/Button/Button.svelte
+++ b/src/Button/Button.svelte
@@ -95,7 +95,7 @@
   $: buttonProps = {
     type: href && !disabled ? undefined : type,
     tabindex,
-    disabled,
+    disabled: disabled === true ? true : undefined,
     href,
     "aria-pressed": hasIconOnly && kind === "ghost" ? isSelected : undefined,
     ...$$restProps,