mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 03:26:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(v11): Tooltip

Browse source 
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.
This commit is contained in:
Gregor Wassmann 2023-10-07 12:01:01 +02:00
commit e00c956a66
8 changed files with 100 additions and 232 deletions
Download patch file Download diff file Expand all files Collapse all files

41
COMPONENT_INDEX.md
View file

@ -2824,10 +2824,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
@ -4541,22 +4542,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
@ -4572,8 +4571,6 @@ None.
| :--------- | :--------- | :---------------- |
| open | dispatched | <code>null</code> |
| close | dispatched | <code>null</code> |
| click | forwarded | -- |
| mousedown | forwarded | -- |
## `TooltipDefinition`

45
docs/src/COMPONENT_API.json
View file

@ -9006,6 +9006,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": [],
@ -13990,19 +14002,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,
@ -14022,18 +14022,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",
@ -14108,7 +14096,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,
@ -14133,7 +14121,6 @@
"name": "refTooltip",
"kind": "let",
"description": "Obtain a reference to the tooltip HTML element",
"type": "null | HTMLDivElement",
"value": "null",
"isFunction": false,
"isFunctionDeclaration": false,
@ -14172,9 +14159,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" }

45
docs/src/pages/components/Tooltip.svx
View file

@ -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
docs/src/pages/framed/Tooltip/TooltipReactive.svelte
View file

@ -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);">

121
src/Tooltip/Tooltip.svelte
View file

