From 6b75607dce15c4c2ef30df9e340c406147ae1d97 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 3 Feb 2021 06:10:15 -0800
Subject: [PATCH] feat(tooltip-icon): make tooltipText slottable

---
 COMPONENT_INDEX.md                        | 21 +++++++++++----------
 docs/src/COMPONENT_API.json               | 12 ++++++++++--
 docs/src/pages/components/TooltipIcon.svx | 11 ++++++++++-
 src/TooltipIcon/TooltipIcon.svelte        |  9 +++++++--
 tests/TooltipIcon.test.svelte             |  7 +++++++
 types/TooltipIcon/TooltipIcon.d.ts        |  4 +++-
 6 files changed, 48 insertions(+), 16 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 66087abf..2cb347ef 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4228,19 +4228,20 @@ None.
 
 ### Props
 
-| Prop name   | Kind             | Reactive | Type                                                            | Default value                                    | Description                                           |
-| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
-| ref         | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                      | <code>null</code>                                | Obtain a reference to the button HTML element         |
-| tooltipText | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the tooltip text                              |
-| align       | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>               | <code>"center"</code>                            | Set the alignment of the tooltip relative to the icon |
-| direction   | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code>                            | Set the direction of the tooltip relative to the icon |
-| id          | <code>let</code> | No       | <code>string</code>                                             | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the span element                        |
+| Prop name   | Kind             | Reactive | Type                                                            | Default value                                    | Description                                                       |
+| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- |
+| ref         | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                      | <code>null</code>                                | Obtain a reference to the button HTML element                     |
+| tooltipText | <code>let</code> | No       | <code>string</code>                                             | <code>""</code>                                  | Specify the tooltip text.<br />Alternatively, use the "text" slot |
+| align       | <code>let</code> | No       | <code>"start" &#124; "center" &#124; "end"</code>               | <code>"center"</code>                            | Set the alignment of the tooltip relative to the icon             |
+| direction   | <code>let</code> | No       | <code>"top" &#124; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code>                            | Set the direction of the tooltip relative to the icon             |
+| id          | <code>let</code> | No       | <code>string</code>                                             | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the span element                                    |
 
 ### Slots
 
-| Slot name | Default | Props | Fallback |
-| :-------- | :------ | :---- | :------- |
-| --        | Yes     | --    | --       |
+| Slot name | Default | Props | Fallback                   |
+| :-------- | :------ | :---- | :------------------------- |
+| --        | Yes     | --    | --                         |
+| text      | No      | --    | <code>{tooltipText}</code> |
 
 ### Events
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 74ccddda..7d141f14 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -9678,7 +9678,7 @@
         {
           "name": "tooltipText",
           "kind": "let",
-          "description": "Specify the tooltip text",
+          "description": "Specify the tooltip text.\nAlternatively, use the \"text\" slot",
           "type": "string",
           "value": "\"\"",
           "isFunction": false,
@@ -9726,7 +9726,15 @@
           "reactive": true
         }
       ],
-      "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
+      "slots": [
+        { "name": "__default__", "default": true, "slot_props": "{}" },
+        {
+          "name": "text",
+          "default": false,
+          "fallback": "{tooltipText}",
+          "slot_props": "{}"
+        }
+      ],
       "events": [
         { "type": "forwarded", "name": "click", "element": "button" },
         { "type": "forwarded", "name": "mouseover", "element": "button" },
diff --git a/docs/src/pages/components/TooltipIcon.svx b/docs/src/pages/components/TooltipIcon.svx
index 3a672949..237660c3 100644
--- a/docs/src/pages/components/TooltipIcon.svx
+++ b/docs/src/pages/components/TooltipIcon.svx
@@ -16,4 +16,13 @@
 <TooltipIcon tooltipText="Top start" direction="top" align="start"><Filter20 /></TooltipIcon>
 <TooltipIcon tooltipText="Right end" direction="right" align="end"><Filter20 /></TooltipIcon>
 <TooltipIcon tooltipText="Bottom start" direction="bottom" align="start"><Filter20 /></TooltipIcon>
-<TooltipIcon tooltipText="Left start" direction="left" align="start"><Filter20 /></TooltipIcon>
\ No newline at end of file
+<TooltipIcon tooltipText="Left start" direction="left" align="start"><Filter20 /></TooltipIcon>
+
+### Custom tooltip text
+
+Use the "text" slot to customize the tooltip text.
+
+<TooltipIcon>
+  <span slot="text" style="color: red">Carbon is an open source design system by IBM.</span>
+  <Carbon24 />
+</TooltipIcon>
\ No newline at end of file
diff --git a/src/TooltipIcon/TooltipIcon.svelte b/src/TooltipIcon/TooltipIcon.svelte
index a0a32975..93c534c3 100644
--- a/src/TooltipIcon/TooltipIcon.svelte
+++ b/src/TooltipIcon/TooltipIcon.svelte
@@ -1,5 +1,8 @@
 <script>
-  /** Specify the tooltip text */
+  /**
+   * Specify the tooltip text.
+   * Alternatively, use the "text" slot
+   */
   export let tooltipText = "";
 
   /**
@@ -56,6 +59,8 @@
     hidden = false;
   }}"
 >
-  <span id="{id}" class:bx--assistive-text="{true}">{tooltipText}</span>
+  <span id="{id}" class:bx--assistive-text="{true}"
+    ><slot name="text">{tooltipText}</slot></span
+  >
   <slot />
 </button>
diff --git a/tests/TooltipIcon.test.svelte b/tests/TooltipIcon.test.svelte
index d5f08a12..bac010c1 100644
--- a/tests/TooltipIcon.test.svelte
+++ b/tests/TooltipIcon.test.svelte
@@ -23,3 +23,10 @@
 <TooltipIcon tooltipText="Left start" direction="left" align="start">
   <Filter20 />
 </TooltipIcon>
+
+<TooltipIcon>
+  <span slot="text" style="color: red"
+    >Carbon is an open source design system by IBM.</span
+  >
+  <Carbon24 />
+</TooltipIcon>
diff --git a/types/TooltipIcon/TooltipIcon.d.ts b/types/TooltipIcon/TooltipIcon.d.ts
index 265b1157..f792a94d 100644
--- a/types/TooltipIcon/TooltipIcon.d.ts
+++ b/types/TooltipIcon/TooltipIcon.d.ts
@@ -2,7 +2,8 @@
 
 export interface TooltipIconProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
   /**
-   * Specify the tooltip text
+   * Specify the tooltip text.
+   * Alternatively, use the "text" slot
    * @default ""
    */
   tooltipText?: string;
@@ -36,6 +37,7 @@ export default class TooltipIcon {
   $$prop_def: TooltipIconProps;
   $$slot_def: {
     default: {};
+    text: {};
   };
 
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;