feat(button): add isSelected prop for icon-only, ghost buttons

COMPONENT_INDEX.md

@@ -342,6 +342,7 @@ None.
 | hasIconOnly      | <code>let</code> | Yes      | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` for the icon-only variant                                                                                                                                                       |
 | kind             | <code>let</code> | No       | <code>"primary" &#124; "secondary" &#124; "tertiary" &#124; "ghost" &#124; "danger" &#124; "danger-tertiary" &#124; "danger-ghost"</code> | <code>"primary"</code> | Specify the kind of button                                                                                                                                                                    |
 | size             | <code>let</code> | No       | <code>"default" &#124; "field" &#124; "small"</code>                                                                                      | <code>"default"</code> | Specify the size of button                                                                                                                                                                    |
+| isSelected       | <code>let</code> | No       | <code>boolean</code>                                                                                                                      | <code>false</code>     | Set to `true` to enable the selected state for an icon-only, ghost button                                                                                                                     |
 | icon             | <code>let</code> | No       | <code>typeof import("carbon-icons-svelte").CarbonIcon</code>                                                                              | --                     | Specify the icon from `carbon-icons-svelte` to render                                                                                                                                         |
 | iconDescription  | <code>let</code> | No       | <code>string</code>                                                                                                                       | --                     | Specify the ARIA label for the button icon                                                                                                                                                    |
 | tooltipAlignment | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>                                                                                         | <code>"center"</code>  | Set the alignment of the tooltip relative to the icon<br />`hasIconOnly` must be set to `true`                                                                                                |

docs/src/COMPONENT_API.json

@@ -368,6 +368,16 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "isSelected",
+          "kind": "let",
+          "description": "Set to `true` to enable the selected state for an icon-only, ghost button",
+          "type": "boolean",
+          "value": "false",
+          "isFunction": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "hasIconOnly",
           "kind": "let",

docs/src/pages/components/Button.svx

@@ -2,7 +2,12 @@
   import { Button } from "carbon-components-svelte";
   import Add16 from "carbon-icons-svelte/lib/Add16";
   import TrashCan16 from "carbon-icons-svelte/lib/TrashCan16";
+  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 Preview from "../../components/Preview.svelte";
+
+  let index = 1;
 </script>
 
 ### Primary button
@@ -55,6 +60,14 @@ The tooltip position and alignment can be controlled by `tooltipPosition` and `t
 
 <Button tooltipPosition="right" tooltipAlignment="end" iconDescription="Tooltip text" icon={Add16} />
 
+### Selected icon-only, ghost button
+
+Set `isSelected` to `true` to enable the selected state for an icon-only, ghost button.
+
+<Button isSelected={index === 0} kind="ghost" iconDescription="Bold" icon={TextBold16} on:click={() => (index = 0)} />
+<Button isSelected={index === 1} kind="ghost" iconDescription="Italicize" icon={TextItalic16} on:click={() => (index = 1)} />
+<Button isSelected={index === 2} kind="ghost" iconDescription="Underline" icon={TextUnderline16} on:click={() => (index = 2)} />
+
 ### Link button
 
 If an `href` value is specified, the component will render an [anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) with a "button" role.

src/Button/Button.svelte

@@ -17,6 +17,11 @@
    */
   export let size = "default";
 
+  /**
+   * Set to `true` to enable the selected state for an icon-only, ghost button
+   */
+  export let isSelected = false;
+
   /**
    * Set to `true` for the icon-only variant
    * @deprecated inferred using the $$slots API
@@ -104,6 +109,7 @@
       hasIconOnly &&
         tooltipAlignment &&
         `bx--tooltip--align-${tooltipAlignment}`,
+      hasIconOnly && isSelected && kind === "ghost" && "bx--btn--selected",
       $$restProps.class,
     ]
       .filter(Boolean)

types/Button/Button.d.ts

@@ -26,6 +26,12 @@ export interface ButtonProps
    */
   size?: "default" | "field" | "small";
 
+  /**
+   * Set to `true` to enable the selected state for an icon-only, ghost button
+   * @default false
+   */
+  isSelected?: boolean;
+
   /**
    * Set to `true` for the icon-only variant
    * @default false