@brightspace-ui/core 3.72.3 → 3.73.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.
|
@@ -28,124 +28,120 @@ Breadcrumbs are a way-finding tool that helps users understand where they are w
|
|
|
28
28
|
<!-- docs: end donts -->
|
|
29
29
|
<!-- docs: end best practices -->
|
|
30
30
|
|
|
31
|
-
##
|
|
32
|
-
|
|
33
|
-
Breadcrumbs that overflow their container will appear to fade at the edge.
|
|
31
|
+
## Breadcrumbs [d2l-breadcrumbs]
|
|
34
32
|
|
|
35
|
-
<!-- docs: demo display:block -->
|
|
33
|
+
<!-- docs: demo code properties name:d2l-breadcrumbs sandboxTitle:'Breadcrumbs' display:block -->
|
|
36
34
|
```html
|
|
37
35
|
<script type="module">
|
|
38
36
|
import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
|
|
39
37
|
</script>
|
|
40
38
|
<d2l-breadcrumbs>
|
|
41
|
-
<d2l-breadcrumb text="
|
|
42
|
-
<d2l-breadcrumb text="
|
|
43
|
-
<d2l-breadcrumb text="
|
|
44
|
-
<d2l-breadcrumb text="The Comedies, Tragedies, and Histories" href="#"></d2l-breadcrumb>
|
|
39
|
+
<d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
|
|
40
|
+
<d2l-breadcrumb text="Item 2" href="#"></d2l-breadcrumb>
|
|
41
|
+
<d2l-breadcrumb text="Item 3" href="#"></d2l-breadcrumb>
|
|
45
42
|
</d2l-breadcrumbs>
|
|
46
43
|
```
|
|
47
44
|
|
|
48
|
-
|
|
45
|
+
<!-- docs: start hidden content -->
|
|
46
|
+
### Properties
|
|
49
47
|
|
|
50
|
-
|
|
48
|
+
| Property | Type | Description |
|
|
49
|
+
|--|--|--|
|
|
50
|
+
| `compact` | Boolean | Renders in compact mode, displaying only the last item |
|
|
51
|
+
<!-- docs: end hidden content -->
|
|
51
52
|
|
|
52
|
-
|
|
53
|
+
## Breadcrumb (child) [d2l-breadcrumb]
|
|
53
54
|
|
|
54
|
-
<!-- docs: demo code display:block -->
|
|
55
|
+
<!-- docs: demo code properties name:d2l-breadcrumb sandboxTitle:'Breadcrumb' display:block -->
|
|
55
56
|
```html
|
|
56
57
|
<script type="module">
|
|
57
58
|
import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
|
|
58
59
|
</script>
|
|
59
|
-
<d2l-breadcrumbs
|
|
60
|
-
<d2l-breadcrumb text="
|
|
61
|
-
<d2l-breadcrumb text="Truncate Basic Item 2" href="#"></d2l-breadcrumb>
|
|
60
|
+
<d2l-breadcrumbs>
|
|
61
|
+
<d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
|
|
62
62
|
</d2l-breadcrumbs>
|
|
63
63
|
```
|
|
64
64
|
|
|
65
|
-
|
|
65
|
+
<!-- docs: start hidden content -->
|
|
66
|
+
### Properties
|
|
66
67
|
|
|
67
|
-
|
|
68
|
+
| Property | Type | Description |
|
|
69
|
+
|--|--|--|
|
|
70
|
+
| `text` | String, required | The text of the breadcrumb link |
|
|
71
|
+
| `aria-label` | String | ARIA label for the breadcrumb, used if `text` does not provide enough context for screen reader users |
|
|
72
|
+
| `href` | String | The Url that breadcrumb is pointing to |
|
|
73
|
+
| `target` | String | Target of the breadcrumb item |
|
|
74
|
+
<!-- docs: end hidden content -->
|
|
68
75
|
|
|
69
|
-
|
|
76
|
+
## Current Page [d2l-breadcrumb-current-page]
|
|
77
|
+
|
|
78
|
+
Only include the current page in the breadcrumb if your page or view does not have a visible heading. You will notice that some older pages or tools in Brightspace still display the current page as the last breadcrumb despite having a visible page heading, but this is now a legacy pattern.
|
|
79
|
+
|
|
80
|
+
<!-- docs: demo code properties name:d2l-breadcrumb-current-page sandboxTitle:'Current Page Breadcrumb' display:block -->
|
|
70
81
|
```html
|
|
71
82
|
<script type="module">
|
|
72
83
|
import '@brightspace-ui/core/components/breadcrumbs/breadcrumb-current-page.js';
|
|
73
84
|
import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
|
|
74
85
|
</script>
|
|
75
|
-
<d2l-breadcrumbs
|
|
86
|
+
<d2l-breadcrumbs>
|
|
76
87
|
<d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
|
|
77
88
|
<d2l-breadcrumb text="Item 2" href="#"></d2l-breadcrumb>
|
|
78
89
|
<d2l-breadcrumb-current-page text="Current Page"></d2l-breadcrumb-current-page>
|
|
79
90
|
</d2l-breadcrumbs>
|
|
80
91
|
```
|
|
81
92
|
|
|
82
|
-
##
|
|
93
|
+
## Responsive Behavior
|
|
83
94
|
|
|
84
|
-
|
|
95
|
+
Breadcrumbs that overflow their container will appear to fade at the edge, as in this example:
|
|
96
|
+
|
|
97
|
+
<!-- docs: demo display:block -->
|
|
85
98
|
```html
|
|
86
99
|
<script type="module">
|
|
87
100
|
import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
|
|
88
101
|
</script>
|
|
89
102
|
<d2l-breadcrumbs>
|
|
90
|
-
<d2l-breadcrumb text="
|
|
91
|
-
<d2l-breadcrumb text="
|
|
92
|
-
<d2l-breadcrumb text="
|
|
103
|
+
<d2l-breadcrumb text="Table of Contents" href="#"></d2l-breadcrumb>
|
|
104
|
+
<d2l-breadcrumb text="Unit 1: Shakespeare" href="#"></d2l-breadcrumb>
|
|
105
|
+
<d2l-breadcrumb text="Lesson 1: Introduction" href="#"></d2l-breadcrumb>
|
|
106
|
+
<d2l-breadcrumb text="Sub-lesson 3: The Breadth of Shakespearean Literature" href="#"></d2l-breadcrumb>
|
|
107
|
+
<d2l-breadcrumb text="The Comedies, Tragedies, Histories, and Other Long Words" href="#"></d2l-breadcrumb>
|
|
93
108
|
</d2l-breadcrumbs>
|
|
94
109
|
```
|
|
95
110
|
|
|
96
|
-
|
|
97
|
-
### Properties
|
|
98
|
-
|
|
99
|
-
| Property | Type | Description |
|
|
100
|
-
|--|--|--|
|
|
101
|
-
| `compact` | Boolean | Indicates whether the component should render in compact mode |
|
|
102
|
-
<!-- docs: end hidden content -->
|
|
111
|
+
### Limited Width
|
|
103
112
|
|
|
104
|
-
|
|
113
|
+
Set a `max-width` to constrain breadcrumbs to a particular width:
|
|
105
114
|
|
|
106
|
-
<!-- docs: demo code
|
|
115
|
+
<!-- docs: demo code display:block -->
|
|
107
116
|
```html
|
|
108
117
|
<script type="module">
|
|
109
118
|
import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
|
|
110
119
|
</script>
|
|
111
|
-
<d2l-breadcrumbs>
|
|
112
|
-
<d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
|
|
120
|
+
<d2l-breadcrumbs style="max-width: 250px">
|
|
121
|
+
<d2l-breadcrumb text="Trucate Basic Item 1" href="#"></d2l-breadcrumb>
|
|
122
|
+
<d2l-breadcrumb text="Truncate Basic Item 2" href="#"></d2l-breadcrumb>
|
|
113
123
|
</d2l-breadcrumbs>
|
|
114
124
|
```
|
|
115
125
|
|
|
116
|
-
|
|
117
|
-
### Properties
|
|
118
|
-
|
|
119
|
-
| Property | Type | Description |
|
|
120
|
-
|--|--|--|
|
|
121
|
-
| `text` | String, required | Text of the breadcrumb item |
|
|
122
|
-
| `aria-label` | String | AriaLabel of breadcrumb item |
|
|
123
|
-
| `href` | String | Href of the breadcrumb item |
|
|
124
|
-
| `target` | String | Target of the breadcrumb item |
|
|
125
|
-
<!-- docs: end hidden content -->
|
|
126
|
-
|
|
127
|
-
### Accessibility Properties
|
|
128
|
-
|
|
129
|
-
To make your usage of `d2l-breadcrumb` (child) accessible, use the following attribute when applicable:
|
|
130
|
-
|
|
131
|
-
| Attribute | Description |
|
|
132
|
-
|---|---|
|
|
133
|
-
| `aria-label` | Acts as a primary label. Use if `text` does not provide enough context. |
|
|
134
|
-
|
|
135
|
-
## Current Page [d2l-breadcrumb-current-page]
|
|
126
|
+
### Compact Mode
|
|
136
127
|
|
|
137
|
-
|
|
128
|
+
Alternately, add the `compact` attribute to only display the last breadcrumb. The `d2l-breadcrumb-current-page` will be hidden:
|
|
138
129
|
|
|
139
|
-
<!-- docs: demo code
|
|
130
|
+
<!-- docs: demo code display:block -->
|
|
140
131
|
```html
|
|
141
132
|
<script type="module">
|
|
142
133
|
import '@brightspace-ui/core/components/breadcrumbs/breadcrumb-current-page.js';
|
|
143
134
|
import '@brightspace-ui/core/components/breadcrumbs/breadcrumbs.js';
|
|
144
135
|
</script>
|
|
145
|
-
<d2l-breadcrumbs>
|
|
136
|
+
<d2l-breadcrumbs compact>
|
|
146
137
|
<d2l-breadcrumb text="Item 1" href="#"></d2l-breadcrumb>
|
|
147
138
|
<d2l-breadcrumb text="Item 2" href="#"></d2l-breadcrumb>
|
|
148
139
|
<d2l-breadcrumb-current-page text="Current Page"></d2l-breadcrumb-current-page>
|
|
149
140
|
</d2l-breadcrumbs>
|
|
150
141
|
```
|
|
151
142
|
|
|
143
|
+
## Accessibility
|
|
144
|
+
|
|
145
|
+
Breadcrumbs adhere to [W3C's Breadcrumbs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/), so they are contained in a navigation landmark region with proper aria labelling and add `aria-current` to the final breadcrumb if it represents the [Current Page](#d2l-breadcrumb-current-page).
|
|
146
|
+
|
|
147
|
+
Note that we do not apply a `visited` style to breadcrumbs, since they reflect tool hiearchy and are part of the UI rather than part of the page content.
|
|
@@ -32,12 +32,12 @@ class Breadcrumb extends RtlMixin(FocusMixin(LitElement)) {
|
|
|
32
32
|
*/
|
|
33
33
|
target: { type: String, reflect: true },
|
|
34
34
|
/**
|
|
35
|
-
* REQUIRED: text of the breadcrumb link
|
|
35
|
+
* REQUIRED: The text of the breadcrumb link
|
|
36
36
|
* @type {string}
|
|
37
37
|
*/
|
|
38
38
|
text: { type: String, reflect: true },
|
|
39
39
|
/**
|
|
40
|
-
* ARIA label
|
|
40
|
+
* ACCESSIBILITY: ARIA label for the breadcrumb, used if `text` does not provide enough context for screen reader users
|
|
41
41
|
* @type {string}
|
|
42
42
|
*/
|
|
43
43
|
ariaLabel: { attribute: 'aria-label', type: String, reflect: true }
|
package/custom-elements.json
CHANGED
|
@@ -269,12 +269,12 @@
|
|
|
269
269
|
},
|
|
270
270
|
{
|
|
271
271
|
"name": "aria-label",
|
|
272
|
-
"description": "ARIA label
|
|
272
|
+
"description": "ACCESSIBILITY: ARIA label for the breadcrumb, used if `text` does not provide enough context for screen reader users",
|
|
273
273
|
"type": "string"
|
|
274
274
|
},
|
|
275
275
|
{
|
|
276
276
|
"name": "text",
|
|
277
|
-
"description": "REQUIRED: text of the breadcrumb link",
|
|
277
|
+
"description": "REQUIRED: The text of the breadcrumb link",
|
|
278
278
|
"type": "string",
|
|
279
279
|
"default": "\"\""
|
|
280
280
|
}
|
|
@@ -295,13 +295,13 @@
|
|
|
295
295
|
{
|
|
296
296
|
"name": "ariaLabel",
|
|
297
297
|
"attribute": "aria-label",
|
|
298
|
-
"description": "ARIA label
|
|
298
|
+
"description": "ACCESSIBILITY: ARIA label for the breadcrumb, used if `text` does not provide enough context for screen reader users",
|
|
299
299
|
"type": "string"
|
|
300
300
|
},
|
|
301
301
|
{
|
|
302
302
|
"name": "text",
|
|
303
303
|
"attribute": "text",
|
|
304
|
-
"description": "REQUIRED: text of the breadcrumb link",
|
|
304
|
+
"description": "REQUIRED: The text of the breadcrumb link",
|
|
305
305
|
"type": "string",
|
|
306
306
|
"default": "\"\""
|
|
307
307
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.73.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",
|