@spectrum-web-components/tooltip 0.10.0 → 0.10.3-express.0
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 +6 -1
- package/src/Tooltip.js +32 -12
- 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 +5 -1
- package/stories/tooltip.stories.js.map +1 -1
- package/test/tooltip.test-vrt.js +0 -15
- package/test/tooltip.test-vrt.js.map +0 -1
- package/test/tooltip.test.js +0 -100
- package/test/tooltip.test.js.map +0 -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.10.0",
|
|
3
|
+
"version": "0.10.3-express.0+5d9e2a2ca",
|
|
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.5.
|
|
48
|
-
"@spectrum-web-components/overlay": "^0.13.0",
|
|
47
|
+
"@spectrum-web-components/base": "^0.5.2-express.41+5d9e2a2ca",
|
|
48
|
+
"@spectrum-web-components/overlay": "^0.13.3-express.0+5d9e2a2ca",
|
|
49
49
|
"tslib": "^2.0.0"
|
|
50
50
|
},
|
|
51
51
|
"devDependencies": {
|
|
52
|
-
"@spectrum-css/tooltip": "
|
|
52
|
+
"@spectrum-css/tooltip": "latest"
|
|
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": "5d9e2a2ca93deff51e4b2c7b8354f1127009a4e3"
|
|
60
60
|
}
|
package/src/Tooltip.d.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
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
|
@@ -14,6 +14,12 @@ import { html, SpectrumElement, } from '@spectrum-web-components/base';
|
|
|
14
14
|
import { property, query, } from '@spectrum-web-components/base/src/decorators.js';
|
|
15
15
|
import { openOverlay } from '@spectrum-web-components/overlay/src/loader.js';
|
|
16
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);
|
|
17
23
|
/**
|
|
18
24
|
* @element sp-tooltip
|
|
19
25
|
*
|
|
@@ -86,17 +92,23 @@ export class Tooltip extends SpectrumElement {
|
|
|
86
92
|
return;
|
|
87
93
|
event.detail.overlayContentTipElement = this.tipElement;
|
|
88
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
|
+
}
|
|
89
106
|
overlayWillOpenCallback({ trigger, }) {
|
|
90
107
|
this.setAttribute('aria-hidden', 'true');
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
this._proxy.textContent = this.textContent;
|
|
94
|
-
this._proxy.id = this._tooltipId;
|
|
95
|
-
this._proxy.hidden = true;
|
|
96
|
-
this._proxy.setAttribute('role', 'tooltip');
|
|
97
|
-
}
|
|
108
|
+
this.generateProxy();
|
|
109
|
+
this._proxy.textContent = this.textContent;
|
|
98
110
|
trigger.setAttribute('aria-describedby', this._tooltipId);
|
|
99
|
-
|
|
111
|
+
this.insertAdjacentElement('beforebegin', this._proxy);
|
|
100
112
|
}
|
|
101
113
|
overlayOpenCancelledCallback({ trigger, }) {
|
|
102
114
|
this.overlayCloseCallback({ trigger });
|
|
@@ -107,20 +119,27 @@ export class Tooltip extends SpectrumElement {
|
|
|
107
119
|
this.removeProxy();
|
|
108
120
|
}
|
|
109
121
|
removeProxy() {
|
|
110
|
-
|
|
111
|
-
this._proxy.remove();
|
|
112
|
-
this._proxy = undefined;
|
|
113
|
-
}
|
|
122
|
+
this._proxy.remove();
|
|
114
123
|
}
|
|
115
124
|
manageTooltip() {
|
|
116
125
|
const parentElement = this.parentElement;
|
|
117
126
|
if (this.selfManaged) {
|
|
127
|
+
if (this.slot) {
|
|
128
|
+
this.previousSlot = this.slot;
|
|
129
|
+
}
|
|
130
|
+
this.slot = 'self-managed-tooltip';
|
|
118
131
|
parentElement.addEventListener('pointerenter', this.openOverlay);
|
|
119
132
|
parentElement.addEventListener('focusin', this.openOverlay);
|
|
120
133
|
parentElement.addEventListener('pointerleave', this.closeOverlay);
|
|
121
134
|
parentElement.addEventListener('focusout', this.closeOverlay);
|
|
122
135
|
}
|
|
123
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
|
+
}
|
|
124
143
|
parentElement.removeEventListener('pointerenter', this.openOverlay);
|
|
125
144
|
parentElement.removeEventListener('focusin', this.openOverlay);
|
|
126
145
|
parentElement.removeEventListener('pointerleave', this.closeOverlay);
|
|
@@ -143,6 +162,7 @@ export class Tooltip extends SpectrumElement {
|
|
|
143
162
|
this.closeOverlay();
|
|
144
163
|
}
|
|
145
164
|
}
|
|
165
|
+
this.generateProxy();
|
|
146
166
|
super.update(changed);
|
|
147
167
|
}
|
|
148
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 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\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;"]}
|
|
@@ -219,6 +219,10 @@ const overlayStyles = html `
|
|
|
219
219
|
flex: none;
|
|
220
220
|
margin: 24px 0;
|
|
221
221
|
}
|
|
222
|
+
|
|
223
|
+
.self-managed:nth-child(3) {
|
|
224
|
+
margin-left: 50px;
|
|
225
|
+
}
|
|
222
226
|
</style>
|
|
223
227
|
`;
|
|
224
228
|
const overlaid = (openPlacement) => {
|
|
@@ -253,7 +257,7 @@ export const overlaidBottom = () => overlaid('bottom');
|
|
|
253
257
|
export const overlaidLeft = () => overlaid('left');
|
|
254
258
|
export const selfManaged = ({ placement, offset, delayed, }) => html `
|
|
255
259
|
${overlayStyles}
|
|
256
|
-
<sp-action-button>
|
|
260
|
+
<sp-action-button class="self-managed">
|
|
257
261
|
This is a button.
|
|
258
262
|
<sp-tooltip
|
|
259
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, 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 </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"]}
|
package/test/tooltip.test-vrt.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import * as stories from '../stories/tooltip.stories.js';
|
|
13
|
-
import { regressVisuals } from '../../../test/visual/test.js';
|
|
14
|
-
regressVisuals('TooltipStories', stories);
|
|
15
|
-
//# sourceMappingURL=tooltip.test-vrt.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.test-vrt.js","sourceRoot":"","sources":["tooltip.test-vrt.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;EAUE;AAEF,OAAO,KAAK,OAAO,MAAM,+BAA+B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D,cAAc,CAAC,gBAAgB,EAAE,OAAO,CAAC,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*/\n\nimport * as stories from '../stories/tooltip.stories.js';\nimport { regressVisuals } from '../../../test/visual/test.js';\n\nregressVisuals('TooltipStories', stories);\n"]}
|
package/test/tooltip.test.js
DELETED
|
@@ -1,100 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Copyright 2020 Adobe. All rights reserved.
|
|
3
|
-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
4
|
-
you may not use this file except in compliance with the License. You may obtain a copy
|
|
5
|
-
of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
6
|
-
|
|
7
|
-
Unless required by applicable law or agreed to in writing, software distributed under
|
|
8
|
-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9
|
-
OF ANY KIND, either express or implied. See the License for the specific language
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import '../sp-tooltip.js';
|
|
13
|
-
import { elementUpdated, expect, fixture, html, oneEvent, } from '@open-wc/testing';
|
|
14
|
-
import '@spectrum-web-components/button/sp-button.js';
|
|
15
|
-
describe('Tooltip', () => {
|
|
16
|
-
it('loads', async () => {
|
|
17
|
-
const el = await fixture(html `
|
|
18
|
-
<sp-tooltip>Help text.</sp-tooltip>
|
|
19
|
-
`);
|
|
20
|
-
await elementUpdated(el);
|
|
21
|
-
await expect(el).to.be.accessible();
|
|
22
|
-
});
|
|
23
|
-
it('self manages', async () => {
|
|
24
|
-
const button = await fixture(html `
|
|
25
|
-
<sp-button>
|
|
26
|
-
This is a button.
|
|
27
|
-
<sp-tooltip self-managed>Help text.</sp-tooltip>
|
|
28
|
-
</sp-button>
|
|
29
|
-
`);
|
|
30
|
-
const el = button.querySelector('sp-tooltip');
|
|
31
|
-
await elementUpdated(el);
|
|
32
|
-
await expect(el).to.be.accessible();
|
|
33
|
-
const opened = oneEvent(button, 'sp-opened');
|
|
34
|
-
button.focus();
|
|
35
|
-
await opened;
|
|
36
|
-
await elementUpdated(el);
|
|
37
|
-
expect(el.open).to.be.true;
|
|
38
|
-
await expect(el).to.be.accessible();
|
|
39
|
-
const closed = oneEvent(button, 'sp-closed');
|
|
40
|
-
button.blur();
|
|
41
|
-
await closed;
|
|
42
|
-
await elementUpdated(el);
|
|
43
|
-
expect(el.open).to.be.false;
|
|
44
|
-
});
|
|
45
|
-
it('accepts variants', async () => {
|
|
46
|
-
const el = await fixture(html `
|
|
47
|
-
<sp-tooltip variant="negative">Help text.</sp-tooltip>
|
|
48
|
-
`);
|
|
49
|
-
await elementUpdated(el);
|
|
50
|
-
expect(el.variant).to.equal('negative');
|
|
51
|
-
expect(el.getAttribute('variant')).to.equal('negative');
|
|
52
|
-
el.variant = 'info';
|
|
53
|
-
await elementUpdated(el);
|
|
54
|
-
expect(el.variant).to.equal('info');
|
|
55
|
-
expect(el.getAttribute('variant')).to.equal('info');
|
|
56
|
-
el.setAttribute('variant', 'positive');
|
|
57
|
-
await elementUpdated(el);
|
|
58
|
-
expect(el.variant).to.equal('positive');
|
|
59
|
-
expect(el.getAttribute('variant')).to.equal('positive');
|
|
60
|
-
el.removeAttribute('variant');
|
|
61
|
-
await elementUpdated(el);
|
|
62
|
-
expect(el.variant).to.equal('');
|
|
63
|
-
expect(el.hasAttribute('variant')).to.be.false;
|
|
64
|
-
});
|
|
65
|
-
it('validates variants', async () => {
|
|
66
|
-
const el = await fixture(html `
|
|
67
|
-
<sp-tooltip variant="other">Help text.</sp-tooltip>
|
|
68
|
-
`);
|
|
69
|
-
await elementUpdated(el);
|
|
70
|
-
expect(el.variant).to.equal('');
|
|
71
|
-
expect(el.hasAttribute('variant')).to.be.false;
|
|
72
|
-
el.variant = 'info';
|
|
73
|
-
await elementUpdated(el);
|
|
74
|
-
expect(el.variant).to.equal('info');
|
|
75
|
-
expect(el.getAttribute('variant')).to.equal('info');
|
|
76
|
-
el.variant = 'info';
|
|
77
|
-
await elementUpdated(el);
|
|
78
|
-
expect(el.variant).to.equal('info');
|
|
79
|
-
expect(el.getAttribute('variant')).to.equal('info');
|
|
80
|
-
});
|
|
81
|
-
it('answers tip query', async () => {
|
|
82
|
-
const el = await fixture(html `
|
|
83
|
-
<sp-tooltip placement="top">Help text.</sp-tooltip>
|
|
84
|
-
`);
|
|
85
|
-
await elementUpdated(el);
|
|
86
|
-
const overlayDetailQuery = {};
|
|
87
|
-
const queryOverlayDetailEvent = new CustomEvent('sp-overlay-query', {
|
|
88
|
-
bubbles: true,
|
|
89
|
-
composed: true,
|
|
90
|
-
detail: overlayDetailQuery,
|
|
91
|
-
cancelable: true,
|
|
92
|
-
});
|
|
93
|
-
el.dispatchEvent(queryOverlayDetailEvent);
|
|
94
|
-
expect(overlayDetailQuery.overlayContentTipElement).to.exist;
|
|
95
|
-
if (overlayDetailQuery.overlayContentTipElement) {
|
|
96
|
-
expect(overlayDetailQuery.overlayContentTipElement.id).to.equal('tip');
|
|
97
|
-
}
|
|
98
|
-
});
|
|
99
|
-
});
|
|
100
|
-
//# sourceMappingURL=tooltip.test.js.map
|
package/test/tooltip.test.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.test.js","sourceRoot":"","sources":["tooltip.test.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 '../sp-tooltip.js';\nimport { Tooltip } from '../';\nimport { OverlayDisplayQueryDetail } from '@spectrum-web-components/overlay';\nimport {\n elementUpdated,\n expect,\n fixture,\n html,\n oneEvent,\n} from '@open-wc/testing';\nimport { Button } from '@spectrum-web-components/button';\nimport '@spectrum-web-components/button/sp-button.js';\n\ndescribe('Tooltip', () => {\n it('loads', async () => {\n const el = await fixture<Tooltip>(\n html`\n <sp-tooltip>Help text.</sp-tooltip>\n `\n );\n\n await elementUpdated(el);\n\n await expect(el).to.be.accessible();\n });\n it('self manages', async () => {\n const button = await fixture<Button>(\n html`\n <sp-button>\n This is a button.\n <sp-tooltip self-managed>Help text.</sp-tooltip>\n </sp-button>\n `\n );\n\n const el = button.querySelector('sp-tooltip') as Tooltip;\n\n await elementUpdated(el);\n await expect(el).to.be.accessible();\n\n const opened = oneEvent(button, 'sp-opened');\n button.focus();\n await opened;\n await elementUpdated(el);\n\n expect(el.open).to.be.true;\n await expect(el).to.be.accessible();\n\n const closed = oneEvent(button, 'sp-closed');\n button.blur();\n await closed;\n await elementUpdated(el);\n\n expect(el.open).to.be.false;\n });\n it('accepts variants', async () => {\n const el = await fixture<Tooltip>(\n html`\n <sp-tooltip variant=\"negative\">Help text.</sp-tooltip>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('negative');\n expect(el.getAttribute('variant')).to.equal('negative');\n\n el.variant = 'info';\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('info');\n expect(el.getAttribute('variant')).to.equal('info');\n\n el.setAttribute('variant', 'positive');\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('positive');\n expect(el.getAttribute('variant')).to.equal('positive');\n\n el.removeAttribute('variant');\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('');\n expect(el.hasAttribute('variant')).to.be.false;\n });\n it('validates variants', async () => {\n const el = await fixture<Tooltip>(\n html`\n <sp-tooltip variant=\"other\">Help text.</sp-tooltip>\n `\n );\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('');\n expect(el.hasAttribute('variant')).to.be.false;\n\n el.variant = 'info';\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('info');\n expect(el.getAttribute('variant')).to.equal('info');\n\n el.variant = 'info';\n\n await elementUpdated(el);\n\n expect(el.variant).to.equal('info');\n expect(el.getAttribute('variant')).to.equal('info');\n });\n\n it('answers tip query', async () => {\n const el = await fixture<Tooltip>(\n html`\n <sp-tooltip placement=\"top\">Help text.</sp-tooltip>\n `\n );\n\n await elementUpdated(el);\n\n const overlayDetailQuery: OverlayDisplayQueryDetail = {};\n const queryOverlayDetailEvent =\n new CustomEvent<OverlayDisplayQueryDetail>('sp-overlay-query', {\n bubbles: true,\n composed: true,\n detail: overlayDetailQuery,\n cancelable: true,\n });\n el.dispatchEvent(queryOverlayDetailEvent);\n\n expect(overlayDetailQuery.overlayContentTipElement).to.exist;\n if (overlayDetailQuery.overlayContentTipElement) {\n expect(overlayDetailQuery.overlayContentTipElement.id).to.equal(\n 'tip'\n );\n }\n });\n});\n"]}
|