@spectrum-web-components/popover 1.3.0-testing.0 → 1.3.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 +10 -6
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
##
|
|
1
|
+
## Overview
|
|
2
2
|
|
|
3
3
|
An `<sp-popover>` is used to display transient content (menus, options, additional actions etc.) and appears when clicking/tapping on a source (tools, buttons, etc.) It stands out via its visual style (stroke and drop shadow) and floats on top of the rest of the interface. This component does not implement the actual overlay behavior and interactions. This is handled by the [`Overlay`](../overlay) system.
|
|
4
4
|
|
|
@@ -24,7 +24,7 @@ When looking to leverage the `Popover` base class as a type and/or for extension
|
|
|
24
24
|
import { Popover } from '@spectrum-web-components/popover';
|
|
25
25
|
```
|
|
26
26
|
|
|
27
|
-
##
|
|
27
|
+
## Anatomy
|
|
28
28
|
|
|
29
29
|
```html
|
|
30
30
|
<div
|
|
@@ -39,9 +39,9 @@ import { Popover } from '@spectrum-web-components/popover';
|
|
|
39
39
|
</div>
|
|
40
40
|
```
|
|
41
41
|
|
|
42
|
-
|
|
42
|
+
### Options
|
|
43
43
|
|
|
44
|
-
|
|
44
|
+
#### Default with no tip
|
|
45
45
|
|
|
46
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.
|
|
47
47
|
|
|
@@ -64,7 +64,7 @@ Default popover with no tip and no placement. Popovers will fill up the space of
|
|
|
64
64
|
</div>
|
|
65
65
|
```
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
#### Dialog popovers
|
|
68
68
|
|
|
69
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:
|
|
70
70
|
|
|
@@ -87,7 +87,7 @@ To apply a managed amount of padding within your `<sp-popover>`, you may choose
|
|
|
87
87
|
</div>
|
|
88
88
|
```
|
|
89
89
|
|
|
90
|
-
|
|
90
|
+
#### Popover with tip
|
|
91
91
|
|
|
92
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.
|
|
93
93
|
|
|
@@ -185,3 +185,7 @@ The `placement` attribute can be used to customize how the `<sp-popover>` points
|
|
|
185
185
|
|
|
186
186
|
</sp-tab-panel>
|
|
187
187
|
</sp-tabs>
|
|
188
|
+
|
|
189
|
+
### Accessibility
|
|
190
|
+
|
|
191
|
+
For components used with a popover, see the accessibility guidelines of the particular component.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/popover",
|
|
3
|
-
"version": "1.3.0
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -58,8 +58,8 @@
|
|
|
58
58
|
"lit-html"
|
|
59
59
|
],
|
|
60
60
|
"dependencies": {
|
|
61
|
-
"@spectrum-web-components/base": "
|
|
62
|
-
"@spectrum-web-components/overlay": "
|
|
61
|
+
"@spectrum-web-components/base": "1.3.0",
|
|
62
|
+
"@spectrum-web-components/overlay": "1.3.0"
|
|
63
63
|
},
|
|
64
64
|
"devDependencies": {
|
|
65
65
|
"@spectrum-css/popover": "8.0.0-s2-foundations.17"
|