From 6ae0e31011ed9834f74723178b48c726b3214b0f Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 20 Oct 2020 11:41:45 -0700 Subject: [PATCH 1/2] refactor(tooltip-definition): remove hidden variable --- .../pages/components/TooltipDefinition.svx | 8 +++-- .../TooltipDefinition.svelte | 31 +++++++++---------- 2 files changed, 21 insertions(+), 18 deletions(-) diff --git a/docs/src/pages/components/TooltipDefinition.svx b/docs/src/pages/components/TooltipDefinition.svx index 2633be67..0de51580 100644 --- a/docs/src/pages/components/TooltipDefinition.svx +++ b/docs/src/pages/components/TooltipDefinition.svx @@ -3,13 +3,17 @@ import Preview from "../../components/Preview.svelte"; -### Default ("bottom" direction, "center" aligned) +### Default Armonk -### Custom direction, alignment +### Custom tooltip direction and alignment + +Customize the tooltip menu direction and alignment through the `direction` and `align` props. + +By default, `direction` is `"bottom"` and `align` is `"center"`. Armonk diff --git a/src/TooltipDefinition/TooltipDefinition.svelte b/src/TooltipDefinition/TooltipDefinition.svelte index b2486ec3..957eb2f3 100644 --- a/src/TooltipDefinition/TooltipDefinition.svelte +++ b/src/TooltipDefinition/TooltipDefinition.svelte @@ -29,28 +29,28 @@ */ export let ref = null; - $: hidden = false; - $: visible = false; + let visible = false; + + function hide() { + visible = false; + } + + function show() { + visible = true; + }
From cc01b0fb5bcf678aecf96109f1295b686899c8ee Mon Sep 17 00:00:00 2001 From: Eric Liu Date: Tue, 20 Oct 2020 11:46:30 -0700 Subject: [PATCH 2/2] feat(tooltip-definition): make tooltipText slottable --- docs/src/PUBLIC_API.json | 87 ++++++++++++++----- .../pages/components/TooltipDefinition.svx | 9 ++ .../TooltipDefinition.svelte | 2 +- types/index.d.ts | 2 +- 4 files changed, 78 insertions(+), 22 deletions(-) diff --git a/docs/src/PUBLIC_API.json b/docs/src/PUBLIC_API.json index 5ea8703a..a44b481f 100644 --- a/docs/src/PUBLIC_API.json +++ b/docs/src/PUBLIC_API.json @@ -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": [], diff --git a/docs/src/pages/components/TooltipDefinition.svx b/docs/src/pages/components/TooltipDefinition.svx index 0de51580..c71332ae 100644 --- a/docs/src/pages/components/TooltipDefinition.svx +++ b/docs/src/pages/components/TooltipDefinition.svx @@ -18,3 +18,12 @@ By default, `direction` is `"bottom"` and `align` is `"center"`. Armonk + +### Custom tooltip slot + + + Armonk + + IBM Corporate Headquarters is based in Armonk, New York. + + diff --git a/src/TooltipDefinition/TooltipDefinition.svelte b/src/TooltipDefinition/TooltipDefinition.svelte index 957eb2f3..8478c939 100644 --- a/src/TooltipDefinition/TooltipDefinition.svelte +++ b/src/TooltipDefinition/TooltipDefinition.svelte @@ -73,6 +73,6 @@
diff --git a/types/index.d.ts b/types/index.d.ts index 3a0a7008..dbee4283 100644 --- a/types/index.d.ts +++ b/types/index.d.ts @@ -5174,7 +5174,7 @@ export class TooltipDefinition extends CarbonSvelteComponent { ref?: null | HTMLButtonElement; }; - $$slot_def: { default: {} }; + $$slot_def: { default: {}; tooltip: {} }; } export class TooltipIcon extends CarbonSvelteComponent {