@spectrum-web-components/tooltip 0.9.1 → 0.10.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/custom-elements.json +55 -3
- package/package.json +5 -5
- package/src/Tooltip.d.ts +7 -2
- package/src/Tooltip.js +34 -13
- package/src/Tooltip.js.map +1 -1
- package/src/spectrum-tooltip.css.js +18 -14
- package/src/spectrum-tooltip.css.js.map +1 -1
- package/src/tooltip.css.js +19 -15
- package/src/tooltip.css.js.map +1 -1
- package/stories/tooltip.stories.js +7 -2
- package/stories/tooltip.stories.js.map +1 -1
package/custom-elements.json
CHANGED
|
@@ -21,6 +21,24 @@
|
|
|
21
21
|
"kind": "javascript-module",
|
|
22
22
|
"path": "src/Tooltip.ts",
|
|
23
23
|
"declarations": [
|
|
24
|
+
{
|
|
25
|
+
"kind": "class",
|
|
26
|
+
"description": "",
|
|
27
|
+
"name": "TooltipProxy",
|
|
28
|
+
"events": [
|
|
29
|
+
{
|
|
30
|
+
"name": "disconnected",
|
|
31
|
+
"type": {
|
|
32
|
+
"text": "Event"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
"superclass": {
|
|
37
|
+
"name": "HTMLElement"
|
|
38
|
+
},
|
|
39
|
+
"tagName": "tooltip-proxy",
|
|
40
|
+
"customElement": true
|
|
41
|
+
},
|
|
24
42
|
{
|
|
25
43
|
"kind": "class",
|
|
26
44
|
"description": "",
|
|
@@ -143,10 +161,20 @@
|
|
|
143
161
|
"kind": "field",
|
|
144
162
|
"name": "_proxy",
|
|
145
163
|
"type": {
|
|
146
|
-
"text": "HTMLElement
|
|
164
|
+
"text": "HTMLElement"
|
|
147
165
|
},
|
|
148
166
|
"privacy": "private"
|
|
149
167
|
},
|
|
168
|
+
{
|
|
169
|
+
"kind": "method",
|
|
170
|
+
"name": "generateProxy",
|
|
171
|
+
"privacy": "private",
|
|
172
|
+
"return": {
|
|
173
|
+
"type": {
|
|
174
|
+
"text": "void"
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
},
|
|
150
178
|
{
|
|
151
179
|
"kind": "method",
|
|
152
180
|
"name": "overlayWillOpenCallback",
|
|
@@ -237,6 +265,14 @@
|
|
|
237
265
|
"name": "closeOverlay",
|
|
238
266
|
"privacy": "private"
|
|
239
267
|
},
|
|
268
|
+
{
|
|
269
|
+
"kind": "field",
|
|
270
|
+
"name": "previousSlot",
|
|
271
|
+
"type": {
|
|
272
|
+
"text": "string | undefined"
|
|
273
|
+
},
|
|
274
|
+
"privacy": "private"
|
|
275
|
+
},
|
|
240
276
|
{
|
|
241
277
|
"kind": "method",
|
|
242
278
|
"name": "manageTooltip",
|
|
@@ -299,6 +335,22 @@
|
|
|
299
335
|
}
|
|
300
336
|
],
|
|
301
337
|
"exports": [
|
|
338
|
+
{
|
|
339
|
+
"kind": "js",
|
|
340
|
+
"name": "TooltipProxy",
|
|
341
|
+
"declaration": {
|
|
342
|
+
"name": "TooltipProxy",
|
|
343
|
+
"module": "src/Tooltip.ts"
|
|
344
|
+
}
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
"kind": "custom-element-definition",
|
|
348
|
+
"name": "tooltip-proxy",
|
|
349
|
+
"declaration": {
|
|
350
|
+
"name": "TooltipProxy",
|
|
351
|
+
"module": "src/Tooltip.ts"
|
|
352
|
+
}
|
|
353
|
+
},
|
|
302
354
|
{
|
|
303
355
|
"kind": "js",
|
|
304
356
|
"name": "Tooltip",
|
|
@@ -331,7 +383,7 @@
|
|
|
331
383
|
{
|
|
332
384
|
"kind": "variable",
|
|
333
385
|
"name": "styles",
|
|
334
|
-
"default": "css`\n:host{--spectrum-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);opacity:0;pointer-events:none;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-overlay-animation-distance)))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-overlay-animation-distance)))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(\n--spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)\n)}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(\n--spectrum-tooltip-neutral-border-radius,var(--spectrum-
|
|
386
|
+
"default": "css`\n:host{--spectrum-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);opacity:0;pointer-events:none;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-overlay-animation-distance)))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-overlay-animation-distance)))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(\n--spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)\n)}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(\n--spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)\n);box-sizing:border-box;display:inline-flex;flex-direction:row;font-size:var(\n--spectrum-tooltip-neutral-text-size,var(--spectrum-global-dimension-font-size-75)\n);font-weight:var(\n--spectrum-tooltip-neutral-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);left:0;line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);max-width:var(\n--spectrum-tooltip-neutral-max-width,var(--spectrum-global-dimension-size-2000)\n);min-height:var(\n--spectrum-tooltip-neutral-min-height,var(--spectrum-global-dimension-size-300)\n);padding:0 var(\n--spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-85)\n);position:relative;top:0;vertical-align:top;width:auto;word-break:break-word}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}#tip{border-bottom:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-left:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-right:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-top-style:solid;border-top-width:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n);height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(-1*var(--spectrum-tooltip-neutral-tip-width, var(--spectrum-global-dimension-size-100)));top:50%}:host([placement*=right]){margin-left:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(-1*var(--spectrum-tooltip-neutral-tip-width, var(--spectrum-global-dimension-size-100)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n);margin-bottom:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);margin-top:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);width:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n)}#label{line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin-bottom:var(--spectrum-tooltip-neutral-text-margin-bottom);margin-top:var(\n--spectrum-tooltip-neutral-text-margin-top,var(--spectrum-global-dimension-static-size-50)\n)}:host{background-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n);color:var(\n--spectrum-tooltip-neutral-text-color,var(--spectrum-global-color-static-white)\n)}#tip{border-top-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n)}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}\n`"
|
|
335
387
|
}
|
|
336
388
|
],
|
|
337
389
|
"exports": [
|
|
@@ -352,7 +404,7 @@
|
|
|
352
404
|
{
|
|
353
405
|
"kind": "variable",
|
|
354
406
|
"name": "styles",
|
|
355
|
-
"default": "css`\n:host{--spectrum-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);opacity:0;pointer-events:none;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-overlay-animation-distance)))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-overlay-animation-distance)))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(\n--spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)\n)}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(\n--spectrum-tooltip-neutral-border-radius,var(--spectrum-
|
|
407
|
+
"default": "css`\n:host{--spectrum-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);opacity:0;pointer-events:none;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-overlay-animation-distance)))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-overlay-animation-distance)))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(\n--spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)\n)}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(\n--spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)\n);box-sizing:border-box;display:inline-flex;flex-direction:row;font-size:var(\n--spectrum-tooltip-neutral-text-size,var(--spectrum-global-dimension-font-size-75)\n);font-weight:var(\n--spectrum-tooltip-neutral-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);left:0;line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);max-width:var(\n--spectrum-tooltip-neutral-max-width,var(--spectrum-global-dimension-size-2000)\n);min-height:var(\n--spectrum-tooltip-neutral-min-height,var(--spectrum-global-dimension-size-300)\n);padding:0 var(\n--spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-85)\n);position:relative;top:0;vertical-align:top;width:auto;word-break:break-word}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}#tip{border-bottom:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-left:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-right:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-top-style:solid;border-top-width:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n);height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(-1*var(--spectrum-tooltip-neutral-tip-width, var(--spectrum-global-dimension-size-100)));top:50%}:host([placement*=right]){margin-left:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(-1*var(--spectrum-tooltip-neutral-tip-width, var(--spectrum-global-dimension-size-100)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n);margin-bottom:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);margin-top:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);width:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n)}#label{line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin-bottom:var(--spectrum-tooltip-neutral-text-margin-bottom);margin-top:var(\n--spectrum-tooltip-neutral-text-margin-top,var(--spectrum-global-dimension-static-size-50)\n)}:host{background-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n);color:var(\n--spectrum-tooltip-neutral-text-color,var(--spectrum-global-color-static-white)\n)}#tip{border-top-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n)}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}#tip{border:none}:host([placement*=bottom]) #tip,:host([placement*=left]) #tip,:host([placement*=right]) #tip{transform:none}#tip:after{border:var(\n--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)\n) solid transparent;content:\"\";height:0;left:0;position:absolute;width:0}:host([placement*=bottom]) #tip:after{bottom:100%;transform:scaleY(-1)}:host([placement*=left]) #tip:after{left:100%;transform:rotate(-90deg)}:host([placement*=right]) #tip:after{left:auto;right:100%;transform:rotate(90deg)}:host([placement]) #tip:after{border-top-color:var(\n--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700)\n)}:host([variant=negative]) #tip:after{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700)\n)}:host([variant=info]) #tip:after{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700)\n)}:host([variant=positive]) #tip:after{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700)\n)}\n`"
|
|
356
408
|
}
|
|
357
409
|
],
|
|
358
410
|
"exports": [
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tooltip",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.10.2",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -44,17 +44,17 @@
|
|
|
44
44
|
"lit-html"
|
|
45
45
|
],
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@spectrum-web-components/base": "^0.
|
|
48
|
-
"@spectrum-web-components/overlay": "^0.
|
|
47
|
+
"@spectrum-web-components/base": "^0.5.1",
|
|
48
|
+
"@spectrum-web-components/overlay": "^0.13.2",
|
|
49
49
|
"tslib": "^2.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@spectrum-css/tooltip": "^3.
|
|
52
|
+
"@spectrum-css/tooltip": "^3.1.4"
|
|
53
53
|
},
|
|
54
54
|
"types": "./src/index.d.ts",
|
|
55
55
|
"customElements": "custom-elements.json",
|
|
56
56
|
"sideEffects": [
|
|
57
57
|
"./sp-*.js"
|
|
58
58
|
],
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "5ad16bd185710525afa48bd76099cb0ebde4c4cb"
|
|
60
60
|
}
|
package/src/Tooltip.d.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
import { CSSResultArray,
|
|
1
|
+
import { CSSResultArray, PropertyValues, SpectrumElement, TemplateResult } from '@spectrum-web-components/base';
|
|
2
2
|
import type { OverlayDisplayQueryDetail, Placement } from '@spectrum-web-components/overlay';
|
|
3
|
+
export declare class TooltipProxy extends HTMLElement {
|
|
4
|
+
disconnectedCallback(): void;
|
|
5
|
+
}
|
|
3
6
|
/**
|
|
4
7
|
* @element sp-tooltip
|
|
5
8
|
*
|
|
@@ -27,7 +30,8 @@ export declare class Tooltip extends SpectrumElement {
|
|
|
27
30
|
set variant(variant: string);
|
|
28
31
|
constructor();
|
|
29
32
|
onOverlayQuery(event: CustomEvent<OverlayDisplayQueryDetail>): void;
|
|
30
|
-
private _proxy
|
|
33
|
+
private _proxy;
|
|
34
|
+
private generateProxy;
|
|
31
35
|
overlayWillOpenCallback({ trigger, }: {
|
|
32
36
|
trigger: HTMLElement;
|
|
33
37
|
}): void;
|
|
@@ -42,6 +46,7 @@ export declare class Tooltip extends SpectrumElement {
|
|
|
42
46
|
private abortOverlay;
|
|
43
47
|
private openOverlay;
|
|
44
48
|
private closeOverlay;
|
|
49
|
+
private previousSlot?;
|
|
45
50
|
private manageTooltip;
|
|
46
51
|
render(): TemplateResult;
|
|
47
52
|
protected update(changed: PropertyValues<this>): Promise<void>;
|
package/src/Tooltip.js
CHANGED
|
@@ -10,9 +10,16 @@ OF ANY KIND, either express or implied. See the License for the specific languag
|
|
|
10
10
|
governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
import { __decorate } from "tslib";
|
|
13
|
-
import { html, SpectrumElement,
|
|
13
|
+
import { html, SpectrumElement, } from '@spectrum-web-components/base';
|
|
14
|
+
import { property, query, } from '@spectrum-web-components/base/src/decorators.js';
|
|
14
15
|
import { openOverlay } from '@spectrum-web-components/overlay/src/loader.js';
|
|
15
16
|
import tooltipStyles from './tooltip.css.js';
|
|
17
|
+
export class TooltipProxy extends HTMLElement {
|
|
18
|
+
disconnectedCallback() {
|
|
19
|
+
this.dispatchEvent(new Event('disconnected'));
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
customElements.define('tooltip-proxy', TooltipProxy);
|
|
16
23
|
/**
|
|
17
24
|
* @element sp-tooltip
|
|
18
25
|
*
|
|
@@ -85,17 +92,23 @@ export class Tooltip extends SpectrumElement {
|
|
|
85
92
|
return;
|
|
86
93
|
event.detail.overlayContentTipElement = this.tipElement;
|
|
87
94
|
}
|
|
95
|
+
generateProxy() {
|
|
96
|
+
if (this._proxy) {
|
|
97
|
+
return;
|
|
98
|
+
}
|
|
99
|
+
this._proxy = document.createElement('tooltip-proxy');
|
|
100
|
+
this._proxy.id = this._tooltipId;
|
|
101
|
+
this._proxy.hidden = true;
|
|
102
|
+
this._proxy.slot = 'hidden-tooltip-content';
|
|
103
|
+
this._proxy.setAttribute('role', 'tooltip');
|
|
104
|
+
this._proxy.addEventListener('disconnected', this.closeOverlay);
|
|
105
|
+
}
|
|
88
106
|
overlayWillOpenCallback({ trigger, }) {
|
|
89
107
|
this.setAttribute('aria-hidden', 'true');
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
this._proxy.textContent = this.textContent;
|
|
93
|
-
this._proxy.id = this._tooltipId;
|
|
94
|
-
this._proxy.hidden = true;
|
|
95
|
-
this._proxy.setAttribute('role', 'tooltip');
|
|
96
|
-
}
|
|
108
|
+
this.generateProxy();
|
|
109
|
+
this._proxy.textContent = this.textContent;
|
|
97
110
|
trigger.setAttribute('aria-describedby', this._tooltipId);
|
|
98
|
-
|
|
111
|
+
this.insertAdjacentElement('beforebegin', this._proxy);
|
|
99
112
|
}
|
|
100
113
|
overlayOpenCancelledCallback({ trigger, }) {
|
|
101
114
|
this.overlayCloseCallback({ trigger });
|
|
@@ -106,20 +119,27 @@ export class Tooltip extends SpectrumElement {
|
|
|
106
119
|
this.removeProxy();
|
|
107
120
|
}
|
|
108
121
|
removeProxy() {
|
|
109
|
-
|
|
110
|
-
this._proxy.remove();
|
|
111
|
-
this._proxy = undefined;
|
|
112
|
-
}
|
|
122
|
+
this._proxy.remove();
|
|
113
123
|
}
|
|
114
124
|
manageTooltip() {
|
|
115
125
|
const parentElement = this.parentElement;
|
|
116
126
|
if (this.selfManaged) {
|
|
127
|
+
if (this.slot) {
|
|
128
|
+
this.previousSlot = this.slot;
|
|
129
|
+
}
|
|
130
|
+
this.slot = 'self-managed-tooltip';
|
|
117
131
|
parentElement.addEventListener('pointerenter', this.openOverlay);
|
|
118
132
|
parentElement.addEventListener('focusin', this.openOverlay);
|
|
119
133
|
parentElement.addEventListener('pointerleave', this.closeOverlay);
|
|
120
134
|
parentElement.addEventListener('focusout', this.closeOverlay);
|
|
121
135
|
}
|
|
122
136
|
else {
|
|
137
|
+
if (this.previousSlot) {
|
|
138
|
+
this.slot = this.previousSlot;
|
|
139
|
+
}
|
|
140
|
+
else if (this.slot === 'self-managed-tooltip') {
|
|
141
|
+
this.removeAttribute('slot');
|
|
142
|
+
}
|
|
123
143
|
parentElement.removeEventListener('pointerenter', this.openOverlay);
|
|
124
144
|
parentElement.removeEventListener('focusin', this.openOverlay);
|
|
125
145
|
parentElement.removeEventListener('pointerleave', this.closeOverlay);
|
|
@@ -142,6 +162,7 @@ export class Tooltip extends SpectrumElement {
|
|
|
142
162
|
this.closeOverlay();
|
|
143
163
|
}
|
|
144
164
|
}
|
|
165
|
+
this.generateProxy();
|
|
145
166
|
super.update(changed);
|
|
146
167
|
}
|
|
147
168
|
updated(changed) {
|
package/src/Tooltip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["Tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n html,\n CSSResultArray,\n TemplateResult,\n SpectrumElement,\n property,\n query,\n PropertyValues,\n} from '@spectrum-web-components/base';\nimport type {\n OverlayDisplayQueryDetail,\n Placement,\n} from '@spectrum-web-components/overlay';\nimport { openOverlay } from '@spectrum-web-components/overlay/src/loader.js';\n\nimport tooltipStyles from './tooltip.css.js';\n\n/**\n * @element sp-tooltip\n *\n * @slot icon - the icon element appearing at the start of the label\n * @slot - the text label of the Tooltip\n */\n\nexport class Tooltip extends SpectrumElement {\n public static get styles(): CSSResultArray {\n return [tooltipStyles];\n }\n\n /**\n * @private\n */\n static instanceCount = 0;\n\n private _tooltipId = `sp-tooltip-describedby-helper-${Tooltip.instanceCount++}`;\n\n @property({ type: Boolean, attribute: 'self-managed' })\n public selfManaged = false;\n\n @property({ type: Number, reflect: true })\n public offset = 6;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\n * @attr\n */\n @property({ reflect: true })\n public placement: Placement = 'top';\n\n @query('#tip')\n private tipElement!: HTMLSpanElement;\n\n /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */\n private _variant = '';\n\n @property({ type: String })\n public get variant(): string {\n return this._variant;\n }\n public set variant(variant: string) {\n if (variant === this.variant) {\n return;\n }\n if (['info', 'positive', 'negative'].includes(variant)) {\n this.setAttribute('variant', variant);\n this._variant = variant;\n return;\n }\n this.removeAttribute('variant');\n this._variant = '';\n }\n\n public constructor() {\n super();\n this.addEventListener('sp-overlay-query', this.onOverlayQuery);\n }\n\n public onOverlayQuery(event: CustomEvent<OverlayDisplayQueryDetail>): void {\n /* c8 ignore next */\n if (!event.target) return;\n\n const target = event.target as Node;\n /* c8 ignore next */\n if (target !== this) return;\n\n event.detail.overlayContentTipElement = this.tipElement;\n }\n\n private _proxy?: HTMLElement;\n\n public overlayWillOpenCallback({\n trigger,\n }: {\n trigger: HTMLElement;\n }): void {\n this.setAttribute('aria-hidden', 'true');\n if (!this._proxy) {\n this._proxy = document.createElement('span');\n this._proxy.textContent = this.textContent;\n this._proxy.id = this._tooltipId;\n this._proxy.hidden = true;\n this._proxy.setAttribute('role', 'tooltip');\n }\n trigger.setAttribute('aria-describedby', this._tooltipId);\n trigger.insertAdjacentElement('beforebegin', this._proxy);\n }\n\n public overlayOpenCancelledCallback({\n trigger,\n }: {\n trigger: HTMLElement;\n }): void {\n this.overlayCloseCallback({ trigger });\n }\n\n public overlayCloseCallback({ trigger }: { trigger: HTMLElement }): void {\n trigger.removeAttribute('aria-describedby');\n this.removeAttribute('aria-hidden');\n this.removeProxy();\n }\n\n private removeProxy(): void {\n if (this._proxy) {\n this._proxy.remove();\n this._proxy = undefined;\n }\n }\n\n private closeOverlayCallback?: Promise<() => void>;\n private abortOverlay: (cancelled: boolean) => void = () => {\n return;\n };\n\n private openOverlay = (): void => {\n const parentElement = this.parentElement as HTMLElement;\n const abortPromise: Promise<boolean> = new Promise((res) => {\n this.abortOverlay = res;\n });\n this.closeOverlayCallback = openOverlay(parentElement, 'hover', this, {\n abortPromise,\n offset: this.offset,\n placement: this.placement,\n });\n };\n\n private closeOverlay = async (): Promise<void> => {\n if (this.abortOverlay) this.abortOverlay(true);\n if (!this.closeOverlayCallback) return;\n (await this.closeOverlayCallback)();\n delete this.closeOverlayCallback;\n };\n\n private manageTooltip(): void {\n const parentElement = this.parentElement as HTMLElement;\n if (this.selfManaged) {\n parentElement.addEventListener('pointerenter', this.openOverlay);\n parentElement.addEventListener('focusin', this.openOverlay);\n parentElement.addEventListener('pointerleave', this.closeOverlay);\n parentElement.addEventListener('focusout', this.closeOverlay);\n } else {\n parentElement.removeEventListener('pointerenter', this.openOverlay);\n parentElement.removeEventListener('focusin', this.openOverlay);\n parentElement.removeEventListener(\n 'pointerleave',\n this.closeOverlay\n );\n parentElement.removeEventListener('focusout', this.closeOverlay);\n }\n }\n\n render(): TemplateResult {\n return html`\n <slot name=\"icon\"></slot>\n <span id=\"label\"><slot></slot></span>\n <span id=\"tip\"></span>\n `;\n }\n\n protected async update(changed: PropertyValues<this>): Promise<void> {\n if (changed.has('open') && this.selfManaged) {\n if (this.open) {\n this.openOverlay();\n } else {\n this.closeOverlay();\n }\n }\n super.update(changed);\n }\n\n protected updated(changed: PropertyValues<this>): void {\n super.updated(changed);\n if (changed.has('selfManaged')) {\n this.manageTooltip();\n }\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["Tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n PropertyValues,\n SpectrumElement,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n property,\n query,\n} from '@spectrum-web-components/base/src/decorators.js';\nimport type {\n OverlayDisplayQueryDetail,\n Placement,\n} from '@spectrum-web-components/overlay';\nimport { openOverlay } from '@spectrum-web-components/overlay/src/loader.js';\n\nimport tooltipStyles from './tooltip.css.js';\n\nexport class TooltipProxy extends HTMLElement {\n disconnectedCallback(): void {\n this.dispatchEvent(new Event('disconnected'));\n }\n}\n\ncustomElements.define('tooltip-proxy', TooltipProxy);\n\n/**\n * @element sp-tooltip\n *\n * @slot icon - the icon element appearing at the start of the label\n * @slot - the text label of the Tooltip\n */\n\nexport class Tooltip extends SpectrumElement {\n public static get styles(): CSSResultArray {\n return [tooltipStyles];\n }\n\n /**\n * @private\n */\n static instanceCount = 0;\n\n private _tooltipId = `sp-tooltip-describedby-helper-${Tooltip.instanceCount++}`;\n\n @property({ type: Boolean, attribute: 'self-managed' })\n public selfManaged = false;\n\n @property({ type: Number, reflect: true })\n public offset = 6;\n\n @property({ type: Boolean, reflect: true })\n public open = false;\n\n /**\n * @type {\"auto\" | \"auto-start\" | \"auto-end\" | \"top\" | \"bottom\" | \"right\" | \"left\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"right-start\" | \"right-end\" | \"left-start\" | \"left-end\" | \"none\"}\n * @attr\n */\n @property({ reflect: true })\n public placement: Placement = 'top';\n\n @query('#tip')\n private tipElement!: HTMLSpanElement;\n\n /* Ensure that a '' value for `variant` removes the attribute instead of a blank value */\n private _variant = '';\n\n @property({ type: String })\n public get variant(): string {\n return this._variant;\n }\n public set variant(variant: string) {\n if (variant === this.variant) {\n return;\n }\n if (['info', 'positive', 'negative'].includes(variant)) {\n this.setAttribute('variant', variant);\n this._variant = variant;\n return;\n }\n this.removeAttribute('variant');\n this._variant = '';\n }\n\n public constructor() {\n super();\n this.addEventListener('sp-overlay-query', this.onOverlayQuery);\n }\n\n public onOverlayQuery(event: CustomEvent<OverlayDisplayQueryDetail>): void {\n /* c8 ignore next */\n if (!event.target) return;\n\n const target = event.target as Node;\n /* c8 ignore next */\n if (target !== this) return;\n\n event.detail.overlayContentTipElement = this.tipElement;\n }\n\n private _proxy!: HTMLElement;\n\n private generateProxy(): void {\n if (this._proxy) {\n return;\n }\n this._proxy = document.createElement('tooltip-proxy');\n this._proxy.id = this._tooltipId;\n this._proxy.hidden = true;\n this._proxy.slot = 'hidden-tooltip-content';\n this._proxy.setAttribute('role', 'tooltip');\n this._proxy.addEventListener('disconnected', this.closeOverlay);\n }\n\n public overlayWillOpenCallback({\n trigger,\n }: {\n trigger: HTMLElement;\n }): void {\n this.setAttribute('aria-hidden', 'true');\n this.generateProxy();\n this._proxy.textContent = this.textContent;\n trigger.setAttribute('aria-describedby', this._tooltipId);\n this.insertAdjacentElement('beforebegin', this._proxy);\n }\n\n public overlayOpenCancelledCallback({\n trigger,\n }: {\n trigger: HTMLElement;\n }): void {\n this.overlayCloseCallback({ trigger });\n }\n\n public overlayCloseCallback({ trigger }: { trigger: HTMLElement }): void {\n trigger.removeAttribute('aria-describedby');\n this.removeAttribute('aria-hidden');\n this.removeProxy();\n }\n\n private removeProxy(): void {\n this._proxy.remove();\n }\n\n private closeOverlayCallback?: Promise<() => void>;\n private abortOverlay: (cancelled: boolean) => void = () => {\n return;\n };\n\n private openOverlay = (): void => {\n const parentElement = this.parentElement as HTMLElement;\n const abortPromise: Promise<boolean> = new Promise((res) => {\n this.abortOverlay = res;\n });\n this.closeOverlayCallback = openOverlay(parentElement, 'hover', this, {\n abortPromise,\n offset: this.offset,\n placement: this.placement,\n });\n };\n\n private closeOverlay = async (): Promise<void> => {\n if (this.abortOverlay) this.abortOverlay(true);\n if (!this.closeOverlayCallback) return;\n (await this.closeOverlayCallback)();\n delete this.closeOverlayCallback;\n };\n\n private previousSlot?: string;\n\n private manageTooltip(): void {\n const parentElement = this.parentElement as HTMLElement;\n if (this.selfManaged) {\n if (this.slot) {\n this.previousSlot = this.slot;\n }\n this.slot = 'self-managed-tooltip';\n parentElement.addEventListener('pointerenter', this.openOverlay);\n parentElement.addEventListener('focusin', this.openOverlay);\n parentElement.addEventListener('pointerleave', this.closeOverlay);\n parentElement.addEventListener('focusout', this.closeOverlay);\n } else {\n if (this.previousSlot) {\n this.slot = this.previousSlot;\n } else if (this.slot === 'self-managed-tooltip') {\n this.removeAttribute('slot');\n }\n parentElement.removeEventListener('pointerenter', this.openOverlay);\n parentElement.removeEventListener('focusin', this.openOverlay);\n parentElement.removeEventListener(\n 'pointerleave',\n this.closeOverlay\n );\n parentElement.removeEventListener('focusout', this.closeOverlay);\n }\n }\n\n render(): TemplateResult {\n return html`\n <slot name=\"icon\"></slot>\n <span id=\"label\"><slot></slot></span>\n <span id=\"tip\"></span>\n `;\n }\n\n protected async update(changed: PropertyValues<this>): Promise<void> {\n if (changed.has('open') && this.selfManaged) {\n if (this.open) {\n this.openOverlay();\n } else {\n this.closeOverlay();\n }\n }\n this.generateProxy();\n super.update(changed);\n }\n\n protected updated(changed: PropertyValues<this>): void {\n super.updated(changed);\n if (changed.has('selfManaged')) {\n this.manageTooltip();\n }\n }\n}\n"]}
|
|
@@ -16,7 +16,7 @@ const styles = css `
|
|
|
16
16
|
);opacity:0;pointer-events:none;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-overlay-animation-distance)))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-overlay-animation-distance)))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(
|
|
17
17
|
--spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)
|
|
18
18
|
)}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(
|
|
19
|
-
--spectrum-tooltip-neutral-border-radius,var(--spectrum-
|
|
19
|
+
--spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)
|
|
20
20
|
);box-sizing:border-box;display:inline-flex;flex-direction:row;font-size:var(
|
|
21
21
|
--spectrum-tooltip-neutral-text-size,var(--spectrum-global-dimension-font-size-75)
|
|
22
22
|
);font-weight:var(
|
|
@@ -27,10 +27,8 @@ const styles = css `
|
|
|
27
27
|
--spectrum-tooltip-neutral-max-width,var(--spectrum-global-dimension-size-2000)
|
|
28
28
|
);min-height:var(
|
|
29
29
|
--spectrum-tooltip-neutral-min-height,var(--spectrum-global-dimension-size-300)
|
|
30
|
-
);padding:var(
|
|
31
|
-
--spectrum-tooltip-neutral-padding-
|
|
32
|
-
) var(
|
|
33
|
-
--spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-125)
|
|
30
|
+
);padding:0 var(
|
|
31
|
+
--spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-85)
|
|
34
32
|
);position:relative;top:0;vertical-align:top;width:auto;word-break:break-word}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}#tip{border-bottom:var(
|
|
35
33
|
--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)
|
|
36
34
|
) solid transparent;border-left:var(
|
|
@@ -49,26 +47,32 @@ const styles = css `
|
|
|
49
47
|
--spectrum-tooltip-neutral-target-offset
|
|
50
48
|
)}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(-1*var(--spectrum-tooltip-neutral-tip-width, var(--spectrum-global-dimension-size-100)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(
|
|
51
49
|
--spectrum-tooltip-neutral-icon-margin-x,
|
|
52
|
-
var(--spectrum-global-dimension-size-
|
|
50
|
+
var(--spectrum-global-dimension-size-85)
|
|
53
51
|
) - var(
|
|
54
52
|
--spectrum-tooltip-neutral-padding-x,
|
|
55
|
-
var(--spectrum-global-dimension-size-
|
|
53
|
+
var(--spectrum-global-dimension-size-85)
|
|
56
54
|
))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(
|
|
57
55
|
--spectrum-tooltip-neutral-icon-margin-x,
|
|
58
|
-
var(--spectrum-global-dimension-size-
|
|
56
|
+
var(--spectrum-global-dimension-size-85)
|
|
59
57
|
) - var(
|
|
60
58
|
--spectrum-tooltip-neutral-padding-x,
|
|
61
|
-
var(--spectrum-global-dimension-size-
|
|
59
|
+
var(--spectrum-global-dimension-size-85)
|
|
62
60
|
))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(
|
|
63
|
-
--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-
|
|
61
|
+
--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)
|
|
64
62
|
)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(
|
|
65
|
-
--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-
|
|
63
|
+
--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)
|
|
66
64
|
)}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(
|
|
67
|
-
--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-
|
|
68
|
-
);margin-
|
|
69
|
-
--spectrum-tooltip-neutral-icon-
|
|
65
|
+
--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)
|
|
66
|
+
);margin-bottom:var(
|
|
67
|
+
--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)
|
|
68
|
+
);margin-top:var(
|
|
69
|
+
--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)
|
|
70
|
+
);width:var(
|
|
71
|
+
--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)
|
|
70
72
|
)}#label{line-height:var(
|
|
71
73
|
--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)
|
|
74
|
+
);margin-bottom:var(--spectrum-tooltip-neutral-text-margin-bottom);margin-top:var(
|
|
75
|
+
--spectrum-tooltip-neutral-text-margin-top,var(--spectrum-global-dimension-static-size-50)
|
|
72
76
|
)}:host{background-color:var(
|
|
73
77
|
--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)
|
|
74
78
|
);color:var(
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"spectrum-tooltip.css.js","sourceRoot":"","sources":["spectrum-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"spectrum-tooltip.css.js","sourceRoot":"","sources":["spectrum-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);opacity:0;pointer-events:none;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-overlay-animation-distance)))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-overlay-animation-distance)))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(\n--spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)\n)}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(\n--spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)\n);box-sizing:border-box;display:inline-flex;flex-direction:row;font-size:var(\n--spectrum-tooltip-neutral-text-size,var(--spectrum-global-dimension-font-size-75)\n);font-weight:var(\n--spectrum-tooltip-neutral-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);left:0;line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);max-width:var(\n--spectrum-tooltip-neutral-max-width,var(--spectrum-global-dimension-size-2000)\n);min-height:var(\n--spectrum-tooltip-neutral-min-height,var(--spectrum-global-dimension-size-300)\n);padding:0 var(\n--spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-85)\n);position:relative;top:0;vertical-align:top;width:auto;word-break:break-word}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}#tip{border-bottom:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-left:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-right:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-top-style:solid;border-top-width:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n);height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(-1*var(--spectrum-tooltip-neutral-tip-width, var(--spectrum-global-dimension-size-100)));top:50%}:host([placement*=right]){margin-left:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(-1*var(--spectrum-tooltip-neutral-tip-width, var(--spectrum-global-dimension-size-100)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n);margin-bottom:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);margin-top:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);width:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n)}#label{line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin-bottom:var(--spectrum-tooltip-neutral-text-margin-bottom);margin-top:var(\n--spectrum-tooltip-neutral-text-margin-top,var(--spectrum-global-dimension-static-size-50)\n)}:host{background-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n);color:var(\n--spectrum-tooltip-neutral-text-color,var(--spectrum-global-color-static-white)\n)}#tip{border-top-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n)}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}\n`;\nexport default styles;"]}
|
package/src/tooltip.css.js
CHANGED
|
@@ -16,7 +16,7 @@ const styles = css `
|
|
|
16
16
|
);opacity:0;pointer-events:none;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-overlay-animation-distance)))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-overlay-animation-distance)))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(
|
|
17
17
|
--spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)
|
|
18
18
|
)}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(
|
|
19
|
-
--spectrum-tooltip-neutral-border-radius,var(--spectrum-
|
|
19
|
+
--spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)
|
|
20
20
|
);box-sizing:border-box;display:inline-flex;flex-direction:row;font-size:var(
|
|
21
21
|
--spectrum-tooltip-neutral-text-size,var(--spectrum-global-dimension-font-size-75)
|
|
22
22
|
);font-weight:var(
|
|
@@ -27,10 +27,8 @@ const styles = css `
|
|
|
27
27
|
--spectrum-tooltip-neutral-max-width,var(--spectrum-global-dimension-size-2000)
|
|
28
28
|
);min-height:var(
|
|
29
29
|
--spectrum-tooltip-neutral-min-height,var(--spectrum-global-dimension-size-300)
|
|
30
|
-
);padding:var(
|
|
31
|
-
--spectrum-tooltip-neutral-padding-
|
|
32
|
-
) var(
|
|
33
|
-
--spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-125)
|
|
30
|
+
);padding:0 var(
|
|
31
|
+
--spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-85)
|
|
34
32
|
);position:relative;top:0;vertical-align:top;width:auto;word-break:break-word}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}#tip{border-bottom:var(
|
|
35
33
|
--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)
|
|
36
34
|
) solid transparent;border-left:var(
|
|
@@ -49,26 +47,32 @@ const styles = css `
|
|
|
49
47
|
--spectrum-tooltip-neutral-target-offset
|
|
50
48
|
)}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(-1*var(--spectrum-tooltip-neutral-tip-width, var(--spectrum-global-dimension-size-100)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(
|
|
51
49
|
--spectrum-tooltip-neutral-icon-margin-x,
|
|
52
|
-
var(--spectrum-global-dimension-size-
|
|
50
|
+
var(--spectrum-global-dimension-size-85)
|
|
53
51
|
) - var(
|
|
54
52
|
--spectrum-tooltip-neutral-padding-x,
|
|
55
|
-
var(--spectrum-global-dimension-size-
|
|
53
|
+
var(--spectrum-global-dimension-size-85)
|
|
56
54
|
))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(
|
|
57
55
|
--spectrum-tooltip-neutral-icon-margin-x,
|
|
58
|
-
var(--spectrum-global-dimension-size-
|
|
56
|
+
var(--spectrum-global-dimension-size-85)
|
|
59
57
|
) - var(
|
|
60
58
|
--spectrum-tooltip-neutral-padding-x,
|
|
61
|
-
var(--spectrum-global-dimension-size-
|
|
59
|
+
var(--spectrum-global-dimension-size-85)
|
|
62
60
|
))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(
|
|
63
|
-
--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-
|
|
61
|
+
--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)
|
|
64
62
|
)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(
|
|
65
|
-
--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-
|
|
63
|
+
--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)
|
|
66
64
|
)}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(
|
|
67
|
-
--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-
|
|
68
|
-
);margin-
|
|
69
|
-
--spectrum-tooltip-neutral-icon-
|
|
65
|
+
--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)
|
|
66
|
+
);margin-bottom:var(
|
|
67
|
+
--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)
|
|
68
|
+
);margin-top:var(
|
|
69
|
+
--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)
|
|
70
|
+
);width:var(
|
|
71
|
+
--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)
|
|
70
72
|
)}#label{line-height:var(
|
|
71
73
|
--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)
|
|
74
|
+
);margin-bottom:var(--spectrum-tooltip-neutral-text-margin-bottom);margin-top:var(
|
|
75
|
+
--spectrum-tooltip-neutral-text-margin-top,var(--spectrum-global-dimension-static-size-50)
|
|
72
76
|
)}:host{background-color:var(
|
|
73
77
|
--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)
|
|
74
78
|
);color:var(
|
|
@@ -87,7 +91,7 @@ var(--spectrum-global-dimension-size-125)
|
|
|
87
91
|
--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)
|
|
88
92
|
)}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(
|
|
89
93
|
--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)
|
|
90
|
-
)}#tip{border:none}:host([
|
|
94
|
+
)}#tip{border:none}:host([placement*=bottom]) #tip,:host([placement*=left]) #tip,:host([placement*=right]) #tip{transform:none}#tip:after{border:var(
|
|
91
95
|
--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)
|
|
92
96
|
) solid transparent;content:"";height:0;left:0;position:absolute;width:0}:host([placement*=bottom]) #tip:after{bottom:100%;transform:scaleY(-1)}:host([placement*=left]) #tip:after{left:100%;transform:rotate(-90deg)}:host([placement*=right]) #tip:after{left:auto;right:100%;transform:rotate(90deg)}:host([placement]) #tip:after{border-top-color:var(
|
|
93
97
|
--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700)
|
package/src/tooltip.css.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.css.js","sourceRoot":"","sources":["tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"tooltip.css.js","sourceRoot":"","sources":["tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AACF,OAAO,EAAE,GAAG,EAAE,MAAM,+BAA+B,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4FjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport { css } from '@spectrum-web-components/base';\nconst styles = css`\n:host{--spectrum-overlay-animation-distance:var(\n--spectrum-picker-m-texticon-popover-offset-y,var(--spectrum-global-dimension-size-75)\n);opacity:0;pointer-events:none;transition:transform var(--spectrum-global-animation-duration-100,.13s) ease-in-out,opacity var(--spectrum-global-animation-duration-100,.13s) ease-in-out,visibility 0ms linear var(--spectrum-global-animation-duration-100,.13s);visibility:hidden}:host([open]){opacity:1;pointer-events:auto;transition-delay:0ms;visibility:visible}:host([placement*=bottom][open]){transform:translateY(var(--spectrum-overlay-animation-distance))}:host([placement*=top][open]){transform:translateY(calc(-1*var(--spectrum-overlay-animation-distance)))}:host([placement*=right][open]){transform:translateX(var(--spectrum-overlay-animation-distance))}:host([placement*=left][open]){transform:translateX(calc(-1*var(--spectrum-overlay-animation-distance)))}:host{--spectrum-tooltip-neutral-target-offset:3px;--spectrum-tooltip-neutral-tip-width:var(\n--spectrum-tooltip-neutral-tip-height,var(--spectrum-global-dimension-size-50)\n)}:host{-webkit-font-smoothing:antialiased;align-items:center;border-radius:var(\n--spectrum-tooltip-neutral-border-radius,var(--spectrum-alias-component-border-radius)\n);box-sizing:border-box;display:inline-flex;flex-direction:row;font-size:var(\n--spectrum-tooltip-neutral-text-size,var(--spectrum-global-dimension-font-size-75)\n);font-weight:var(\n--spectrum-tooltip-neutral-text-font-weight,var(--spectrum-alias-body-text-font-weight)\n);left:0;line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);max-width:var(\n--spectrum-tooltip-neutral-max-width,var(--spectrum-global-dimension-size-2000)\n);min-height:var(\n--spectrum-tooltip-neutral-min-height,var(--spectrum-global-dimension-size-300)\n);padding:0 var(\n--spectrum-tooltip-neutral-padding-x,var(--spectrum-global-dimension-size-85)\n);position:relative;top:0;vertical-align:top;width:auto;word-break:break-word}:host{cursor:default;-webkit-user-select:none;user-select:none}p{margin:0}#tip{border-bottom:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-left:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-right:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n) solid transparent;border-top-style:solid;border-top-width:var(\n--spectrum-tooltip-neutral-tip-width,var(--spectrum-global-dimension-size-100)\n);height:0;position:absolute;width:0}:host([placement*=left]) #tip,:host([placement*=right]) #tip{margin-top:calc(-1*var(--spectrum-tooltip-neutral-tip-width, var(--spectrum-global-dimension-size-100)));top:50%}:host([placement*=right]){margin-left:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=right]) #tip{right:100%;transform:rotate(90deg)}:host([placement*=left]){margin-right:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=left]) #tip{left:100%;transform:rotate(-90deg)}:host([placement*=top]){margin-bottom:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=top]) #tip{top:100%}:host([placement*=bottom]){margin-top:var(\n--spectrum-tooltip-neutral-target-offset\n)}:host([placement*=bottom]) #tip{bottom:100%;transform:rotate(-180deg)}:host([placement*=bottom]) #tip,:host([placement*=top]) #tip{left:50%;margin-left:calc(-1*var(--spectrum-tooltip-neutral-tip-width, var(--spectrum-global-dimension-size-100)))}:host([dir=ltr]) ::slotted([slot=icon]){margin-left:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=rtl]) ::slotted([slot=icon]){margin-right:calc(var(\n--spectrum-tooltip-neutral-icon-margin-x,\nvar(--spectrum-global-dimension-size-85)\n) - var(\n--spectrum-tooltip-neutral-padding-x,\nvar(--spectrum-global-dimension-size-85)\n))}:host([dir=ltr]) ::slotted([slot=icon]){margin-right:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}:host([dir=rtl]) ::slotted([slot=icon]){margin-left:var(\n--spectrum-tooltip-neutral-icon-margin-x,var(--spectrum-global-dimension-size-85)\n)}::slotted([slot=icon]){align-self:flex-start;flex-shrink:0;height:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n);margin-bottom:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);margin-top:var(\n--spectrum-tooltip-neutral-icon-margin-y,var(--spectrum-global-dimension-size-50)\n);width:var(\n--spectrum-tooltip-neutral-icon-size,var(--spectrum-global-dimension-size-200)\n)}#label{line-height:var(\n--spectrum-tooltip-neutral-text-line-height,var(--spectrum-alias-component-text-line-height)\n);margin-bottom:var(--spectrum-tooltip-neutral-text-margin-bottom);margin-top:var(\n--spectrum-tooltip-neutral-text-margin-top,var(--spectrum-global-dimension-static-size-50)\n)}:host{background-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n);color:var(\n--spectrum-tooltip-neutral-text-color,var(--spectrum-global-color-static-white)\n)}#tip{border-top-color:var(\n--spectrum-tooltip-neutral-background-color,var(--spectrum-semantic-neutral-background-color-default)\n)}.spectrum-Tooltip--error,:host([variant=negative]){background-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--error #tip,:host([variant=negative]) #tip{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-semantic-negative-background-color)\n)}.spectrum-Tooltip--help,:host([variant=info]){background-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--help #tip,:host([variant=info]) #tip{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-semantic-informative-background-color)\n)}.spectrum-Tooltip--success,:host([variant=positive]){background-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}.spectrum-Tooltip--success #tip,:host([variant=positive]) #tip{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-semantic-positive-background-color)\n)}#tip{border:none}:host([placement*=bottom]) #tip,:host([placement*=left]) #tip,:host([placement*=right]) #tip{transform:none}#tip:after{border:var(\n--spectrum-tooltip-tip-height,var(--spectrum-global-dimension-size-50)\n) solid transparent;content:\"\";height:0;left:0;position:absolute;width:0}:host([placement*=bottom]) #tip:after{bottom:100%;transform:scaleY(-1)}:host([placement*=left]) #tip:after{left:100%;transform:rotate(-90deg)}:host([placement*=right]) #tip:after{left:auto;right:100%;transform:rotate(90deg)}:host([placement]) #tip:after{border-top-color:var(\n--spectrum-tooltip-background-color,var(--spectrum-global-color-static-gray-700)\n)}:host([variant=negative]) #tip:after{border-top-color:var(\n--spectrum-tooltip-negative-background-color,var(--spectrum-global-color-static-red-700)\n)}:host([variant=info]) #tip:after{border-top-color:var(\n--spectrum-tooltip-info-background-color,var(--spectrum-global-color-static-blue-700)\n)}:host([variant=positive]) #tip:after{border-top-color:var(\n--spectrum-tooltip-positive-background-color,var(--spectrum-global-color-static-green-700)\n)}\n`;\nexport default styles;"]}
|
|
@@ -10,7 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
|
|
|
10
10
|
governing permissions and limitations under the License.
|
|
11
11
|
*/
|
|
12
12
|
import '../sp-tooltip.js';
|
|
13
|
-
import { html
|
|
13
|
+
import { html } from '@spectrum-web-components/base';
|
|
14
|
+
import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
|
|
14
15
|
import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
|
|
15
16
|
import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';
|
|
16
17
|
import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
|
|
@@ -218,6 +219,10 @@ const overlayStyles = html `
|
|
|
218
219
|
flex: none;
|
|
219
220
|
margin: 24px 0;
|
|
220
221
|
}
|
|
222
|
+
|
|
223
|
+
.self-managed:nth-child(3) {
|
|
224
|
+
margin-left: 50px;
|
|
225
|
+
}
|
|
221
226
|
</style>
|
|
222
227
|
`;
|
|
223
228
|
const overlaid = (openPlacement) => {
|
|
@@ -252,7 +257,7 @@ export const overlaidBottom = () => overlaid('bottom');
|
|
|
252
257
|
export const overlaidLeft = () => overlaid('left');
|
|
253
258
|
export const selfManaged = ({ placement, offset, delayed, }) => html `
|
|
254
259
|
${overlayStyles}
|
|
255
|
-
<sp-action-button>
|
|
260
|
+
<sp-action-button class="self-managed">
|
|
256
261
|
This is a button.
|
|
257
262
|
<sp-tooltip
|
|
258
263
|
self-managed
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["tooltip.stories.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '../sp-tooltip.js';\nimport { html, ifDefined, TemplateResult } from '@spectrum-web-components/base';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\n\nconst iconOptions: {\n [key: string]: ({\n width,\n height,\n hidden,\n title,\n }?: {\n width?: number;\n height?: number;\n hidden?: boolean;\n title?: string;\n }) => TemplateResult | string;\n} = {\n '': () => html``,\n negative: () =>\n html`\n <sp-icon-alert slot=\"icon\"></sp-icon-alert>\n `,\n positive: () =>\n html`\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n `,\n info: () =>\n html`\n <sp-icon-info slot=\"icon\"></sp-icon-info>\n `,\n};\n\nexport default {\n component: 'sp-tooltip',\n title: 'Tooltip',\n};\n\ninterface Properties {\n open?: boolean;\n placement?: Placement;\n variant?: string;\n text?: string;\n offset?: number;\n delayed?: boolean;\n}\n\nexport const Default = ({\n open,\n placement,\n variant,\n text,\n}: Properties): TemplateResult => {\n return html`\n <sp-tooltip ?open=${open} placement=${placement} variant=${variant}>\n ${text}\n </sp-tooltip>\n `;\n};\nDefault.args = {\n open: true,\n placement: 'top',\n variant: '',\n text: 'Tooltip',\n};\nDefault.argTypes = {\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltip is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n placement: {\n name: 'placement',\n type: { name: 'string', required: false },\n description: 'The placement of the tooltip in relation to its parent',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'top' },\n },\n control: {\n type: 'inline-radio',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n 'none',\n ],\n },\n },\n text: {\n name: 'text',\n type: { name: 'string', required: false },\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: 'text',\n },\n variant: {\n name: 'variant',\n type: { name: 'string', required: false },\n description: 'The style of the tooltip.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['info', 'positive', 'negative', ''],\n },\n },\n};\n\nexport const wIcon = ({\n open,\n placement,\n variant,\n text,\n}: Properties): TemplateResult => {\n return html`\n <sp-tooltip ?open=${open} placement=${placement} variant=${variant}>\n ${!!variant ? iconOptions[variant]() : html``} ${text}\n </sp-tooltip>\n `;\n};\nwIcon.args = {\n open: true,\n placement: 'top',\n text: 'Tooltip',\n variant: 'negative',\n};\nwIcon.argTypes = {\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltip is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n placement: {\n name: 'placement',\n type: { name: 'string', required: false },\n description: 'The placement of the tooltip in relation to its parent',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'top' },\n },\n control: {\n type: 'inline-radio',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n 'none',\n ],\n },\n },\n text: {\n name: 'text',\n type: { name: 'string', required: false },\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: 'text',\n },\n variant: {\n name: 'variant',\n type: { name: 'string', required: false },\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['info', 'positive', 'negative', ''],\n },\n },\n};\n\nconst overlayStyles = html`\n <style>\n html,\n body,\n #root,\n #root-inner,\n sp-story-decorator {\n height: 100%;\n margin: 0;\n }\n\n sp-story-decorator > div {\n display: contents;\n }\n\n sp-story-decorator::part(container) {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n }\n\n overlay-trigger {\n flex: none;\n margin: 24px 0;\n }\n </style>\n`;\n\nconst overlaid = (openPlacement: Placement): TemplateResult => {\n return html`\n ${overlayStyles}\n ${(\n [\n ['bottom', ''],\n ['left', 'negative'],\n ['right', 'positive'],\n ['top', 'info'],\n ] as [Placement, string][]\n ).map(([placement, variant]) => {\n return html`\n <overlay-trigger\n placement=${placement}\n open=${ifDefined(\n openPlacement === placement ? 'hover' : undefined\n )}\n >\n <sp-button label=\"${placement} test\" slot=\"trigger\">\n Hover for ${variant ? variant : 'tooltip'} on the\n ${placement}\n </sp-button>\n <sp-tooltip slot=\"hover-content\" variant=${variant}>\n ${placement}\n </sp-tooltip>\n </overlay-trigger>\n `;\n })}\n `;\n};\n\nexport const overlaidTop = (): TemplateResult => overlaid('top');\nexport const overlaidRight = (): TemplateResult => overlaid('right');\nexport const overlaidBottom = (): TemplateResult => overlaid('bottom');\nexport const overlaidLeft = (): TemplateResult => overlaid('left');\n\nexport const selfManaged = ({\n placement,\n offset,\n delayed,\n}: Properties): TemplateResult => html`\n ${overlayStyles}\n <sp-action-button>\n This is a button.\n <sp-tooltip\n self-managed\n placement=${placement}\n offset=${offset}\n ?delayed=${delayed}\n open\n >\n This is a tooltip.\n </sp-tooltip>\n </sp-action-button>\n`;\nselfManaged.args = {\n placement: 'top',\n offset: 6,\n delayed: false,\n};\nselfManaged.argTypes = {\n delayed: {\n name: 'delayed',\n type: { name: 'boolean', required: false },\n description: 'Whether to manage the tooltip with the warmup timer',\n },\n offset: {\n name: 'offset',\n type: { name: 'number', required: false },\n description:\n 'The pixel distance from the parent element to place the tooltip',\n },\n placement: {\n name: 'placement',\n type: { name: 'string', required: false },\n description: 'The placement of the tooltip in relation to its parent',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'top' },\n },\n control: {\n type: 'inline-radio',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n 'none',\n ],\n },\n },\n};\n"]}
|
|
1
|
+
{"version":3,"file":"tooltip.stories.js","sourceRoot":"","sources":["tooltip.stories.ts"],"names":[],"mappings":"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","sourcesContent":["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\nimport '../sp-tooltip.js';\nimport { html, TemplateResult } from '@spectrum-web-components/base';\nimport { ifDefined } from '@spectrum-web-components/base/src/directives.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';\nimport '@spectrum-web-components/button/sp-button.js';\nimport '@spectrum-web-components/action-button/sp-action-button.js';\nimport { Placement } from '@spectrum-web-components/overlay';\nimport '@spectrum-web-components/overlay/overlay-trigger.js';\n\nconst iconOptions: {\n [key: string]: ({\n width,\n height,\n hidden,\n title,\n }?: {\n width?: number;\n height?: number;\n hidden?: boolean;\n title?: string;\n }) => TemplateResult | string;\n} = {\n '': () => html``,\n negative: () =>\n html`\n <sp-icon-alert slot=\"icon\"></sp-icon-alert>\n `,\n positive: () =>\n html`\n <sp-icon-checkmark slot=\"icon\"></sp-icon-checkmark>\n `,\n info: () =>\n html`\n <sp-icon-info slot=\"icon\"></sp-icon-info>\n `,\n};\n\nexport default {\n component: 'sp-tooltip',\n title: 'Tooltip',\n};\n\ninterface Properties {\n open?: boolean;\n placement?: Placement;\n variant?: string;\n text?: string;\n offset?: number;\n delayed?: boolean;\n}\n\nexport const Default = ({\n open,\n placement,\n variant,\n text,\n}: Properties): TemplateResult => {\n return html`\n <sp-tooltip ?open=${open} placement=${placement} variant=${variant}>\n ${text}\n </sp-tooltip>\n `;\n};\nDefault.args = {\n open: true,\n placement: 'top',\n variant: '',\n text: 'Tooltip',\n};\nDefault.argTypes = {\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltip is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n placement: {\n name: 'placement',\n type: { name: 'string', required: false },\n description: 'The placement of the tooltip in relation to its parent',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'top' },\n },\n control: {\n type: 'inline-radio',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n 'none',\n ],\n },\n },\n text: {\n name: 'text',\n type: { name: 'string', required: false },\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: 'text',\n },\n variant: {\n name: 'variant',\n type: { name: 'string', required: false },\n description: 'The style of the tooltip.',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['info', 'positive', 'negative', ''],\n },\n },\n};\n\nexport const wIcon = ({\n open,\n placement,\n variant,\n text,\n}: Properties): TemplateResult => {\n return html`\n <sp-tooltip ?open=${open} placement=${placement} variant=${variant}>\n ${!!variant ? iconOptions[variant]() : html``} ${text}\n </sp-tooltip>\n `;\n};\nwIcon.args = {\n open: true,\n placement: 'top',\n text: 'Tooltip',\n variant: 'negative',\n};\nwIcon.argTypes = {\n open: {\n name: 'open',\n type: { name: 'boolean', required: false },\n description: 'Whether the tooltip is open.',\n table: {\n type: { summary: 'boolean' },\n defaultValue: { summary: false },\n },\n control: {\n type: 'boolean',\n },\n },\n placement: {\n name: 'placement',\n type: { name: 'string', required: false },\n description: 'The placement of the tooltip in relation to its parent',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'top' },\n },\n control: {\n type: 'inline-radio',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n 'none',\n ],\n },\n },\n text: {\n name: 'text',\n type: { name: 'string', required: false },\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: 'text',\n },\n variant: {\n name: 'variant',\n type: { name: 'string', required: false },\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: '' },\n },\n control: {\n type: 'inline-radio',\n options: ['info', 'positive', 'negative', ''],\n },\n },\n};\n\nconst overlayStyles = html`\n <style>\n html,\n body,\n #root,\n #root-inner,\n sp-story-decorator {\n height: 100%;\n margin: 0;\n }\n\n sp-story-decorator > div {\n display: contents;\n }\n\n sp-story-decorator::part(container) {\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n align-items: center;\n justify-content: center;\n }\n\n overlay-trigger {\n flex: none;\n margin: 24px 0;\n }\n\n .self-managed:nth-child(3) {\n margin-left: 50px;\n }\n </style>\n`;\n\nconst overlaid = (openPlacement: Placement): TemplateResult => {\n return html`\n ${overlayStyles}\n ${(\n [\n ['bottom', ''],\n ['left', 'negative'],\n ['right', 'positive'],\n ['top', 'info'],\n ] as [Placement, string][]\n ).map(([placement, variant]) => {\n return html`\n <overlay-trigger\n placement=${placement}\n open=${ifDefined(\n openPlacement === placement ? 'hover' : undefined\n )}\n >\n <sp-button label=\"${placement} test\" slot=\"trigger\">\n Hover for ${variant ? variant : 'tooltip'} on the\n ${placement}\n </sp-button>\n <sp-tooltip slot=\"hover-content\" variant=${variant}>\n ${placement}\n </sp-tooltip>\n </overlay-trigger>\n `;\n })}\n `;\n};\n\nexport const overlaidTop = (): TemplateResult => overlaid('top');\nexport const overlaidRight = (): TemplateResult => overlaid('right');\nexport const overlaidBottom = (): TemplateResult => overlaid('bottom');\nexport const overlaidLeft = (): TemplateResult => overlaid('left');\n\nexport const selfManaged = ({\n placement,\n offset,\n delayed,\n}: Properties): TemplateResult => html`\n ${overlayStyles}\n <sp-action-button class=\"self-managed\">\n This is a button.\n <sp-tooltip\n self-managed\n placement=${placement}\n offset=${offset}\n ?delayed=${delayed}\n open\n >\n This is a tooltip.\n </sp-tooltip>\n </sp-action-button>\n`;\nselfManaged.args = {\n placement: 'top',\n offset: 6,\n delayed: false,\n};\nselfManaged.argTypes = {\n delayed: {\n name: 'delayed',\n type: { name: 'boolean', required: false },\n description: 'Whether to manage the tooltip with the warmup timer',\n },\n offset: {\n name: 'offset',\n type: { name: 'number', required: false },\n description:\n 'The pixel distance from the parent element to place the tooltip',\n },\n placement: {\n name: 'placement',\n type: { name: 'string', required: false },\n description: 'The placement of the tooltip in relation to its parent',\n table: {\n type: { summary: 'string' },\n defaultValue: { summary: 'top' },\n },\n control: {\n type: 'inline-radio',\n options: [\n 'auto',\n 'auto-start',\n 'auto-end',\n 'top',\n 'bottom',\n 'right',\n 'left',\n 'top-start',\n 'top-end',\n 'bottom-start',\n 'bottom-end',\n 'right-start',\n 'right-end',\n 'left-start',\n 'left-end',\n 'none',\n ],\n },\n },\n};\n"]}
|