@brightspace-ui/core 3.28.7 → 3.29.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.
|
@@ -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",
|