Skip to content

Commit

Permalink
feat(v11): Tooltip
Browse files Browse the repository at this point in the history 
Refactor `Tooltip` to use `Popover` component internally.

**Breaking changes**

- `direction` is replaced by additional `align` options.
- `hideIcon` property is removed.

**Limitations**

- The reference implementaiton uses the trigger content instead of the tooltip content as primary slot. This is not considered in this refactoring since it would be too big of a change.
- Instead of `TooltipFooter` a new `Toggletip` component would be required which is not included in this patch.
  • Loading branch information
@gregorw
gregorw committed Jan 20, 2024
1 parent 4bbd925 commit 82f582c
Show file tree
Hide file tree
Showing 8 changed files with 100 additions and 232 deletions.
41 changes: 19 additions & 22 deletions COMPONENT_INDEX.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2828,10 +2828,11 @@ None.

### Props

| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :----------- | :------- | :--------------- | :------- | --------------- | ----------------- | ----------- |
| className | No | <code>let</code> | No | -- | <code>null</code> | -- |
| contentProps | No | <code>let</code> | No | <code>{}</code> | <code>{}</code> | -- |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :----------- | :------- | :--------------- | :------- | ---------------------------------------- | ----------------- | ------------------------------------------------------ |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLSpanElement</code> | <code>null</code> | Obtain a reference to the popover content HTML element |
| className | No | <code>let</code> | No | -- | <code>null</code> | -- |
| contentProps | No | <code>let</code> | No | <code>{}</code> | <code>{}</code> | -- |

### Slots

Expand Down Expand Up @@ -4547,22 +4548,20 @@ None.

### Props

| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | --------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| refIcon | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
| refTooltip | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the tooltip HTML element |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
| 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; "right" &#124; "bottom" &#124; "left"</code> | <code>"bottom"</code> | Set the direction of the tooltip relative to the button |
| hideIcon | No | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to hide the tooltip icon |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to `&lt;Information /&gt;` |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
| iconName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
| tooltipId | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip |
| triggerId | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button |
| triggerText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text |
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------------- | :------- | :--------------- | :------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------ |
| refIcon | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the icon HTML element |
| refTooltip | No | <code>let</code> | Yes | -- | <code>null</code> | Obtain a reference to the tooltip HTML element |
| ref | No | <code>let</code> | Yes | <code>null &#124; HTMLDivElement</code> | <code>null</code> | Obtain a reference to the trigger text HTML element |
| open | No | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the tooltip |
| 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"</code> | Set the alignment of the tooltip relative to the icon |
| icon | No | <code>let</code> | No | <code>typeof import("svelte").SvelteComponent<any></code> | <code>undefined</code> | Specify the icon to render for the tooltip button.<br />Default to `&lt;Information /&gt;` |
| iconDescription | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the ARIA label for the tooltip button |
| iconName | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the icon name attribute |
| tabindex | No | <code>let</code> | No | <code>string</code> | <code>"0"</code> | Set the button tabindex |
| tooltipId | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip |
| triggerId | No | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the tooltip button |
| triggerText | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Set the tooltip button text<br />This is deprecated. Use default slot instead |

### Slots

Expand All @@ -4578,8 +4577,6 @@ None.
| :--------- | :--------- | :---------------- |
| open | dispatched | <code>null</code> |
| close | dispatched | <code>null</code> |
| click | forwarded | -- |
| mousedown | forwarded | -- |

## `TooltipDefinition`

