@brightspace-ui/core 2.7.2 → 2.8.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.
|
@@ -406,8 +406,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
|
|
|
406
406
|
key="${item.key}"
|
|
407
407
|
label="${item.text}"
|
|
408
408
|
selectable
|
|
409
|
-
?selected="${item.selected}"
|
|
410
|
-
slim>
|
|
409
|
+
?selected="${item.selected}">
|
|
411
410
|
<div class="d2l-filter-dimension-set-value-text d2l-body-compact">${item.text}</div>
|
|
412
411
|
</d2l-list-item>
|
|
413
412
|
`)}
|
|
@@ -313,7 +313,6 @@ The `d2l-list-header` component can be placed in the `d2l-list`'s `header` slot
|
|
|
313
313
|
|---|---|---|
|
|
314
314
|
| `no-selection` | Boolean | Whether to render select-all and selection summary |
|
|
315
315
|
| `no-sticky` | Boolean | Disables sticky positioning for the header |
|
|
316
|
-
| `padding-type` | String | Header whitespace (`normal` (default), `slim`) |
|
|
317
316
|
| `select-all-pages-allowed` | Boolean | Whether all pages can be selected |
|
|
318
317
|
<!-- docs: end hidden content -->
|
|
319
318
|
|
|
@@ -364,7 +363,7 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
|
|
|
364
363
|
| `key` | String | Value to identify item if selectable or draggable |
|
|
365
364
|
| `label` | String | Explicitly defined label for the element |
|
|
366
365
|
| `labelled-by` | String | The id of element that provides the label for this element |
|
|
367
|
-
| `padding-type` | String | List item whitespace (`normal` (default), `
|
|
366
|
+
| `padding-type` | String | List item whitespace (`normal` (default), `none`)|
|
|
368
367
|
| `selectable` | Boolean | Indicates an input should be rendered for selecting the item |
|
|
369
368
|
| `selected` | Boolean | Whether the item is selected |
|
|
370
369
|
| `skeleton` | Boolean | Renders the input as a skeleton loader |
|
|
@@ -436,10 +435,10 @@ The `d2l-list-item-button` provides the same functionality as `d2l-list-item` ex
|
|
|
436
435
|
| `key` | String | Value to identify item if selectable or draggable |
|
|
437
436
|
| `label` | String | Explicitly defined label for the element |
|
|
438
437
|
| `labelled-by` | String | The id of element that provides the label for this element |
|
|
438
|
+
| `padding-type` | String | List item whitespace (`normal` (default), `none`)|
|
|
439
439
|
| `selectable` | Boolean | Indicates an input should be rendered for selecting the item |
|
|
440
440
|
| `selected` | Boolean | Whether the item is selected |
|
|
441
441
|
| `skeleton` | Boolean | Renders the input as a skeleton loader |
|
|
442
|
-
| `slim` | Boolean | Whether to render the list-item with reduced whitespace|
|
|
443
442
|
|
|
444
443
|
### Events
|
|
445
444
|
|
|
@@ -17,11 +17,6 @@
|
|
|
17
17
|
height: 500px;
|
|
18
18
|
object-fit: cover;
|
|
19
19
|
}
|
|
20
|
-
d2l-list-item[slim] div {
|
|
21
|
-
overflow: hidden;
|
|
22
|
-
text-overflow: ellipsis;
|
|
23
|
-
white-space: nowrap;
|
|
24
|
-
}
|
|
25
20
|
</style>
|
|
26
21
|
</head>
|
|
27
22
|
<body unresolved>
|
|
@@ -58,30 +53,6 @@
|
|
|
58
53
|
</template>
|
|
59
54
|
</d2l-demo-snippet>
|
|
60
55
|
|
|
61
|
-
<h2>Slim</h2>
|
|
62
|
-
|
|
63
|
-
<d2l-demo-snippet>
|
|
64
|
-
<template>
|
|
65
|
-
<d2l-list>
|
|
66
|
-
<d2l-list-item slim>
|
|
67
|
-
<d2l-list-item-content>
|
|
68
|
-
<div>Identify categories of physical activities</div>
|
|
69
|
-
</d2l-list-item-content>
|
|
70
|
-
</d2l-list-item>
|
|
71
|
-
<d2l-list-item slim>
|
|
72
|
-
<d2l-list-item-content>
|
|
73
|
-
<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
|
|
74
|
-
</d2l-list-item-content>
|
|
75
|
-
</d2l-list-item>
|
|
76
|
-
<d2l-list-item slim>
|
|
77
|
-
<d2l-list-item-content>
|
|
78
|
-
<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
|
|
79
|
-
</d2l-list-item-content>
|
|
80
|
-
</d2l-list-item>
|
|
81
|
-
</d2l-list>
|
|
82
|
-
</template>
|
|
83
|
-
</d2l-demo-snippet>
|
|
84
|
-
|
|
85
56
|
<h2>Separators: between</h2>
|
|
86
57
|
|
|
87
58
|
<d2l-demo-snippet>
|
|
@@ -301,33 +272,6 @@
|
|
|
301
272
|
</template>
|
|
302
273
|
</d2l-demo-snippet>
|
|
303
274
|
|
|
304
|
-
<h2>Selectable, Slim, Extended Separators</h2>
|
|
305
|
-
|
|
306
|
-
<d2l-demo-snippet>
|
|
307
|
-
<template>
|
|
308
|
-
<d2l-list extend-separators>
|
|
309
|
-
<d2l-list-item slim selectable key="1" label="Introductory Earth Sciences">
|
|
310
|
-
<d2l-list-item-content>
|
|
311
|
-
<div>Introductory Earth Sciences</div>
|
|
312
|
-
<div slot="supporting-info">This course explores the geological process of the Earth's interior and surface. These include volcanism, earthquakes, mountains...</div>
|
|
313
|
-
</d2l-list-item-content>
|
|
314
|
-
</d2l-list-item>
|
|
315
|
-
<d2l-list-item slim selectable key="2" selected label="Engineering Materials for Energy Systems">
|
|
316
|
-
<d2l-list-item-content>
|
|
317
|
-
<div>Engineering Materials for Energy Systems</div>
|
|
318
|
-
<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
|
|
319
|
-
</d2l-list-item-content>
|
|
320
|
-
</d2l-list-item>
|
|
321
|
-
<d2l-list-item slim selectable key="3" label="Geomorphology and GIS">
|
|
322
|
-
<d2l-list-item-content>
|
|
323
|
-
<div>Geomorphology and GIS </div>
|
|
324
|
-
<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
|
|
325
|
-
</d2l-list-item-content>
|
|
326
|
-
</d2l-list-item>
|
|
327
|
-
</d2l-list>
|
|
328
|
-
</template>
|
|
329
|
-
</d2l-demo-snippet>
|
|
330
|
-
|
|
331
275
|
</d2l-demo-page>
|
|
332
276
|
|
|
333
277
|
</body>
|
|
@@ -26,23 +26,11 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
|
|
|
26
26
|
* @type {boolean}
|
|
27
27
|
*/
|
|
28
28
|
noSticky: { type: Boolean, attribute: 'no-sticky' },
|
|
29
|
-
/**
|
|
30
|
-
* How much padding to render list items with
|
|
31
|
-
* @type {'normal'|'slim'}
|
|
32
|
-
*/
|
|
33
|
-
paddingType: { type: String, attribute: 'padding-type' },
|
|
34
29
|
/**
|
|
35
30
|
* Whether all pages can be selected
|
|
36
31
|
* @type {boolean}
|
|
37
32
|
*/
|
|
38
33
|
selectAllPagesAllowed: { type: Boolean, attribute: 'select-all-pages-allowed' },
|
|
39
|
-
/**
|
|
40
|
-
* @ignore
|
|
41
|
-
* Whether to render a header with reduced whitespace
|
|
42
|
-
* TODO: Remove
|
|
43
|
-
* @type {boolean}
|
|
44
|
-
*/
|
|
45
|
-
slim: { reflect: true, type: Boolean },
|
|
46
34
|
_scrolled: { type: Boolean, reflect: true }
|
|
47
35
|
};
|
|
48
36
|
}
|
|
@@ -81,12 +69,6 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
|
|
|
81
69
|
display: flex;
|
|
82
70
|
margin-bottom: 6px;
|
|
83
71
|
margin-top: 6px;
|
|
84
|
-
min-height: 58px;
|
|
85
|
-
}
|
|
86
|
-
:host([slim]) .d2l-list-header-container { /* TODO: Remove */
|
|
87
|
-
min-height: 36px;
|
|
88
|
-
}
|
|
89
|
-
:host([padding-type="slim"]) .d2l-list-header-container {
|
|
90
72
|
min-height: 36px;
|
|
91
73
|
}
|
|
92
74
|
.d2l-list-header-extend-separator {
|
|
@@ -126,9 +108,7 @@ class ListHeader extends RtlMixin(LocalizeCoreElement(LitElement)) {
|
|
|
126
108
|
super();
|
|
127
109
|
this.noSelection = false;
|
|
128
110
|
this.noSticky = false;
|
|
129
|
-
this.paddingType = 'normal';
|
|
130
111
|
this.selectAllPagesAllowed = false;
|
|
131
|
-
this.slim = false;
|
|
132
112
|
this._extendSeparator = false;
|
|
133
113
|
}
|
|
134
114
|
|
|
@@ -59,16 +59,9 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
59
59
|
dragTargetHandleOnly: { type: Boolean, attribute: 'drag-target-handle-only' },
|
|
60
60
|
/**
|
|
61
61
|
* How much padding to render list items with
|
|
62
|
-
* @type {'normal'|'
|
|
62
|
+
* @type {'normal'|'none'}
|
|
63
63
|
*/
|
|
64
64
|
paddingType: { type: String, attribute: 'padding-type' },
|
|
65
|
-
/**
|
|
66
|
-
* @ignore
|
|
67
|
-
* Whether to render the list-item with reduced whitespace.
|
|
68
|
-
* TODO: Remove in favor of padding-type="slim"
|
|
69
|
-
* @type {boolean}
|
|
70
|
-
*/
|
|
71
|
-
slim: { type: Boolean },
|
|
72
65
|
_breakpoint: { type: Number },
|
|
73
66
|
_displayKeyboardTooltip: { type: Boolean },
|
|
74
67
|
_dropdownOpen: { type: Boolean, attribute: '_dropdown-open', reflect: true },
|
|
@@ -182,14 +175,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
182
175
|
padding-left: 0.55rem;
|
|
183
176
|
padding-right: 0;
|
|
184
177
|
}
|
|
185
|
-
:host([slim]) [slot="content"] { /* TODO, remove */
|
|
186
|
-
padding-bottom: 0.4rem;
|
|
187
|
-
padding-top: 0.4rem;
|
|
188
|
-
}
|
|
189
|
-
:host([padding-type="slim"]) [slot="content"] {
|
|
190
|
-
padding-bottom: 0.4rem;
|
|
191
|
-
padding-top: 0.4rem;
|
|
192
|
-
}
|
|
193
178
|
:host([padding-type="none"]) [slot="content"] {
|
|
194
179
|
padding-bottom: 0;
|
|
195
180
|
padding-top: 0;
|
|
@@ -277,14 +262,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
277
262
|
.d2l-list-item-content-extend-separators d2l-selection-input {
|
|
278
263
|
margin-left: 0.9rem;
|
|
279
264
|
}
|
|
280
|
-
:host([slim]) d2l-selection-input { /* TODO, remove */
|
|
281
|
-
margin-bottom: 0.4rem;
|
|
282
|
-
margin-top: 0.4rem;
|
|
283
|
-
}
|
|
284
|
-
:host([padding-type="slim"]) d2l-selection-input {
|
|
285
|
-
margin-bottom: 0.4rem;
|
|
286
|
-
margin-top: 0.4rem;
|
|
287
|
-
}
|
|
288
265
|
d2l-list-item-drag-handle {
|
|
289
266
|
margin: 0.25rem 0 0.25rem 0.4rem;
|
|
290
267
|
}
|
|
@@ -366,7 +343,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
|
|
|
366
343
|
constructor() {
|
|
367
344
|
super();
|
|
368
345
|
this.breakpoints = defaultBreakpoints;
|
|
369
|
-
this.slim = false;
|
|
370
346
|
this.paddingType = 'normal';
|
|
371
347
|
this._breakpoint = 0;
|
|
372
348
|
this._contentId = getUniqueId();
|
package/custom-elements.json
CHANGED
|
@@ -6510,7 +6510,7 @@
|
|
|
6510
6510
|
{
|
|
6511
6511
|
"name": "padding-type",
|
|
6512
6512
|
"description": "How much padding to render list items with",
|
|
6513
|
-
"type": "'normal'|'
|
|
6513
|
+
"type": "'normal'|'none'",
|
|
6514
6514
|
"default": "\"normal\""
|
|
6515
6515
|
},
|
|
6516
6516
|
{
|
|
@@ -6589,16 +6589,11 @@
|
|
|
6589
6589
|
"type": "array",
|
|
6590
6590
|
"default": "[842,636,580,0]"
|
|
6591
6591
|
},
|
|
6592
|
-
{
|
|
6593
|
-
"name": "slim",
|
|
6594
|
-
"type": "boolean",
|
|
6595
|
-
"default": "false"
|
|
6596
|
-
},
|
|
6597
6592
|
{
|
|
6598
6593
|
"name": "paddingType",
|
|
6599
6594
|
"attribute": "padding-type",
|
|
6600
6595
|
"description": "How much padding to render list items with",
|
|
6601
|
-
"type": "'normal'|'
|
|
6596
|
+
"type": "'normal'|'none'",
|
|
6602
6597
|
"default": "\"normal\""
|
|
6603
6598
|
},
|
|
6604
6599
|
{
|
|
@@ -6710,12 +6705,6 @@
|
|
|
6710
6705
|
"type": "boolean",
|
|
6711
6706
|
"default": "false"
|
|
6712
6707
|
},
|
|
6713
|
-
{
|
|
6714
|
-
"name": "padding-type",
|
|
6715
|
-
"description": "How much padding to render list items with",
|
|
6716
|
-
"type": "'normal'|'slim'",
|
|
6717
|
-
"default": "\"normal\""
|
|
6718
|
-
},
|
|
6719
6708
|
{
|
|
6720
6709
|
"name": "select-all-pages-allowed",
|
|
6721
6710
|
"description": "Whether all pages can be selected",
|
|
@@ -6738,24 +6727,12 @@
|
|
|
6738
6727
|
"type": "boolean",
|
|
6739
6728
|
"default": "false"
|
|
6740
6729
|
},
|
|
6741
|
-
{
|
|
6742
|
-
"name": "paddingType",
|
|
6743
|
-
"attribute": "padding-type",
|
|
6744
|
-
"description": "How much padding to render list items with",
|
|
6745
|
-
"type": "'normal'|'slim'",
|
|
6746
|
-
"default": "\"normal\""
|
|
6747
|
-
},
|
|
6748
6730
|
{
|
|
6749
6731
|
"name": "selectAllPagesAllowed",
|
|
6750
6732
|
"attribute": "select-all-pages-allowed",
|
|
6751
6733
|
"description": "Whether all pages can be selected",
|
|
6752
6734
|
"type": "boolean",
|
|
6753
6735
|
"default": "false"
|
|
6754
|
-
},
|
|
6755
|
-
{
|
|
6756
|
-
"name": "slim",
|
|
6757
|
-
"type": "boolean",
|
|
6758
|
-
"default": "false"
|
|
6759
6736
|
}
|
|
6760
6737
|
],
|
|
6761
6738
|
"slots": [
|
|
@@ -6784,7 +6761,7 @@
|
|
|
6784
6761
|
{
|
|
6785
6762
|
"name": "padding-type",
|
|
6786
6763
|
"description": "How much padding to render list items with",
|
|
6787
|
-
"type": "'normal'|'
|
|
6764
|
+
"type": "'normal'|'none'",
|
|
6788
6765
|
"default": "\"normal\""
|
|
6789
6766
|
},
|
|
6790
6767
|
{
|
|
@@ -6863,16 +6840,11 @@
|
|
|
6863
6840
|
"type": "array",
|
|
6864
6841
|
"default": "[842,636,580,0]"
|
|
6865
6842
|
},
|
|
6866
|
-
{
|
|
6867
|
-
"name": "slim",
|
|
6868
|
-
"type": "boolean",
|
|
6869
|
-
"default": "false"
|
|
6870
|
-
},
|
|
6871
6843
|
{
|
|
6872
6844
|
"name": "paddingType",
|
|
6873
6845
|
"attribute": "padding-type",
|
|
6874
6846
|
"description": "How much padding to render list items with",
|
|
6875
|
-
"type": "'normal'|'
|
|
6847
|
+
"type": "'normal'|'none'",
|
|
6876
6848
|
"default": "\"normal\""
|
|
6877
6849
|
},
|
|
6878
6850
|
{
|
|
@@ -7183,7 +7155,7 @@
|
|
|
7183
7155
|
{
|
|
7184
7156
|
"name": "padding-type",
|
|
7185
7157
|
"description": "How much padding to render list items with",
|
|
7186
|
-
"type": "'normal'|'
|
|
7158
|
+
"type": "'normal'|'none'",
|
|
7187
7159
|
"default": "\"normal\""
|
|
7188
7160
|
},
|
|
7189
7161
|
{
|
|
@@ -7274,16 +7246,11 @@
|
|
|
7274
7246
|
"type": "array",
|
|
7275
7247
|
"default": "[842,636,580,0]"
|
|
7276
7248
|
},
|
|
7277
|
-
{
|
|
7278
|
-
"name": "slim",
|
|
7279
|
-
"type": "boolean",
|
|
7280
|
-
"default": "false"
|
|
7281
|
-
},
|
|
7282
7249
|
{
|
|
7283
7250
|
"name": "paddingType",
|
|
7284
7251
|
"attribute": "padding-type",
|
|
7285
7252
|
"description": "How much padding to render list items with",
|
|
7286
|
-
"type": "'normal'|'
|
|
7253
|
+
"type": "'normal'|'none'",
|
|
7287
7254
|
"default": "\"normal\""
|
|
7288
7255
|
},
|
|
7289
7256
|
{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.8.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",
|