@brightspace-ui/core 3.28.7 → 3.29.0
Sign up to get free protection for your applications and to get access to all the features.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# Overflow Groups
|
|
2
|
-
|
|
2
|
+
An Overflow Group adds responsive behaviour to a group of buttons, links, or menus.
|
|
3
3
|
|
|
4
|
-
<!-- docs: demo autoSize:false display:block size:
|
|
4
|
+
<!-- docs: demo autoSize:false display:block size:small -->
|
|
5
5
|
```html
|
|
6
6
|
<script type="module">
|
|
7
7
|
import '@brightspace-ui/core/components/overflow-group/overflow-group.js';
|
|
@@ -26,11 +26,27 @@ The `d2l-overflow-group` element can be used to add responsiveness to a set of b
|
|
|
26
26
|
<d2l-button>Delete</d2l-button>
|
|
27
27
|
</d2l-overflow-group>
|
|
28
28
|
```
|
|
29
|
+
## Best Practices
|
|
30
|
+
|
|
31
|
+
<!-- docs: start best practices -->
|
|
32
|
+
<!-- docs: start dos -->
|
|
33
|
+
* Use when grouping 3 or more adjacent actions
|
|
34
|
+
* Consider whether visible actions can be reduced
|
|
35
|
+
* Use `max-to-show` to set an upper limit on how many actions are displayed before overflowing; this can prevent users from feeling overwhelmed with top-level choices
|
|
36
|
+
* Use the `subtle` `opener-style` if the actions are [Subtle Buttons](../../components/button#d2l-button-subtle)
|
|
37
|
+
<!-- docs: end dos -->
|
|
38
|
+
|
|
39
|
+
<!-- docs: start donts -->
|
|
40
|
+
* Avoid using `min-to-show` unless users are heavily impacted when the first 1 or 2 actions overflow into the More Actions menu
|
|
41
|
+
* Don't use the `icon` `opener-type` unless it's for page-level actions in the top right corner of the page, or if space is severely limited
|
|
42
|
+
<!-- docs: end donts -->
|
|
43
|
+
<!-- docs: end best practices -->
|
|
29
44
|
|
|
30
45
|
## Overflow Group [d2l-overflow-group]
|
|
46
|
+
|
|
31
47
|
Items added to this container element will no longer wrap onto a second line when the container becomes too small, but will be added to a dropdown menu with configurable styling.
|
|
32
48
|
|
|
33
|
-
<!-- docs: demo code properties name:d2l-overflow-group sandboxTitle:'Overflow Group' autoSize:false display:block size:
|
|
49
|
+
<!-- docs: demo code properties name:d2l-overflow-group sandboxTitle:'Overflow Group' autoSize:false display:block size:small -->
|
|
34
50
|
```html
|
|
35
51
|
<script type="module">
|
|
36
52
|
import '@brightspace-ui/core/components/overflow-group/overflow-group.js';
|
|
@@ -108,3 +124,9 @@ getOverflowContainer(overflowItems, mini) {
|
|
|
108
124
|
else return html`<d2l-dropdown-button text="Overflow Menu"><d2l-dropdown-menu>${overflowItems}</d2l-dropdown-menu></d2l-dropdown-button>`;
|
|
109
125
|
}
|
|
110
126
|
```
|
|
127
|
+
|
|
128
|
+
## Accessibility
|
|
129
|
+
|
|
130
|
+
Navigation and focus order are impacted when items overflow the viewport; they are physically moved into the More Actions menu. Since this effect is not limited to visual presentation, it affects both screen reader users and sighted users equally.
|
|
131
|
+
|
|
132
|
+
The accessibility and keyboard interaction of the More Actions menu aligns with [W3C's best practices for menus](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) — see [Menu](../menu) for more information.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.29.0",
|
|
4
4
|
"description": "A collection of accessible, free, open-source web components for building Brightspace applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": "https://github.com/BrightspaceUI/core.git",
|