@brightspace-ui/core 3.194.2 → 3.196.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.
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
|
|
7
7
|
<script type="module">
|
|
8
8
|
import '../../demo/demo-page.js';
|
|
9
|
+
import '../../button/button.js';
|
|
9
10
|
import '../../button/button-icon.js';
|
|
10
11
|
import '../../button/button-subtle.js';
|
|
11
12
|
import '../../button/button-toggle.js';
|
|
@@ -44,6 +45,59 @@
|
|
|
44
45
|
d2l-list-item[layout="tile"] img[slot="illustration"] {
|
|
45
46
|
object-fit: cover;
|
|
46
47
|
}
|
|
48
|
+
|
|
49
|
+
d2l-list-item > .custom-content {
|
|
50
|
+
display: flex;
|
|
51
|
+
gap: var(--d2l-list-item-padding);
|
|
52
|
+
}
|
|
53
|
+
d2l-list-item > .custom-content > d2l-list-item-content {
|
|
54
|
+
flex: auto;
|
|
55
|
+
}
|
|
56
|
+
d2l-list-item > .custom-content > d2l-icon {
|
|
57
|
+
flex: none;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
d2l-list-item[layout="normal"] > .custom-content {
|
|
61
|
+
flex-direction: row;
|
|
62
|
+
width: 100%;
|
|
63
|
+
}
|
|
64
|
+
d2l-list-item[layout="normal"] > .custom-content > d2l-icon {
|
|
65
|
+
height: 3rem;
|
|
66
|
+
width: 3rem;
|
|
67
|
+
}
|
|
68
|
+
d2l-list-item[layout="normal"] > .custom-content > img {
|
|
69
|
+
display: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
d2l-list-item[layout="tile"] > .custom-content {
|
|
73
|
+
flex-direction: column;
|
|
74
|
+
height: 100%;
|
|
75
|
+
}
|
|
76
|
+
d2l-list-item[layout="tile"] > .custom-content > img {
|
|
77
|
+
border-bottom: 1px solid var(--d2l-list-item-border-color);
|
|
78
|
+
border-start-end-radius: var(--d2l-list-item-illustration-border-radius);
|
|
79
|
+
border-start-start-radius: var(--d2l-list-item-illustration-border-radius);
|
|
80
|
+
height: 5rem;
|
|
81
|
+
object-fit: cover;
|
|
82
|
+
width: 100%;
|
|
83
|
+
}
|
|
84
|
+
d2l-list-item[layout="tile"] > .custom-content > d2l-icon {
|
|
85
|
+
background-color: white;
|
|
86
|
+
border: 1px solid var(--d2l-list-item-border-color);
|
|
87
|
+
border-radius: var(--d2l-list-item-illustration-border-radius);
|
|
88
|
+
box-sizing: border-box;
|
|
89
|
+
height: 4rem;
|
|
90
|
+
margin-block-start: calc(-1 * var(--d2l-list-item-padding) - 2rem);
|
|
91
|
+
margin-inline: auto;
|
|
92
|
+
padding: var(--d2l-list-item-padding);
|
|
93
|
+
width: 4rem;
|
|
94
|
+
}
|
|
95
|
+
d2l-list-item[layout="tile"] > .custom-content > d2l-list-item-content {
|
|
96
|
+
padding-inline: var(--d2l-list-item-padding);
|
|
97
|
+
}
|
|
98
|
+
d2l-list-item[layout="tile"] > .custom-content > .footer {
|
|
99
|
+
padding: var(--d2l-list-item-padding);
|
|
100
|
+
}
|
|
47
101
|
</style>
|
|
48
102
|
</head>
|
|
49
103
|
<body unresolved>
|
|
@@ -323,6 +377,96 @@
|
|
|
323
377
|
</template>
|
|
324
378
|
</d2l-demo-snippet>
|
|
325
379
|
|
|
380
|
+
<h2>Custom Layout</h2>
|
|
381
|
+
|
|
382
|
+
<d2l-demo-snippet>
|
|
383
|
+
<template>
|
|
384
|
+
<d2l-button-toggle pressed>
|
|
385
|
+
<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
|
|
386
|
+
<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
|
|
387
|
+
</d2l-button-toggle>
|
|
388
|
+
<d2l-list layout="tiles">
|
|
389
|
+
<d2l-list-item label="item 1" key="1" selectable tile-padding-type="none">
|
|
390
|
+
<div class="custom-content">
|
|
391
|
+
<img src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
392
|
+
<d2l-list-item-content>
|
|
393
|
+
<div>Identify categories of physical activities</div>
|
|
394
|
+
<div slot="secondary">Secondary Information</div>
|
|
395
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
396
|
+
</d2l-list-item-content>
|
|
397
|
+
<div class="footer">
|
|
398
|
+
<d2l-button style="width: 100%;">Shiny Button</d2l-button>
|
|
399
|
+
</div>
|
|
400
|
+
</div>
|
|
401
|
+
<div slot="actions">
|
|
402
|
+
<d2l-button-icon text="More" icon="tier1:more" translucent></d2l-button-icon>
|
|
403
|
+
</div>
|
|
404
|
+
</d2l-list-item>
|
|
405
|
+
<d2l-list-item label="item 2" key="2" selectable tile-padding-type="none">
|
|
406
|
+
<div class="custom-content">
|
|
407
|
+
<img src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
408
|
+
<d2l-icon icon="tier3:home"></d2l-icon>
|
|
409
|
+
<d2l-list-item-content>
|
|
410
|
+
<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
|
|
411
|
+
<div slot="secondary">Secondary Information</div>
|
|
412
|
+
<div slot="supporting-info">Specific Expectation B2.1</div>
|
|
413
|
+
</d2l-list-item-content>
|
|
414
|
+
<div class="footer">
|
|
415
|
+
<d2l-button style="width: 100%;">Shiny Button</d2l-button>
|
|
416
|
+
</div>
|
|
417
|
+
</div>
|
|
418
|
+
<div slot="actions">
|
|
419
|
+
<d2l-button-icon text="More" icon="tier1:more" translucent></d2l-button-icon>
|
|
420
|
+
</div>
|
|
421
|
+
</d2l-list-item>
|
|
422
|
+
</d2l-list>
|
|
423
|
+
<script data-demo-hide>
|
|
424
|
+
(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
|
|
425
|
+
</script>
|
|
426
|
+
</template>
|
|
427
|
+
</d2l-demo-snippet>
|
|
428
|
+
|
|
429
|
+
<h2>Tile Breaks</h2>
|
|
430
|
+
|
|
431
|
+
<d2l-demo-snippet>
|
|
432
|
+
<template>
|
|
433
|
+
<d2l-button-toggle pressed>
|
|
434
|
+
<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
|
|
435
|
+
<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
|
|
436
|
+
</d2l-button-toggle>
|
|
437
|
+
<d2l-list layout="tiles">
|
|
438
|
+
<d2l-list-item label="item 1" key="1">
|
|
439
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
|
|
440
|
+
<d2l-list-item-content>
|
|
441
|
+
<div>Identify categories of physical activities</div>
|
|
442
|
+
<div slot="secondary">Secondary Information</div>
|
|
443
|
+
<div slot="supporting-info">Specific Expectation A1.2</div>
|
|
444
|
+
</d2l-list-item-content>
|
|
445
|
+
</d2l-list-item>
|
|
446
|
+
<div class="d2l-list-tile-break"></div>
|
|
447
|
+
<d2l-list-item label="item 2" key="2">
|
|
448
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
|
|
449
|
+
<d2l-list-item-content>
|
|
450
|
+
<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
|
|
451
|
+
<div slot="secondary">Secondary Information</div>
|
|
452
|
+
<div slot="supporting-info">Specific Expectation B2.1</div>
|
|
453
|
+
</d2l-list-item-content>
|
|
454
|
+
</d2l-list-item>
|
|
455
|
+
<d2l-list-item label="item 3" key="3">
|
|
456
|
+
<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
|
|
457
|
+
<d2l-list-item-content>
|
|
458
|
+
<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
|
|
459
|
+
<div slot="secondary">Secondary Information</div>
|
|
460
|
+
<div slot="supporting-info">Specific Expectation B2.2</div>
|
|
461
|
+
</d2l-list-item-content>
|
|
462
|
+
</d2l-list-item>
|
|
463
|
+
</d2l-list>
|
|
464
|
+
<script data-demo-hide>
|
|
465
|
+
(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
|
|
466
|
+
</script>
|
|
467
|
+
</template>
|
|
468
|
+
</d2l-demo-snippet>
|
|
469
|
+
|
|
326
470
|
</d2l-demo-page>
|
|
327
471
|
</body>
|
|
328
472
|
</html>
|
|
@@ -147,6 +147,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
147
147
|
display: none;
|
|
148
148
|
}
|
|
149
149
|
|
|
150
|
+
:host d2l-list-item-generic-layout {
|
|
151
|
+
--d2l-list-item-border-color: var(--d2l-color-mica);
|
|
152
|
+
--d2l-list-item-illustration-border-radius: 5px;
|
|
153
|
+
--d2l-list-item-padding: 0.6rem;
|
|
154
|
+
}
|
|
155
|
+
|
|
150
156
|
:host([dragging]) d2l-list-item-generic-layout {
|
|
151
157
|
filter: grayscale(75%);
|
|
152
158
|
opacity: 0.4;
|
|
@@ -455,7 +461,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
455
461
|
box-sizing: border-box;
|
|
456
462
|
flex-direction: column;
|
|
457
463
|
height: 100%;
|
|
458
|
-
padding:
|
|
464
|
+
padding: var(--d2l-list-item-padding);
|
|
459
465
|
}
|
|
460
466
|
:host([layout="tile"][tile-padding-type="none"]) .d2l-list-item-content {
|
|
461
467
|
padding: 0;
|
|
@@ -465,11 +471,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
465
471
|
:host([layout="tile"]) .d2l-list-item-illustration > * {
|
|
466
472
|
border-end-end-radius: 0;
|
|
467
473
|
border-end-start-radius: 0;
|
|
468
|
-
border-start-end-radius:
|
|
469
|
-
border-start-start-radius:
|
|
474
|
+
border-start-end-radius: var(--d2l-list-item-illustration-border-radius);
|
|
475
|
+
border-start-start-radius: var(--d2l-list-item-illustration-border-radius);
|
|
470
476
|
box-sizing: border-box;
|
|
471
|
-
margin-block: -
|
|
472
|
-
margin-inline: -
|
|
477
|
+
margin-block: calc(-1 * var(--d2l-list-item-padding) + 1px) var(--d2l-list-item-padding);
|
|
478
|
+
margin-inline: calc(-1 * var(--d2l-list-item-padding) + 1px);
|
|
473
479
|
max-height: unset;
|
|
474
480
|
max-width: calc(100% + 1.1rem);
|
|
475
481
|
}
|
|
@@ -482,7 +488,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
482
488
|
:host([layout="tile"][tile-header]) [slot="content"] ::slotted([slot="illustration"]),
|
|
483
489
|
:host([layout="tile"][tile-header]) .d2l-list-item-illustration > * {
|
|
484
490
|
border-radius: 0;
|
|
485
|
-
margin-block: -
|
|
491
|
+
margin-block: calc(-1 * var(--d2l-list-item-padding)) var(--d2l-list-item-padding);
|
|
486
492
|
}
|
|
487
493
|
:host([layout="tile"][tile-header][tile-padding-type="none"]) [slot="content"] ::slotted([slot="illustration"]),
|
|
488
494
|
:host([layout="tile"][tile-header][tile-padding-type="none"]) .d2l-list-item-illustration > * {
|
|
@@ -498,7 +504,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
498
504
|
:host([layout="tile"]) .d2l-list-item-illustration > div[slot="illustration"],
|
|
499
505
|
:host([layout="tile"]) [slot="content"] ::slotted(d2l-icon[slot="illustration"]),
|
|
500
506
|
:host([layout="tile"]) .d2l-list-item-illustration > d2l-icon[slot="illustration"] {
|
|
501
|
-
border-bottom: 1px solid var(--d2l-color
|
|
507
|
+
border-bottom: 1px solid var(--d2l-list-item-border-color);
|
|
502
508
|
width: calc(100% + 1.1rem);
|
|
503
509
|
}
|
|
504
510
|
:host([layout="tile"][tile-padding-type="none"]) [slot="content"] ::slotted(div[slot="illustration"]),
|
|
@@ -510,14 +516,14 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
510
516
|
|
|
511
517
|
:host([layout="tile"]:not([selection-disabled]):not([skeleton])[padding-type="none"]) [slot="outside-control-container"],
|
|
512
518
|
:host([layout="tile"]) [slot="outside-control-container"] {
|
|
513
|
-
border-color: var(--d2l-color
|
|
519
|
+
border-color: var(--d2l-list-item-border-color);
|
|
514
520
|
margin: 0;
|
|
515
521
|
}
|
|
516
522
|
:host([layout="tile"]:not([draggable])[_has-color-slot]) [slot="outside-control-container"] {
|
|
517
523
|
margin-inline-start: 0;
|
|
518
524
|
}
|
|
519
525
|
:host([layout="tile"]:not([_has-color-slot])) .d2l-list-item-content-extend-separators [slot="content"] {
|
|
520
|
-
padding-inline:
|
|
526
|
+
padding-inline: var(--d2l-list-item-padding);
|
|
521
527
|
}
|
|
522
528
|
|
|
523
529
|
:host([layout="tile"][_focusing-primary-action]:not([selection-disabled]):not([button-disabled]):not([skeleton]):not([current])) [slot="outside-control-container"].d2l-list-item-content-none {
|
|
@@ -535,7 +541,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
535
541
|
outline-offset: initial;
|
|
536
542
|
}
|
|
537
543
|
:host([layout="tile"][_focusing-primary-action]:not([selection-disabled]):not([button-disabled]):not([skeleton]):not([current])) [slot="outside-control-container"].d2l-list-item-content-none {
|
|
538
|
-
border-color: var(--d2l-color
|
|
544
|
+
border-color: var(--d2l-list-item-border-color);
|
|
539
545
|
}
|
|
540
546
|
:host([layout="tile"][_focusing-primary-action]:not([padding-type="none"])):has(:focus-visible) .d2l-list-item-content.d2l-list-item-content-none {
|
|
541
547
|
border-radius: 6px;
|
|
@@ -578,7 +584,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
578
584
|
:host([layout="tile"][tile-header]) [slot="control"] {
|
|
579
585
|
background-color: transparent;
|
|
580
586
|
display: inline-flex;
|
|
581
|
-
margin: 0.4rem
|
|
587
|
+
margin: 0.4rem var(--d2l-list-item-padding);
|
|
582
588
|
outline: none;
|
|
583
589
|
position: static;
|
|
584
590
|
}
|
|
@@ -587,14 +593,14 @@ export const ListItemMixin = superclass => class extends composeMixins(
|
|
|
587
593
|
--d2l-button-icon-min-height: 1.5rem;
|
|
588
594
|
--d2l-button-icon-min-width: 1.5rem;
|
|
589
595
|
--d2l-button-icon-border-radius: 4px;
|
|
590
|
-
margin-block:
|
|
591
|
-
margin-inline-end:
|
|
596
|
+
margin-block: var(--d2l-list-item-padding);
|
|
597
|
+
margin-inline-end: var(--d2l-list-item-padding);
|
|
592
598
|
padding: 0;
|
|
593
599
|
position: absolute;
|
|
594
600
|
}
|
|
595
601
|
:host([layout="tile"][tile-header]) [slot="actions"] {
|
|
596
602
|
--d2l-button-icon-background-color-hover: var(--d2l-color-mica);
|
|
597
|
-
margin: 0.25rem
|
|
603
|
+
margin: 0.25rem var(--d2l-list-item-padding);
|
|
598
604
|
position: static;
|
|
599
605
|
}
|
|
600
606
|
|
package/components/list/list.js
CHANGED
|
@@ -146,6 +146,15 @@ class List extends PageableMixin(SelectionMixin(LitElement)) {
|
|
|
146
146
|
:host([add-button]) ::slotted([slot="controls"]) {
|
|
147
147
|
margin-bottom: calc(6px + 0.4rem); /* controls section margin-bottom + spacing for add-button */
|
|
148
148
|
}
|
|
149
|
+
|
|
150
|
+
::slotted(.d2l-list-tile-break) {
|
|
151
|
+
display: none;
|
|
152
|
+
}
|
|
153
|
+
:host([layout="tiles"]) ::slotted(.d2l-list-tile-break) {
|
|
154
|
+
display: block;
|
|
155
|
+
flex-basis: 100%;
|
|
156
|
+
height: 0;
|
|
157
|
+
}
|
|
149
158
|
`;
|
|
150
159
|
}
|
|
151
160
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.196.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",
|