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

chore(tooltip-icon): rename slot to "tooltipText"

Browse source
This commit is contained in:
Eric Liu 2021-02-04 17:19:48 -08:00
commit f1fa61e30a
5 changed files with 20 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

8
COMPONENT_INDEX.md
View file

@ -4237,9 +4237,9 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ----------------------------------------------------------------- | | :---------- | :--------------- | :------- | :-------------------------------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------ |
| ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element | | ref | <code>let</code> | Yes | <code>null &#124; HTMLButtonElement</code> | <code>null</code> | Obtain a reference to the button HTML element |
| tooltipText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text.<br />Alternatively, use the "text" slot | | tooltipText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text.<br />Alternatively, use the "tooltipText" slot |
| align | <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 | <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 | <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 icon | | direction | <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 icon |
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the span element | | id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the span element |
@ -4247,9 +4247,9 @@ None.
### Slots ### Slots
| Slot name | Default | Props | Fallback | | Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------------------------- | | :---------- | :------ | :---- | :------------------------- |
| -- | Yes | -- | -- | | -- | Yes | -- | -- |
| text | No | -- | <code>{tooltipText}</code> | | tooltipText | No | -- | <code>{tooltipText}</code> |
### Events ### Events

4
docs/src/COMPONENT_API.json
View file

@ -9746,7 +9746,7 @@
{ {
"name": "tooltipText", "name": "tooltipText",
"kind": "let", "kind": "let",
"description": "Specify the tooltip text.\nAlternatively, use the \"text\" slot", "description": "Specify the tooltip text.\nAlternatively, use the \"tooltipText\" slot",
"type": "string", "type": "string",
"value": "\"\"", "value": "\"\"",
"isFunction": false, "isFunction": false,
@ -9797,7 +9797,7 @@
"slots": [ "slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" }, { "name": "__default__", "default": true, "slot_props": "{}" },
{ {
"name": "text", "name": "tooltipText",
"default": false, "default": false,
"fallback": "{tooltipText}", "fallback": "{tooltipText}",
"slot_props": "{}" "slot_props": "{}"

2
docs/src/pages/components/TooltipIcon.svx
View file

@ -23,6 +23,6 @@
Use the "text" slot to customize the tooltip text. Use the "text" slot to customize the tooltip text.
<TooltipIcon> <TooltipIcon>
<span slot="text" style="color: red">Carbon is an open source design system by IBM.</span> <span slot="tooltipText" style="color: red">Carbon is an open source design system by IBM.</span>
<Carbon24 /> <Carbon24 />
</TooltipIcon> </TooltipIcon>

8
src/TooltipIcon/TooltipIcon.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* Specify the tooltip text. * Specify the tooltip text.
* Alternatively, use the "text" slot * Alternatively, use the "tooltipText" slot
*/ */
export let tooltipText = ""; export let tooltipText = "";
@ -59,8 +59,8 @@
hidden = false; hidden = false;
}}" }}"
> >
<span id="{id}" class:bx--assistive-text="{true}" <span id="{id}" class:bx--assistive-text="{true}">
><slot name="text">{tooltipText}</slot></span <slot name="tooltipText">{tooltipText}</slot>
> </span>
<slot /> <slot />
</button> </button>

4
types/TooltipIcon/TooltipIcon.d.ts vendored
View file

@ -3,7 +3,7 @@
export interface TooltipIconProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> { export interface TooltipIconProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap["button"]> {
/** /**
* Specify the tooltip text. * Specify the tooltip text.
* Alternatively, use the "text" slot * Alternatively, use the "tooltipText" slot
* @default "" * @default ""
*/ */
tooltipText?: string; tooltipText?: string;
@ -37,7 +37,7 @@ export default class TooltipIcon {
$$prop_def: TooltipIconProps; $$prop_def: TooltipIconProps;
$$slot_def: { $$slot_def: {
default: {}; default: {};
text: {}; tooltipText: {};
}; };
$on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void; $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;