@brightspace-ui/core 2.45.5 → 2.46.2
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/alert/alert.js +0 -11
- 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/custom-elements.json +52 -0
- package/package.json +1 -1
|
@@ -196,23 +196,12 @@ class Alert extends LocalizeCoreElement(RtlMixin(LitElement)) {
|
|
|
196
196
|
}
|
|
197
197
|
|
|
198
198
|
close() {
|
|
199
|
-
// deprecated - event names should be present tense
|
|
200
|
-
/** @ignore */
|
|
201
|
-
const didDispatch = this.dispatchEvent(new CustomEvent('d2l-alert-closed', { bubbles: true, composed: true, cancelable: true }));
|
|
202
|
-
if (didDispatch) {
|
|
203
|
-
this.hidden = true;
|
|
204
|
-
}
|
|
205
199
|
if (this.dispatchEvent(new CustomEvent('d2l-alert-close', { bubbles: true, composed: true, cancelable: true }))) {
|
|
206
200
|
this.hidden = true;
|
|
207
201
|
}
|
|
208
202
|
}
|
|
209
203
|
|
|
210
204
|
_onButtonClick() {
|
|
211
|
-
// deprecated - event names should be present tense
|
|
212
|
-
/** @ignore */
|
|
213
|
-
this.dispatchEvent(new CustomEvent(
|
|
214
|
-
'd2l-alert-button-pressed', { bubbles: true, composed: true }
|
|
215
|
-
));
|
|
216
205
|
this.dispatchEvent(new CustomEvent(
|
|
217
206
|
'd2l-alert-button-press', { bubbles: true, composed: true }
|
|
218
207
|
));
|
|
@@ -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
|
}
|
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.2",
|
|
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",
|