@brightspace-ui/core 1.199.0 → 1.201.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.
Files changed (12) hide show
  1. package/components/count-badge/count-badge-mixin.js +1 -1
  2. package/components/demo/demo-snippet.js +5 -0
  3. package/components/filter/filter.js +2 -1
  4. package/components/selection/README.md +245 -63
  5. package/components/selection/demo/demo-selection.js +18 -0
  6. package/components/selection/demo/selection.html +2 -20
  7. package/components/selection/selection-action.js +2 -2
  8. package/components/selection/selection-input.js +2 -1
  9. package/components/selection/selection-mixin.js +1 -1
  10. package/components/selection/selection-observer-mixin.js +2 -1
  11. package/custom-elements.json +50 -53
  12. package/package.json +2 -2
package/components/count-badge/count-badge-mixin.js CHANGED
@@ -120,7 +120,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
120
120
 
121
121
  :host([type="count"]) .d2l-count-badge-number {
122
122
  background-color: var(--d2l-color-gypsum);
123
- color: var(--d2l-color-tungsten);
123
+ color: var(--d2l-color-ferrite);
124
124
  }
125
125
 
126
126
  :host([size="small"]) .d2l-count-badge-number {
package/components/demo/demo-snippet.js CHANGED
@@ -8,6 +8,7 @@ class DemoSnippet extends LitElement {
8
8
  static get properties() {
9
9
  return {
10
10
  codeViewHidden: { type: Boolean, reflect: true, attribute: 'code-view-hidden' },
11
+ fullscreen: { type: Boolean, reflect: true },
11
12
  noPadding: { type: Boolean, reflect: true, attribute: 'no-padding' },
12
13
  overflowHidden: { type: Boolean, reflect: true, attribute: 'overflow-hidden' },
13
14
  _code: { type: String },
@@ -30,6 +31,9 @@ class DemoSnippet extends LitElement {
30
31
  :host([hidden]) {
31
32
  display: none;
32
33
  }
34
+ :host([fullscreen]) {
35
+ max-width: unset;
36
+ }
33
37
  .d2l-demo-snippet-demo-wrapper {
34
38
  display: flex;
35
39
  }
@@ -66,6 +70,7 @@ class DemoSnippet extends LitElement {
66
70
 
67
71
  constructor() {
68
72
  super();
73
+ this.fullscreen = false;
69
74
  this._dir = document.documentElement.dir;
70
75
  this._hasSkeleton = false;
71
76
  this._skeletonOn = false;
package/components/filter/filter.js CHANGED
@@ -244,10 +244,10 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
244
244
  const countBadgeId = `filters-applied-count-${dimension.key}`;
245
245
  const filtersAppliedText = `${this.localize('components.filter.filterCountDescription', { number: dimension.appliedCount })}`;
246
246
  return html`<d2l-menu-item text="${dimension.text}" description="${dimension.text}." aria-describedby="${countBadgeId}">
247
- ${builtDimension}
248
247
  <div slot="supporting">
249
248
  <d2l-count-badge id="${countBadgeId}" number="${dimension.appliedCount}" max-digits="2" text="${filtersAppliedText}" hide-zero></d2l-count-badge>
250
249
  </div>
250
+ ${builtDimension}
251
251
  </d2l-menu-item>`;
252
252
  });
253
253
  }
@@ -364,6 +364,7 @@ class Filter extends LocalizeCoreElement(RtlMixin(LitElement)) {
364
364
  id="${SET_DIMENSION_ID_PREFIX}${dimension.key}"
365
365
  @d2l-list-selection-change="${this._handleChangeSetDimension}"
366
366
  extend-separators
367
+ grid
367
368
  ?selection-single="${dimension.selectionSingle}">
368
369
  ${dimension.values.map(item => html`
369
370
  <d2l-list-item
package/components/selection/README.md CHANGED
@@ -2,50 +2,84 @@
2
2
 
3
3
  The selection components (`d2l-selection-action`, `d2l-selection-input`, `d2l-selection-select-all`, `d2l-selection-summary`, `d2l-selection-action`) are low-level components that provide the ability to create selection interfaces with select-all and bulk-action behaviours.
4
4
 
5
+ <!-- docs: start hidden content -->
5
6
  ![Selection](./screenshots/selection-multiple.png?raw=true)
6
7
 
7
8
  ![Selection](./screenshots/selection-single.png?raw=true)
9
+ <!-- docs: end hidden content -->
8
10
 
9
11
  ## SelectionMixin
10
12
 
11
- The selection components above work with a component that extends the `SelectionMixin`, which acts like a controller for the checkboxes, radios, actions, etc. The `d2l-selection-input` component must be placed _within_ the component that extends the `SelectionMixin`. The other selection components may also be placed inside the `SelectionMixin` component, or in the same DOM scope with the `selection-for` attribute set to the id of that component.
12
-
13
- The `d2l-list` already extends `SelectionMixin` and should always be used for lists, however a custom selection control can be easily defined to enable the use of these selection controls in different semantic contexts or radically different layouts. The `SelectionMixin` defines the `selection-single` attribute that consumers can specify for single selection behaviour.
14
-
15
- ```javascript
16
- import { html, LitElement } from 'lit-element/lit-element.js';
17
- import { SelectionMixin } from '@brightspace-ui/core/components/selection-mixin.js';
18
-
19
- class CustomSelection extends SelectionMixin(LitElement) {
20
- render() {
21
- return html`
22
- <slot></slot>
23
- `;
24
- }
25
- }
26
- customElements.define('d2l-custom-selection', CustomSelection);
27
- ```
28
-
29
- **Properties:**
30
-
31
- | Property | Type | Description |
32
- |--|--|--|
33
- | `selection-single` | Boolean | Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item. |
34
-
35
- The selection components can then be used within the custom selection component as shown below.
13
+ The selection components below work with a component that extends the `SelectionMixin`, which acts like a controller for the checkboxes, radios, actions, etc. The `d2l-selection-input` component must be placed _within_ the component that extends the `SelectionMixin`. The other selection components may also be placed inside the `SelectionMixin` component, or in the same DOM scope with the `selection-for` attribute set to the id of that component.
36
14
 
15
+ <!-- docs: demo live name:d2l-demo-selection display:block -->
37
16
  ```html
17
+ <script type="module">
18
+ import { css, html, LitElement } from 'lit-element/lit-element.js';
19
+ import { SelectionMixin } from '@brightspace-ui/core/components/selection/selection-mixin.js';
20
+
21
+ class CustomSelection extends SelectionMixin(LitElement) {
22
+ static get styles() {
23
+ return css`
24
+ :host {
25
+ display: block;
26
+ }
27
+ `;
28
+ }
29
+ render() {
30
+ return html`
31
+ <slot></slot>
32
+ `;
33
+ }
34
+ }
35
+ customElements.define('d2l-demo-selection', CustomSelection);
36
+ </script>
38
37
  <script type="module">
39
38
  import '@brightspace-ui/core/components/selection/selection-action.js';
40
39
  import '@brightspace-ui/core/components/selection/selection-input.js';
41
40
  import '@brightspace-ui/core/components/selection/selection-select-all.js';
42
41
  import '@brightspace-ui/core/components/selection/selection-summary.js';
43
42
  </script>
44
- <d2l-custom-selection>
45
- <div>
46
- <d2l-selection-select-all></d2l-selection-select-all>
47
- <d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
48
- <d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
43
+ <!-- docs: start hidden content -->
44
+ <script type="module">
45
+ import '@brightspace-ui/core/components/selection/demo/demo-selection.js';
46
+ </script>
47
+ <style>
48
+ ul {
49
+ padding: 0;
50
+ }
51
+ li {
52
+ list-style-type: none;
53
+ }
54
+ li, .d2l-selection-header, .d2l-selection-header-wrapper {
55
+ align-items: center;
56
+ display: flex;
57
+ }
58
+ d2l-selection-input {
59
+ margin-right: 10px;
60
+ }
61
+ [dir="rtl"] d2l-selection-input {
62
+ margin-left: 10px;
63
+ margin-right: 0;
64
+ }
65
+ .d2l-selection-header-wrapper {
66
+ flex-wrap: wrap;
67
+ }
68
+ .d2l-selection-header {
69
+ flex: auto;
70
+ }
71
+ d2l-selection-summary {
72
+ flex: none;
73
+ }
74
+ </style>
75
+ <!-- docs: end hidden content -->
76
+ <d2l-demo-selection>
77
+ <div class="d2l-selection-header-wrapper">
78
+ <div class="d2l-selection-header">
79
+ <d2l-selection-select-all></d2l-selection-select-all>
80
+ <d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
81
+ <d2l-selection-action text="Settings" icon="tier1:gear"></d2l-selection-action>
82
+ </div>
49
83
  <d2l-selection-summary></d2l-selection-summary>
50
84
  </div>
51
85
  <ul>
@@ -53,21 +87,26 @@ The selection components can then be used within the custom selection component
53
87
  <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
54
88
  <li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
55
89
  </ul>
56
- </d2l-custom-selection>
90
+ </d2l-demo-selection>
57
91
  ```
58
92
 
59
- Or, the non-`d2l-selection-input` components can be used outside the custom selection component as long as they are in the same DOM scope:
93
+ The `d2l-list` already extends `SelectionMixin` and should always be used for lists, however a custom selection control can be easily defined to enable the use of these selection controls in different semantic contexts or radically different layouts. The `SelectionMixin` defines the `selection-single` attribute that consumers can specify for single selection behaviour.
94
+
95
+ <!-- docs: start hidden content -->
96
+ ### Properties
97
+
98
+ | Property | Type | Description |
99
+ |---|---|---|
100
+ | `selection-single` | Boolean | Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item. |
101
+ <!-- docs: end hidden content -->
102
+
103
+ ### Usage
104
+
105
+ The selection components can then be used within the custom selection component as shown above, or the non-`d2l-selection-input` components can be used outside the custom selection component as long as they are in the same DOM scope:
60
106
 
61
107
  ```html
62
- <script type="module">
63
- import '@brightspace-ui/core/components/selection/selection-action.js';
64
- import '@brightspace-ui/core/components/selection/selection-input.js';
65
- import '@brightspace-ui/core/components/selection/selection-select-all.js';
66
- import '@brightspace-ui/core/components/selection/selection-summary.js';
67
- </script>
68
108
  <div>
69
109
  <d2l-selection-select-all selection-for="custom"></d2l-selection-select-all>
70
- <d2l-selection-action selection-for="custom" text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
71
110
  <d2l-selection-action selection-for="custom" text="Settings" icon="tier1:gear"></d2l-selection-action>
72
111
  <d2l-selection-summary selection-for="custom"></d2l-selection-summary>
73
112
  </div>
@@ -75,73 +114,216 @@ Or, the non-`d2l-selection-input` components can be used outside the custom sele
75
114
  <ul>
76
115
  <li><d2l-selection-input key="geo" label="Geography" selected></d2l-selection-input>Geography</li>
77
116
  <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
78
- <li><d2l-selection-input key="mth" label="Math"></d2l-selection-input>Math</li>
79
117
  </ul>
80
118
  </d2l-custom-selection>
81
119
  ```
82
120
 
83
- ## d2l-selection-action
121
+ ## Selection Action [d2l-selection-action]
84
122
 
85
123
  The `d2l-selection-action` is an optional component that provides a button for actions associated with the selection component (ex. bulk actions). The `requires-selection` attribute may be specified to indicate that the button should be non-interactive if nothing is selected.
86
124
 
87
- **Properties:**
125
+ <!-- docs: demo live name:d2l-selection-action -->
126
+ ```html
127
+ <script type="module">
128
+ import '@brightspace-ui/core/components/selection/selection-action.js';
129
+ </script>
130
+ <d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow"></d2l-selection-action>
131
+ ```
132
+
133
+ <!-- docs: start hidden content -->
134
+ ### Properties
88
135
 
89
136
  | Property | Type | Description |
90
- |--|--|--|
137
+ |---|---|---|
91
138
  | `icon` | String | Preset icon key (e.g. "tier1:gear"). |
92
139
  | `requires-selection` | Boolean | Whether the action requires one or more selected items. If no items are selected, the action button will be focusable and a hint displayed in a tooltip. |
93
140
  | `selection-for` | String | Id of the corresponding `SelectionMixin` component, if not placed within it. |
94
141
  | `text` | String, required | Text to be shown for the action. |
95
142
 
96
- **Events:**
143
+ ### Events
97
144
 
98
145
  | Event | Description |
99
- |--|--|
146
+ |---|---|
100
147
  | `d2l-selection-action-click` | Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected. |
148
+ <!-- docs: end hidden content -->
101
149
 
102
- ## d2l-selection-input
150
+ ## Selection Input [d2l-selection-input]
103
151
 
104
152
  The `d2l-selection-input` is a required component in selection controls - without it, there wouldn't be anything for the user to select! Note: `d2l-list-item` already provides a selection input for selectable list items. If `d2l-selection-input` is placed within a selection control that specifies `selection-single`, then radios will be rendered instead of checkboxes.
105
153
 
106
- **Properties:**
154
+ <!-- docs: demo live name:d2l-selection-input display:block -->
155
+ ```html
156
+ <script type="module">
157
+ import '@brightspace-ui/core/components/selection/selection-input.js';
158
+ import '@brightspace-ui/core/components/selection/demo/demo-selection.js';
159
+ </script>
160
+ <!-- docs: start hidden content -->
161
+ <style>
162
+ ul {
163
+ padding: 0;
164
+ }
165
+ li {
166
+ list-style-type: none;
167
+ align-items: center;
168
+ display: flex;
169
+ }
170
+ d2l-selection-input {
171
+ margin-right: 10px;
172
+ }
173
+ </style>
174
+ <!-- docs: end hidden content -->
175
+ <d2l-demo-selection>
176
+ <ul>
177
+ <li><d2l-selection-input key="geo" label="Geography" selected></d2l-selection-input>Geography</li>
178
+ <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>Science</li>
179
+ </ul>
180
+ </d2l-demo-selection>
181
+ ```
182
+
183
+ <!-- docs: start hidden content -->
184
+ ### Properties
107
185
 
108
186
  | Property | Type | Description |
109
- |--|--|--|
110
- | `key` | String, required | Key to identify the the selectable. |
187
+ |---|---|---|
188
+ | `key` | String, required | Key to identify the selectable. |
111
189
  | `label` | String | Accessible hidden label for the input. |
112
190
  | `labelled-by` | String | Id reference to the accessible label for the input. **Note:** if specified, it must reference an element in the same DOM context. |
113
191
  | `selected` | Boolean | State of the input. |
114
192
 
115
- **Accessibility:** either `label` or `labelled-by` is required.
116
-
117
- **Events:**
193
+ ### Events
118
194
 
119
195
  | Event | Description |
120
- |--|--|
196
+ |---|---|
121
197
  | `d2l-selection-change` | Dispatched when the state of the input changes. |
198
+ <!-- docs: end hidden content -->
122
199
 
123
- ## d2l-selection-select-all
200
+ ### Accessibility Properties
201
+
202
+ Either `label` or `labelled-by` is **required**.
203
+
204
+ ## Select All [d2l-selection-select-all]
124
205
 
125
206
  The `d2l-selection-select-all` is an optional component that provides a checkbox for bulk selecting the selectable elements within the selection control. Its state will also be automatically updated when the state of the selectable elements change.
126
207
 
127
- **Properties:**
208
+ In the example below, setting `selection-for` to `other-list` demonstrates the ability to use `d2l-selection-select-all` for `d2l-select-input` outside of the custom selection element.
209
+
210
+ <!-- docs: demo live name:d2l-selection-select-all display:block -->
211
+ ```html
212
+ <script type="module">
213
+ import '@brightspace-ui/core/components/selection/selection-action.js';
214
+ import '@brightspace-ui/core/components/selection/selection-input.js';
215
+ import '@brightspace-ui/core/components/selection/selection-select-all.js';
216
+ import '@brightspace-ui/core/components/selection/demo/demo-selection.js';
217
+ </script>
218
+ <!-- docs: start hidden content -->
219
+ <style>
220
+ ul {
221
+ margin: 0;
222
+ padding: 0;
223
+ }
224
+ li {
225
+ align-items: center;
226
+ display: flex;
227
+ list-style-type: none;
228
+ }
229
+ div {
230
+ align-items: center;
231
+ display: flex;
232
+ }
233
+ d2l-selection-input {
234
+ margin-right: 10px;
235
+ }
236
+ #other-list {
237
+ padding-top: 1rem;
238
+ }
239
+ </style>
240
+ <!-- docs: end hidden content -->
241
+ <d2l-demo-selection>
242
+ <div>
243
+ <d2l-selection-select-all></d2l-selection-select-all>
244
+ <d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
245
+ </div>
246
+ <ul>
247
+ <li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>List 1 item 1</li>
248
+ <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>List 1 item 2</li>
249
+ </ul>
250
+ </d2l-demo-selection>
251
+ <d2l-demo-selection id="other-list">
252
+ <ul>
253
+ <li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>List 2 item 1</li>
254
+ <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>List 2 item 2</li>
255
+ </ul>
256
+ </d2l-demo-selection>
257
+ ```
258
+
259
+ <!-- docs: start hidden content -->
260
+ ### Properties
128
261
 
129
262
  | Property | Type | Description |
130
- |--|--|--|
263
+ |---|---|---|
131
264
  | `disabled` | Boolean | Disables the select all checkbox |
132
265
  | `selection-for` | String | Id of the corresponding `SelectionMixin` component, if not placed within it. |
266
+ <!-- docs: end hidden content -->
133
267
 
134
- ## d2l-selection-summary
268
+ ## Selection Summary [d2l-selection-summary]
135
269
 
136
270
  The `d2l-selection-summary` is an optional component that shows a simple count of the selected items within the selection control.
137
271
 
138
- **Properties:**
272
+ In the example below, setting `selection-for` to `other-list` demonstrates the ability to use `d2l-selection-summary` for `d2l-select-input` outside of the custom selection element.
273
+
274
+ <!-- docs: demo live name:d2l-selection-summary display:block -->
275
+ ```html
276
+ <script type="module">
277
+ import '@brightspace-ui/core/components/selection/selection-input.js';
278
+ import '@brightspace-ui/core/components/selection/selection-summary.js';
279
+ import '@brightspace-ui/core/components/selection/demo/demo-selection.js';
280
+ </script>
281
+ <!-- docs: start hidden content -->
282
+ <style>
283
+ ul {
284
+ margin: 0;
285
+ padding: 0;
286
+ }
287
+ li {
288
+ align-items: center;
289
+ display: flex;
290
+ list-style-type: none;
291
+ }
292
+ div {
293
+ align-items: center;
294
+ display: flex;
295
+ }
296
+ d2l-selection-input {
297
+ margin-right: 10px;
298
+ }
299
+ #other-list {
300
+ padding-top: 1rem;
301
+ }
302
+ </style>
303
+ <!-- docs: end hidden content -->
304
+ <d2l-demo-selection>
305
+ <div>
306
+ <d2l-selection-action text="Bookmark" icon="tier1:bookmark-hollow" requires-selection></d2l-selection-action>
307
+ <d2l-selection-summary></d2l-selection-summary>
308
+ </div>
309
+ <ul>
310
+ <li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>List 1 item 1</li>
311
+ <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>List 1 item 2</li>
312
+ </ul>
313
+ </d2l-demo-selection>
314
+ <d2l-demo-selection id="other-list">
315
+ <ul>
316
+ <li><d2l-selection-input key="geo" label="Geography"></d2l-selection-input>List 2 item 1</li>
317
+ <li><d2l-selection-input key="sci" label="Science"></d2l-selection-input>List 2 item 2</li>
318
+ </ul>
319
+ </d2l-demo-selection>
320
+ ```
321
+
322
+ <!-- docs: start hidden content -->
323
+ ### Properties
139
324
 
140
325
  | Property | Type | Description |
141
- |--|--|--|
326
+ |---|---|---|
142
327
  | `no-selection-text` | String | Text to display if no items are selected. By default, the "0 selected" message is displayed. |
143
328
  | `selection-for` | String | Id of the corresponding `SelectionMixin` component, if not placed within it. |
144
-
145
- ## Future Enhancements
146
-
147
- Looking for an enhancement not listed here? Create a GitHub issue!
329
+ <!-- docs: end hidden content -->
package/components/selection/demo/demo-selection.js ADDED
@@ -0,0 +1,18 @@
1
+ import { css, html, LitElement } from 'lit-element/lit-element.js';
2
+ import { SelectionMixin } from '../selection-mixin.js';
3
+
4
+ class DemoSelection extends SelectionMixin(LitElement) {
5
+ static get styles() {
6
+ return css`
7
+ :host {
8
+ display: block;
9
+ }
10
+ `;
11
+ }
12
+ render() {
13
+ return html`
14
+ <slot></slot>
15
+ `;
16
+ }
17
+ }
18
+ customElements.define('d2l-demo-selection', DemoSelection);
package/components/selection/demo/selection.html CHANGED
@@ -10,25 +10,7 @@
10
10
  import '../selection-input.js';
11
11
  import '../selection-select-all.js';
12
12
  import '../selection-summary.js';
13
- import { css, html, LitElement } from 'lit-element/lit-element.js';
14
- import { SelectionMixin } from '../selection-mixin.js';
15
-
16
- class DemoSelection extends SelectionMixin(LitElement) {
17
- static get styles() {
18
- return css`
19
- :host {
20
- display: block;
21
- }
22
- `;
23
- }
24
- render() {
25
- return html`
26
- <slot></slot>
27
- `;
28
- }
29
- }
30
- customElements.define('d2l-demo-selection', DemoSelection);
31
-
13
+ import './demo-selection.js';
32
14
  </script>
33
15
  <style>
34
16
  ul {
@@ -131,7 +113,7 @@
131
113
  </div>
132
114
 
133
115
  <div class="d2l-selection-collection">
134
- Pick Your Bread
116
+ Pick Your Bread
135
117
  <div class="d2l-selection-header">
136
118
  <d2l-selection-select-all selection-for="collection-2"></d2l-selection-select-all>
137
119
  <d2l-selection-action selection-for="collection-2" text="Add Note" icon="tier1:add-message"></d2l-selection-action>
package/components/selection/selection-action.js CHANGED
@@ -11,7 +11,7 @@ import { SelectionObserverMixin } from './selection-observer-mixin.js';
11
11
 
12
12
  /**
13
13
  * An action associated with a selection component.
14
- * @fires d2l-selection-action-click - Dispatched when the user clicks the action; provides the selection info
14
+ * @fires d2l-selection-action-click - Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected.
15
15
  * @fires d2l-selection-observer-subscribe - Internal event
16
16
  */
17
17
  class Action extends LocalizeCoreElement(SelectionObserverMixin(ButtonMixin(RtlMixin(LitElement)))) {
@@ -19,7 +19,7 @@ class Action extends LocalizeCoreElement(SelectionObserverMixin(ButtonMixin(RtlM
19
19
  static get properties() {
20
20
  return {
21
21
  /**
22
- * Preset icon key (e.g. "tier1:gear")
22
+ * Preset icon key (e.g. `tier1:gear`)
23
23
  * @type {string}
24
24
  */
25
25
  icon: { type: String, reflect: true },
package/components/selection/selection-input.js CHANGED
@@ -31,11 +31,12 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
31
31
  disabled: { type: Boolean },
32
32
  /**
33
33
  * Private. Force hovering state of input
34
+ * @ignore
34
35
  * @type {boolean}
35
36
  */
36
37
  hovering: { type: Boolean },
37
38
  /**
38
- * Key for the selectable
39
+ * REQUIRED: Key for the selectable
39
40
  * @type {string}
40
41
  */
41
42
  key: { type: String },
package/components/selection/selection-mixin.js CHANGED
@@ -39,7 +39,7 @@ export const SelectionMixin = superclass => class extends RtlMixin(superclass) {
39
39
  static get properties() {
40
40
  return {
41
41
  /**
42
- * Whether the selection control is limited to single selection
42
+ * Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.
43
43
  * @type {boolean}
44
44
  */
45
45
  selectionSingle: { type: Boolean, attribute: 'selection-single' }
package/components/selection/selection-observer-mixin.js CHANGED
@@ -6,12 +6,13 @@ export const SelectionObserverMixin = superclass => class extends superclass {
6
6
  static get properties() {
7
7
  return {
8
8
  /**
9
- * Id of the SelectionMixin component this component wants to observe (if not located within that component)
9
+ * Id of the `SelectionMixin` component this component wants to observe (if not located within that component)
10
10
  * @type {string}
11
11
  */
12
12
  selectionFor: { type: String, reflect: true, attribute: 'selection-for' },
13
13
  /**
14
14
  * The selection info (set by the selection component)
15
+ * @ignore
15
16
  * @type {object}
16
17
  */
17
18
  selectionInfo: { type: Object },
package/custom-elements.json CHANGED
@@ -1386,6 +1386,11 @@
1386
1386
  {
1387
1387
  "name": "overflow-hidden",
1388
1388
  "type": "boolean"
1389
+ },
1390
+ {
1391
+ "name": "fullscreen",
1392
+ "type": "boolean",
1393
+ "default": "false"
1389
1394
  }
1390
1395
  ],
1391
1396
  "properties": [
@@ -1403,6 +1408,12 @@
1403
1408
  "name": "overflowHidden",
1404
1409
  "attribute": "overflow-hidden",
1405
1410
  "type": "boolean"
1411
+ },
1412
+ {
1413
+ "name": "fullscreen",
1414
+ "attribute": "fullscreen",
1415
+ "type": "boolean",
1416
+ "default": "false"
1406
1417
  }
1407
1418
  ]
1408
1419
  },
@@ -6954,7 +6965,7 @@
6954
6965
  },
6955
6966
  {
6956
6967
  "name": "selection-single",
6957
- "description": "Whether the selection control is limited to single selection",
6968
+ "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
6958
6969
  "type": "boolean",
6959
6970
  "default": "false"
6960
6971
  }
@@ -6984,7 +6995,7 @@
6984
6995
  {
6985
6996
  "name": "selectionSingle",
6986
6997
  "attribute": "selection-single",
6987
- "description": "Whether the selection control is limited to single selection",
6998
+ "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
6988
6999
  "type": "boolean",
6989
7000
  "default": "false"
6990
7001
  }
@@ -7966,6 +7977,27 @@
7966
7977
  }
7967
7978
  ]
7968
7979
  },
7980
+ {
7981
+ "name": "d2l-demo-selection",
7982
+ "path": "./components/selection/demo/demo-selection.js",
7983
+ "attributes": [
7984
+ {
7985
+ "name": "selection-single",
7986
+ "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
7987
+ "type": "boolean",
7988
+ "default": "false"
7989
+ }
7990
+ ],
7991
+ "properties": [
7992
+ {
7993
+ "name": "selectionSingle",
7994
+ "attribute": "selection-single",
7995
+ "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
7996
+ "type": "boolean",
7997
+ "default": "false"
7998
+ }
7999
+ ]
8000
+ },
7969
8001
  {
7970
8002
  "name": "d2l-selection-action",
7971
8003
  "path": "./components/selection/selection-action.js",
@@ -7973,7 +8005,7 @@
7973
8005
  "attributes": [
7974
8006
  {
7975
8007
  "name": "icon",
7976
- "description": "Preset icon key (e.g. \"tier1:gear\")",
8008
+ "description": "Preset icon key (e.g. `tier1:gear`)",
7977
8009
  "type": "string"
7978
8010
  },
7979
8011
  {
@@ -7988,14 +8020,9 @@
7988
8020
  },
7989
8021
  {
7990
8022
  "name": "selection-for",
7991
- "description": "Id of the SelectionMixin component this component wants to observe (if not located within that component)",
8023
+ "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
7992
8024
  "type": "string"
7993
8025
  },
7994
- {
7995
- "name": "selectionInfo",
7996
- "description": "The selection info (set by the selection component)",
7997
- "type": "object"
7998
- },
7999
8026
  {
8000
8027
  "name": "disabled-tooltip",
8001
8028
  "description": "Tooltip text when disabled",
@@ -8012,7 +8039,7 @@
8012
8039
  {
8013
8040
  "name": "icon",
8014
8041
  "attribute": "icon",
8015
- "description": "Preset icon key (e.g. \"tier1:gear\")",
8042
+ "description": "Preset icon key (e.g. `tier1:gear`)",
8016
8043
  "type": "string"
8017
8044
  },
8018
8045
  {
@@ -8030,14 +8057,11 @@
8030
8057
  {
8031
8058
  "name": "selectionFor",
8032
8059
  "attribute": "selection-for",
8033
- "description": "Id of the SelectionMixin component this component wants to observe (if not located within that component)",
8060
+ "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
8034
8061
  "type": "string"
8035
8062
  },
8036
8063
  {
8037
- "name": "selectionInfo",
8038
- "attribute": "selectionInfo",
8039
- "description": "The selection info (set by the selection component)",
8040
- "type": "object"
8064
+ "name": "selectionInfo"
8041
8065
  },
8042
8066
  {
8043
8067
  "name": "disabledTooltip",
@@ -8056,7 +8080,7 @@
8056
8080
  "events": [
8057
8081
  {
8058
8082
  "name": "d2l-selection-action-click",
8059
- "description": "Dispatched when the user clicks the action; provides the selection info"
8083
+ "description": "Dispatched when the user clicks the action button. The `SelectionInfo` is provided as the event `detail`. If `requires-selection` was specified then the event will only be dispatched if items are selected."
8060
8084
  },
8061
8085
  {
8062
8086
  "name": "d2l-selection-observer-subscribe",
@@ -8074,14 +8098,9 @@
8074
8098
  "description": "Disables the input",
8075
8099
  "type": "boolean"
8076
8100
  },
8077
- {
8078
- "name": "hovering",
8079
- "description": "Private. Force hovering state of input",
8080
- "type": "boolean"
8081
- },
8082
8101
  {
8083
8102
  "name": "key",
8084
- "description": "Key for the selectable",
8103
+ "description": "REQUIRED: Key for the selectable",
8085
8104
  "type": "string"
8086
8105
  },
8087
8106
  {
@@ -8114,16 +8133,10 @@
8114
8133
  "description": "Disables the input",
8115
8134
  "type": "boolean"
8116
8135
  },
8117
- {
8118
- "name": "hovering",
8119
- "attribute": "hovering",
8120
- "description": "Private. Force hovering state of input",
8121
- "type": "boolean"
8122
- },
8123
8136
  {
8124
8137
  "name": "key",
8125
8138
  "attribute": "key",
8126
- "description": "Key for the selectable",
8139
+ "description": "REQUIRED: Key for the selectable",
8127
8140
  "type": "string"
8128
8141
  },
8129
8142
  {
@@ -8182,13 +8195,8 @@
8182
8195
  },
8183
8196
  {
8184
8197
  "name": "selection-for",
8185
- "description": "Id of the SelectionMixin component this component wants to observe (if not located within that component)",
8198
+ "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
8186
8199
  "type": "string"
8187
- },
8188
- {
8189
- "name": "selectionInfo",
8190
- "description": "The selection info (set by the selection component)",
8191
- "type": "object"
8192
8200
  }
8193
8201
  ],
8194
8202
  "properties": [
@@ -8202,14 +8210,11 @@
8202
8210
  {
8203
8211
  "name": "selectionFor",
8204
8212
  "attribute": "selection-for",
8205
- "description": "Id of the SelectionMixin component this component wants to observe (if not located within that component)",
8213
+ "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
8206
8214
  "type": "string"
8207
8215
  },
8208
8216
  {
8209
- "name": "selectionInfo",
8210
- "attribute": "selectionInfo",
8211
- "description": "The selection info (set by the selection component)",
8212
- "type": "object"
8217
+ "name": "selectionInfo"
8213
8218
  }
8214
8219
  ],
8215
8220
  "events": [
@@ -8231,13 +8236,8 @@
8231
8236
  },
8232
8237
  {
8233
8238
  "name": "selection-for",
8234
- "description": "Id of the SelectionMixin component this component wants to observe (if not located within that component)",
8239
+ "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
8235
8240
  "type": "string"
8236
- },
8237
- {
8238
- "name": "selectionInfo",
8239
- "description": "The selection info (set by the selection component)",
8240
- "type": "object"
8241
8241
  }
8242
8242
  ],
8243
8243
  "properties": [
@@ -8250,14 +8250,11 @@
8250
8250
  {
8251
8251
  "name": "selectionFor",
8252
8252
  "attribute": "selection-for",
8253
- "description": "Id of the SelectionMixin component this component wants to observe (if not located within that component)",
8253
+ "description": "Id of the `SelectionMixin` component this component wants to observe (if not located within that component)",
8254
8254
  "type": "string"
8255
8255
  },
8256
8256
  {
8257
- "name": "selectionInfo",
8258
- "attribute": "selectionInfo",
8259
- "description": "The selection info (set by the selection component)",
8260
- "type": "object"
8257
+ "name": "selectionInfo"
8261
8258
  }
8262
8259
  ],
8263
8260
  "events": [
@@ -8273,7 +8270,7 @@
8273
8270
  "attributes": [
8274
8271
  {
8275
8272
  "name": "selection-single",
8276
- "description": "Whether the selection control is limited to single selection",
8273
+ "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
8277
8274
  "type": "boolean",
8278
8275
  "default": "false"
8279
8276
  }
@@ -8282,7 +8279,7 @@
8282
8279
  {
8283
8280
  "name": "selectionSingle",
8284
8281
  "attribute": "selection-single",
8285
- "description": "Whether the selection control is limited to single selection",
8282
+ "description": "Whether to render with single selection behaviour. If `selection-single` is specified, the nested `d2l-selection-input` elements will render radios instead of checkboxes, and the selection component will maintain a single selected item.",
8286
8283
  "type": "boolean",
8287
8284
  "default": "false"
8288
8285
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "1.199.0",
3
+ "version": "1.201.1",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "repository": "https://github.com/BrightspaceUI/core.git",
6
6
  "publishConfig": {
@@ -57,7 +57,7 @@
57
57
  "eslint-plugin-sort-class-members": "^1",
58
58
  "lit-analyzer": "^1",
59
59
  "node-sass": "^6",
60
- "sinon": "^11",
60
+ "sinon": "^12",
61
61
  "stylelint": "^13"
62
62
  },
63
63
  "dependencies": {