@spectrum-web-components/popover 0.34.0 → 0.35.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/README.md +33 -96
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -29,20 +29,12 @@ import { Popover } from '@spectrum-web-components/popover';
|
|
|
29
29
|
```html
|
|
30
30
|
<div
|
|
31
31
|
style="
|
|
32
|
-
color: var(--spectrum-gray-800);
|
|
33
|
-
height: 200px;
|
|
34
32
|
position: relative;
|
|
35
|
-
|
|
36
|
-
max-width: 100%;
|
|
33
|
+
height: 100px;
|
|
37
34
|
"
|
|
38
35
|
>
|
|
39
|
-
<sp-popover open
|
|
40
|
-
|
|
41
|
-
<h3 slot="heading">Popover title</h3>
|
|
42
|
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
|
|
43
|
-
Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
|
|
44
|
-
sweet roll cake danish candy biscuit halvah
|
|
45
|
-
</sp-dialog>
|
|
36
|
+
<sp-popover open>
|
|
37
|
+
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
|
|
46
38
|
</sp-popover>
|
|
47
39
|
</div>
|
|
48
40
|
```
|
|
@@ -51,80 +43,53 @@ import { Popover } from '@spectrum-web-components/popover';
|
|
|
51
43
|
|
|
52
44
|
### Default with no tip
|
|
53
45
|
|
|
54
|
-
Default popover with no tip and no placement. Popovers will fill up the space of
|
|
55
|
-
element by default. The default popover has no padding by default
|
|
46
|
+
Default popover with no tip and no placement. Popovers will fill up the space of their containing element by default. The default popover has no padding.
|
|
56
47
|
|
|
57
48
|
```html
|
|
58
49
|
<div
|
|
59
50
|
style="
|
|
60
|
-
color: var(--spectrum-gray-800);
|
|
61
|
-
height: 200px;
|
|
62
51
|
position: relative;
|
|
63
|
-
|
|
64
|
-
max-width:
|
|
52
|
+
height: 180px;
|
|
53
|
+
max-width: 320px;
|
|
65
54
|
"
|
|
66
55
|
>
|
|
67
|
-
<sp-popover
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
style="
|
|
75
|
-
font-size: 18px;
|
|
76
|
-
font-weight: 700;
|
|
77
|
-
padding-bottom: 30px;
|
|
78
|
-
"
|
|
79
|
-
>
|
|
80
|
-
Popover title
|
|
81
|
-
</div>
|
|
82
|
-
<div style="font-size: 14px">
|
|
83
|
-
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly
|
|
84
|
-
caramels. Icing soufflé chupa chups donut cheesecake. Jelly-o
|
|
85
|
-
chocolate cake sweet roll cake danish candy biscuit halvah
|
|
86
|
-
</div>
|
|
87
|
-
</div>
|
|
56
|
+
<sp-popover variant="default" open>
|
|
57
|
+
<h2>Popover title</h2>
|
|
58
|
+
<p>
|
|
59
|
+
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
|
|
60
|
+
Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
|
|
61
|
+
sweet roll cake danish candy biscuit halvah
|
|
62
|
+
</p>
|
|
88
63
|
</sp-popover>
|
|
89
64
|
</div>
|
|
90
65
|
```
|
|
91
66
|
|
|
92
67
|
### Dialog popovers
|
|
93
68
|
|
|
94
|
-
To apply a managed
|
|
69
|
+
To apply a managed amount of padding within your `<sp-popover>`, you may choose to wrap your slotted content in an `<sp-dialog>` element, as seen below:
|
|
95
70
|
|
|
96
71
|
```html
|
|
97
72
|
<div
|
|
98
73
|
style="
|
|
99
|
-
color: var(--spectrum-gray-800);
|
|
100
|
-
height: 200px;
|
|
101
74
|
position: relative;
|
|
102
|
-
|
|
103
|
-
max-width:
|
|
75
|
+
height: 250px;
|
|
76
|
+
max-width: 320px;
|
|
104
77
|
"
|
|
105
78
|
>
|
|
106
|
-
<sp-popover open
|
|
107
|
-
<
|
|
108
|
-
|
|
109
|
-
font-size: 18px;
|
|
110
|
-
font-weight: 700;
|
|
111
|
-
padding-bottom: 30px;
|
|
112
|
-
"
|
|
113
|
-
>
|
|
114
|
-
Popover title
|
|
115
|
-
</div>
|
|
116
|
-
<div style="font-size: 14px">
|
|
79
|
+
<sp-popover open>
|
|
80
|
+
<sp-dialog>
|
|
81
|
+
<h3 slot="heading">Popover title</h3>
|
|
117
82
|
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
|
|
118
83
|
Icing soufflé chupa chups donut cheesecake. Jelly-o chocolate cake
|
|
119
84
|
sweet roll cake danish candy biscuit halvah
|
|
120
|
-
</
|
|
85
|
+
</sp-dialog>
|
|
121
86
|
</sp-popover>
|
|
122
87
|
</div>
|
|
123
88
|
```
|
|
124
89
|
|
|
125
90
|
### Popover with tip
|
|
126
91
|
|
|
127
|
-
The `placement` attribute can be used to customize
|
|
92
|
+
The `placement` attribute can be used to customize how the `<sp-popover>` points to its related content. `placement="top"` will point down to the related content from the top, etc.
|
|
128
93
|
|
|
129
94
|
<sp-tabs selected="top" auto label="Popover tip placements">
|
|
130
95
|
<sp-tab value="top">Top</sp-tab>
|
|
@@ -133,19 +98,12 @@ The `placement` attribute can be used to customize from where the `<sp-popover>`
|
|
|
133
98
|
```html demo
|
|
134
99
|
<div
|
|
135
100
|
style="
|
|
136
|
-
color: var(--spectrum-gray-800);
|
|
137
|
-
height: 200px;
|
|
138
101
|
position: relative;
|
|
139
|
-
|
|
140
|
-
max-width:
|
|
102
|
+
height: 250px;
|
|
103
|
+
max-width: 320px;
|
|
141
104
|
"
|
|
142
105
|
>
|
|
143
|
-
<sp-popover
|
|
144
|
-
placement="top"
|
|
145
|
-
tip
|
|
146
|
-
open
|
|
147
|
-
style="--spectrum-popover-dialog-min-width: 0;"
|
|
148
|
-
>
|
|
106
|
+
<sp-popover placement="top" tip open>
|
|
149
107
|
<sp-dialog>
|
|
150
108
|
<h3 slot="heading">Popover title</h3>
|
|
151
109
|
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
|
|
@@ -163,19 +121,12 @@ The `placement` attribute can be used to customize from where the `<sp-popover>`
|
|
|
163
121
|
```html demo
|
|
164
122
|
<div
|
|
165
123
|
style="
|
|
166
|
-
color: var(--spectrum-gray-800);
|
|
167
|
-
height: 200px;
|
|
168
124
|
position: relative;
|
|
169
|
-
|
|
170
|
-
max-width:
|
|
125
|
+
height: 200px;
|
|
126
|
+
max-width: 320px;
|
|
171
127
|
"
|
|
172
128
|
>
|
|
173
|
-
<sp-popover
|
|
174
|
-
placement="right"
|
|
175
|
-
tip
|
|
176
|
-
open
|
|
177
|
-
style="--spectrum-popover-dialog-min-width: 0;"
|
|
178
|
-
>
|
|
129
|
+
<sp-popover placement="right" tip open>
|
|
179
130
|
<sp-dialog>
|
|
180
131
|
<h3 slot="heading">Popover title</h3>
|
|
181
132
|
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
|
|
@@ -193,19 +144,12 @@ The `placement` attribute can be used to customize from where the `<sp-popover>`
|
|
|
193
144
|
```html demo
|
|
194
145
|
<div
|
|
195
146
|
style="
|
|
196
|
-
color: var(--spectrum-gray-800);
|
|
197
|
-
height: 200px;
|
|
198
147
|
position: relative;
|
|
199
|
-
|
|
200
|
-
max-width:
|
|
148
|
+
height: 200px;
|
|
149
|
+
max-width: 320px;
|
|
201
150
|
"
|
|
202
151
|
>
|
|
203
|
-
<sp-popover
|
|
204
|
-
placement="bottom"
|
|
205
|
-
tip
|
|
206
|
-
open
|
|
207
|
-
style="--spectrum-popover-dialog-min-width: 0;"
|
|
208
|
-
>
|
|
152
|
+
<sp-popover placement="bottom" tip open>
|
|
209
153
|
<sp-dialog>
|
|
210
154
|
<h3 slot="heading">Popover title</h3>
|
|
211
155
|
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
|
|
@@ -223,19 +167,12 @@ The `placement` attribute can be used to customize from where the `<sp-popover>`
|
|
|
223
167
|
```html demo
|
|
224
168
|
<div
|
|
225
169
|
style="
|
|
226
|
-
color: var(--spectrum-gray-800);
|
|
227
|
-
height: 200px;
|
|
228
170
|
position: relative;
|
|
229
|
-
|
|
230
|
-
max-width:
|
|
171
|
+
height: 200px;
|
|
172
|
+
max-width: 320px;
|
|
231
173
|
"
|
|
232
174
|
>
|
|
233
|
-
<sp-popover
|
|
234
|
-
placement="left"
|
|
235
|
-
tip
|
|
236
|
-
open
|
|
237
|
-
style="--spectrum-popover-dialog-min-width: 0;"
|
|
238
|
-
>
|
|
175
|
+
<sp-popover placement="left" tip open>
|
|
239
176
|
<sp-dialog>
|
|
240
177
|
<h3 slot="heading">Popover title</h3>
|
|
241
178
|
Cupcake ipsum dolor sit amet jelly beans. Chocolate jelly caramels.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/popover",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.35.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -57,11 +57,11 @@
|
|
|
57
57
|
"lit-html"
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@spectrum-web-components/base": "^0.
|
|
61
|
-
"@spectrum-web-components/overlay": "^0.
|
|
60
|
+
"@spectrum-web-components/base": "^0.35.0",
|
|
61
|
+
"@spectrum-web-components/overlay": "^0.35.0"
|
|
62
62
|
},
|
|
63
63
|
"devDependencies": {
|
|
64
|
-
"@spectrum-css/popover": "^6.0.
|
|
64
|
+
"@spectrum-css/popover": "^6.0.60"
|
|
65
65
|
},
|
|
66
66
|
"types": "./src/index.d.ts",
|
|
67
67
|
"customElements": "custom-elements.json",
|
|
@@ -69,5 +69,5 @@
|
|
|
69
69
|
"./sp-*.js",
|
|
70
70
|
"./**/*.dev.js"
|
|
71
71
|
],
|
|
72
|
-
"gitHead": "
|
|
72
|
+
"gitHead": "1ee5a6c92838cdf48321276d97f61c20f8476ac1"
|
|
73
73
|
}
|