@brightspace-ui/core 3.184.2 → 3.186.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.
|
@@ -8,9 +8,15 @@
|
|
|
8
8
|
import '../../demo/demo-page.js';
|
|
9
9
|
import '../../button/button-subtle.js';
|
|
10
10
|
import '../../button/button-toggle.js';
|
|
11
|
+
import '../list-item-button.js';
|
|
11
12
|
import '../list-item-content.js';
|
|
12
13
|
import '../list-item.js';
|
|
13
14
|
import '../list.js';
|
|
15
|
+
window.wireupListTileToggle = demo => {
|
|
16
|
+
demo.querySelector('d2l-button-toggle').addEventListener('d2l-button-toggle-change', e => {
|
|
17
|
+
demo.querySelector('d2l-list').layout = (e.target.pressed ? 'tiles' : 'list');
|
|
18
|
+
});
|
|
19
|
+
};
|
|
14
20
|
</script>
|
|
15
21
|
<style>
|
|
16
22
|
d2l-button-toggle {
|
|
@@ -21,7 +27,7 @@
|
|
|
21
27
|
<body unresolved>
|
|
22
28
|
<d2l-demo-page page-title="d2l-list">
|
|
23
29
|
|
|
24
|
-
<h2>
|
|
30
|
+
<h2>No Action</h2>
|
|
25
31
|
|
|
26
32
|
<d2l-demo-snippet>
|
|
27
33
|
<template>
|
|
@@ -53,11 +59,81 @@
|
|
|
53
59
|
</d2l-list-item>
|
|
54
60
|
</d2l-list>
|
|
55
61
|
<script data-demo-hide>
|
|
56
|
-
(demo =>
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
62
|
+
(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
|
|
63
|
+
</script>
|
|
64
|
+
</template>
|
|
65
|
+
</d2l-demo-snippet>
|
|
66
|
+
|
|
67
|
+
<h2>Links</h2>
|
|
68
|
+
|
|
69
|
+
<d2l-demo-snippet>
|
|
70
|
+
<template>
|
|
71
|
+
<d2l-button-toggle pressed>
|
|
72
|
+
<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
|
|
73
|
+
<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
|
|
74
|
+
</d2l-button-toggle>
|
|
75
|
+
<d2l-list layout="tiles">
|
|
76
|
+
<d2l-list-item label="item 1" href="http://www.d2l.com">
|
|
77
|
+
<d2l-list-item-content>
|
|
78
|
+
<div>Identify categories of physical activities</div>
|
|
79
|
+
<div slot="secondary">Secondary Information</div>
|
|
80
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
81
|
+
</d2l-list-item-content>
|
|
82
|
+
</d2l-list-item>
|
|
83
|
+
<d2l-list-item label="item 2" href="http://www.d2l.com">
|
|
84
|
+
<d2l-list-item-content>
|
|
85
|
+
<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
|
|
86
|
+
<div slot="secondary">Secondary Information</div>
|
|
87
|
+
<div slot="supporting-info">Specific Expectation B2.1</div>
|
|
88
|
+
</d2l-list-item-content>
|
|
89
|
+
</d2l-list-item>
|
|
90
|
+
<d2l-list-item label="item 3" href="http://www.d2l.com">
|
|
91
|
+
<d2l-list-item-content>
|
|
92
|
+
<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
|
|
93
|
+
<div slot="secondary">Secondary Information</div>
|
|
94
|
+
<div slot="supporting-info">Specific Expectation B2.2</div>
|
|
95
|
+
</d2l-list-item-content>
|
|
96
|
+
</d2l-list-item>
|
|
97
|
+
</d2l-list>
|
|
98
|
+
<script data-demo-hide>
|
|
99
|
+
(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
|
|
100
|
+
</script>
|
|
101
|
+
</template>
|
|
102
|
+
</d2l-demo-snippet>
|
|
103
|
+
|
|
104
|
+
<h2>Buttons</h2>
|
|
105
|
+
|
|
106
|
+
<d2l-demo-snippet>
|
|
107
|
+
<template>
|
|
108
|
+
<d2l-button-toggle pressed>
|
|
109
|
+
<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
|
|
110
|
+
<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
|
|
111
|
+
</d2l-button-toggle>
|
|
112
|
+
<d2l-list layout="tiles">
|
|
113
|
+
<d2l-list-item-button label="item 1" href="http://www.d2l.com">
|
|
114
|
+
<d2l-list-item-content>
|
|
115
|
+
<div>Identify categories of physical activities</div>
|
|
116
|
+
<div slot="secondary">Secondary Information</div>
|
|
117
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
118
|
+
</d2l-list-item-content>
|
|
119
|
+
</d2l-list-item-button>
|
|
120
|
+
<d2l-list-item-button label="item 2" href="http://www.d2l.com">
|
|
121
|
+
<d2l-list-item-content>
|
|
122
|
+
<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
|
|
123
|
+
<div slot="secondary">Secondary Information</div>
|
|
124
|
+
<div slot="supporting-info">Specific Expectation B2.1</div>
|
|
125
|
+
</d2l-list-item-content>
|
|
126
|
+
</d2l-list-item-button>
|
|
127
|
+
<d2l-list-item-button label="item 3" href="http://www.d2l.com">
|
|
128
|
+
<d2l-list-item-content>
|
|
129
|
+
<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
|
|
130
|
+
<div slot="secondary">Secondary Information</div>
|
|
131
|
+
<div slot="supporting-info">Specific Expectation B2.2</div>
|
|
132
|
+
</d2l-list-item-content>
|
|
133
|
+
</d2l-list-item-button>
|
|
134
|
+
</d2l-list>
|
|
135
|
+
<script data-demo-hide>
|
|
136
|
+
(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
|
|
61
137
|
</script>
|
|
62
138
|
</template>
|
|
63
139
|
</d2l-demo-snippet>
|
|
@@ -226,7 +226,8 @@ class ListItemGenericLayout extends LitElement {
|
|
|
226
226
|
[end];
|
|
227
227
|
height: 100%;
|
|
228
228
|
}
|
|
229
|
-
:host([layout="tile"]) ::slotted([slot="content"])
|
|
229
|
+
:host([layout="tile"]) ::slotted([slot="content"]),
|
|
230
|
+
:host([layout="tile"]) ::slotted([slot="content-action"]) {
|
|
230
231
|
grid-column: start / end;
|
|
231
232
|
grid-row: start / end;
|
|
232
233
|
}
|
|
@@ -238,7 +239,6 @@ class ListItemGenericLayout extends LitElement {
|
|
|
238
239
|
:host([layout="tile"]) slot[name="add-top"],
|
|
239
240
|
:host([layout="tile"]) slot[name="control-container"],
|
|
240
241
|
:host([layout="tile"]) slot[name="before-content"],
|
|
241
|
-
:host([layout="tile"]) slot[name="content-action"],
|
|
242
242
|
:host([layout="tile"]) slot[name="outside-control"],
|
|
243
243
|
:host([layout="tile"]) slot[name="outside-control-action"],
|
|
244
244
|
:host([layout="tile"]) slot[name="color-indicator"],
|
|
@@ -217,7 +217,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
217
217
|
--d2l-list-item-content-text-outline: 2px solid var(--d2l-color-celestine);
|
|
218
218
|
--d2l-list-item-content-text-outline-offset: 1px;
|
|
219
219
|
}
|
|
220
|
-
:host([_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content-none {
|
|
220
|
+
:host([_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content.d2l-list-item-content-none {
|
|
221
221
|
border-radius: 6px;
|
|
222
222
|
outline: var(--d2l-list-item-content-text-outline);
|
|
223
223
|
outline-offset: -4px;
|
|
@@ -233,12 +233,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
233
233
|
--d2l-list-item-content-text-outline: 2px solid var(--d2l-color-celestine);
|
|
234
234
|
--d2l-list-item-content-text-outline-offset: 1px;
|
|
235
235
|
}
|
|
236
|
-
:host([_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content-none {
|
|
236
|
+
:host([_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content.d2l-list-item-content-none {
|
|
237
237
|
border-radius: initial;
|
|
238
238
|
outline: initial;
|
|
239
239
|
outline-offset: initial;
|
|
240
240
|
}
|
|
241
|
-
:host([_focusing-primary-action]:not([padding-type="none"])):has(:focus-visible) .d2l-list-item-content-none {
|
|
241
|
+
:host([_focusing-primary-action]:not([padding-type="none"])):has(:focus-visible) .d2l-list-item-content.d2l-list-item-content-none {
|
|
242
242
|
border-radius: 8px;
|
|
243
243
|
outline: var(--d2l-list-item-content-text-outline);
|
|
244
244
|
outline-offset: -4px;
|
|
@@ -441,6 +441,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
441
441
|
}
|
|
442
442
|
|
|
443
443
|
:host([layout="tile"]) .d2l-list-item-content {
|
|
444
|
+
box-sizing: border-box;
|
|
444
445
|
flex-direction: column;
|
|
445
446
|
height: 100%;
|
|
446
447
|
padding: 0.6rem;
|
|
@@ -457,6 +458,33 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
457
458
|
:host([layout="tile"]:not([_has-color-slot])) .d2l-list-item-content-extend-separators [slot="content"] {
|
|
458
459
|
padding-inline: 0.6rem;
|
|
459
460
|
}
|
|
461
|
+
|
|
462
|
+
:host([layout="tile"][_focusing-primary-action]:not([selection-disabled]):not([button-disabled]):not([skeleton]):not([current])) [slot="outside-control-container"].d2l-list-item-content-none {
|
|
463
|
+
border-color: transparent;
|
|
464
|
+
}
|
|
465
|
+
:host([layout="tile"][_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content.d2l-list-item-content-none {
|
|
466
|
+
border-radius: 6px;
|
|
467
|
+
outline: var(--d2l-list-item-content-text-outline);
|
|
468
|
+
outline-offset: 2px;
|
|
469
|
+
}
|
|
470
|
+
@supports selector(:has(a, b)) {
|
|
471
|
+
:host([layout="tile"][_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content.d2l-list-item-content-none {
|
|
472
|
+
border-radius: initial;
|
|
473
|
+
outline: initial;
|
|
474
|
+
outline-offset: initial;
|
|
475
|
+
}
|
|
476
|
+
:host([layout="tile"][_focusing-primary-action]:not([selection-disabled]):not([button-disabled]):not([skeleton]):not([current])) [slot="outside-control-container"].d2l-list-item-content-none {
|
|
477
|
+
border-color: var(--d2l-color-mica);
|
|
478
|
+
}
|
|
479
|
+
:host([layout="tile"][_focusing-primary-action]:not([padding-type="none"])):has(:focus-visible) .d2l-list-item-content.d2l-list-item-content-none {
|
|
480
|
+
border-radius: 6px;
|
|
481
|
+
outline: var(--d2l-list-item-content-text-outline);
|
|
482
|
+
outline-offset: 2px;
|
|
483
|
+
}
|
|
484
|
+
:host([layout="tile"][_focusing-primary-action]:not([selection-disabled]):not([button-disabled]):not([skeleton]):not([current])):has(:focus-visible) [slot="outside-control-container"].d2l-list-item-content-none {
|
|
485
|
+
border-color: transparent;
|
|
486
|
+
}
|
|
487
|
+
}
|
|
460
488
|
`];
|
|
461
489
|
|
|
462
490
|
super.styles && styles.unshift(super.styles);
|
|
@@ -721,6 +749,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
721
749
|
'd2l-list-item-content': true,
|
|
722
750
|
'd2l-list-item-content-none': !this._hasListItemContent
|
|
723
751
|
};
|
|
752
|
+
const outsideClasses = {
|
|
753
|
+
'd2l-list-item-content-none': !this._hasListItemContent
|
|
754
|
+
};
|
|
724
755
|
|
|
725
756
|
const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color) || (this.expandable && !this.selectable)) ? 'control' : undefined;
|
|
726
757
|
const contentAreaContent = html`
|
|
@@ -769,7 +800,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
769
800
|
</d2l-button-add>
|
|
770
801
|
</div>
|
|
771
802
|
` : nothing}
|
|
772
|
-
<div slot="outside-control-container"></div>
|
|
803
|
+
<div slot="outside-control-container" class="${classMap(outsideClasses)}"></div>
|
|
773
804
|
<div slot="before-content"></div>
|
|
774
805
|
${this._renderDropTarget()}
|
|
775
806
|
${this._renderDragHandle(this._renderOutsideControl)}
|
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# Progress Bar
|
|
2
|
-
|
|
2
|
+
Use a progress bar to show the level of completion of a system process, such as downloading, uploading, or exporting.
|
|
3
|
+
|
|
4
|
+
## Best Practices
|
|
5
|
+
|
|
6
|
+
A progress bar shows that the user's request is being processed; it gives the user tangible feedback about the status of their request, and helps them understand how long they may have to wait.
|
|
7
|
+
|
|
8
|
+
<!-- docs: start best practices -->
|
|
9
|
+
<!-- docs: start dos -->
|
|
10
|
+
* Use a progress bar for requests that may take longer than a few seconds to complete
|
|
11
|
+
* For long or complex processes, change the `label` to indicate key stages like "Preparing" or "Finishing up"
|
|
12
|
+
* Unless providing other updates to screen readers, use `announce-label` so that changes to the `label` are heard by screen reader users
|
|
13
|
+
<!-- docs: end dos -->
|
|
14
|
+
|
|
15
|
+
<!-- docs: start donts -->
|
|
16
|
+
* Don't use this for requests that are usually very short, use a [loading spinner](../../components/loading-spinner/) instead
|
|
17
|
+
* Don't use it for scalar measurements like number of activities completed, use a [meter](../../components/meter/) instead
|
|
18
|
+
<!-- docs: end donts -->
|
|
19
|
+
<!-- docs: end best practices -->
|
|
3
20
|
|
|
4
21
|
## Progress Bar [d2l-progress]
|
|
5
22
|
|
|
@@ -52,3 +69,11 @@ Use the `announce-label` property to announce changes to the progress label. Thi
|
|
|
52
69
|
<button>Start Animation</button>
|
|
53
70
|
<d2l-progress label="Uploading..." announce-label></d2l-progress>
|
|
54
71
|
```
|
|
72
|
+
|
|
73
|
+
## Accessibility
|
|
74
|
+
|
|
75
|
+
The progress bar aligns with web standards by using the [progress](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress) element and by assigning `label` as the accessible label.
|
|
76
|
+
|
|
77
|
+
Note that using `label-hidden` or `value-hidden` will visibly hide the label or value, but they remain available to screen reader users, and developers should make sure to provide equivalent information to sighted users.
|
|
78
|
+
|
|
79
|
+
The `announce-label` property causes changes to the `label` to be announced for screen reader users using a polite live region. Unless meaningful updates are being provided in another way, `announce-label` should be leveraged by most progress bars since some screen readers are not great at updating users about progress changes unless the user places their virtual cursor on the progress bar itself.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.186.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",
|