@ -6,15 +6,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 button
* @type {"top" | "right" | "bottom" | "left"}
*/
export let direction = "bottom";
export let align = "bottom";
/**
* Set to `true` to open the tooltip
@ -22,12 +16,6 @@
*/
export let open = false;
/**
* Set to `true` to hide the tooltip icon
* @type {boolean}
*/
export let hideIcon = false;
/**
* Specify the icon to render for the tooltip button.
* Default to `<Information />`
@ -56,7 +44,10 @@
*/
export let triggerId = "ccs-" + Math.random().toString(36);
/** Set the tooltip button text */
/**
* Set the tooltip button text
* This is deprecated. Use default slot instead
*/
export let triggerText = "";
/** Obtain a reference to the trigger text HTML element */
@ -71,6 +62,8 @@
import { createEventDispatcher, afterUpdate, setContext } from "svelte";
import { writable } from "svelte/store";
import Information from "../icons/Information.svelte";
import Popover from "../Popover/Popover.svelte";
import PopoverContent from "../Popover/PopoverContent.svelte";
const dispatch = createEventDispatcher();
const tooltipOpen = writable(open);
@ -121,44 +114,6 @@
iconWidth = icon.width;
iconHeight = icon.height;
}
let offsetX = 0;
let offsetY = 0;
switch (direction) {
case "bottom":
if (hideIcon) {
offsetX = -1 * (tooltip.width / 2 - button.width / 2);
} else {
offsetX = -1 * (tooltip.width / 2 - button.width + iconWidth / 2);
}
offsetY = iconHeight / 2;
break;
case "right":
offsetX = button.width + 6;
offsetY = -1 * (tooltip.height / 2 + iconWidth / 2 - 3);
break;
case "left":
if (hideIcon) {
offsetX = -1 * (tooltip.width + 6 + 1);
} else {
offsetX = -1 * (tooltip.width - button.width + iconWidth + 8);
}
offsetY = -1 * (tooltip.height / 2 + button.height) - 2;
break;
case "top":
if (hideIcon) {
offsetX = -1 * (tooltip.width / 2 - button.width / 2);
} else {
offsetX =
-1 * (tooltip.width / 2 - button.width + iconWidth / 2 + 1);
}
offsetY = -1 * (tooltip.height + button.height + iconWidth / 2 - 1);
break;
}
refTooltip.style.left = offsetX + "px";
refTooltip.style.marginTop = offsetY + "px";
}
});
@ -167,14 +122,11 @@
$: buttonProps = {
role: "button",
"aria-haspopup": "true",
id: hideIcon ? triggerId : undefined,
class: hideIcon ? "bx--tooltip__label" : "bx--tooltip__trigger",
"aria-expanded": open,
"aria-describedby": open ? tooltipId : undefined,
"aria-labelledby": triggerText ? triggerId : undefined,
"aria-label": triggerText ? undefined : iconDescription,
tabindex,
style: hideIcon ? $$restProps.style : undefined,
};
</script>
@ -204,9 +156,10 @@
style:z-index="{open ? 1 : undefined}"
{...$$restProps}
>
{#if !hideIcon}
<div bind:this="{ref}" id="{triggerId}" class:bx--tooltip__label="{true}">
<slot name="triggerText">{triggerText}</slot>
<div bind:this="{ref}" id="{triggerId}">
<!-- todo: remove this. it’s only kept for legacy. -->
<slot name="triggerText">{triggerText}</slot>
<Popover bind:open highContrast align="{align}">
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
bind:this="{refIcon}"
@ -220,50 +173,12 @@
<svelte:component this="{icon}" name="{iconName}" />
</slot>
</div>
</div>
{:else}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
bind:this="{ref}"
{...buttonProps}
aria-describedby="{tooltipId}"
on:mousedown="{onMousedown}"
on:focus="{onFocus}"
on:blur="{onBlur}"
on:keydown="{onKeydown}"
>
<slot name="triggerText">{triggerText}</slot>
</div>
{/if}
{#if open}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
bind:this="{refTooltip}"
id="{tooltipId}"
data-floating-menu-direction="{direction}"
class:bx--tooltip="{true}"
class:bx--tooltip--shown="{open}"
class:bx--tooltip--top="{direction === 'top'}"
class:bx--tooltip--right="{direction === 'right'}"
class:bx--tooltip--bottom="{direction === 'bottom'}"
class:bx--tooltip--left="{direction === 'left'}"
class:bx--tooltip--align-center="{align === 'center'}"
class:bx--tooltip--align-start="{align === 'start'}"
class:bx--tooltip--align-end="{align === 'end'}"
on:keydown="{onKeydown}"
>
<span class:bx--tooltip__caret="{true}"></span>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
<div
on:click|stopPropagation
on:mousedown|stopPropagation
class:bx--tooltip__content="{true}"
tabindex="-1"
role="dialog"
<PopoverContent
className="{'bx--tooltip-content'}"
bind:ref="{refTooltip}"
>
<slot />
</div>
</div>
{/if}
</PopoverContent>
</Popover>
</div>
</div>

34
tests/Tooltip.test.svelte
View file

@ -6,31 +6,23 @@
</script>
<Tooltip bind:open on:open on:close>
<p>Resources are provisioned based on your account's organization.</p>
Resources are provisioned based on your account's organization.
</Tooltip>
<Tooltip triggerText="Resource list">
<p>Resources are provisioned based on your account's organization.</p>
<Tooltip>
Resources are provisioned based on your account's organization.
</Tooltip>
<Tooltip triggerText="Top" direction="top">
<p>Top</p>
</Tooltip>
<Tooltip triggerText="Top" align="top">Top</Tooltip>
<Tooltip triggerText="Right" direction="right">
<p>Right</p>
</Tooltip>
<Tooltip triggerText="Right" align="right">Right</Tooltip>
<Tooltip triggerText="Bottom" direction="bottom">
<p>Bottom</p>
</Tooltip>
<Tooltip triggerText="Bottom" align="bottom">Bottom</Tooltip>
<Tooltip triggerText="Left" direction="left">
<p>Left</p>
</Tooltip>
<Tooltip triggerText="Left" align="left">Left</Tooltip>
<Tooltip triggerText="Resource list">
<p>Resources are provisioned based on your account's organization.</p>
<Tooltip>
Resources are provisioned based on your account's organization.
<div class="bx--tooltip__footer">
<Link href="/">Learn more</Link>
<Button size="sm">Manage</Button>
@ -41,14 +33,14 @@
<Button size="sm">Manage</Button>
<Tooltip triggerText="Resource list" icon="{Catalog}">
<p>Resources are provisioned based on your account's organization.</p>
<Tooltip icon="{Catalog}">
Resources are provisioned based on your account's organization.
</Tooltip>
<Tooltip triggerText="Resource list">
<Tooltip>
<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>

6
types/Popover/PopoverContent.svelte.d.ts vendored
View file

@ -14,6 +14,12 @@ export interface PopoverContentProps extends RestProps {
*/
contentProps?: {};
/**
* Obtain a reference to the popover content HTML element
* @default null
*/
ref?: null | HTMLSpanElement;
[key: `data-${string}`]: any;
}

36
types/Tooltip/Tooltip.svelte.d.ts vendored
View file

@ -6,15 +6,21 @@ type RestProps = SvelteHTMLElements["div"];
export interface TooltipProps extends RestProps {
/**
* Set the alignment of the tooltip relative to the icon
* @default "center"
*/
align?: "start" | "center" | "end";
/**
* Set the direction of the tooltip relative to the button
* @default "bottom"
*/
direction?: "top" | "right" | "bottom" | "left";
align?:
| "top"
| "top-left"
| "top-right"
| "bottom"
| "bottom-left"
| "bottom-right"
| "left"
| "left-bottom"
| "left-top"
| "right"
| "right-bottom"
| "right-top";
/**
* Set to `true` to open the tooltip
@ -22,12 +28,6 @@ export interface TooltipProps extends RestProps {
*/
open?: boolean;
/**
* Set to `true` to hide the tooltip icon
* @default false
*/
hideIcon?: boolean;
/**
* Specify the icon to render for the tooltip button.
* Default to `<Information />`
@ -67,6 +67,7 @@ export interface TooltipProps extends RestProps {
/**
* Set the tooltip button text
* This is deprecated. Use default slot instead
* @default ""
*/
triggerText?: string;
@ -81,7 +82,7 @@ export interface TooltipProps extends RestProps {
* Obtain a reference to the tooltip HTML element
* @default null
*/
refTooltip?: null | HTMLDivElement;
refTooltip?: undefined;
/**
* Obtain a reference to the icon HTML element
@ -94,11 +95,6 @@ export interface TooltipProps extends RestProps {
export default class Tooltip extends SvelteComponentTyped<
TooltipProps,
{
open: CustomEvent<null>;
close: CustomEvent<null>;
click: WindowEventMap["click"];
mousedown: WindowEventMap["mousedown"];
},
{ open: CustomEvent<null>; close: CustomEvent<null> },
{ default: {}; icon: {}; triggerText: {} }
> {}