@spectrum-web-components/tooltip 0.10.16 → 0.10.17-devmode.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/package.json +21 -8
- package/sp-tooltip.dev.js +3 -0
- package/sp-tooltip.dev.js.map +7 -0
- package/sp-tooltip.js +3 -14
- package/sp-tooltip.js.map +7 -1
- package/src/Tooltip.dev.js +206 -0
- package/src/Tooltip.dev.js.map +7 -0
- package/src/Tooltip.js +190 -201
- package/src/Tooltip.js.map +7 -1
- package/src/index.dev.js +2 -0
- package/src/index.dev.js.map +7 -0
- package/src/index.js +2 -13
- package/src/index.js.map +7 -1
- package/src/spectrum-tooltip.css.dev.js +92 -0
- package/src/spectrum-tooltip.css.dev.js.map +7 -0
- package/src/spectrum-tooltip.css.js +3 -14
- package/src/spectrum-tooltip.css.js.map +7 -1
- package/src/tooltip.css.dev.js +102 -0
- package/src/tooltip.css.dev.js.map +7 -0
- package/src/tooltip.css.js +3 -14
- package/src/tooltip.css.js.map +7 -1
- package/stories/tooltip.stories.js +221 -218
- package/stories/tooltip.stories.js.map +7 -1
- package/test/benchmark/test-basic.js +5 -16
- package/test/benchmark/test-basic.js.map +7 -1
- package/test/tooltip.test-vrt.js +4 -15
- package/test/tooltip.test-vrt.js.map +7 -1
- package/test/tooltip.test.js +97 -102
- package/test/tooltip.test.js.map +7 -1
|
@@ -1,197 +1,196 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
governing permissions and limitations under the License.
|
|
11
|
-
*/
|
|
12
|
-
import '../sp-tooltip.js';
|
|
13
|
-
import { html } from '@spectrum-web-components/base';
|
|
14
|
-
import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
|
|
15
|
-
import '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';
|
|
16
|
-
import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js';
|
|
17
|
-
import '@spectrum-web-components/icons-workflow/icons/sp-icon-info.js';
|
|
18
|
-
import '@spectrum-web-components/button/sp-button.js';
|
|
19
|
-
import '@spectrum-web-components/action-button/sp-action-button.js';
|
|
20
|
-
import '@spectrum-web-components/overlay/overlay-trigger.js';
|
|
1
|
+
import "@spectrum-web-components/tooltip/sp-tooltip.js";
|
|
2
|
+
import { html } from "@spectrum-web-components/base";
|
|
3
|
+
import { ifDefined } from "@spectrum-web-components/base/src/directives.js";
|
|
4
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";
|
|
5
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark.js";
|
|
6
|
+
import "@spectrum-web-components/icons-workflow/icons/sp-icon-info.js";
|
|
7
|
+
import "@spectrum-web-components/button/sp-button.js";
|
|
8
|
+
import "@spectrum-web-components/action-button/sp-action-button.js";
|
|
9
|
+
import "@spectrum-web-components/overlay/overlay-trigger.js";
|
|
21
10
|
const iconOptions = {
|
|
22
|
-
|
|
23
|
-
|
|
11
|
+
"": () => html``,
|
|
12
|
+
negative: () => html`
|
|
24
13
|
<sp-icon-alert slot="icon"></sp-icon-alert>
|
|
25
14
|
`,
|
|
26
|
-
|
|
15
|
+
positive: () => html`
|
|
27
16
|
<sp-icon-checkmark slot="icon"></sp-icon-checkmark>
|
|
28
17
|
`,
|
|
29
|
-
|
|
18
|
+
info: () => html`
|
|
30
19
|
<sp-icon-info slot="icon"></sp-icon-info>
|
|
31
|
-
|
|
20
|
+
`
|
|
32
21
|
};
|
|
33
22
|
export default {
|
|
34
|
-
|
|
35
|
-
|
|
23
|
+
component: "sp-tooltip",
|
|
24
|
+
title: "Tooltip"
|
|
36
25
|
};
|
|
37
|
-
export const Default = ({
|
|
38
|
-
|
|
26
|
+
export const Default = ({
|
|
27
|
+
open,
|
|
28
|
+
placement,
|
|
29
|
+
variant,
|
|
30
|
+
text
|
|
31
|
+
}) => {
|
|
32
|
+
return html`
|
|
39
33
|
<sp-tooltip ?open=${open} placement=${placement} variant=${variant}>
|
|
40
34
|
${text}
|
|
41
35
|
</sp-tooltip>
|
|
42
36
|
`;
|
|
43
37
|
};
|
|
44
38
|
Default.args = {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
39
|
+
open: true,
|
|
40
|
+
placement: "top",
|
|
41
|
+
variant: "",
|
|
42
|
+
text: "Tooltip"
|
|
49
43
|
};
|
|
50
44
|
Default.argTypes = {
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
},
|
|
59
|
-
control: {
|
|
60
|
-
type: 'boolean',
|
|
61
|
-
},
|
|
45
|
+
open: {
|
|
46
|
+
name: "open",
|
|
47
|
+
type: { name: "boolean", required: false },
|
|
48
|
+
description: "Whether the tooltip is open.",
|
|
49
|
+
table: {
|
|
50
|
+
type: { summary: "boolean" },
|
|
51
|
+
defaultValue: { summary: false }
|
|
62
52
|
},
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
'auto',
|
|
75
|
-
'auto-start',
|
|
76
|
-
'auto-end',
|
|
77
|
-
'top',
|
|
78
|
-
'bottom',
|
|
79
|
-
'right',
|
|
80
|
-
'left',
|
|
81
|
-
'top-start',
|
|
82
|
-
'top-end',
|
|
83
|
-
'bottom-start',
|
|
84
|
-
'bottom-end',
|
|
85
|
-
'right-start',
|
|
86
|
-
'right-end',
|
|
87
|
-
'left-start',
|
|
88
|
-
'left-end',
|
|
89
|
-
'none',
|
|
90
|
-
],
|
|
91
|
-
},
|
|
53
|
+
control: {
|
|
54
|
+
type: "boolean"
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
placement: {
|
|
58
|
+
name: "placement",
|
|
59
|
+
type: { name: "string", required: false },
|
|
60
|
+
description: "The placement of the tooltip in relation to its parent",
|
|
61
|
+
table: {
|
|
62
|
+
type: { summary: "string" },
|
|
63
|
+
defaultValue: { summary: "top" }
|
|
92
64
|
},
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
65
|
+
control: {
|
|
66
|
+
type: "inline-radio",
|
|
67
|
+
options: [
|
|
68
|
+
"auto",
|
|
69
|
+
"auto-start",
|
|
70
|
+
"auto-end",
|
|
71
|
+
"top",
|
|
72
|
+
"bottom",
|
|
73
|
+
"right",
|
|
74
|
+
"left",
|
|
75
|
+
"top-start",
|
|
76
|
+
"top-end",
|
|
77
|
+
"bottom-start",
|
|
78
|
+
"bottom-end",
|
|
79
|
+
"right-start",
|
|
80
|
+
"right-end",
|
|
81
|
+
"left-start",
|
|
82
|
+
"left-end",
|
|
83
|
+
"none"
|
|
84
|
+
]
|
|
85
|
+
}
|
|
86
|
+
},
|
|
87
|
+
text: {
|
|
88
|
+
name: "text",
|
|
89
|
+
type: { name: "string", required: false },
|
|
90
|
+
table: {
|
|
91
|
+
type: { summary: "string" },
|
|
92
|
+
defaultValue: { summary: "" }
|
|
101
93
|
},
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
type: 'inline-radio',
|
|
112
|
-
options: ['info', 'positive', 'negative', ''],
|
|
113
|
-
},
|
|
94
|
+
control: "text"
|
|
95
|
+
},
|
|
96
|
+
variant: {
|
|
97
|
+
name: "variant",
|
|
98
|
+
type: { name: "string", required: false },
|
|
99
|
+
description: "The style of the tooltip.",
|
|
100
|
+
table: {
|
|
101
|
+
type: { summary: "string" },
|
|
102
|
+
defaultValue: { summary: "" }
|
|
114
103
|
},
|
|
104
|
+
control: {
|
|
105
|
+
type: "inline-radio",
|
|
106
|
+
options: ["info", "positive", "negative", ""]
|
|
107
|
+
}
|
|
108
|
+
}
|
|
115
109
|
};
|
|
116
|
-
export const wIcon = ({
|
|
117
|
-
|
|
110
|
+
export const wIcon = ({
|
|
111
|
+
open,
|
|
112
|
+
placement,
|
|
113
|
+
variant,
|
|
114
|
+
text
|
|
115
|
+
}) => {
|
|
116
|
+
return html`
|
|
118
117
|
<sp-tooltip ?open=${open} placement=${placement} variant=${variant}>
|
|
119
|
-
${!!variant ? iconOptions[variant]() : html
|
|
118
|
+
${!!variant ? iconOptions[variant]() : html``} ${text}
|
|
120
119
|
</sp-tooltip>
|
|
121
120
|
`;
|
|
122
121
|
};
|
|
123
122
|
wIcon.args = {
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
123
|
+
open: true,
|
|
124
|
+
placement: "top",
|
|
125
|
+
text: "Tooltip",
|
|
126
|
+
variant: "negative"
|
|
128
127
|
};
|
|
129
128
|
wIcon.argTypes = {
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
},
|
|
138
|
-
control: {
|
|
139
|
-
type: 'boolean',
|
|
140
|
-
},
|
|
129
|
+
open: {
|
|
130
|
+
name: "open",
|
|
131
|
+
type: { name: "boolean", required: false },
|
|
132
|
+
description: "Whether the tooltip is open.",
|
|
133
|
+
table: {
|
|
134
|
+
type: { summary: "boolean" },
|
|
135
|
+
defaultValue: { summary: false }
|
|
141
136
|
},
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
'auto',
|
|
154
|
-
'auto-start',
|
|
155
|
-
'auto-end',
|
|
156
|
-
'top',
|
|
157
|
-
'bottom',
|
|
158
|
-
'right',
|
|
159
|
-
'left',
|
|
160
|
-
'top-start',
|
|
161
|
-
'top-end',
|
|
162
|
-
'bottom-start',
|
|
163
|
-
'bottom-end',
|
|
164
|
-
'right-start',
|
|
165
|
-
'right-end',
|
|
166
|
-
'left-start',
|
|
167
|
-
'left-end',
|
|
168
|
-
'none',
|
|
169
|
-
],
|
|
170
|
-
},
|
|
137
|
+
control: {
|
|
138
|
+
type: "boolean"
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
placement: {
|
|
142
|
+
name: "placement",
|
|
143
|
+
type: { name: "string", required: false },
|
|
144
|
+
description: "The placement of the tooltip in relation to its parent",
|
|
145
|
+
table: {
|
|
146
|
+
type: { summary: "string" },
|
|
147
|
+
defaultValue: { summary: "top" }
|
|
171
148
|
},
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
149
|
+
control: {
|
|
150
|
+
type: "inline-radio",
|
|
151
|
+
options: [
|
|
152
|
+
"auto",
|
|
153
|
+
"auto-start",
|
|
154
|
+
"auto-end",
|
|
155
|
+
"top",
|
|
156
|
+
"bottom",
|
|
157
|
+
"right",
|
|
158
|
+
"left",
|
|
159
|
+
"top-start",
|
|
160
|
+
"top-end",
|
|
161
|
+
"bottom-start",
|
|
162
|
+
"bottom-end",
|
|
163
|
+
"right-start",
|
|
164
|
+
"right-end",
|
|
165
|
+
"left-start",
|
|
166
|
+
"left-end",
|
|
167
|
+
"none"
|
|
168
|
+
]
|
|
169
|
+
}
|
|
170
|
+
},
|
|
171
|
+
text: {
|
|
172
|
+
name: "text",
|
|
173
|
+
type: { name: "string", required: false },
|
|
174
|
+
table: {
|
|
175
|
+
type: { summary: "string" },
|
|
176
|
+
defaultValue: { summary: "" }
|
|
180
177
|
},
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
type: 'inline-radio',
|
|
190
|
-
options: ['info', 'positive', 'negative', ''],
|
|
191
|
-
},
|
|
178
|
+
control: "text"
|
|
179
|
+
},
|
|
180
|
+
variant: {
|
|
181
|
+
name: "variant",
|
|
182
|
+
type: { name: "string", required: false },
|
|
183
|
+
table: {
|
|
184
|
+
type: { summary: "string" },
|
|
185
|
+
defaultValue: { summary: "" }
|
|
192
186
|
},
|
|
187
|
+
control: {
|
|
188
|
+
type: "inline-radio",
|
|
189
|
+
options: ["info", "positive", "negative", ""]
|
|
190
|
+
}
|
|
191
|
+
}
|
|
193
192
|
};
|
|
194
|
-
const overlayStyles = html
|
|
193
|
+
const overlayStyles = html`
|
|
195
194
|
<style>
|
|
196
195
|
html,
|
|
197
196
|
body,
|
|
@@ -226,21 +225,21 @@ const overlayStyles = html `
|
|
|
226
225
|
</style>
|
|
227
226
|
`;
|
|
228
227
|
const overlaid = (openPlacement) => {
|
|
229
|
-
|
|
228
|
+
return html`
|
|
230
229
|
${overlayStyles}
|
|
231
230
|
${[
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
231
|
+
["bottom", ""],
|
|
232
|
+
["left", "negative"],
|
|
233
|
+
["right", "positive"],
|
|
234
|
+
["top", "info"]
|
|
235
|
+
].map(([placement, variant]) => {
|
|
236
|
+
return html`
|
|
238
237
|
<overlay-trigger
|
|
239
238
|
placement=${placement}
|
|
240
|
-
open=${ifDefined(openPlacement === placement ?
|
|
239
|
+
open=${ifDefined(openPlacement === placement ? "hover" : void 0)}
|
|
241
240
|
>
|
|
242
241
|
<sp-button label="${placement} test" slot="trigger">
|
|
243
|
-
Hover for ${variant ? variant :
|
|
242
|
+
Hover for ${variant ? variant : "tooltip"} on the
|
|
244
243
|
${placement}
|
|
245
244
|
</sp-button>
|
|
246
245
|
<sp-tooltip slot="hover-content" variant=${variant}>
|
|
@@ -248,14 +247,18 @@ const overlaid = (openPlacement) => {
|
|
|
248
247
|
</sp-tooltip>
|
|
249
248
|
</overlay-trigger>
|
|
250
249
|
`;
|
|
251
|
-
|
|
250
|
+
})}
|
|
252
251
|
`;
|
|
253
252
|
};
|
|
254
|
-
export const overlaidTop = () => overlaid(
|
|
255
|
-
export const overlaidRight = () => overlaid(
|
|
256
|
-
export const overlaidBottom = () => overlaid(
|
|
257
|
-
export const overlaidLeft = () => overlaid(
|
|
258
|
-
export const selfManaged = ({
|
|
253
|
+
export const overlaidTop = () => overlaid("top");
|
|
254
|
+
export const overlaidRight = () => overlaid("right");
|
|
255
|
+
export const overlaidBottom = () => overlaid("bottom");
|
|
256
|
+
export const overlaidLeft = () => overlaid("left");
|
|
257
|
+
export const selfManaged = ({
|
|
258
|
+
placement,
|
|
259
|
+
offset,
|
|
260
|
+
delayed
|
|
261
|
+
}) => html`
|
|
259
262
|
${overlayStyles}
|
|
260
263
|
<sp-action-button class="self-managed">
|
|
261
264
|
This is a button.
|
|
@@ -271,50 +274,50 @@ export const selfManaged = ({ placement, offset, delayed, }) => html `
|
|
|
271
274
|
</sp-action-button>
|
|
272
275
|
`;
|
|
273
276
|
selfManaged.args = {
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
+
placement: "top",
|
|
278
|
+
offset: 6,
|
|
279
|
+
delayed: false
|
|
277
280
|
};
|
|
278
281
|
selfManaged.argTypes = {
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
},
|
|
297
|
-
control: {
|
|
298
|
-
type: 'inline-radio',
|
|
299
|
-
options: [
|
|
300
|
-
'auto',
|
|
301
|
-
'auto-start',
|
|
302
|
-
'auto-end',
|
|
303
|
-
'top',
|
|
304
|
-
'bottom',
|
|
305
|
-
'right',
|
|
306
|
-
'left',
|
|
307
|
-
'top-start',
|
|
308
|
-
'top-end',
|
|
309
|
-
'bottom-start',
|
|
310
|
-
'bottom-end',
|
|
311
|
-
'right-start',
|
|
312
|
-
'right-end',
|
|
313
|
-
'left-start',
|
|
314
|
-
'left-end',
|
|
315
|
-
'none',
|
|
316
|
-
],
|
|
317
|
-
},
|
|
282
|
+
delayed: {
|
|
283
|
+
name: "delayed",
|
|
284
|
+
type: { name: "boolean", required: false },
|
|
285
|
+
description: "Whether to manage the tooltip with the warmup timer"
|
|
286
|
+
},
|
|
287
|
+
offset: {
|
|
288
|
+
name: "offset",
|
|
289
|
+
type: { name: "number", required: false },
|
|
290
|
+
description: "The pixel distance from the parent element to place the tooltip"
|
|
291
|
+
},
|
|
292
|
+
placement: {
|
|
293
|
+
name: "placement",
|
|
294
|
+
type: { name: "string", required: false },
|
|
295
|
+
description: "The placement of the tooltip in relation to its parent",
|
|
296
|
+
table: {
|
|
297
|
+
type: { summary: "string" },
|
|
298
|
+
defaultValue: { summary: "top" }
|
|
318
299
|
},
|
|
300
|
+
control: {
|
|
301
|
+
type: "inline-radio",
|
|
302
|
+
options: [
|
|
303
|
+
"auto",
|
|
304
|
+
"auto-start",
|
|
305
|
+
"auto-end",
|
|
306
|
+
"top",
|
|
307
|
+
"bottom",
|
|
308
|
+
"right",
|
|
309
|
+
"left",
|
|
310
|
+
"top-start",
|
|
311
|
+
"top-end",
|
|
312
|
+
"bottom-start",
|
|
313
|
+
"bottom-end",
|
|
314
|
+
"right-start",
|
|
315
|
+
"right-end",
|
|
316
|
+
"left-start",
|
|
317
|
+
"left-end",
|
|
318
|
+
"none"
|
|
319
|
+
]
|
|
320
|
+
}
|
|
321
|
+
}
|
|
319
322
|
};
|
|
320
|
-
//# sourceMappingURL=tooltip.stories.js.map
|
|
323
|
+
//# sourceMappingURL=tooltip.stories.js.map
|
|
@@ -1 +1,7 @@
|
|
|
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"]}
|
|
1
|
+
{
|
|
2
|
+
"version": 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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",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,18 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
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 '@spectrum-web-components/tooltip/sp-tooltip.js';
|
|
13
|
-
import { html } from 'lit';
|
|
14
|
-
import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
|
|
15
|
-
measureFixtureCreation(html `
|
|
1
|
+
import "@spectrum-web-components/tooltip/sp-tooltip.js";
|
|
2
|
+
import { html } from "lit";
|
|
3
|
+
import { measureFixtureCreation } from "../../../../test/benchmark/helpers.js";
|
|
4
|
+
measureFixtureCreation(html`
|
|
16
5
|
<sp-tooltip open>Tip me!</sp-tooltip>
|
|
17
6
|
`);
|
|
18
|
-
//# sourceMappingURL=test-basic.js.map
|
|
7
|
+
//# sourceMappingURL=test-basic.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["test-basic.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*/\n\nimport '@spectrum-web-components/tooltip/sp-tooltip.js';\nimport { html } from 'lit';\nimport { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';\n\nmeasureFixtureCreation(html`\n <sp-tooltip open>Tip me!</sp-tooltip>\n`);\n"],
|
|
5
|
+
"mappings": "AAYA;AACA;AACA;AAEA,uBAAuB;AAAA;AAAA,CAEtB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/test/tooltip.test-vrt.js
CHANGED
|
@@ -1,15 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
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
|
+
import * as stories from "../stories/tooltip.stories.js";
|
|
2
|
+
import { regressVisuals } from "../../../test/visual/test.js";
|
|
3
|
+
regressVisuals("TooltipStories", stories);
|
|
4
|
+
//# sourceMappingURL=tooltip.test-vrt.js.map
|