@brightspace-ui/core 3.185.0 → 3.187.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,6 +8,7 @@
|
|
|
8
8
|
import '../../demo/demo-page.js';
|
|
9
9
|
import '../../button/button-subtle.js';
|
|
10
10
|
import '../../button/button-toggle.js';
|
|
11
|
+
import '../../icons/icon.js';
|
|
11
12
|
import '../list-item-button.js';
|
|
12
13
|
import '../list-item-content.js';
|
|
13
14
|
import '../list-item.js';
|
|
@@ -22,6 +23,26 @@
|
|
|
22
23
|
d2l-button-toggle {
|
|
23
24
|
margin-block-end: 0.9rem;
|
|
24
25
|
}
|
|
26
|
+
d2l-list-item[layout="normal"] div[slot="illustration"],
|
|
27
|
+
d2l-list-item[layout="tile"] div[slot="illustration"] {
|
|
28
|
+
padding: 1rem;
|
|
29
|
+
}
|
|
30
|
+
d2l-list-item[layout="normal"] img[slot="illustration"] {
|
|
31
|
+
height: 500px;
|
|
32
|
+
object-fit: cover;
|
|
33
|
+
}
|
|
34
|
+
d2l-list-item[layout="normal"] d2l-icon[slot="illustration"] {
|
|
35
|
+
height: 3rem;
|
|
36
|
+
width: 3rem;
|
|
37
|
+
}
|
|
38
|
+
d2l-list-item[layout="tile"] div[slot="illustration"],
|
|
39
|
+
d2l-list-item[layout="tile"] d2l-icon[slot="illustration"],
|
|
40
|
+
d2l-list-item[layout="tile"] img[slot="illustration"] {
|
|
41
|
+
height: 5rem;
|
|
42
|
+
}
|
|
43
|
+
d2l-list-item[layout="tile"] img[slot="illustration"] {
|
|
44
|
+
object-fit: cover;
|
|
45
|
+
}
|
|
25
46
|
</style>
|
|
26
47
|
</head>
|
|
27
48
|
<body unresolved>
|
|
@@ -64,6 +85,70 @@
|
|
|
64
85
|
</template>
|
|
65
86
|
</d2l-demo-snippet>
|
|
66
87
|
|
|
88
|
+
<h2>Illustration Slot</h2>
|
|
89
|
+
|
|
90
|
+
<d2l-demo-snippet>
|
|
91
|
+
<template>
|
|
92
|
+
<d2l-button-toggle pressed>
|
|
93
|
+
<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
|
|
94
|
+
<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
|
|
95
|
+
</d2l-button-toggle>
|
|
96
|
+
<d2l-list layout="tiles">
|
|
97
|
+
<d2l-list-item label="item 1">
|
|
98
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
99
|
+
<d2l-list-item-content>
|
|
100
|
+
<div>Identify categories of physical activities</div>
|
|
101
|
+
<div slot="secondary">Secondary Information</div>
|
|
102
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
103
|
+
</d2l-list-item-content>
|
|
104
|
+
</d2l-list-item>
|
|
105
|
+
<d2l-list-item label="item 2">
|
|
106
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
|
|
107
|
+
<d2l-list-item-content>
|
|
108
|
+
<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
|
|
109
|
+
<div slot="secondary">Secondary Information</div>
|
|
110
|
+
<div slot="supporting-info">Specific Expectation B2.1</div>
|
|
111
|
+
</d2l-list-item-content>
|
|
112
|
+
</d2l-list-item>
|
|
113
|
+
<d2l-list-item label="item 3">
|
|
114
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
|
|
115
|
+
<d2l-list-item-content>
|
|
116
|
+
<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
|
|
117
|
+
<div slot="secondary">Secondary Information</div>
|
|
118
|
+
<div slot="supporting-info">Specific Expectation B2.2</div>
|
|
119
|
+
</d2l-list-item-content>
|
|
120
|
+
</d2l-list-item>
|
|
121
|
+
<d2l-list-item label="item 4">
|
|
122
|
+
<d2l-icon slot="illustration" icon="tier3:home"></d2l-icon>
|
|
123
|
+
<d2l-list-item-content>
|
|
124
|
+
<div>Home</div>
|
|
125
|
+
<div slot="secondary">Secondary Information</div>
|
|
126
|
+
<div slot="supporting-info">Specific Expectation H1.2</div>
|
|
127
|
+
</d2l-list-item-content>
|
|
128
|
+
</d2l-list-item>
|
|
129
|
+
<d2l-list-item label="item 5">
|
|
130
|
+
<img slot="illustration" src="data:image/png;base64,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ICAgICAgICA8dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KE+0EygAABEFJREFUeAHt07ENwCAQBEGgJ5dFg27OSI7RVjCEfDa6nc9+v+ERIHAVWNdfnwQI/AICMQQCISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEiIBAbIBACAgkcJwICsQECISCQwHEicADECgPrw9IKqwAAAABJRU5ErkJggg==" alt="" />
|
|
131
|
+
<d2l-list-item-content>
|
|
132
|
+
<div>Identify categories of physical activities</div>
|
|
133
|
+
<div slot="secondary">Secondary Information</div>
|
|
134
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
135
|
+
</d2l-list-item-content>
|
|
136
|
+
</d2l-list-item>
|
|
137
|
+
<d2l-list-item label="item 6">
|
|
138
|
+
<div slot="illustration" style="background-color: var(--d2l-color-olivine); color: white;">I'm a <div></div>
|
|
139
|
+
<d2l-list-item-content>
|
|
140
|
+
<div>Identify categories of physical activities</div>
|
|
141
|
+
<div slot="secondary">Secondary Information</div>
|
|
142
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
143
|
+
</d2l-list-item-content>
|
|
144
|
+
</d2l-list-item>
|
|
145
|
+
</d2l-list>
|
|
146
|
+
<script data-demo-hide>
|
|
147
|
+
(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
|
|
148
|
+
</script>
|
|
149
|
+
</template>
|
|
150
|
+
</d2l-demo-snippet>
|
|
151
|
+
|
|
67
152
|
<h2>Links</h2>
|
|
68
153
|
|
|
69
154
|
<d2l-demo-snippet>
|
|
@@ -447,6 +447,32 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
447
447
|
padding: 0.6rem;
|
|
448
448
|
}
|
|
449
449
|
|
|
450
|
+
:host([layout="tile"]) [slot="content"] ::slotted([slot="illustration"]),
|
|
451
|
+
:host([layout="tile"]) .d2l-list-item-illustration > * {
|
|
452
|
+
border-end-end-radius: 0;
|
|
453
|
+
border-end-start-radius: 0;
|
|
454
|
+
border-start-end-radius: 5px;
|
|
455
|
+
border-start-start-radius: 5px;
|
|
456
|
+
box-sizing: border-box;
|
|
457
|
+
margin-block: -0.55rem 0.6rem;
|
|
458
|
+
margin-inline: -0.55rem;
|
|
459
|
+
max-height: unset;
|
|
460
|
+
max-width: calc(100% + 1.1rem);
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
:host([layout="tile"]) [slot="content"] ::slotted(d2l-icon[slot="illustration"]),
|
|
464
|
+
:host([layout="tile"]) .d2l-list-item-illustration > d2l-icon[slot="illustration"] {
|
|
465
|
+
padding: 1rem;
|
|
466
|
+
}
|
|
467
|
+
|
|
468
|
+
:host([layout="tile"]) [slot="content"] ::slotted(div[slot="illustration"]),
|
|
469
|
+
:host([layout="tile"]) .d2l-list-item-illustration > div[slot="illustration"],
|
|
470
|
+
:host([layout="tile"]) [slot="content"] ::slotted(d2l-icon[slot="illustration"]),
|
|
471
|
+
:host([layout="tile"]) .d2l-list-item-illustration > d2l-icon[slot="illustration"] {
|
|
472
|
+
border-bottom: 1px solid var(--d2l-color-mica);
|
|
473
|
+
width: calc(100% + 1.1rem);
|
|
474
|
+
}
|
|
475
|
+
|
|
450
476
|
:host([layout="tile"]:not([selection-disabled]):not([skeleton])[padding-type="none"]) [slot="outside-control-container"],
|
|
451
477
|
:host([layout="tile"]) [slot="outside-control-container"] {
|
|
452
478
|
border-color: var(--d2l-color-mica);
|
|
@@ -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.187.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",
|