feat(v11): TooltipDefinition

In v11 the definintion tooltip uses the `Popover` component internally. While the component is called `DefinitionTooltip` in the reference implementation, it is not renamed at this point. - rename `tooltipText` to `definition` - rename `tooltip` slot to `definition` - remove `direction` (see `align`) - use `align` values from `Popover` and set to `bottom-left` as default instead of `center`
carbon-design-system · Sep 30, 2023 · 0e42e43 · 0e42e43
1 parent 727242b
commit 0e42e43
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 92 deletions.
diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
@@ -4574,21 +4574,20 @@ None.
 
 ### Props
 
-| Prop name   | Required | Kind             | Reactive | Type                                              | Default value                                    | Description                                           |
-| :---------- | :------- | :--------------- | :------- | ------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
-| ref         | No       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>        | <code>null</code>                                | Obtain a reference to the button HTML element         |
-| open        | No       | <code>let</code> | Yes      | <code>boolean</code>                              | <code>false</code>                               | Set to `true` to open the tooltip                     |
-| tooltipText | No       | <code>let</code> | No       | <code>string</code>                               | <code>""</code>                                  | Specify the tooltip text                              |
-| align       | No       | <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   | No       | <code>let</code> | No       | <code>"top" &#124; "bottom"</code>                | <code>"bottom"</code>                            | Set the direction of the tooltip relative to the icon |
-| id          | No       | <code>let</code> | No       | <code>string</code>                               | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip div element                 |
+| Prop name  | Required | Kind             | Reactive | Type                                                                                                                                                                                                                            | Default value                                    | Description                                           |
+| :--------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------- |
+| ref        | No       | <code>let</code> | Yes      | <code>null &#124; HTMLButtonElement</code>                                                                                                                                                                                      | <code>null</code>                                | Obtain a reference to the button HTML element         |
+| open       | No       | <code>let</code> | Yes      | <code>boolean</code>                                                                                                                                                                                                            | <code>false</code>                               | Set to `true` to open the tooltip                     |
+| definition | No       | <code>let</code> | No       | <code>string</code>                                                                                                                                                                                                             | <code>""</code>                                  | Specify the term definition.                          |
+| align      | No       | <code>let</code> | No       | <code>"top" &#124; "top-left" &#124; "top-right" &#124; "bottom" &#124; "bottom-left" &#124; "bottom-right" &#124; "left" &#124; "left-bottom" &#124; "left-top" &#124; "right" &#124; "right-bottom" &#124; "right-top"</code> | <code>"bottom-left"</code>                       | Set the alignment of the tooltip relative to the icon |
+| id         | No       | <code>let</code> | No       | <code>string</code>                                                                                                                                                                                                             | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip div element                 |
 
 ### Slots
 
-| Slot name | Default | Props | Fallback                   |
-| :-------- | :------ | :---- | :------------------------- |
-| --        | Yes     | --    | --                         |
-| tooltip   | No      | --    | <code>{tooltipText}</code> |
+| Slot name  | Default | Props | Fallback                  |
+| :--------- | :------ | :---- | :------------------------ |
+| --         | Yes     | --    | --                        |
+| definition | No      | --    | <code>{definition}</code> |
 
 ### Events
 

diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
@@ -14128,9 +14128,9 @@
       "filePath": "src/TooltipDefinition/TooltipDefinition.svelte",
       "props": [
         {
-          "name": "tooltipText",
+          "name": "definition",
           "kind": "let",
-          "description": "Specify the tooltip text",
+          "description": "Specify the term definition.",
           "type": "string",
           "value": "\"\"",
           "isFunction": false,
@@ -14155,20 +14155,8 @@
           "name": "align",
           "kind": "let",
           "description": "Set the alignment of the tooltip relative to the icon",
-          "type": "\"start\" | \"center\" | \"end\"",
-          "value": "\"center\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "isRequired": false,
-          "constant": false,
-          "reactive": false
-        },
-        {
-          "name": "direction",
-          "kind": "let",
-          "description": "Set the direction of the tooltip relative to the icon",
-          "type": "\"top\" | \"bottom\"",
-          "value": "\"bottom\"",
+          "type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
+          "value": "\"bottom-left\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "isRequired": false,
@@ -14204,9 +14192,9 @@
       "slots": [
         { "name": "__default__", "default": true, "slot_props": "{}" },
         {
-          "name": "tooltip",
+          "name": "definition",
           "default": false,
-          "fallback": "{tooltipText}",
+          "fallback": "{definition}",
           "slot_props": "{}"
         }
       ],
@@ -14219,8 +14207,7 @@
         { "type": "forwarded", "name": "mouseleave", "element": "button" },
         { "type": "forwarded", "name": "focus", "element": "button" }
       ],
-      "typedefs": [],
-      "rest_props": { "type": "Element", "name": "span" }
+      "typedefs": []
     },
     {
       "moduleName": "TooltipFooter",

diff --git a/docs/src/pages/components/TooltipDefinition.svx b/docs/src/pages/components/TooltipDefinition.svx
@@ -5,25 +5,25 @@
 
 ## Default
 
-<TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
+<TooltipDefinition definition="IBM Corporate Headquarters is based in Armonk, New York.">
   Armonk
 </TooltipDefinition>
 
-## Custom tooltip direction and alignment
+## Custom tooltip alignment
 
-Customize the tooltip menu direction and alignment through the `direction` and `align` props.
+Customize the tooltip alignment through the `align` prop.
 
-By default, `direction` is `"bottom"` and `align` is `"center"`.
+By default, `align` is `"bottom-left"`.
 
-<TooltipDefinition direction="top" align="start" tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
+<TooltipDefinition align="top" definition="IBM Corporate Headquarters is based in Armonk, New York.">
   Armonk
 </TooltipDefinition>
 
-## Custom tooltip slot
+## Custom definition slot
 
 <TooltipDefinition>
   Armonk
-  <span slot="tooltip" style="color: red">
+  <span slot="definition" style="color: red">
     IBM Corporate Headquarters is based in Armonk, New York.
   </span>
 </TooltipDefinition>
diff --git a/src/TooltipDefinition/TooltipDefinition.svelte b/src/TooltipDefinition/TooltipDefinition.svelte
@@ -4,8 +4,8 @@
    * @event {null} close
    */
 
-  /** Specify the tooltip text */
-  export let tooltipText = "";
+  /** Specify the term definition. */
+  export let definition = "";
 
   /**
    * Set to `true` to open the tooltip
@@ -14,15 +14,9 @@
 
   /**
    * Set the alignment of the tooltip relative to the icon
-   * @type {"start" | "center" | "end"}
+   * @type {"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"}
    */
-  export let align = "center";
-
-  /**
-   * Set the direction of the tooltip relative to the icon
-   * @type {"top" | "bottom"}
-   */
-  export let direction = "bottom";
+  export let align = "bottom-left";
 
   /** Set an id for the tooltip div element */
   export let id = "ccs-" + Math.random().toString(36);
@@ -31,6 +25,8 @@
   export let ref = null;
 
   import { createEventDispatcher } from "svelte";
+  import Popover from "../Popover/Popover.svelte";
+  import PopoverContent from "../Popover/PopoverContent.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -48,38 +44,25 @@
 />
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<span
-  class:bx--tooltip--definition="{true}"
-  class:bx--tooltip--a11y="{true}"
-  {...$$restProps}
-  on:mouseenter="{show}"
-  on:mouseleave="{hide}"
->
+<Popover highContrast dropShadow="{false}" bind:open align="{align}">
   <button
     bind:this="{ref}"
     type="button"
     aria-describedby="{id}"
-    class:bx--tooltip--a11y="{true}"
-    class:bx--tooltip__trigger="{true}"
-    class:bx--tooltip__trigger--definition="{true}"
-    class:bx--tooltip--hidden="{!open}"
-    class:bx--tooltip--visible="{open}"
-    class:bx--tooltip--top="{direction === 'top'}"
-    class:bx--tooltip--bottom="{direction === 'bottom'}"
-    class:bx--tooltip--align-start="{align === 'start'}"
-    class:bx--tooltip--align-center="{align === 'center'}"
-    class:bx--tooltip--align-end="{align === 'end'}"
+    class:bx--definition-term="{true}"
     on:click
     on:mouseover
     on:mouseenter
     on:mouseleave
     on:focus
     on:focus="{show}"
     on:blur="{hide}"
+    on:mouseenter="{show}"
+    on:mouseleave="{hide}"
   >
     <slot />
   </button>
-  <div role="tooltip" id="{id}" class:bx--assistive-text="{true}">
-    <slot name="tooltip">{tooltipText}</slot>
-  </div>
-</span>
+  <PopoverContent className="{'bx--definition-tooltip'}">
+    <slot name="definition">{definition}</slot>
+  </PopoverContent>
+</Popover>
diff --git a/tests/TooltipDefinition.test.svelte b/tests/TooltipDefinition.test.svelte
@@ -8,22 +8,21 @@
   bind:open
   on:open
   on:close
-  tooltipText="IBM Corporate Headquarters is based in Armonk, New York."
+  definition="IBM Corporate Headquarters is based in Armonk, New York."
 >
   Armonk
 </TooltipDefinition>
 
 <TooltipDefinition
-  direction="top"
-  align="start"
-  tooltipText="IBM Corporate Headquarters is based in Armonk, New York."
+  align="top"
+  definition="IBM Corporate Headquarters is based in Armonk, New York."
 >
   Armonk
 </TooltipDefinition>
 
 <TooltipDefinition>
   Armonk
-  <span slot="tooltip" style="color: red">
+  <span slot="definition" style="color: red">
     IBM Corporate Headquarters is based in Armonk, New York.
   </span>
 </TooltipDefinition>
diff --git a/types/TooltipDefinition/TooltipDefinition.svelte.d.ts b/types/TooltipDefinition/TooltipDefinition.svelte.d.ts
@@ -1,14 +1,11 @@
 import type { SvelteComponentTyped } from "svelte";
-import type { SvelteHTMLElements } from "svelte/elements";
 
-type RestProps = SvelteHTMLElements["span"];
-
-export interface TooltipDefinitionProps extends RestProps {
+export interface TooltipDefinitionProps {
   /**
-   * Specify the tooltip text
+   * Specify the term definition.
    * @default ""
    */
-  tooltipText?: string;
+  definition?: string;
 
   /**
    * Set to `true` to open the tooltip
@@ -18,15 +15,21 @@ export interface TooltipDefinitionProps extends RestProps {
 
   /**
    * Set the alignment of the tooltip relative to the icon
-   * @default "center"
+   * @default "bottom-left"
    */
-  align?: "start" | "center" | "end";
-
-  /**
-   * Set the direction of the tooltip relative to the icon
-   * @default "bottom"
-   */
-  direction?: "top" | "bottom";
+  align?:
+    | "top"
+    | "top-left"
+    | "top-right"
+    | "bottom"
+    | "bottom-left"
+    | "bottom-right"
+    | "left"
+    | "left-bottom"
+    | "left-top"
+    | "right"
+    | "right-bottom"
+    | "right-top";
 
   /**
    * Set an id for the tooltip div element
@@ -39,8 +42,6 @@ export interface TooltipDefinitionProps extends RestProps {
    * @default null
    */
   ref?: null | HTMLButtonElement;
-
-  [key: `data-${string}`]: any;
 }
 
 export default class TooltipDefinition extends SvelteComponentTyped<
@@ -54,5 +55,5 @@ export default class TooltipDefinition extends SvelteComponentTyped<
     mouseleave: WindowEventMap["mouseleave"];
     focus: WindowEventMap["focus"];
   },
-  { default: {}; tooltip: {} }
+  { default: {}; definition: {} }
 > {}