@spectrum-web-components/tooltip 0.11.13 → 0.11.14
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
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "sp-tooltip.
|
|
7
|
+
"path": "sp-tooltip.ts",
|
|
8
8
|
"declarations": [],
|
|
9
9
|
"exports": [
|
|
10
10
|
{
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
"kind": "javascript-module",
|
|
22
|
-
"path": "src/Tooltip.
|
|
22
|
+
"path": "src/Tooltip.ts",
|
|
23
23
|
"declarations": [
|
|
24
24
|
{
|
|
25
25
|
"kind": "class",
|
|
@@ -349,7 +349,7 @@
|
|
|
349
349
|
"name": "TooltipProxy",
|
|
350
350
|
"declaration": {
|
|
351
351
|
"name": "TooltipProxy",
|
|
352
|
-
"module": "src/Tooltip.
|
|
352
|
+
"module": "src/Tooltip.ts"
|
|
353
353
|
}
|
|
354
354
|
},
|
|
355
355
|
{
|
|
@@ -357,7 +357,7 @@
|
|
|
357
357
|
"name": "tooltip-proxy",
|
|
358
358
|
"declaration": {
|
|
359
359
|
"name": "TooltipProxy",
|
|
360
|
-
"module": "src/Tooltip.
|
|
360
|
+
"module": "src/Tooltip.ts"
|
|
361
361
|
}
|
|
362
362
|
},
|
|
363
363
|
{
|
|
@@ -365,7 +365,7 @@
|
|
|
365
365
|
"name": "Tooltip",
|
|
366
366
|
"declaration": {
|
|
367
367
|
"name": "Tooltip",
|
|
368
|
-
"module": "src/Tooltip.
|
|
368
|
+
"module": "src/Tooltip.ts"
|
|
369
369
|
}
|
|
370
370
|
}
|
|
371
371
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/tooltip",
|
|
3
|
-
"version": "0.11.
|
|
3
|
+
"version": "0.11.14",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
60
|
"@spectrum-web-components/base": "^0.7.4",
|
|
61
|
-
"@spectrum-web-components/overlay": "^0.19.
|
|
61
|
+
"@spectrum-web-components/overlay": "^0.19.2"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
64
|
"@spectrum-css/tooltip": "^4.0.10"
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"./sp-*.js",
|
|
70
70
|
"./**/*.dev.js"
|
|
71
71
|
],
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "5e11d828243bb3ff572c25b33a8d58844a89f524"
|
|
73
73
|
}
|
|
@@ -259,6 +259,7 @@ export const overlaidBottom = () => overlaid("bottom");
|
|
|
259
259
|
export const overlaidLeft = () => overlaid("left");
|
|
260
260
|
export const selfManaged = ({
|
|
261
261
|
placement,
|
|
262
|
+
open,
|
|
262
263
|
offset,
|
|
263
264
|
delayed
|
|
264
265
|
}) => html`
|
|
@@ -270,7 +271,7 @@ export const selfManaged = ({
|
|
|
270
271
|
placement=${placement}
|
|
271
272
|
offset=${offset}
|
|
272
273
|
?delayed=${delayed}
|
|
273
|
-
open
|
|
274
|
+
open=${open}
|
|
274
275
|
>
|
|
275
276
|
This is a tooltip.
|
|
276
277
|
</sp-tooltip>
|
|
@@ -278,6 +279,7 @@ export const selfManaged = ({
|
|
|
278
279
|
`;
|
|
279
280
|
selfManaged.args = {
|
|
280
281
|
placement: "top",
|
|
282
|
+
open: true,
|
|
281
283
|
offset: 6,
|
|
282
284
|
delayed: false
|
|
283
285
|
};
|
|
@@ -292,6 +294,18 @@ selfManaged.argTypes = {
|
|
|
292
294
|
type: { name: "number", required: false },
|
|
293
295
|
description: "The pixel distance from the parent element to place the tooltip"
|
|
294
296
|
},
|
|
297
|
+
open: {
|
|
298
|
+
name: "open",
|
|
299
|
+
type: { name: "boolean", required: false },
|
|
300
|
+
description: "Whether the tooltip is open.",
|
|
301
|
+
table: {
|
|
302
|
+
type: { summary: "boolean" },
|
|
303
|
+
defaultValue: { summary: false }
|
|
304
|
+
},
|
|
305
|
+
control: {
|
|
306
|
+
type: "boolean"
|
|
307
|
+
}
|
|
308
|
+
},
|
|
295
309
|
placement: {
|
|
296
310
|
name: "placement",
|
|
297
311
|
type: { name: "string", required: false },
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["tooltip.stories.ts"],
|
|
4
|
-
"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 '@spectrum-web-components/tooltip/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"],
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"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 '@spectrum-web-components/tooltip/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 open,\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=${open}\n >\n This is a tooltip.\n </sp-tooltip>\n </sp-action-button>\n`;\nselfManaged.args = {\n placement: 'top',\n open: true,\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 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};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|