@brightspace-ui/core 2.45.4 → 2.46.1
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/description-list/README.md +175 -0
- package/components/description-list/demo/description-list-test.js +134 -0
- package/components/description-list/demo/description-list.html +43 -0
- package/components/description-list/description-list-wrapper.js +97 -0
- package/components/empty-state/empty-state-styles.js +3 -2
- package/components/list/list-item-generic-layout.js +15 -10
- package/components/list/list-item-mixin.js +8 -2
- package/custom-elements.json +52 -0
- package/package.json +1 -1
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
# Description List
|
|
2
|
+
A Description List displays information in a vertical list of key-value pairs. Common usages could include terms & definitions, or fields & values.
|
|
3
|
+
|
|
4
|
+
<!-- docs: demo -->
|
|
5
|
+
```html
|
|
6
|
+
<script type="module">
|
|
7
|
+
import '@brightspace-ui/core/components/description-list/demo/description-list-test.js';
|
|
8
|
+
</script>
|
|
9
|
+
<d2l-test-dl></d2l-test-dl>
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
## Best Practices
|
|
13
|
+
<!-- docs: start best practices -->
|
|
14
|
+
<!-- docs: start dos -->
|
|
15
|
+
* Terms and descriptions are 1-to-1
|
|
16
|
+
<!-- docs: end dos -->
|
|
17
|
+
|
|
18
|
+
<!-- docs: start donts -->
|
|
19
|
+
* Don't have a term without a description
|
|
20
|
+
* Don't have a description without a term
|
|
21
|
+
* Don't have multiple terms for a description
|
|
22
|
+
* Don't have multiple descriptions for a term
|
|
23
|
+
<!-- docs: end donts -->
|
|
24
|
+
<!-- docs: end best practices -->
|
|
25
|
+
|
|
26
|
+
## Responsive Behavior
|
|
27
|
+
When the component width is less than the `breakpoint` property, the side-by-side pairs will appear in a stacked layout.
|
|
28
|
+
|
|
29
|
+
<!-- docs: demo -->
|
|
30
|
+
```html
|
|
31
|
+
<script type="module">
|
|
32
|
+
import { css, html, LitElement } from 'lit';
|
|
33
|
+
import { descriptionListStyles } from '@brightspace-ui/core/components/description-list/description-list-wrapper.js';
|
|
34
|
+
|
|
35
|
+
class TestDescriptionList extends LitElement {
|
|
36
|
+
|
|
37
|
+
static get styles() {
|
|
38
|
+
return descriptionListStyles;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
render() {
|
|
42
|
+
return html`
|
|
43
|
+
<d2l-dl-wrapper breakpoint="600">
|
|
44
|
+
<dl>
|
|
45
|
+
<dt>Course Code That Represents The Course as a Short String</dt>
|
|
46
|
+
<dd>A short string that represents the course, often with important information such as section or room number.</dd>
|
|
47
|
+
|
|
48
|
+
<dt>Availability Dates</dt>
|
|
49
|
+
<dd>The start and end date for the course. Learners can't access courses outside these dates.</dd>
|
|
50
|
+
</dl>
|
|
51
|
+
</d2l-dl-wrapper>
|
|
52
|
+
`;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
}
|
|
56
|
+
customElements.define('d2l-test-dl', TestDescriptionList);
|
|
57
|
+
</script>
|
|
58
|
+
<d2l-test-dl></d2l-test-dl>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Description List Wrapper [d2l-dl-wrapper]
|
|
62
|
+
|
|
63
|
+
The `d2l-dl-wrapper` can be combined with `descriptionListStyles` to apply styling and resize behavior to native `dl` elements.
|
|
64
|
+
|
|
65
|
+
<!-- docs: demo live name:d2l-test-dl -->
|
|
66
|
+
```html
|
|
67
|
+
<script type="module">
|
|
68
|
+
import { html, LitElement } from 'lit';
|
|
69
|
+
import { descriptionListStyles } from '@brightspace-ui/core/components/description-list/description-list-wrapper.js';
|
|
70
|
+
|
|
71
|
+
class TestDescriptionList extends LitElement {
|
|
72
|
+
|
|
73
|
+
static get styles() {
|
|
74
|
+
return descriptionListStyles;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
static get properties() {
|
|
78
|
+
return {
|
|
79
|
+
breakpoint: { type: Number },
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
render() {
|
|
84
|
+
return html`
|
|
85
|
+
<d2l-dl-wrapper breakpoint="${this.breakpoint}">
|
|
86
|
+
<dl>
|
|
87
|
+
<dt>Course Code That Represents The Course as a Short String</dt>
|
|
88
|
+
<dd>A short string that represents the course, often with important information such as section or room number.</dd>
|
|
89
|
+
|
|
90
|
+
<dt>Availability Dates</dt>
|
|
91
|
+
<dd>The start and end date for the course. Learners can't access courses outside these dates.</dd>
|
|
92
|
+
</dl>
|
|
93
|
+
</d2l-dl-wrapper>
|
|
94
|
+
`;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
customElements.define('d2l-test-dl', TestDescriptionList);
|
|
98
|
+
</script>
|
|
99
|
+
<d2l-test-dl></d2l-test-dl>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
<!-- docs: start hidden content -->
|
|
103
|
+
### Properties
|
|
104
|
+
|
|
105
|
+
| Property | Type | Description | Default Value
|
|
106
|
+
|---|---|---|---|
|
|
107
|
+
| `breakpoint` | Number | Width for component to use a stacked layout. | 240 |
|
|
108
|
+
|
|
109
|
+
<!-- docs: end hidden content -->
|
|
110
|
+
|
|
111
|
+
## Slotted Content [slotted-content]
|
|
112
|
+
The `dt` and `dd` elements can contain non-text content such as links or profile images.
|
|
113
|
+
|
|
114
|
+
<!-- docs: demo -->
|
|
115
|
+
```html
|
|
116
|
+
<script type="module">
|
|
117
|
+
import { css, html, LitElement } from 'lit';
|
|
118
|
+
import { descriptionListStyles } from '@brightspace-ui/core/components/description-list/description-list-wrapper.js';
|
|
119
|
+
|
|
120
|
+
class TestDescriptionList extends LitElement {
|
|
121
|
+
|
|
122
|
+
static get styles() {
|
|
123
|
+
return [
|
|
124
|
+
descriptionListStyles, css`
|
|
125
|
+
.user {
|
|
126
|
+
align-items: center;
|
|
127
|
+
display: flex;
|
|
128
|
+
gap: 0.5rem;
|
|
129
|
+
}
|
|
130
|
+
.avatar {
|
|
131
|
+
align-items: center;
|
|
132
|
+
background-color: var(--d2l-color-cinnabar-minus-1);
|
|
133
|
+
border-radius: 0.25rem;
|
|
134
|
+
color: white;
|
|
135
|
+
display: flex;
|
|
136
|
+
font-size: 0.7rem;
|
|
137
|
+
font-weight: 700;
|
|
138
|
+
height: 1.5rem;
|
|
139
|
+
justify-content: center;
|
|
140
|
+
width: 1.5rem;
|
|
141
|
+
}
|
|
142
|
+
`];
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
render() {
|
|
146
|
+
return html`
|
|
147
|
+
<d2l-dl-wrapper>
|
|
148
|
+
<dl style="align-items: center">
|
|
149
|
+
<dt>User</dt>
|
|
150
|
+
<dd><div class="user"><div class="avatar">JS</div>John Smith</div></dd>
|
|
151
|
+
|
|
152
|
+
<dt>Submitted</dt>
|
|
153
|
+
<dd>Dec 30, 2021 5:34 PM</dd>
|
|
154
|
+
</dl>
|
|
155
|
+
</d2l-dl-wrapper>
|
|
156
|
+
`;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
}
|
|
160
|
+
customElements.define('d2l-test-dl', TestDescriptionList);
|
|
161
|
+
</script>
|
|
162
|
+
<d2l-test-dl></d2l-test-dl>
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
```html
|
|
166
|
+
<d2l-dl-wrapper>
|
|
167
|
+
<dl>
|
|
168
|
+
<dt>User</dt>
|
|
169
|
+
<dd><d2l-user name="John Smith"></d2l-user></dd>
|
|
170
|
+
|
|
171
|
+
<dt>Submitted</dt>
|
|
172
|
+
<dd>Dec 30, 2021 5:34 PM</dd>
|
|
173
|
+
</dl>
|
|
174
|
+
</d2l-dl-wrapper>
|
|
175
|
+
```
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import '../../colors/colors.js';
|
|
2
|
+
import { css, html, LitElement } from 'lit';
|
|
3
|
+
import { descriptionListStyles } from '../description-list-wrapper.js';
|
|
4
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
5
|
+
|
|
6
|
+
class TestDescriptionList extends LitElement {
|
|
7
|
+
static get properties() {
|
|
8
|
+
return {
|
|
9
|
+
/**
|
|
10
|
+
* Width for component to use a stacked layout
|
|
11
|
+
* @type {number}
|
|
12
|
+
*/
|
|
13
|
+
breakpoint: { type: Number, reflect: true },
|
|
14
|
+
/**
|
|
15
|
+
* @ignore
|
|
16
|
+
*/
|
|
17
|
+
type: { type: String, reflect: true },
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
static get styles() {
|
|
22
|
+
return [descriptionListStyles, css`
|
|
23
|
+
.user {
|
|
24
|
+
align-items: center;
|
|
25
|
+
display: flex;
|
|
26
|
+
gap: 0.5rem;
|
|
27
|
+
}
|
|
28
|
+
.avatar {
|
|
29
|
+
align-items: center;
|
|
30
|
+
background-color: var(--d2l-color-cinnabar-minus-1);
|
|
31
|
+
border-radius: 0.25rem;
|
|
32
|
+
color: white;
|
|
33
|
+
display: flex;
|
|
34
|
+
font-size: 0.7rem;
|
|
35
|
+
font-weight: 700;
|
|
36
|
+
height: 1.5rem;
|
|
37
|
+
justify-content: center;
|
|
38
|
+
width: 1.5rem;
|
|
39
|
+
}
|
|
40
|
+
`];
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
constructor() {
|
|
44
|
+
super();
|
|
45
|
+
this.type = 'default';
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
render() {
|
|
49
|
+
return html`
|
|
50
|
+
<d2l-dl-wrapper breakpoint="${ifDefined(this.breakpoint)}">
|
|
51
|
+
${this._renderExample()}
|
|
52
|
+
</d2l-dl-wrapper>
|
|
53
|
+
`;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
_renderExample() {
|
|
57
|
+
if (this.type === 'default') {
|
|
58
|
+
return html`
|
|
59
|
+
<dl>
|
|
60
|
+
<dt>Course Name</dt>
|
|
61
|
+
<dd>Brightspace 101B</dd>
|
|
62
|
+
|
|
63
|
+
<dt>Course Code</dt>
|
|
64
|
+
<dd>BSPC 101B</dd>
|
|
65
|
+
|
|
66
|
+
<dt>Start Date</dt>
|
|
67
|
+
<dd>June 14 2022</dd>
|
|
68
|
+
|
|
69
|
+
<dt>Semester</dt>
|
|
70
|
+
<dd>2022 Summer</dd>
|
|
71
|
+
</dl>
|
|
72
|
+
`;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
if (this.type === 'long') {
|
|
76
|
+
return html`
|
|
77
|
+
<dl>
|
|
78
|
+
<dt>Course Code That Represents The Course as a Short String</dt>
|
|
79
|
+
<dd>A short string that represents the course, often with important information such as section or room number.</dd>
|
|
80
|
+
|
|
81
|
+
<dt>Availability Dates</dt>
|
|
82
|
+
<dd>The start and end date for the course. Learners can't access courses outside these dates.</dd>
|
|
83
|
+
</dl>
|
|
84
|
+
`;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
if (this.type === 'activity-display') {
|
|
88
|
+
return html`
|
|
89
|
+
<dl>
|
|
90
|
+
<dt>Submission type</dt>
|
|
91
|
+
<dd>File submission</dd>
|
|
92
|
+
|
|
93
|
+
<dt>Files allowed per submission</dt>
|
|
94
|
+
<dd>Unlimited</dd>
|
|
95
|
+
|
|
96
|
+
<dt>File extension</dt>
|
|
97
|
+
<dd>PDF</dd>
|
|
98
|
+
|
|
99
|
+
<dt>Allowed Submissions</dt>
|
|
100
|
+
<dd>Only one submission allowed</dd>
|
|
101
|
+
</dl>
|
|
102
|
+
`;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
if (this.type === 'bulk-course-import') {
|
|
106
|
+
return html`
|
|
107
|
+
<dl>
|
|
108
|
+
<dt>Course code</dt>
|
|
109
|
+
<dd>fd6b9fd8-29bd-44ef-8322-d6b379b71411</dd>
|
|
110
|
+
|
|
111
|
+
<dt>Course name</dt>
|
|
112
|
+
<dd>Telkom MOMP Course 1</dd>
|
|
113
|
+
|
|
114
|
+
<dt>Course ID</dt>
|
|
115
|
+
<dd>250003</dd>
|
|
116
|
+
</dl>
|
|
117
|
+
`;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
if (this.type === 'slotted') {
|
|
121
|
+
return html`
|
|
122
|
+
<dl style="align-items: center">
|
|
123
|
+
<dt>User</dt>
|
|
124
|
+
<dd><div class="user"><div class="avatar">JS</div>John Smith</div></dd>
|
|
125
|
+
|
|
126
|
+
<dt>Submitted</dt>
|
|
127
|
+
<dd>Dec 30, 2021 5:34 PM</dd>
|
|
128
|
+
</dl>
|
|
129
|
+
`;
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
customElements.define('d2l-test-dl', TestDescriptionList);
|
|
@@ -0,0 +1,43 @@
|
|
|
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
|
+
|
|
10
|
+
import './description-list-test.js';
|
|
11
|
+
</script>
|
|
12
|
+
</head>
|
|
13
|
+
<body unresolved>
|
|
14
|
+
<d2l-demo-page page-title="d2l-description-list">
|
|
15
|
+
|
|
16
|
+
<h2>Short</h2>
|
|
17
|
+
<d2l-demo-snippet fullscreen>
|
|
18
|
+
<d2l-test-dl></d2l-test-dl>
|
|
19
|
+
</d2l-demo-snippet>
|
|
20
|
+
|
|
21
|
+
<h2>Long</h2>
|
|
22
|
+
<d2l-demo-snippet fullscreen>
|
|
23
|
+
<d2l-test-dl type="long" breakpoint="300"></d2l-test-dl>
|
|
24
|
+
</d2l-demo-snippet>
|
|
25
|
+
|
|
26
|
+
<h2>Activity Display</h2>
|
|
27
|
+
<d2l-demo-snippet fullscreen>
|
|
28
|
+
<d2l-test-dl type="activity-display"></d2l-test-dl>
|
|
29
|
+
</d2l-demo-snippet>
|
|
30
|
+
|
|
31
|
+
<h2>Bulk Course Import</h2>
|
|
32
|
+
<d2l-demo-snippet fullscreen>
|
|
33
|
+
<d2l-test-dl type="bulk-course-import"></d2l-test-dl>
|
|
34
|
+
</d2l-demo-snippet>
|
|
35
|
+
|
|
36
|
+
<h2>Slotted content</h2>
|
|
37
|
+
<d2l-demo-snippet fullscreen>
|
|
38
|
+
<d2l-test-dl type="slotted"></d2l-test-dl>
|
|
39
|
+
</d2l-demo-snippet>
|
|
40
|
+
|
|
41
|
+
</d2l-demo-page>
|
|
42
|
+
</body>
|
|
43
|
+
</html>
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { _generateBodyCompactStyles, _generateLabelStyles } from '../typography/styles.js';
|
|
2
|
+
import { css, html, LitElement } from 'lit';
|
|
3
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
4
|
+
import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
|
5
|
+
|
|
6
|
+
export const descriptionListStyles = [
|
|
7
|
+
_generateLabelStyles('dt'),
|
|
8
|
+
_generateBodyCompactStyles('dd'),
|
|
9
|
+
css`
|
|
10
|
+
:host {
|
|
11
|
+
--d2l-dl-wrapper-dt-min-width: min-content;
|
|
12
|
+
--d2l-dl-wrapper-dt-max-width: 10rem;
|
|
13
|
+
--d2l-dl-wrapper-dd-min-width: 50%;
|
|
14
|
+
}
|
|
15
|
+
dl {
|
|
16
|
+
align-items: baseline;
|
|
17
|
+
display: var(--d2l-dl-wrapper-dl-display, grid);
|
|
18
|
+
gap: 0.3rem 1.5rem;
|
|
19
|
+
grid-auto-flow: row;
|
|
20
|
+
grid-template-columns: minmax(var(--d2l-dl-wrapper-dt-min-width), auto) minmax(var(--d2l-dl-wrapper-dd-min-width), 1fr);
|
|
21
|
+
}
|
|
22
|
+
dt {
|
|
23
|
+
margin: var(--d2l-dl-wrapper-dt-margin, 0);
|
|
24
|
+
max-width: var(--d2l-dl-wrapper-dt-max-width);
|
|
25
|
+
}
|
|
26
|
+
dd {
|
|
27
|
+
margin: var(--d2l-dl-wrapper-dd-margin, 0);
|
|
28
|
+
}
|
|
29
|
+
`,
|
|
30
|
+
];
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* Wraps a native <dl> element, providing styling and resize behavior.
|
|
34
|
+
* @slot - Content to wrap
|
|
35
|
+
*/
|
|
36
|
+
class DescriptionListWrapper extends LitElement {
|
|
37
|
+
static get properties() {
|
|
38
|
+
return {
|
|
39
|
+
/**
|
|
40
|
+
* Width for component to use a stacked layout
|
|
41
|
+
* @type {number}
|
|
42
|
+
*/
|
|
43
|
+
breakpoint: { type: Number, reflect: true },
|
|
44
|
+
_stacked: { state: true },
|
|
45
|
+
};
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
static get styles() {
|
|
49
|
+
return css`
|
|
50
|
+
:host {
|
|
51
|
+
display: block;
|
|
52
|
+
}
|
|
53
|
+
:host([hidden]) {
|
|
54
|
+
display: none;
|
|
55
|
+
}
|
|
56
|
+
.stacked {
|
|
57
|
+
--d2l-dl-wrapper-dl-display: block;
|
|
58
|
+
--d2l-dl-wrapper-dt-max-width: unset;
|
|
59
|
+
--d2l-dl-wrapper-dt-margin: 0 0 0.3rem 0;
|
|
60
|
+
--d2l-dl-wrapper-dd-margin: 0 0 0.9rem 0;
|
|
61
|
+
}
|
|
62
|
+
`;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
constructor() {
|
|
66
|
+
super();
|
|
67
|
+
this.breakpoint = 240;
|
|
68
|
+
this._resizeObserver = new ResizeObserver(this._onResize.bind(this));
|
|
69
|
+
this._stacked = false;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
connectedCallback() {
|
|
73
|
+
super.connectedCallback();
|
|
74
|
+
this._resizeObserver.observe(this);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
disconnectedCallback() {
|
|
78
|
+
super.disconnectedCallback();
|
|
79
|
+
this._resizeObserver.disconnect();
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
render() {
|
|
83
|
+
const classes = {
|
|
84
|
+
'stacked': this._stacked,
|
|
85
|
+
};
|
|
86
|
+
return html`<slot class="${classMap(classes)}"></slot>`;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
_onResize(entries) {
|
|
90
|
+
if (!entries || entries.length === 0) return;
|
|
91
|
+
const entry = entries[0];
|
|
92
|
+
|
|
93
|
+
this._stacked = entry.contentRect.width < this.breakpoint;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
customElements.define('d2l-dl-wrapper', DescriptionListWrapper);
|
|
@@ -15,8 +15,8 @@ export const emptyStateStyles = css`
|
|
|
15
15
|
display: none;
|
|
16
16
|
}
|
|
17
17
|
|
|
18
|
-
.action-slot::slotted(d2l-empty-state-action-button:first-
|
|
19
|
-
.action-slot::slotted(d2l-empty-state-action-link:first-
|
|
18
|
+
.action-slot::slotted(d2l-empty-state-action-button:first-of-type),
|
|
19
|
+
.action-slot::slotted(d2l-empty-state-action-link:first-of-type) {
|
|
20
20
|
display: inline;
|
|
21
21
|
}
|
|
22
22
|
|
|
@@ -52,6 +52,7 @@ export const emptyStateIllustratedStyles = css`
|
|
|
52
52
|
display: none;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
+
.illustration-slot::slotted(img:first-of-type),
|
|
55
56
|
.illustration-slot::slotted(svg:first-of-type) {
|
|
56
57
|
display: inline-block;
|
|
57
58
|
}
|
|
@@ -208,17 +208,13 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
|
208
208
|
if (!cell) return;
|
|
209
209
|
|
|
210
210
|
const firstFocusable = getFirstFocusableDescendant(cell);
|
|
211
|
-
if (!firstFocusable)
|
|
212
|
-
const listItem = findComposedAncestor(this, node => node.role === 'rowgroup');
|
|
213
|
-
if (listItem) {
|
|
214
|
-
const nextFocusable = previous ? getPreviousFocusable(listItem) : getNextFocusable(listItem);
|
|
215
|
-
if (nextFocusable) nextFocusable.focus();
|
|
216
|
-
}
|
|
217
|
-
return;
|
|
218
|
-
}
|
|
211
|
+
if (!firstFocusable) return;
|
|
219
212
|
|
|
220
|
-
if (itemNum === 1
|
|
213
|
+
if (itemNum === 1) {
|
|
221
214
|
firstFocusable.focus();
|
|
215
|
+
return firstFocusable;
|
|
216
|
+
} else {
|
|
217
|
+
return this._focusNextWithinCell(firstFocusable, itemNum);
|
|
222
218
|
}
|
|
223
219
|
}
|
|
224
220
|
|
|
@@ -290,7 +286,16 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
|
|
|
290
286
|
|
|
291
287
|
if (!listItem) return;
|
|
292
288
|
const listItemRow = listItem.shadowRoot.querySelector('[role="gridrow"]');
|
|
293
|
-
listItemRow._focusCellItem(previous, this._cellNum, this._cellFocusedItem);
|
|
289
|
+
const focusedCellItem = listItemRow._focusCellItem(previous, this._cellNum, this._cellFocusedItem);
|
|
290
|
+
|
|
291
|
+
if (!focusedCellItem) {
|
|
292
|
+
// could not focus on same cell in adjacent list-item so try general focus on item
|
|
293
|
+
if (!listItem._tryFocus()) {
|
|
294
|
+
// ultimate fallback to generic method for getting next/previous focusable
|
|
295
|
+
const nextFocusable = previous ? getPreviousFocusable(listItem) : getNextFocusable(listItem);
|
|
296
|
+
if (nextFocusable) nextFocusable.focus();
|
|
297
|
+
}
|
|
298
|
+
}
|
|
294
299
|
|
|
295
300
|
}
|
|
296
301
|
|
|
@@ -398,8 +398,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
398
398
|
}
|
|
399
399
|
|
|
400
400
|
focus() {
|
|
401
|
-
|
|
402
|
-
if (node) node.focus();
|
|
401
|
+
this._tryFocus();
|
|
403
402
|
}
|
|
404
403
|
|
|
405
404
|
async highlight() {
|
|
@@ -623,4 +622,11 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
623
622
|
`;
|
|
624
623
|
}
|
|
625
624
|
|
|
625
|
+
_tryFocus() {
|
|
626
|
+
const node = getFirstFocusableDescendant(this);
|
|
627
|
+
if (!node) return false;
|
|
628
|
+
node.focus();
|
|
629
|
+
return true;
|
|
630
|
+
}
|
|
631
|
+
|
|
626
632
|
};
|
package/custom-elements.json
CHANGED
|
@@ -1445,6 +1445,58 @@
|
|
|
1445
1445
|
}
|
|
1446
1446
|
]
|
|
1447
1447
|
},
|
|
1448
|
+
{
|
|
1449
|
+
"name": "d2l-test-dl",
|
|
1450
|
+
"path": "./components/description-list/demo/description-list-test.js",
|
|
1451
|
+
"attributes": [
|
|
1452
|
+
{
|
|
1453
|
+
"name": "breakpoint",
|
|
1454
|
+
"description": "Width for component to use a stacked layout",
|
|
1455
|
+
"type": "number"
|
|
1456
|
+
}
|
|
1457
|
+
],
|
|
1458
|
+
"properties": [
|
|
1459
|
+
{
|
|
1460
|
+
"name": "breakpoint",
|
|
1461
|
+
"attribute": "breakpoint",
|
|
1462
|
+
"description": "Width for component to use a stacked layout",
|
|
1463
|
+
"type": "number"
|
|
1464
|
+
},
|
|
1465
|
+
{
|
|
1466
|
+
"name": "type",
|
|
1467
|
+
"type": "string",
|
|
1468
|
+
"default": "\"default\""
|
|
1469
|
+
}
|
|
1470
|
+
]
|
|
1471
|
+
},
|
|
1472
|
+
{
|
|
1473
|
+
"name": "d2l-dl-wrapper",
|
|
1474
|
+
"path": "./components/description-list/description-list-wrapper.js",
|
|
1475
|
+
"description": "Wraps a native <dl> element, providing styling and resize behavior.",
|
|
1476
|
+
"attributes": [
|
|
1477
|
+
{
|
|
1478
|
+
"name": "breakpoint",
|
|
1479
|
+
"description": "Width for component to use a stacked layout",
|
|
1480
|
+
"type": "number",
|
|
1481
|
+
"default": "240"
|
|
1482
|
+
}
|
|
1483
|
+
],
|
|
1484
|
+
"properties": [
|
|
1485
|
+
{
|
|
1486
|
+
"name": "breakpoint",
|
|
1487
|
+
"attribute": "breakpoint",
|
|
1488
|
+
"description": "Width for component to use a stacked layout",
|
|
1489
|
+
"type": "number",
|
|
1490
|
+
"default": "240"
|
|
1491
|
+
}
|
|
1492
|
+
],
|
|
1493
|
+
"slots": [
|
|
1494
|
+
{
|
|
1495
|
+
"name": "",
|
|
1496
|
+
"description": "Content to wrap"
|
|
1497
|
+
}
|
|
1498
|
+
]
|
|
1499
|
+
},
|
|
1448
1500
|
{
|
|
1449
1501
|
"name": "d2l-dialog-demo-async-content",
|
|
1450
1502
|
"path": "./components/dialog/demo/dialog-async-content.js",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.46.1",
|
|
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",
|