@brightspace-ui/core 2.7.0 → 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.
Files changed (10) hide show
  1. package/components/filter/filter.js +1 -2
  2. package/components/list/README.md +2 -3
  3. package/components/list/demo/list-item-layouts.html +0 -56
  4. package/components/list/list-header.js +0 -20
  5. package/components/list/list-item-content.js +6 -2
  6. package/components/list/list-item-generic-layout.js +2 -2
  7. package/components/list/list-item-mixin.js +8 -34
  8. package/custom-elements.json +6 -39
  9. package/package.json +1 -1
  10. package/tools/mathjax-test-context.js +2 -0
package/components/filter/filter.js CHANGED
@@ -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
  `)}
package/components/list/README.md CHANGED
@@ -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), `slim`, `none`)|
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
 
package/components/list/demo/list-item-layouts.html CHANGED
@@ -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>
package/components/list/list-header.js CHANGED
@@ -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
 
package/components/list/list-item-content.js CHANGED
@@ -25,17 +25,21 @@ class ListItemContent extends LitElement {
25
25
  .d2l-list-item-content-text-secondary {
26
26
  color: var(--d2l-list-item-content-text-secondary-color, var(--d2l-color-tungsten));
27
27
  margin: 0;
28
- margin-top: 0.15rem;
29
28
  overflow: hidden;
30
29
  }
31
30
 
32
31
  .d2l-list-item-content-text-supporting-info {
33
32
  color: var(--d2l-color-ferrite);
34
33
  margin: 0;
35
- margin-top: 0.15rem;
36
34
  overflow: hidden;
37
35
  }
38
36
 
37
+ .d2l-list-item-content-text-secondary ::slotted(*),
38
+ .d2l-list-item-content-text-supporting-info ::slotted(*) {
39
+ margin-top: 0.15rem;
40
+ }
41
+
42
+
39
43
  `];
40
44
  }
41
45
 
package/components/list/list-item-generic-layout.js CHANGED
@@ -96,12 +96,12 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
96
96
  }
97
97
  ::slotted([slot="outside-control"]) {
98
98
  grid-column: outside-control-start / outside-control-end;
99
- width: 2.1rem;
99
+ width: 2.2rem;
100
100
  }
101
101
 
102
102
  ::slotted([slot="control"]) {
103
103
  grid-column: control-start / control-end;
104
- width: 2.1rem;
104
+ width: 2.2rem;
105
105
  }
106
106
 
107
107
  ::slotted([slot="content"]) {
package/components/list/list-item-mixin.js CHANGED
@@ -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'|'slim'|'none'}
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 },
@@ -118,9 +111,8 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
118
111
  [slot="control-container"]::after {
119
112
  border-top: 1px solid var(--d2l-color-mica);
120
113
  content: "";
121
- left: 4px;
122
114
  position: absolute;
123
- width: calc(100% - 8px);
115
+ width: 100%;
124
116
  }
125
117
  :host(:first-of-type) [slot="control-container"]::before {
126
118
  top: 0;
@@ -162,9 +154,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
162
154
  padding-left: 0.9rem;
163
155
  padding-right: 0;
164
156
  }
165
- .d2l-list-item-content ::slotted(*) {
166
- margin-top: 0.05rem;
167
- }
157
+
168
158
  :host([_hovering-primary-action]) .d2l-list-item-content,
169
159
  :host([_focusing-primary-action]) .d2l-list-item-content {
170
160
  --d2l-list-item-content-text-color: var(--d2l-color-celestine);
@@ -185,14 +175,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
185
175
  padding-left: 0.55rem;
186
176
  padding-right: 0;
187
177
  }
188
- :host([slim]) [slot="content"] { /* TODO, remove */
189
- padding-bottom: 0.35rem;
190
- padding-top: 0.4rem;
191
- }
192
- :host([padding-type="slim"]) [slot="content"] {
193
- padding-bottom: 0.35rem;
194
- padding-top: 0.4rem;
195
- }
196
178
  :host([padding-type="none"]) [slot="content"] {
197
179
  padding-bottom: 0;
198
180
  padding-top: 0;
@@ -203,7 +185,7 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
203
185
  border-radius: 6px;
204
186
  flex-grow: 0;
205
187
  flex-shrink: 0;
206
- margin: 0.15rem 0.9rem 0.15rem 0;
188
+ margin-right: 0.9rem;
207
189
  max-height: 2.6rem;
208
190
  max-width: 4.5rem;
209
191
  overflow: hidden;
@@ -229,7 +211,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
229
211
  gap: 0.3rem;
230
212
  grid-auto-columns: 1fr;
231
213
  grid-auto-flow: column;
232
- margin: 0.15rem 0;
233
214
  }
234
215
 
235
216
  .d2l-list-item-content-extend-separators ::slotted([slot="actions"]),
@@ -276,21 +257,13 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
276
257
  margin-right: 0;
277
258
  }
278
259
  d2l-selection-input {
279
- margin: 1.15rem 0.9rem 1.15rem 0;
260
+ margin: 0.55rem 0.9rem 0.55rem 0;
280
261
  }
281
262
  .d2l-list-item-content-extend-separators d2l-selection-input {
282
263
  margin-left: 0.9rem;
283
264
  }
284
- :host([slim]) d2l-selection-input { /* TODO, remove */
285
- margin-bottom: 0.55rem;
286
- margin-top: 0.55rem;
287
- }
288
- :host([padding-type="slim"]) d2l-selection-input {
289
- margin-bottom: 0.55rem;
290
- margin-top: 0.55rem;
291
- }
292
265
  d2l-list-item-drag-handle {
293
- margin: 0.8rem 0 0.8rem 0.4rem;
266
+ margin: 0.25rem 0 0.25rem 0.4rem;
294
267
  }
295
268
  :host([dir="rtl"]) d2l-selection-input {
296
269
  margin-left: 0.9rem;
@@ -306,7 +279,9 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
306
279
  margin: 0 -12px;
307
280
  }
308
281
  .d2l-list-item-content-extend-separators [slot="outside-control-container"] {
282
+ border-left: none;
309
283
  border-radius: 0;
284
+ border-right: none;
310
285
  }
311
286
  :host([draggable]) [slot="outside-control-container"],
312
287
  .d2l-list-item-content-extend-separators [slot="outside-control-container"] {
@@ -368,7 +343,6 @@ export const ListItemMixin = superclass => class extends LocalizeCoreElement(Lis
368
343
  constructor() {
369
344
  super();
370
345
  this.breakpoints = defaultBreakpoints;
371
- this.slim = false;
372
346
  this.paddingType = 'normal';
373
347
  this._breakpoint = 0;
374
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'|'slim'|'none'",
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'|'slim'|'none'",
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'|'slim'|'none'",
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'|'slim'|'none'",
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'|'slim'|'none'",
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'|'slim'|'none'",
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.7.0",
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",
package/tools/mathjax-test-context.js CHANGED
@@ -1,3 +1,5 @@
1
+ console.warn('Using mathjax test context, this is intended for demo pages and tests only');
2
+
1
3
  const disabled = window.location.search.indexOf('latex=false') !== -1;
2
4
 
3
5
  document.getElementsByTagName('html')[0].dataset.mathjaxContext = JSON.stringify({