@brightspace-ui/core 3.184.2 → 3.185.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 (4) hide show
  1. package/components/list/demo/list-layout.html +82 -6
  2. package/components/list/list-item-generic-layout.js +2 -2
  3. package/components/list/list-item-mixin.js +35 -4
  4. package/package.json +1 -1
package/components/list/demo/list-layout.html CHANGED
@@ -8,9 +8,15 @@
8
8
  import '../../demo/demo-page.js';
9
9
  import '../../button/button-subtle.js';
10
10
  import '../../button/button-toggle.js';
11
+ import '../list-item-button.js';
11
12
  import '../list-item-content.js';
12
13
  import '../list-item.js';
13
14
  import '../list.js';
15
+ window.wireupListTileToggle = demo => {
16
+ demo.querySelector('d2l-button-toggle').addEventListener('d2l-button-toggle-change', e => {
17
+ demo.querySelector('d2l-list').layout = (e.target.pressed ? 'tiles' : 'list');
18
+ });
19
+ };
14
20
  </script>
15
21
  <style>
16
22
  d2l-button-toggle {
@@ -21,7 +27,7 @@
21
27
  <body unresolved>
22
28
  <d2l-demo-page page-title="d2l-list">
23
29
 
24
- <h2>Layout</h2>
30
+ <h2>No Action</h2>
25
31
 
26
32
  <d2l-demo-snippet>
27
33
  <template>
@@ -53,11 +59,81 @@
53
59
  </d2l-list-item>
54
60
  </d2l-list>
55
61
  <script data-demo-hide>
56
- (demo => {
57
- demo.querySelector('d2l-button-toggle').addEventListener('d2l-button-toggle-change', e => {
58
- demo.querySelector('d2l-list').layout = (e.target.pressed ? 'tiles' : 'list');
59
- });
60
- })(document.currentScript.parentNode);
62
+ (demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
63
+ </script>
64
+ </template>
65
+ </d2l-demo-snippet>
66
+
67
+ <h2>Links</h2>
68
+
69
+ <d2l-demo-snippet>
70
+ <template>
71
+ <d2l-button-toggle pressed>
72
+ <d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
73
+ <d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
74
+ </d2l-button-toggle>
75
+ <d2l-list layout="tiles">
76
+ <d2l-list-item label="item 1" href="http://www.d2l.com">
77
+ <d2l-list-item-content>
78
+ <div>Identify categories of physical activities</div>
79
+ <div slot="secondary">Secondary Information</div>
80
+ <div slot="supporting-info">Specific Expectation A1.2</div>
81
+ </d2l-list-item-content>
82
+ </d2l-list-item>
83
+ <d2l-list-item label="item 2" href="http://www.d2l.com">
84
+ <d2l-list-item-content>
85
+ <div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
86
+ <div slot="secondary">Secondary Information</div>
87
+ <div slot="supporting-info">Specific Expectation B2.1</div>
88
+ </d2l-list-item-content>
89
+ </d2l-list-item>
90
+ <d2l-list-item label="item 3" href="http://www.d2l.com">
91
+ <d2l-list-item-content>
92
+ <div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
93
+ <div slot="secondary">Secondary Information</div>
94
+ <div slot="supporting-info">Specific Expectation B2.2</div>
95
+ </d2l-list-item-content>
96
+ </d2l-list-item>
97
+ </d2l-list>
98
+ <script data-demo-hide>
99
+ (demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
100
+ </script>
101
+ </template>
102
+ </d2l-demo-snippet>
103
+
104
+ <h2>Buttons</h2>
105
+
106
+ <d2l-demo-snippet>
107
+ <template>
108
+ <d2l-button-toggle pressed>
109
+ <d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
110
+ <d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
111
+ </d2l-button-toggle>
112
+ <d2l-list layout="tiles">
113
+ <d2l-list-item-button label="item 1" href="http://www.d2l.com">
114
+ <d2l-list-item-content>
115
+ <div>Identify categories of physical activities</div>
116
+ <div slot="secondary">Secondary Information</div>
117
+ <div slot="supporting-info">Specific Expectation A1.2</div>
118
+ </d2l-list-item-content>
119
+ </d2l-list-item-button>
120
+ <d2l-list-item-button label="item 2" href="http://www.d2l.com">
121
+ <d2l-list-item-content>
122
+ <div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
123
+ <div slot="secondary">Secondary Information</div>
124
+ <div slot="supporting-info">Specific Expectation B2.1</div>
125
+ </d2l-list-item-content>
126
+ </d2l-list-item-button>
127
+ <d2l-list-item-button label="item 3" href="http://www.d2l.com">
128
+ <d2l-list-item-content>
129
+ <div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
130
+ <div slot="secondary">Secondary Information</div>
131
+ <div slot="supporting-info">Specific Expectation B2.2</div>
132
+ </d2l-list-item-content>
133
+ </d2l-list-item-button>
134
+ </d2l-list>
135
+ <script data-demo-hide>
136
+ (demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
61
137
  </script>
62
138
  </template>
63
139
  </d2l-demo-snippet>
package/components/list/list-item-generic-layout.js CHANGED
@@ -226,7 +226,8 @@ class ListItemGenericLayout extends LitElement {
226
226
  [end];
227
227
  height: 100%;
228
228
  }
229
- :host([layout="tile"]) ::slotted([slot="content"]) {
229
+ :host([layout="tile"]) ::slotted([slot="content"]),
230
+ :host([layout="tile"]) ::slotted([slot="content-action"]) {
230
231
  grid-column: start / end;
231
232
  grid-row: start / end;
232
233
  }
@@ -238,7 +239,6 @@ class ListItemGenericLayout extends LitElement {
238
239
  :host([layout="tile"]) slot[name="add-top"],
239
240
  :host([layout="tile"]) slot[name="control-container"],
240
241
  :host([layout="tile"]) slot[name="before-content"],
241
- :host([layout="tile"]) slot[name="content-action"],
242
242
  :host([layout="tile"]) slot[name="outside-control"],
243
243
  :host([layout="tile"]) slot[name="outside-control-action"],
244
244
  :host([layout="tile"]) slot[name="color-indicator"],
package/components/list/list-item-mixin.js CHANGED
@@ -217,7 +217,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
217
217
  --d2l-list-item-content-text-outline: 2px solid var(--d2l-color-celestine);
218
218
  --d2l-list-item-content-text-outline-offset: 1px;
219
219
  }
220
- :host([_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content-none {
220
+ :host([_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content.d2l-list-item-content-none {
221
221
  border-radius: 6px;
222
222
  outline: var(--d2l-list-item-content-text-outline);
223
223
  outline-offset: -4px;
@@ -233,12 +233,12 @@ export const ListItemMixin = superclass => class extends composeMixins(
233
233
  --d2l-list-item-content-text-outline: 2px solid var(--d2l-color-celestine);
234
234
  --d2l-list-item-content-text-outline-offset: 1px;
235
235
  }
236
- :host([_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content-none {
236
+ :host([_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content.d2l-list-item-content-none {
237
237
  border-radius: initial;
238
238
  outline: initial;
239
239
  outline-offset: initial;
240
240
  }
241
- :host([_focusing-primary-action]:not([padding-type="none"])):has(:focus-visible) .d2l-list-item-content-none {
241
+ :host([_focusing-primary-action]:not([padding-type="none"])):has(:focus-visible) .d2l-list-item-content.d2l-list-item-content-none {
242
242
  border-radius: 8px;
243
243
  outline: var(--d2l-list-item-content-text-outline);
244
244
  outline-offset: -4px;
@@ -441,6 +441,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
441
441
  }
442
442
 
443
443
  :host([layout="tile"]) .d2l-list-item-content {
444
+ box-sizing: border-box;
444
445
  flex-direction: column;
445
446
  height: 100%;
446
447
  padding: 0.6rem;
@@ -457,6 +458,33 @@ export const ListItemMixin = superclass => class extends composeMixins(
457
458
  :host([layout="tile"]:not([_has-color-slot])) .d2l-list-item-content-extend-separators [slot="content"] {
458
459
  padding-inline: 0.6rem;
459
460
  }
461
+
462
+ :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 {
463
+ border-color: transparent;
464
+ }
465
+ :host([layout="tile"][_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content.d2l-list-item-content-none {
466
+ border-radius: 6px;
467
+ outline: var(--d2l-list-item-content-text-outline);
468
+ outline-offset: 2px;
469
+ }
470
+ @supports selector(:has(a, b)) {
471
+ :host([layout="tile"][_focusing-primary-action]:not([padding-type="none"])) .d2l-list-item-content.d2l-list-item-content-none {
472
+ border-radius: initial;
473
+ outline: initial;
474
+ outline-offset: initial;
475
+ }
476
+ :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 {
477
+ border-color: var(--d2l-color-mica);
478
+ }
479
+ :host([layout="tile"][_focusing-primary-action]:not([padding-type="none"])):has(:focus-visible) .d2l-list-item-content.d2l-list-item-content-none {
480
+ border-radius: 6px;
481
+ outline: var(--d2l-list-item-content-text-outline);
482
+ outline-offset: 2px;
483
+ }
484
+ :host([layout="tile"][_focusing-primary-action]:not([selection-disabled]):not([button-disabled]):not([skeleton]):not([current])):has(:focus-visible) [slot="outside-control-container"].d2l-list-item-content-none {
485
+ border-color: transparent;
486
+ }
487
+ }
460
488
  `];
461
489
 
462
490
  super.styles && styles.unshift(super.styles);
@@ -721,6 +749,9 @@ export const ListItemMixin = superclass => class extends composeMixins(
721
749
  'd2l-list-item-content': true,
722
750
  'd2l-list-item-content-none': !this._hasListItemContent
723
751
  };
752
+ const outsideClasses = {
753
+ 'd2l-list-item-content-none': !this._hasListItemContent
754
+ };
724
755
 
725
756
  const alignNested = ((this.draggable && this.selectable) || (this.expandable && this.selectable && this.color) || (this.expandable && !this.selectable)) ? 'control' : undefined;
726
757
  const contentAreaContent = html`
@@ -769,7 +800,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
769
800
  </d2l-button-add>
770
801
  </div>
771
802
  ` : nothing}
772
- <div slot="outside-control-container"></div>
803
+ <div slot="outside-control-container" class="${classMap(outsideClasses)}"></div>
773
804
  <div slot="before-content"></div>
774
805
  ${this._renderDropTarget()}
775
806
  ${this._renderDragHandle(this._renderOutsideControl)}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.184.2",
3
+ "version": "3.185.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",