mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36: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
| 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

27
docs/src/COMPONENT_API.json
View file

@ -14184,9 +14184,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,
@ -14211,20 +14211,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,
@ -14260,9 +14248,9 @@
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "tooltip",
"name": "definition",
"default": false,
"fallback": "{tooltipText}",
"fallback": "{definition}",
"slot_props": "{}"
}
],
@ -14275,8 +14263,7 @@
{ "type": "forwarded", "name": "mouseleave", "element": "button" },
{ "type": "forwarded", "name": "focus", "element": "button" }
],
"typedefs": [],
"rest_props": { "type": "Element", "name": "span" }
"typedefs": []
},
{
"moduleName": "TooltipFooter",

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

@ -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>

45
src/TooltipDefinition/TooltipDefinition.svelte
View file

@ -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,27 +44,12 @@
/>
<!-- 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
@ -76,10 +57,12 @@
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>

9
tests/TooltipDefinition.test.svelte
View file

@ -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>

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

@ -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: {} }
> {}