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(tooltip-icon): make tooltipText slottable

Browse source
This commit is contained in:
Eric Liu 2021-02-03 06:10:15 -08:00
commit 6b75607dce
6 changed files with 48 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

21
COMPONENT_INDEX.md
View file

@ -4228,19 +4228,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 |
| 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 "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 |
### Slots
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------- |
| -- | Yes | -- | -- |
| Slot name | Default | Props | Fallback |
| :-------- | :------ | :---- | :------------------------- |
| -- | Yes | -- | -- |
| text | No | -- | <code>{tooltipText}</code> |
### Events

12
docs/src/COMPONENT_API.json
View file

@ -9678,7 +9678,7 @@
{
"name": "tooltipText",
"kind": "let",
"description": "Specify the tooltip text",
"description": "Specify the tooltip text.\nAlternatively, use the \"text\" slot",
"type": "string",
"value": "\"\"",
"isFunction": false,
@ -9726,7 +9726,15 @@
"reactive": true
}
],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"slots": [
{ "name": "__default__", "default": true, "slot_props": "{}" },
{
"name": "text",
"default": false,
"fallback": "{tooltipText}",
"slot_props": "{}"
}
],
"events": [
{ "type": "forwarded", "name": "click", "element": "button" },
{ "type": "forwarded", "name": "mouseover", "element": "button" },

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

@ -16,4 +16,13 @@
<TooltipIcon tooltipText="Top start" direction="top" align="start"><Filter20 /></TooltipIcon>
<TooltipIcon tooltipText="Right end" direction="right" align="end"><Filter20 /></TooltipIcon>
<TooltipIcon tooltipText="Bottom start" direction="bottom" align="start"><Filter20 /></TooltipIcon>
<TooltipIcon tooltipText="Left start" direction="left" align="start"><Filter20 /></TooltipIcon>
<TooltipIcon tooltipText="Left start" direction="left" align="start"><Filter20 /></TooltipIcon>
### Custom tooltip text
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>
<Carbon24 />
</TooltipIcon>

9
src/TooltipIcon/TooltipIcon.svelte
View file

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

7
tests/TooltipIcon.test.svelte
View file

@ -23,3 +23,10 @@
<TooltipIcon tooltipText="Left start" direction="left" align="start">
<Filter20 />
</TooltipIcon>
<TooltipIcon>
<span slot="text" style="color: red"
>Carbon is an open source design system by IBM.</span
>
<Carbon24 />
</TooltipIcon>

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

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