Expand Down
45 changes: 15 additions & 30 deletions docs/src/COMPONENT_API.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9010,6 +9010,18 @@
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "ref",
"kind": "let",
"description": "Obtain a reference to the popover content HTML element",
"type": "null | HTMLSpanElement",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": true
}
],
"moduleExports": [],
Expand Down Expand Up @@ -14016,19 +14028,7 @@
"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 button",
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
"type": "\"top\" | \"top-left\" | \"top-right\" | \"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"left-bottom\" | \"left-top\" | \"right\" | \"right-bottom\" | \"right-top\"",
"value": "\"bottom\"",
"isFunction": false,
"isFunctionDeclaration": false,
Expand All @@ -14048,18 +14048,6 @@
"constant": false,
"reactive": true
},
{
"name": "hideIcon",
"kind": "let",
"description": "Set to `true` to hide the tooltip icon",
"type": "boolean",
"value": "false",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "icon",
"kind": "let",
Expand Down Expand Up @@ -14134,7 +14122,7 @@
{
"name": "triggerText",
"kind": "let",
"description": "Set the tooltip button text",
"description": "Set the tooltip button text\nThis is deprecated. Use default slot instead",
"type": "string",
"value": "\"\"",
"isFunction": false,
Expand All @@ -14159,7 +14147,6 @@
"name": "refTooltip",
"kind": "let",
"description": "Obtain a reference to the tooltip HTML element",
"type": "null | HTMLDivElement",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
Expand Down Expand Up @@ -14198,9 +14185,7 @@
],
"events": [
{ "type": "dispatched", "name": "open", "detail": "null" },
{ "type": "dispatched", "name": "close", "detail": "null" },
{ "type": "forwarded", "name": "click", "element": "div" },
{ "type": "forwarded", "name": "mousedown", "element": "div" }
{ "type": "dispatched", "name": "close", "detail": "null" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
Expand Down
45 changes: 11 additions & 34 deletions docs/src/pages/components/Tooltip.svx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,69 +13,46 @@ components: ["Tooltip", "TooltipFooter"]
By default, the tooltip is triggered by an information icon.

<Tooltip>
<p>
Resources are provisioned based on your account's organization.
</p>
Resources are provisioned based on your account's organization.
</Tooltip>

## With trigger text

This is deprecated in Carbon v11.

<Tooltip triggerText="Resource list">
<p>
Resources are provisioned based on your account's organization.
</p>
Resources are provisioned based on your account's organization.
</Tooltip>

## Reactive example

<FileSource src="/framed/Tooltip/TooltipReactive" />

## Directions

<Tooltip triggerText="Top" direction="top"><p>Top</p></Tooltip>
<Tooltip triggerText="Right" direction="right"><p>Right</p></Tooltip>
<Tooltip triggerText="Bottom" direction="bottom"><p>Bottom</p></Tooltip>
<Tooltip triggerText="Left" direction="left"><p>Left</p></Tooltip>

## Alignment

<Tooltip triggerText="Start" align="start"><p>Start</p></Tooltip>
<Tooltip triggerText="End" align="end"><p>End</p></Tooltip>
<Tooltip triggerText="Center" align="center"><p>Center</p></Tooltip>
<Tooltip triggerText="Left" align="left">Left</Tooltip>
<Tooltip triggerText="Right" align="right">Right</Tooltip>
<Tooltip triggerText="Top" align="top">Top</Tooltip>

## Interactive

<Tooltip triggerText="Resource list">
<p>
Resources are provisioned based on your account's organization.
</p>
Resources are provisioned based on your account's organization.
<TooltipFooter selectorPrimaryFocus="#d">
<Link href="/">Learn more</Link>
<Button id="d" size="small">Manage</Button>
</TooltipFooter>
</TooltipFooter>
</Tooltip>

## Custom icon (component)

<Tooltip triggerText="Resource list" icon={Catalog}>
<p>
Resources are provisioned based on your account's organization.
</p>
Resources are provisioned based on your account's organization.
</Tooltip>

## Custom icon (slot)

<Tooltip triggerText="Resource list">
<div slot="icon" style="width: 1rem; height: 1rem; outline: 1px solid red;"></div>
<p>
Resources are provisioned based on your account's organization.
</p>
Resources are provisioned based on your account's organization.
</Tooltip>

## Hidden icon

<Tooltip hideIcon triggerText="Resource list">
<p>
Resources are provisioned based on your account's organization.
</p>
</Tooltip>
4 changes: 2 additions & 2 deletions docs/src/pages/framed/Tooltip/TooltipReactive.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@
let open = true;
</script>

<Tooltip bind:open triggerText="Resource list" align="start">
<p>Resources are provisioned based on your account's organization.</p>
<Tooltip bind:open align="bottom-left">
Resources are provisioned based on your account's organization.
</Tooltip>

<div style="margin-top: var(--bx-spacing-12);">
Expand Down
Loading

0 comments on commit 82f582c

Please sign in to comment.