@brightspace-ui/core 3.128.1 → 3.129.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.
- package/components/list/demo/demo-list-nav.js +1 -1
- package/components/list/demo/list-nav.html +94 -0
- package/components/list/demo/list-nested.html +0 -71
- package/components/list/list-item-button-mixin.js +1 -1
- package/components/list/list-item-drag-drop-mixin.js +2 -0
- package/components/list/list-item-mixin.js +4 -2
- package/components/list/list-item-nav-button-mixin.js +23 -7
- package/components/typography/typography.scss +1 -1
- package/package.json +1 -1
|
@@ -149,7 +149,7 @@ class ListDemoNav extends LitElement {
|
|
|
149
149
|
}
|
|
150
150
|
</d2l-list-item-content>
|
|
151
151
|
${hasSubList ? html`
|
|
152
|
-
<d2l-list slot="nested">
|
|
152
|
+
<d2l-list slot="nested" grid>
|
|
153
153
|
${repeat(item.items, (subItem) => subItem.key, (subItem) => this._renderItem(subItem))}
|
|
154
154
|
</d2l-list>`
|
|
155
155
|
: nothing
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
5
|
+
<meta charset="UTF-8">
|
|
6
|
+
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
7
|
+
<script type="module">
|
|
8
|
+
import '../../demo/demo-page.js';
|
|
9
|
+
import '../../icons/icon.js';
|
|
10
|
+
import '../list-item-content.js';
|
|
11
|
+
import '../list-item-nav-button.js';
|
|
12
|
+
import '../list.js';
|
|
13
|
+
import '../../tooltip/tooltip-help.js';
|
|
14
|
+
|
|
15
|
+
import './demo-list-nav.js';
|
|
16
|
+
import './demo-list-nested-iterations-helper.js';
|
|
17
|
+
</script>
|
|
18
|
+
</head>
|
|
19
|
+
<body unresolved>
|
|
20
|
+
|
|
21
|
+
<d2l-demo-page page-title="d2l-list (nav)">
|
|
22
|
+
|
|
23
|
+
<h2>Side nav list (simple)</h2>
|
|
24
|
+
|
|
25
|
+
<d2l-demo-snippet>
|
|
26
|
+
<template>
|
|
27
|
+
<d2l-list grid style="width: 334px;">
|
|
28
|
+
<d2l-list-item-nav-button key="L1-1" label="Welcome!" color="#006fbf" expandable expanded>
|
|
29
|
+
<d2l-list-item-content>
|
|
30
|
+
<div>Welcome!</div>
|
|
31
|
+
</d2l-list-item-content>
|
|
32
|
+
<d2l-list slot="nested" grid>
|
|
33
|
+
<d2l-list-item-nav-button key="L2-1" label="Syallabus Confirmation">
|
|
34
|
+
<d2l-list-item-content>
|
|
35
|
+
<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Syallabus Confirmation</div>
|
|
36
|
+
<div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 2 pm" style="padding: 5px;">Start: May 1, 2023 at 12:01 AM</d2l-tooltip-help></div>
|
|
37
|
+
</d2l-list-item-content>
|
|
38
|
+
</d2l-list-item-nav-button>
|
|
39
|
+
</d2l-list>
|
|
40
|
+
</d2l-list-item-nav-button>
|
|
41
|
+
<d2l-list-item-nav-button key="L2-2" label="Unit 1: Poetry" color="#29a6ff" expandable expanded>
|
|
42
|
+
<d2l-list-item-content>
|
|
43
|
+
<div>Unit 1: Fiction</div>
|
|
44
|
+
<div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 5 pm" style="padding: 5px;">Starts: May 1, 2023 at 12:01 AM</d2l-tooltip-help></div>
|
|
45
|
+
</d2l-list-item-content>
|
|
46
|
+
<d2l-list slot="nested" grid>
|
|
47
|
+
<d2l-list-item-nav-button key="L3-2" label="Fiction">
|
|
48
|
+
<d2l-list-item-content>
|
|
49
|
+
<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Fiction</div>
|
|
50
|
+
</d2l-list-item-content>
|
|
51
|
+
</d2l-list-item-nav-button>
|
|
52
|
+
<d2l-list-item-nav-button key="L3-2" label="Ten rules for writing fiction">
|
|
53
|
+
<d2l-list-item-content>
|
|
54
|
+
<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Ten rules for writing fiction</div>
|
|
55
|
+
</d2l-list-item-content>
|
|
56
|
+
</d2l-list-item-nav-button>
|
|
57
|
+
</d2l-list>
|
|
58
|
+
</d2l-list-item-nav-button>
|
|
59
|
+
</d2l-list>
|
|
60
|
+
<script>
|
|
61
|
+
(demo => {
|
|
62
|
+
let currentItem = document.querySelector('d2l-list-item-nav-button[current]');
|
|
63
|
+
demo.addEventListener('d2l-list-item-button-click', (e) => {
|
|
64
|
+
console.log('d2l-list-item-nav-button: click event');
|
|
65
|
+
|
|
66
|
+
if (!e.target.expandable) {
|
|
67
|
+
currentItem = e.target;
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
if (currentItem !== e.target) {
|
|
72
|
+
e.target.expanded = true;
|
|
73
|
+
currentItem = e.target;
|
|
74
|
+
} else {
|
|
75
|
+
e.target.expanded = !e.target.expanded;
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
})(document.currentScript.parentNode);
|
|
79
|
+
</script>
|
|
80
|
+
</template>
|
|
81
|
+
</d2l-demo-snippet>
|
|
82
|
+
|
|
83
|
+
<h2>Side nav list (more complex with drag & drop)</h2>
|
|
84
|
+
|
|
85
|
+
<d2l-demo-snippet>
|
|
86
|
+
<template>
|
|
87
|
+
<d2l-demo-list-nav></d2l-demo-list-nav>
|
|
88
|
+
</template>
|
|
89
|
+
</d2l-demo-snippet>
|
|
90
|
+
|
|
91
|
+
</d2l-demo-page>
|
|
92
|
+
|
|
93
|
+
</body>
|
|
94
|
+
</html>
|
|
@@ -15,7 +15,6 @@
|
|
|
15
15
|
import '../list-item-content.js';
|
|
16
16
|
import './list-item-custom.js';
|
|
17
17
|
import '../list-item.js';
|
|
18
|
-
import '../list-item-nav-button.js';
|
|
19
18
|
import '../list-controls.js';
|
|
20
19
|
import '../list.js';
|
|
21
20
|
import '../../menu/menu.js';
|
|
@@ -23,9 +22,7 @@
|
|
|
23
22
|
import '../../paging/pager-load-more.js';
|
|
24
23
|
import '../../selection/selection-action.js';
|
|
25
24
|
import '../../switch/switch.js';
|
|
26
|
-
import '../../tooltip/tooltip-help.js';
|
|
27
25
|
|
|
28
|
-
import './demo-list-nav.js';
|
|
29
26
|
import './demo-list-nested-iterations-helper.js';
|
|
30
27
|
</script>
|
|
31
28
|
</head>
|
|
@@ -227,74 +224,6 @@
|
|
|
227
224
|
</template>
|
|
228
225
|
</d2l-demo-snippet>
|
|
229
226
|
|
|
230
|
-
<h2>Side nav list (simple)</h2>
|
|
231
|
-
|
|
232
|
-
<d2l-demo-snippet>
|
|
233
|
-
<template>
|
|
234
|
-
<d2l-list grid style="width: 334px;">
|
|
235
|
-
<d2l-list-item-nav-button key="L1-1" label="Welcome!" color="#006fbf" expandable expanded>
|
|
236
|
-
<d2l-list-item-content>
|
|
237
|
-
<div>Welcome!</div>
|
|
238
|
-
</d2l-list-item-content>
|
|
239
|
-
<d2l-list slot="nested" grid>
|
|
240
|
-
<d2l-list-item-nav-button key="L2-1" label="Syallabus Confirmation">
|
|
241
|
-
<d2l-list-item-content>
|
|
242
|
-
<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Syallabus Confirmation</div>
|
|
243
|
-
<div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 2 pm" style="padding: 5px;">Start: May 1, 2023 at 12:01 AM</d2l-tooltip-help></div>
|
|
244
|
-
</d2l-list-item-content>
|
|
245
|
-
</d2l-list-item-nav-button>
|
|
246
|
-
</d2l-list>
|
|
247
|
-
</d2l-list-item-nav-button>
|
|
248
|
-
<d2l-list-item-nav-button key="L2-2" label="Unit 1: Poetry" color="#29a6ff" expandable expanded>
|
|
249
|
-
<d2l-list-item-content>
|
|
250
|
-
<div>Unit 1: Fiction</div>
|
|
251
|
-
<div slot="secondary"><d2l-tooltip-help text="Due: May 2, 2023 at 5 pm" style="padding: 5px;">Starts: May 1, 2023 at 12:01 AM</d2l-tooltip-help></div>
|
|
252
|
-
</d2l-list-item-content>
|
|
253
|
-
<d2l-list slot="nested" grid>
|
|
254
|
-
<d2l-list-item-nav-button key="L3-2" label="Fiction">
|
|
255
|
-
<d2l-list-item-content>
|
|
256
|
-
<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Fiction</div>
|
|
257
|
-
</d2l-list-item-content>
|
|
258
|
-
</d2l-list-item-nav-button>
|
|
259
|
-
<d2l-list-item-nav-button key="L3-2" label="Ten rules for writing fiction">
|
|
260
|
-
<d2l-list-item-content>
|
|
261
|
-
<div><d2l-icon style="margin-right: 0.7rem;" icon="tier2:file-document"></d2l-icon>Ten rules for writing fiction</div>
|
|
262
|
-
</d2l-list-item-content>
|
|
263
|
-
</d2l-list-item-nav-button>
|
|
264
|
-
</d2l-list>
|
|
265
|
-
</d2l-list-item-nav-button>
|
|
266
|
-
</d2l-list>
|
|
267
|
-
<script>
|
|
268
|
-
(demo => {
|
|
269
|
-
let currentItem = document.querySelector('d2l-list-item-nav-button[current]');
|
|
270
|
-
demo.addEventListener('d2l-list-item-button-click', (e) => {
|
|
271
|
-
console.log('d2l-list-item-nav-button: click event');
|
|
272
|
-
|
|
273
|
-
if (!e.target.expandable) {
|
|
274
|
-
currentItem = e.target;
|
|
275
|
-
return;
|
|
276
|
-
}
|
|
277
|
-
|
|
278
|
-
if (currentItem !== e.target) {
|
|
279
|
-
e.target.expanded = true;
|
|
280
|
-
currentItem = e.target;
|
|
281
|
-
} else {
|
|
282
|
-
e.target.expanded = !e.target.expanded;
|
|
283
|
-
}
|
|
284
|
-
});
|
|
285
|
-
})(document.currentScript.parentNode);
|
|
286
|
-
</script>
|
|
287
|
-
</template>
|
|
288
|
-
</d2l-demo-snippet>
|
|
289
|
-
|
|
290
|
-
<h2>Side nav list (more complex with drag & drop)</h2>
|
|
291
|
-
|
|
292
|
-
<d2l-demo-snippet>
|
|
293
|
-
<template>
|
|
294
|
-
<d2l-demo-list-nav></d2l-demo-list-nav>
|
|
295
|
-
</template>
|
|
296
|
-
</d2l-demo-snippet>
|
|
297
|
-
|
|
298
227
|
<h2>All Iterations</h2>
|
|
299
228
|
|
|
300
229
|
<d2l-demo-snippet full-width>
|
|
@@ -116,7 +116,7 @@ export const ListItemButtonMixin = superclass => class extends ListItemMixin(sup
|
|
|
116
116
|
|
|
117
117
|
_onButtonFocus(e) {
|
|
118
118
|
if (this._getDescendantClicked(e)) {
|
|
119
|
-
|
|
119
|
+
requestAnimationFrame(() => this._focusingPrimaryAction = false);
|
|
120
120
|
}
|
|
121
121
|
}
|
|
122
122
|
|
|
@@ -339,6 +339,8 @@ export const ListItemDragDropMixin = superclass => class extends superclass {
|
|
|
339
339
|
opacity: 0;
|
|
340
340
|
}
|
|
341
341
|
:host([selected]) d2l-list-item-drag-handle,
|
|
342
|
+
:host([current]) d2l-list-item-drag-handle,
|
|
343
|
+
:host([_focusing-elem]) d2l-list-item-drag-handle,
|
|
342
344
|
d2l-list-item-drag-handle:hover,
|
|
343
345
|
d2l-list-item-drag-handle.d2l-hovering,
|
|
344
346
|
d2l-list-item-drag-handle.d2l-focusing {
|
|
@@ -320,7 +320,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
320
320
|
:host([_hovering-selection]) [slot="outside-control-container"],
|
|
321
321
|
:host([_focusing-primary-action]) [slot="outside-control-container"],
|
|
322
322
|
:host(:not([selection-disabled]):not([skeleton])[selected][_hovering-selection]) [slot="outside-control-container"],
|
|
323
|
-
:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"]
|
|
323
|
+
:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"],
|
|
324
|
+
:host(:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing-elem]:not([current])) [slot="outside-control-container"] {
|
|
324
325
|
border-color: ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')}; /* stylelint-disable-line */
|
|
325
326
|
margin-bottom: -1px;
|
|
326
327
|
}
|
|
@@ -331,7 +332,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
331
332
|
:host([_focusing-primary-action]) [slot="outside-control-container"].hide-bottom-border,
|
|
332
333
|
:host(:not([selection-disabled]):not([skeleton])[selected]) [slot="outside-control-container"].hide-bottom-border,
|
|
333
334
|
:host(:not([selection-disabled]):not([skeleton])[selected][_hovering-selection]) [slot="outside-control-container"].hide-bottom-border,
|
|
334
|
-
:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"].hide-bottom-border
|
|
335
|
+
:host(:not([selection-disabled]):not([skeleton])[selectable][_focusing]) [slot="outside-control-container"].hide-bottom-border,
|
|
336
|
+
:host(:not([selection-disabled]):not([button-disabled]):not([skeleton])[_focusing-elem]) [slot="outside-control-container"].hide-bottom-border {
|
|
335
337
|
background-clip: content-box, border-box;
|
|
336
338
|
background-image: linear-gradient(white, white), linear-gradient(to right, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 20%, transparent 20%, transparent 80%, ${unsafeCSS(useNewStylesFlag ? 'var(--d2l-color-mica)' : '#b6cbe8')} 80%); /* stylelint-disable-line */
|
|
337
339
|
background-origin: border-box;
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import '../colors/colors.js';
|
|
2
2
|
import { css } from 'lit';
|
|
3
|
+
import { findComposedAncestor } from '../../helpers/dom.js';
|
|
4
|
+
import { getComposedActiveElement } from '../../helpers/focus.js';
|
|
3
5
|
import { ListItemButtonMixin } from './list-item-button-mixin.js';
|
|
4
6
|
|
|
5
7
|
export const ListItemNavButtonMixin = superclass => class extends ListItemButtonMixin(superclass) {
|
|
@@ -12,6 +14,7 @@ export const ListItemNavButtonMixin = superclass => class extends ListItemButton
|
|
|
12
14
|
*/
|
|
13
15
|
current: { type: Boolean, reflect: true },
|
|
14
16
|
_childCurrent: { type: Boolean, reflect: true, attribute: '_child-current' },
|
|
17
|
+
_focusingElem: { type: Boolean, reflect: true, attribute: '_focusing-elem' },
|
|
15
18
|
};
|
|
16
19
|
}
|
|
17
20
|
|
|
@@ -25,19 +28,14 @@ export const ListItemNavButtonMixin = superclass => class extends ListItemButton
|
|
|
25
28
|
width: 100%;
|
|
26
29
|
}
|
|
27
30
|
:host([current]) [slot="outside-control-container"] {
|
|
31
|
+
background-color: var(--d2l-color-regolith);
|
|
28
32
|
border: 3px solid var(--d2l-color-celestine);
|
|
29
|
-
margin-block:
|
|
30
|
-
}
|
|
31
|
-
:host([_focusing-primary-action]:not([current])) [slot="outside-control-container"] {
|
|
32
|
-
border: 2px solid var(--d2l-color-celestine);
|
|
33
|
+
margin-block: 0;
|
|
33
34
|
}
|
|
34
35
|
:host([current]) [slot="control-container"]::before,
|
|
35
36
|
:host([current]) [slot="control-container"]::after {
|
|
36
37
|
border-color: transparent;
|
|
37
38
|
}
|
|
38
|
-
:host([_focusing-primary-action]) .d2l-list-item-content {
|
|
39
|
-
--d2l-list-item-content-text-outline: none;
|
|
40
|
-
}
|
|
41
39
|
:host([_hovering-primary-action]) .d2l-list-item-content,
|
|
42
40
|
:host([_focusing-primary-action]) .d2l-list-item-content {
|
|
43
41
|
--d2l-list-item-content-text-color: var(--d2l-color-ferrite);
|
|
@@ -54,6 +52,7 @@ export const ListItemNavButtonMixin = superclass => class extends ListItemButton
|
|
|
54
52
|
super();
|
|
55
53
|
this.current = false;
|
|
56
54
|
this._childCurrent = false;
|
|
55
|
+
this._focusingElem = false;
|
|
57
56
|
}
|
|
58
57
|
|
|
59
58
|
connectedCallback() {
|
|
@@ -72,6 +71,9 @@ export const ListItemNavButtonMixin = superclass => class extends ListItemButton
|
|
|
72
71
|
if (this.current) {
|
|
73
72
|
this.dispatchSetChildCurrentEvent(true);
|
|
74
73
|
}
|
|
74
|
+
|
|
75
|
+
this.addEventListener('focusin', this.#handleFocusIn);
|
|
76
|
+
this.addEventListener('focusout', this.#handleFocusOut);
|
|
75
77
|
}
|
|
76
78
|
|
|
77
79
|
updated(changedProperties) {
|
|
@@ -111,6 +113,20 @@ export const ListItemNavButtonMixin = superclass => class extends ListItemButton
|
|
|
111
113
|
super._onButtonClick(e);
|
|
112
114
|
}
|
|
113
115
|
|
|
116
|
+
#handleFocusIn() {
|
|
117
|
+
requestAnimationFrame(() => {
|
|
118
|
+
const activeElement = getComposedActiveElement();
|
|
119
|
+
const parentListItem = findComposedAncestor(activeElement, (node) => node.role === 'row' || node.role === 'listitem');
|
|
120
|
+
if (parentListItem && parentListItem === this) {
|
|
121
|
+
this._focusingElem = true;
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
#handleFocusOut() {
|
|
127
|
+
this._focusingElem = false;
|
|
128
|
+
}
|
|
129
|
+
|
|
114
130
|
#setAriaCurrent(val) {
|
|
115
131
|
this._ariaCurrent = val;
|
|
116
132
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.129.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",
|