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

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

22
COMPONENT_INDEX.md
View file

@ -4236,20 +4236,20 @@ None.
### Props
| 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 |
| tooltipText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the tooltip text.<br />Alternatively, use the "text" 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 |
| 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 |
| 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 |
| 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 |
| 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 |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------------------------- |
| -- | Yes | -- | -- |
| text | No | -- | <code>{tooltipText}</code> |
| Slot name | Default | Props | Fallback |
| :---------- | :------ | :---- | :------------------------- |
| -- | Yes | -- | -- |
| tooltipText | No | -- | <code>{tooltipText}</code> |
### Events

4
docs/src/COMPONENT_API.json
View file

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

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

@ -23,6 +23,6 @@
Use the "text" slot to customize the tooltip text.
<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 />
</TooltipIcon>

8
src/TooltipIcon/TooltipIcon.svelte
View file

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

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

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