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

feat(tooltip-definition): make tooltipText slottable

Browse source
This commit is contained in:
Eric Liu 2020-10-20 11:46:30 -07:00
commit cc01b0fb5b
4 changed files with 78 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

87
docs/src/PUBLIC_API.json
View file

@ -2089,8 +2089,8 @@
[
"click",
{
"start": 2342,
"end": 2350,
"start": 2355,
"end": 2363,
"type": "EventHandler",
"name": "click",
"modifiers": [],
@ -2100,8 +2100,8 @@
[
"mouseover",
{
"start": 2486,
"end": 2498,
"start": 2499,
"end": 2511,
"type": "EventHandler",
"name": "mouseover",
"modifiers": [],
@ -2111,8 +2111,8 @@
[
"mouseenter",
{
"start": 2501,
"end": 2514,
"start": 2514,
"end": 2527,
"type": "EventHandler",
"name": "mouseenter",
"modifiers": [],
@ -2122,8 +2122,8 @@
[
"mouseleave",
{
"start": 2517,
"end": 2530,
"start": 2530,
"end": 2543,
"type": "EventHandler",
"name": "mouseleave",
"modifiers": [],
@ -2133,8 +2133,8 @@
[
"transitionend",
{
"start": 2533,
"end": 2549,
"start": 2546,
"end": 2562,
"type": "EventHandler",
"name": "transitionend",
"modifiers": [],
@ -15497,14 +15497,61 @@
"default": true,
"default_value": ""
}
],
[
"tooltip",
{
"attributes": [
{
"start": 1681,
"end": 1695,
"type": "Attribute",
"name": "name",
"value": [
{
"start": 1687,
"end": 1694,
"type": "Text",
"raw": "tooltip",
"data": "tooltip"
}
]
}
],
"children": [
{
"start": 1696,
"end": 1709,
"type": "MustacheTag",
"expression": {
"type": "Identifier",
"start": 1697,
"end": 1708,
"loc": {
"start": {
"line": 76,
"column": 26
},
"end": {
"line": 76,
"column": 37
}
},
"name": "tooltipText"
}
}
],
"default": false,
"default_value": "{tooltipText}\n"
}
]
],
"forwarded_events": [
[
"click",
{
"start": 1480,
"end": 1488,
"start": 1457,
"end": 1465,
"type": "EventHandler",
"name": "click",
"modifiers": [],
@ -15514,8 +15561,8 @@
[
"mouseover",
{
"start": 1493,
"end": 1505,
"start": 1470,
"end": 1482,
"type": "EventHandler",
"name": "mouseover",
"modifiers": [],
@ -15525,8 +15572,8 @@
[
"mouseenter",
{
"start": 1510,
"end": 1523,
"start": 1487,
"end": 1500,
"type": "EventHandler",
"name": "mouseenter",
"modifiers": [],
@ -15536,8 +15583,8 @@
[
"mouseleave",
{
"start": 1528,
"end": 1541,
"start": 1505,
"end": 1518,
"type": "EventHandler",
"name": "mouseleave",
"modifiers": [],
@ -15547,8 +15594,8 @@
[
"focus",
{
"start": 1546,
"end": 1554,
"start": 1523,
"end": 1531,
"type": "EventHandler",
"name": "focus",
"modifiers": [],

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

@ -18,3 +18,12 @@ By default, `direction` is `"bottom"` and `align` is `"center"`.
<TooltipDefinition direction="top" align="start" tooltipText="IBM Corporate Headquarters is based in Armonk, New York.">
Armonk
</TooltipDefinition>
### Custom tooltip slot
<TooltipDefinition>
Armonk
<span slot="tooltip" style="color: red">
IBM Corporate Headquarters is based in Armonk, New York.
</span>
</TooltipDefinition>

2
src/TooltipDefinition/TooltipDefinition.svelte
View file

@ -73,6 +73,6 @@
<slot />
</button>
<div role="tooltip" id="{id}" class:bx--assistive-text="{true}">
{tooltipText}
<slot name="tooltip">{tooltipText}</slot>
</div>
</div>

2
types/index.d.ts vendored
View file

@ -5174,7 +5174,7 @@ export class TooltipDefinition extends CarbonSvelteComponent {
ref?: null | HTMLButtonElement;
};
$$slot_def: { default: {} };
$$slot_def: { default: {}; tooltip: {} };
}
export class TooltipIcon extends CarbonSvelteComponent {