@brightspace-ui/core 2.142.2 → 2.143.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/card/card.js +2 -2
- package/components/count-badge/count-badge-mixin.js +1 -1
- package/components/list/demo/list-color.html +100 -11
- package/components/list/list-controls.js +3 -0
- package/components/list/list-item-mixin.js +20 -2
- package/components/tooltip/tooltip.js +8 -1
- package/package.json +2 -2
package/components/card/card.js
CHANGED
|
@@ -318,7 +318,7 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
|
|
|
318
318
|
_onBadgeResize(entries) {
|
|
319
319
|
if (!entries || entries.length === 0) return;
|
|
320
320
|
const entry = entries[0];
|
|
321
|
-
this._badgeMarginTop = `${-0.5 * entry.contentRect.height}px
|
|
321
|
+
requestAnimationFrame(() => this._badgeMarginTop = `${-0.5 * entry.contentRect.height}px`);
|
|
322
322
|
}
|
|
323
323
|
|
|
324
324
|
_onDropdownClose() {
|
|
@@ -334,7 +334,7 @@ class Card extends FocusMixin(RtlMixin(LitElement)) {
|
|
|
334
334
|
const entry = entries[0];
|
|
335
335
|
// firefox has a rounding error when calculating the height of the contentRect
|
|
336
336
|
// with `box-sizing: border-box;` so check for numbers which are close to 0 as well
|
|
337
|
-
this._footerHidden = (entry.contentRect.height < 1);
|
|
337
|
+
requestAnimationFrame(() => this._footerHidden = (entry.contentRect.height < 1));
|
|
338
338
|
}
|
|
339
339
|
|
|
340
340
|
_onLinkBlur() {
|
|
@@ -216,7 +216,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(S
|
|
|
216
216
|
aria-live="${this.announceChanges ? 'polite' : 'off'}">
|
|
217
217
|
${innerHtml}
|
|
218
218
|
</div>
|
|
219
|
-
${this.hasTooltip && !this.skeleton ? html`<d2l-tooltip for="${badgeId}" for-type="label">${this.text}</d2l-tooltip>` : null}
|
|
219
|
+
${this.hasTooltip && !this.skeleton ? html`<d2l-tooltip class="vdiff-target" for="${badgeId}" for-type="label">${this.text}</d2l-tooltip>` : null}
|
|
220
220
|
`;
|
|
221
221
|
}
|
|
222
222
|
};
|
|
@@ -72,6 +72,10 @@
|
|
|
72
72
|
<d2l-demo-snippet>
|
|
73
73
|
<template>
|
|
74
74
|
<d2l-list extend-separators>
|
|
75
|
+
<d2l-list-controls slot="controls">
|
|
76
|
+
<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
|
|
77
|
+
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
78
|
+
</d2l-list-controls>
|
|
75
79
|
<d2l-list-item key="L4-1" label="Label for L4-1" color="#ffba59" selectable>
|
|
76
80
|
<d2l-list-item-content>
|
|
77
81
|
<div>Ice Sheets (L4)</div>
|
|
@@ -264,34 +268,122 @@
|
|
|
264
268
|
</template>
|
|
265
269
|
</d2l-demo-snippet>
|
|
266
270
|
|
|
267
|
-
|
|
271
|
+
|
|
272
|
+
<h2>Nested - Extend Separators</h2>
|
|
268
273
|
|
|
269
274
|
<d2l-demo-snippet code-view-hidden>
|
|
270
275
|
<template>
|
|
271
|
-
<d2l-list>
|
|
276
|
+
<d2l-list extend-separators>
|
|
277
|
+
<d2l-list-item key="L1-2" label="Label for L1-2">
|
|
278
|
+
<d2l-list-item-content>
|
|
279
|
+
<div>Biology (L1)</div>
|
|
280
|
+
</d2l-list-item-content>
|
|
281
|
+
</d2l-list-item>
|
|
282
|
+
<d2l-list-item key="L1-1" label="Label for L1-1" color="#00ff00ab">
|
|
283
|
+
<d2l-list-item-content>
|
|
284
|
+
<div>Earth Sciences (L1)</div>
|
|
285
|
+
<div slot="supporting-info">Earth science or geoscience includes all fields of natural science related to planet Earth. This is a branch of science dealing with the physical and chemical constitution of Earth and its atmosphere. Earth science can be considered to be a branch of planetary science, but with a much older history.</div>
|
|
286
|
+
</d2l-list-item-content>
|
|
287
|
+
<d2l-list slot="nested" grid separators="all" extend-separators>
|
|
288
|
+
<d2l-list-item key="L2-1" label="Label for L2-1" color="#ffba59" >
|
|
289
|
+
<d2l-list-item-content>
|
|
290
|
+
<div>Introductory Earth Sciences (L2)</div>
|
|
291
|
+
<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering. Students will gain an appreciation of how these processes have controlled the evolution of our planet and the role of geology in meeting society's current and future demand for sustainable energy and mineral resources.</div>
|
|
292
|
+
</d2l-list-item-content>
|
|
293
|
+
</d2l-list-item>
|
|
294
|
+
</d2l-list>
|
|
295
|
+
<div slot="actions">
|
|
296
|
+
<d2l-button-icon text="My Button" icon="tier1:preview"></d2l-button-icon>
|
|
297
|
+
<d2l-dropdown-more text="Open!">
|
|
298
|
+
<d2l-dropdown-menu>
|
|
299
|
+
<d2l-menu label="Astronomy">
|
|
300
|
+
<d2l-menu-item text="Introduction"></d2l-menu-item>
|
|
301
|
+
<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
|
|
302
|
+
</d2l-menu>
|
|
303
|
+
</d2l-dropdown-menu>
|
|
304
|
+
</d2l-dropdown-more>
|
|
305
|
+
</div>
|
|
306
|
+
</d2l-list-item>
|
|
307
|
+
</d2l-list>
|
|
308
|
+
</template>
|
|
309
|
+
</d2l-demo-snippet>
|
|
310
|
+
|
|
311
|
+
<h2>Nested - Extend Separators, Selectable</h2>
|
|
312
|
+
|
|
313
|
+
<d2l-demo-snippet code-view-hidden>
|
|
314
|
+
<template>
|
|
315
|
+
<d2l-list extend-separators>
|
|
272
316
|
<d2l-list-controls slot="controls">
|
|
273
317
|
<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
|
|
274
318
|
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
275
319
|
</d2l-list-controls>
|
|
276
|
-
<d2l-list-item selectable key="L1-
|
|
320
|
+
<d2l-list-item selectable key="L1-2" label="Label for L1-2">
|
|
321
|
+
<d2l-list-item-content>
|
|
322
|
+
<div>Biology (L1)</div>
|
|
323
|
+
</d2l-list-item-content>
|
|
324
|
+
</d2l-list-item>
|
|
325
|
+
<d2l-list-item selectable key="L1-1" label="Label for L1-1" color="#00ff00ab">
|
|
277
326
|
<d2l-list-item-content>
|
|
278
327
|
<div>Earth Sciences (L1)</div>
|
|
279
328
|
<div slot="supporting-info">Earth science or geoscience includes all fields of natural science related to planet Earth. This is a branch of science dealing with the physical and chemical constitution of Earth and its atmosphere. Earth science can be considered to be a branch of planetary science, but with a much older history.</div>
|
|
280
329
|
</d2l-list-item-content>
|
|
281
|
-
<d2l-list slot="nested" grid separators="all">
|
|
282
|
-
<d2l-list-item selectable key="L2-1" label="Label for L2-1" color="#ffba59"
|
|
330
|
+
<d2l-list slot="nested" grid separators="all" extend-separators>
|
|
331
|
+
<d2l-list-item selectable key="L2-1" label="Label for L2-1" color="#ffba59" >
|
|
332
|
+
<d2l-list-item-content>
|
|
333
|
+
<div>Introductory Earth Sciences (L2)</div>
|
|
334
|
+
<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering. Students will gain an appreciation of how these processes have controlled the evolution of our planet and the role of geology in meeting society's current and future demand for sustainable energy and mineral resources.</div>
|
|
335
|
+
</d2l-list-item-content>
|
|
336
|
+
</d2l-list-item>
|
|
337
|
+
</d2l-list>
|
|
338
|
+
<div slot="actions">
|
|
339
|
+
<d2l-button-icon text="My Button" icon="tier1:preview"></d2l-button-icon>
|
|
340
|
+
<d2l-dropdown-more text="Open!">
|
|
341
|
+
<d2l-dropdown-menu>
|
|
342
|
+
<d2l-menu label="Astronomy">
|
|
343
|
+
<d2l-menu-item text="Introduction"></d2l-menu-item>
|
|
344
|
+
<d2l-menu-item text="Searching for the Heavens "></d2l-menu-item>
|
|
345
|
+
</d2l-menu>
|
|
346
|
+
</d2l-dropdown-menu>
|
|
347
|
+
</d2l-dropdown-more>
|
|
348
|
+
</div>
|
|
349
|
+
</d2l-list-item>
|
|
350
|
+
</d2l-list>
|
|
351
|
+
</template>
|
|
352
|
+
</d2l-demo-snippet>
|
|
353
|
+
|
|
354
|
+
<h2>Nested - Extend Separators, Expandable, Selectable</h2>
|
|
355
|
+
|
|
356
|
+
<d2l-demo-snippet code-view-hidden>
|
|
357
|
+
<template>
|
|
358
|
+
<d2l-list extend-separators>
|
|
359
|
+
<d2l-list-controls slot="controls">
|
|
360
|
+
<d2l-selection-action icon="tier1:bookmark-hollow" text="Bookmark" requires-selection></d2l-selection-action>
|
|
361
|
+
<d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
|
|
362
|
+
</d2l-list-controls>
|
|
363
|
+
<d2l-list-item selectable key="L1-1" label="Label for L1-1">
|
|
364
|
+
<d2l-list-item-content>
|
|
365
|
+
<div>Biology (L1)</div>
|
|
366
|
+
</d2l-list-item-content>
|
|
367
|
+
</d2l-list-item>
|
|
368
|
+
<d2l-list-item selectable key="L1-2" label="Label for L1-2" expandable expanded color="#00ff00ab">
|
|
369
|
+
<d2l-list-item-content>
|
|
370
|
+
<div>Earth Sciences (L1)</div>
|
|
371
|
+
<div slot="supporting-info">Earth science or geoscience includes all fields of natural science related to planet Earth. This is a branch of science dealing with the physical and chemical constitution of Earth and its atmosphere. Earth science can be considered to be a branch of planetary science, but with a much older history.</div>
|
|
372
|
+
</d2l-list-item-content>
|
|
373
|
+
<d2l-list slot="nested" grid separators="all" extend-separators>
|
|
374
|
+
<d2l-list-item selectable key="L2-1" label="Label for L2-1" color="#ffba59" expandable>
|
|
283
375
|
<d2l-list-item-content>
|
|
284
376
|
<div>Introductory Earth Sciences (L2)</div>
|
|
285
377
|
<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain building, glaciation and weathering. Students will gain an appreciation of how these processes have controlled the evolution of our planet and the role of geology in meeting society's current and future demand for sustainable energy and mineral resources.</div>
|
|
286
378
|
</d2l-list-item-content>
|
|
287
379
|
<d2l-list slot="nested" grid separators="all">
|
|
288
|
-
<d2l-list-item selectable key="L3-1" label="Label for L3-1" color="#ffba59" expandable
|
|
380
|
+
<d2l-list-item selectable key="L3-1" label="Label for L3-1" color="#ffba59" expandable>
|
|
289
381
|
<d2l-list-item-content>
|
|
290
382
|
<div>Glaciation (L3)</div>
|
|
291
383
|
<div slot="supporting-info">Supporting Info</div>
|
|
292
384
|
</d2l-list-item-content>
|
|
293
|
-
<d2l-list slot="nested" grid separators="all">
|
|
294
|
-
<d2l-list-item selectable key="L4-1" label="Label for L4-1" color="#ffba59"
|
|
385
|
+
<d2l-list slot="nested" grid separators="all" extend-separators>
|
|
386
|
+
<d2l-list-item selectable key="L4-1" label="Label for L4-1" color="#ffba59">
|
|
295
387
|
<d2l-list-item-content>
|
|
296
388
|
<div>Ice Sheets (L4)</div>
|
|
297
389
|
<div slot="supporting-info">Supporting Info</div>
|
|
@@ -320,9 +412,6 @@
|
|
|
320
412
|
</d2l-dropdown-more>
|
|
321
413
|
</div>
|
|
322
414
|
</d2l-list-item>
|
|
323
|
-
<d2l-list-item selectable key="L1-2" label="Label for L1-2">
|
|
324
|
-
<div>Biology (L1)</div>
|
|
325
|
-
</d2l-list-item>
|
|
326
415
|
</d2l-list>
|
|
327
416
|
</template>
|
|
328
417
|
</d2l-demo-snippet>
|
|
@@ -167,8 +167,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
167
167
|
.d2l-list-item-content-extend-separators > [slot="control"] {
|
|
168
168
|
width: 3rem;
|
|
169
169
|
}
|
|
170
|
-
.d2l-list-item-content-extend-separators > [slot="content"],
|
|
171
|
-
:host([dir="rtl"]) .d2l-list-item-content-extend-separators > [slot="content"] {
|
|
170
|
+
:host(:not([_has-color-slot])) .d2l-list-item-content-extend-separators > [slot="content"],
|
|
171
|
+
:host(:not([_has-color-slot])[dir="rtl"]) .d2l-list-item-content-extend-separators > [slot="content"] {
|
|
172
172
|
padding-left: 0.9rem;
|
|
173
173
|
padding-right: 0.9rem;
|
|
174
174
|
}
|
|
@@ -320,6 +320,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
320
320
|
margin: 0;
|
|
321
321
|
}
|
|
322
322
|
|
|
323
|
+
:host([_has-color-slot]) .d2l-list-item-content-extend-separators [slot="outside-control-container"],
|
|
324
|
+
:host([dir="rtl"][_has-color-slot]) .d2l-list-item-content-extend-separators [slot="outside-control-container"] {
|
|
325
|
+
margin: 0 !important;
|
|
326
|
+
}
|
|
327
|
+
|
|
323
328
|
:host(:not([draggable])[_has-color-slot]) [slot="outside-control-container"] {
|
|
324
329
|
margin-left: -6px;
|
|
325
330
|
}
|
|
@@ -396,6 +401,19 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
396
401
|
padding-left: 12px;
|
|
397
402
|
padding-right: 0;
|
|
398
403
|
}
|
|
404
|
+
:host(:not([_nested])) .d2l-list-item-content-extend-separators .d2l-list-item-color-outer {
|
|
405
|
+
padding-left: 3px;
|
|
406
|
+
}
|
|
407
|
+
:host(:not([_nested])[dir="rtl"]) .d2l-list-item-content-extend-separators .d2l-list-item-color-outer {
|
|
408
|
+
padding-left: 12px;
|
|
409
|
+
padding-right: 3px;
|
|
410
|
+
}
|
|
411
|
+
:host([selectable]:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators .d2l-list-item-color-outer {
|
|
412
|
+
padding-right: 0;
|
|
413
|
+
}
|
|
414
|
+
:host([selectable]:not([_render-expand-collapse-slot])[dir="rtl"]) .d2l-list-item-content-extend-separators .d2l-list-item-color-outer {
|
|
415
|
+
padding-left: 0;
|
|
416
|
+
}
|
|
399
417
|
.d2l-list-item-color-outer + .d2l-list-expand-collapse {
|
|
400
418
|
margin-left: -6px;
|
|
401
419
|
}
|
|
@@ -3,6 +3,7 @@ import { css, html, LitElement } from 'lit';
|
|
|
3
3
|
import { cssEscape, elemIdListAdd, elemIdListRemove, getBoundingAncestor, getOffsetParent } from '../../helpers/dom.js';
|
|
4
4
|
import { announce } from '../../helpers/announce.js';
|
|
5
5
|
import { bodySmallStyles } from '../typography/styles.js';
|
|
6
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
6
7
|
import { getUniqueId } from '../../helpers/uniqueId.js';
|
|
7
8
|
import { isFocusable } from '../../helpers/focus.js';
|
|
8
9
|
import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
|
|
@@ -501,11 +502,17 @@ class Tooltip extends RtlMixin(LitElement) {
|
|
|
501
502
|
}
|
|
502
503
|
}
|
|
503
504
|
|
|
505
|
+
const contentClasses = {
|
|
506
|
+
'd2l-tooltip-content': true,
|
|
507
|
+
'd2l-body-small': true,
|
|
508
|
+
'vdiff-target': this.showing
|
|
509
|
+
};
|
|
510
|
+
|
|
504
511
|
// Note: role="text" is a workaround for Safari. Otherwise, list-item content is not announced with VoiceOver
|
|
505
512
|
return html`
|
|
506
513
|
<div class="d2l-tooltip-container">
|
|
507
514
|
<div class="d2l-tooltip-position" style=${styleMap(tooltipPositionStyle)}>
|
|
508
|
-
<div class="
|
|
515
|
+
<div class="${classMap(contentClasses)}">
|
|
509
516
|
<div role="text">
|
|
510
517
|
<slot></slot>
|
|
511
518
|
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.143.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",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@babel/eslint-parser": "^7",
|
|
48
48
|
"@brightspace-ui/stylelint-config": "^0.8",
|
|
49
|
-
"@brightspace-ui/testing": "^0.
|
|
49
|
+
"@brightspace-ui/testing": "^0.32",
|
|
50
50
|
"@open-wc/semantic-dom-diff": "^0.20",
|
|
51
51
|
"@rollup/plugin-dynamic-import-vars": "^2",
|
|
52
52
|
"@rollup/plugin-node-resolve": "^15",
|