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

feat(v11): TooltipDefinition

Browse source 
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`
This commit is contained in:
Gregor Wassmann 2023-09-30 12:45:10 +02:00
commit 3350a412da
6 changed files with 61 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

23
COMPONENT_INDEX.md
View file

@ -4579,21 +4579,20 @@ None.
### Props ### Props
| Prop name | Required | Kind | Reactive | Type | Default value | Description | | 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 | | 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 | | 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 | | definition | No | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the term definition. |
| 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 | | 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 |
| 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 |
| 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 ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------------------------- | | :--------- | :------ | :---- | :------------------------ |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| tooltip | No | -- | <code>{tooltipText}</code> | | definition | No | -- | <code>{definition}</code> |
### Events ### Events

27
docs/src/COMPONENT_API.json
View file

@ -14184,9 +14184,9 @@
"filePath": "src/TooltipDefinition/TooltipDefinition.svelte", "filePath": "src/TooltipDefinition/TooltipDefinition.svelte",
"props": [ "props": [
{ {
"name": "tooltipText", "name": "definition",
"kind": "let", "kind": "let",
"description": "Specify the tooltip text", "description": "Specify the term definition.",
"type": "string", "type": "string",
"value": "\"\"", "value": "\"\"",
"isFunction": false, "isFunction": false,
@ -14211,20 +14211,8 @@
"name": "align", "name": "align",
"kind": "let", "kind": "let",
"description": "Set the alignment of the tooltip relative to the icon", "description": "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\"",
"value": "\"center\"", "value": "\"bottom-left\"",
"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\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,
"isRequired": false, "isRequired": false,
@ -14260,9 +14248,9 @@
"slots": [ "slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" }, { "name": "__default__", "default": true, "slot_props": "{}" },
{ {
"name": "tooltip", "name": "definition",
"default": false, "default": false,
"fallback": "{tooltipText}", "fallback": "{definition}",
"slot_props": "{}" "slot_props": "{}"
} }
], ],
@ -14275,8 +14263,7 @@
{ "type": "forwarded", "name": "mouseleave", "element": "button" }, { "type": "forwarded", "name": "mouseleave", "element": "button" },
{ "type": "forwarded", "name": "focus", "element": "button" } { "type": "forwarded", "name": "focus", "element": "button" }
], ],
"typedefs": [], "typedefs": []
"rest_props": { "type": "Element", "name": "span" }
}, },
{ {
"moduleName": "TooltipFooter", "moduleName": "TooltipFooter",

14
docs/src/pages/components/TooltipDefinition.svx
View file

@ -5,25 +5,25 @@
## Default ## Default
<TooltipDefinition tooltipText="IBM Corporate Headquarters is based in Armonk, New York."> <TooltipDefinition definition="IBM Corporate Headquarters is based in Armonk, New York.">
Armonk Armonk
</TooltipDefinition> </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 Armonk
</TooltipDefinition> </TooltipDefinition>
## Custom tooltip slot ## Custom definition slot
<TooltipDefinition> <TooltipDefinition>
Armonk Armonk
<span slot="tooltip" style="color: red"> <span slot="definition" style="color: red">
IBM Corporate Headquarters is based in Armonk, New York. IBM Corporate Headquarters is based in Armonk, New York.
</span> </span>
</TooltipDefinition> </TooltipDefinition>

45
src/TooltipDefinition/TooltipDefinition.svelte
View file

@ -4,8 +4,8 @@
* @event {null} close * @event {null} close
*/ */
/** Specify the tooltip text */ /** Specify the term definition. */
export let tooltipText = ""; export let definition = "";
/** /**
* Set to `true` to open the tooltip * Set to `true` to open the tooltip
@ -14,15 +14,9 @@
/** /**
* Set the alignment of the tooltip relative to the icon * 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"; export let align = "bottom-left";
/**
* Set the direction of the tooltip relative to the icon
* @type {"top" | "bottom"}
*/
export let direction = "bottom";
/** Set an id for the tooltip div element */ /** Set an id for the tooltip div element */
export let id = "ccs-" + Math.random().toString(36); export let id = "ccs-" + Math.random().toString(36);
@ -31,6 +25,8 @@
export let ref = null; export let ref = null;
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import Popover from "../Popover/Popover.svelte";
import PopoverContent from "../Popover/PopoverContent.svelte";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
@ -48,27 +44,12 @@
/> />
<!-- svelte-ignore a11y-no-static-element-interactions --> <!-- svelte-ignore a11y-no-static-element-interactions -->
<span <Popover highContrast dropShadow="{false}" bind:open align="{align}">
class:bx--tooltip--definition="{true}"
class:bx--tooltip--a11y="{true}"
{...$$restProps}
on:mouseenter="{show}"
on:mouseleave="{hide}"
>
<button <button
bind:this="{ref}" bind:this="{ref}"
type="button" type="button"
aria-describedby="{id}" aria-describedby="{id}"
class:bx--tooltip--a11y="{true}" class:bx--definition-term="{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'}"
on:click on:click
on:mouseover on:mouseover
on:mouseenter on:mouseenter
@ -76,10 +57,12 @@
on:focus on:focus
on:focus="{show}" on:focus="{show}"
on:blur="{hide}" on:blur="{hide}"
on:mouseenter="{show}"
on:mouseleave="{hide}"
> >
<slot /> <slot />
</button> </button>
<div role="tooltip" id="{id}" class:bx--assistive-text="{true}"> <PopoverContent className="{'bx--definition-tooltip'}">
<slot name="tooltip">{tooltipText}</slot> <slot name="definition">{definition}</slot>
</div> </PopoverContent>
</span> </Popover>

9
tests/TooltipDefinition.test.svelte
View file

@ -8,22 +8,21 @@
bind:open bind:open
on:open on:open
on:close on:close
tooltipText="IBM Corporate Headquarters is based in Armonk, New York." definition="IBM Corporate Headquarters is based in Armonk, New York."
> >
Armonk Armonk
</TooltipDefinition> </TooltipDefinition>
<TooltipDefinition <TooltipDefinition
direction="top" align="top"
align="start" definition="IBM Corporate Headquarters is based in Armonk, New York."
tooltipText="IBM Corporate Headquarters is based in Armonk, New York."
> >
Armonk Armonk
</TooltipDefinition> </TooltipDefinition>
<TooltipDefinition> <TooltipDefinition>
Armonk Armonk
<span slot="tooltip" style="color: red"> <span slot="definition" style="color: red">
IBM Corporate Headquarters is based in Armonk, New York. IBM Corporate Headquarters is based in Armonk, New York.
</span> </span>
</TooltipDefinition> </TooltipDefinition>

35
types/TooltipDefinition/TooltipDefinition.svelte.d.ts vendored
View file

@ -1,14 +1,11 @@
import type { SvelteComponentTyped } from "svelte"; import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";
type RestProps = SvelteHTMLElements["span"]; export interface TooltipDefinitionProps {
export interface TooltipDefinitionProps extends RestProps {
/** /**
* Specify the tooltip text * Specify the term definition.
* @default "" * @default ""
*/ */
tooltipText?: string; definition?: string;
/** /**
* Set to `true` to open the tooltip * 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 * Set the alignment of the tooltip relative to the icon
* @default "center" * @default "bottom-left"
*/ */
align?: "start" | "center" | "end"; align?:
| "top"
/** | "top-left"
* Set the direction of the tooltip relative to the icon | "top-right"
* @default "bottom" | "bottom"
*/ | "bottom-left"
direction?: "top" | "bottom"; | "bottom-right"
| "left"
| "left-bottom"
| "left-top"
| "right"
| "right-bottom"
| "right-top";
/** /**
* Set an id for the tooltip div element * Set an id for the tooltip div element
@ -39,8 +42,6 @@ export interface TooltipDefinitionProps extends RestProps {
* @default null * @default null
*/ */
ref?: null | HTMLButtonElement; ref?: null | HTMLButtonElement;
[key: `data-${string}`]: any;
} }
export default class TooltipDefinition extends SvelteComponentTyped< export default class TooltipDefinition extends SvelteComponentTyped<
@ -54,5 +55,5 @@ export default class TooltipDefinition extends SvelteComponentTyped<
mouseleave: WindowEventMap["mouseleave"]; mouseleave: WindowEventMap["mouseleave"];
focus: WindowEventMap["focus"]; focus: WindowEventMap["focus"];
}, },
{ default: {}; tooltip: {} } { default: {}; definition: {} }
> {} > {}