@brightspace-ui/core 2.83.1 → 2.83.2

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 (5) hide show
  1. package/components/list/README.md +18 -18
  2. package/components/list/demo/list-item-layouts.html +62 -9
  3. package/components/list/list-item-content.js +6 -1
  4. package/components/selection/README.md +6 -6
  5. package/package.json +1 -1
package/components/list/README.md CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  A list displays a collection of objects of the same type. A list is primarily used in order to help users navigate to a full-page representation of a single object, or to select several items and execute an action on them.
4
4
 
5
- <!-- docs: demo autoSize:false size:large -->
5
+ <!-- docs: demo display:block autoSize:false size:large -->
6
6
  ```html
7
7
  <script type="module">
8
8
  import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
@@ -14,7 +14,7 @@ A list displays a collection of objects of the same type. A list is primarily us
14
14
  import '@brightspace-ui/core/components/menu/menu-item.js';
15
15
  </script>
16
16
 
17
- <d2l-list style="width: 100%">
17
+ <d2l-list>
18
18
  <d2l-list-item label="List Item 1">
19
19
  <d2l-list-item-content>
20
20
  <div>Regular list item</div>
@@ -102,7 +102,7 @@ When using `d2l-list`, the `grid` attribute will enable the table-like keyboard
102
102
 
103
103
  The `d2l-list` is the container to create a styled list of items using `d2l-list-item` or `d2l-list-item-button`. It provides the appropriate `list` semantics as well as options for displaying separators, etc.
104
104
 
105
- <!-- docs: demo live name:d2l-list autoSize:false size:medium -->
105
+ <!-- docs: demo live name:d2l-list display:block autoSize:false size:medium -->
106
106
  ```html
107
107
  <script type="module">
108
108
  import '@brightspace-ui/core/components/list/list.js';
@@ -110,7 +110,7 @@ The `d2l-list` is the container to create a styled list of items using `d2l-list
110
110
  import '@brightspace-ui/core/components/list/list-item-content.js';
111
111
  </script>
112
112
 
113
- <d2l-list style="width: 100%">
113
+ <d2l-list>
114
114
  <d2l-list-item selectable label="List Item 1">
115
115
  <d2l-list-item-content>
116
116
  <div>Regular list item</div>
@@ -164,7 +164,7 @@ If a `d2l-list-item` is selectable then it should have a `label` attribute that
164
164
 
165
165
  ### Example
166
166
 
167
- <!-- docs: demo code autoSize:false size:medium -->
167
+ <!-- docs: demo code display:block autoSize:false size:medium -->
168
168
  ```html
169
169
  <script type="module">
170
170
  import '@brightspace-ui/core/components/list/list.js';
@@ -174,7 +174,7 @@ If a `d2l-list-item` is selectable then it should have a `label` attribute that
174
174
  import '@brightspace-ui/core/components/selection/selection-action.js';
175
175
  </script>
176
176
 
177
- <d2l-list style="width: 100%">
177
+ <d2l-list>
178
178
  <d2l-list-controls slot="controls">
179
179
  <d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
180
180
  </d2l-list-controls>
@@ -203,7 +203,7 @@ If a `d2l-list-item` is expandable then it should have a `label` attribute that
203
203
 
204
204
  ### Expandable List Example
205
205
 
206
- <!-- docs: demo code autoSize:false size:medium -->
206
+ <!-- docs: demo code display:block autoSize:false size:medium -->
207
207
  ```html
208
208
  <script type="module">
209
209
  import '@brightspace-ui/core/components/list/list.js';
@@ -213,7 +213,7 @@ If a `d2l-list-item` is expandable then it should have a `label` attribute that
213
213
  import '@brightspace-ui/core/components/selection/selection-action.js';
214
214
  </script>
215
215
 
216
- <d2l-list grid style="width: 100%">
216
+ <d2l-list grid>
217
217
  <d2l-list-controls slot="controls">
218
218
  <d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
219
219
  </d2l-list-controls>
@@ -222,7 +222,7 @@ If a `d2l-list-item` is expandable then it should have a `label` attribute that
222
222
  <div>Expandable item #1</div>
223
223
  <div slot="supporting-info">Supporting information</div>
224
224
  </d2l-list-item-content>
225
- <d2l-list grid style="width: 100%" slot="nested">
225
+ <d2l-list grid slot="nested">
226
226
  <d2l-list-item selectable key="nested-1" label="Nested 1">
227
227
  <d2l-list-item-content><div>Nested item #1</div></d2l-list-item-content>
228
228
  </d2l-list-item>
@@ -236,7 +236,7 @@ If a `d2l-list-item` is expandable then it should have a `label` attribute that
236
236
  <div>Expandable Item #2</div>
237
237
  <div slot="supporting-info">Supporting information</div>
238
238
  </d2l-list-item-content>
239
- <d2l-list grid style="width: 100%" slot="nested">
239
+ <d2l-list grid slot="nested">
240
240
  <d2l-list-item selectable key="nested-3" label="Nested 3">
241
241
  <d2l-list-item-content><div>Nested item #3</div></d2l-list-item-content>
242
242
  </d2l-list-item>
@@ -272,7 +272,7 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
272
272
 
273
273
  ### Example
274
274
 
275
- <!-- docs: demo code autoSize:false size:medium -->
275
+ <!-- docs: demo code display:block autoSize:false size:medium -->
276
276
  ```html
277
277
  <script type="module">
278
278
  import '@brightspace-ui/core/components/list/list.js';
@@ -322,14 +322,14 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
322
322
  }
323
323
  customElements.define('d2l-my-drag-drop-elem', ListDemoDragAndDropUsage);
324
324
  </script>
325
- <d2l-my-drag-drop-elem style="width: 100%;"></d2l-my-drag-drop-elem>
325
+ <d2l-my-drag-drop-elem></d2l-my-drag-drop-elem>
326
326
  ```
327
327
 
328
328
  ## List Controls [d2l-list-controls]
329
329
 
330
330
  The `d2l-list-controls` component can be placed in the `d2l-list`'s `controls` slot to provide a select-all checkbox, summary, a slot for `d2l-selection-action`s, and overflow-group behaviour.
331
331
 
332
- <!-- docs: demo live name:d2l-list-controls autoSize:false size:medium -->
332
+ <!-- docs: demo live name:d2l-list-controls display:block autoSize:false size:medium -->
333
333
  ```html
334
334
  <script type="module">
335
335
  import '@brightspace-ui/core/components/list/list.js';
@@ -339,7 +339,7 @@ The `d2l-list-controls` component can be placed in the `d2l-list`'s `controls` s
339
339
  import '@brightspace-ui/core/components/selection/selection-action.js';
340
340
  </script>
341
341
 
342
- <d2l-list style="width: 100%">
342
+ <d2l-list>
343
343
  <d2l-list-controls slot="controls">
344
344
  <d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
345
345
  <d2l-selection-action icon="tier1:gear" text="Settings"></d2l-selection-action>
@@ -452,7 +452,7 @@ The `d2l-list-item` provides the appropriate `listitem` semantics for children w
452
452
 
453
453
  The `d2l-list-item-button` provides the same functionality as `d2l-list-item` except with button semantics for its primary action.
454
454
 
455
- <!-- docs: demo live name:d2l-list-item-button -->
455
+ <!-- docs: demo live name:d2l-list-item-button display:block -->
456
456
  ```html
457
457
  <script type="module">
458
458
  import '@brightspace-ui/core/components/list/list.js';
@@ -460,7 +460,7 @@ The `d2l-list-item-button` provides the same functionality as `d2l-list-item` ex
460
460
  import '@brightspace-ui/core/components/list/list-item-content.js';
461
461
  </script>
462
462
 
463
- <d2l-list style="width: 100%">
463
+ <d2l-list>
464
464
  <d2l-list-item-button href="http://www.d2l.com" selectable key="1" label="Geomorphology and GIS">
465
465
  <d2l-list-item-content>
466
466
  <div>Geomorphology and GIS </div>
@@ -539,7 +539,7 @@ Where the parameters correspond to the slots of `d2l-list-item`:
539
539
 
540
540
  The `d2l-list-item-content` provides additional consistent layout for primary and secondary text in item content. It may be used with or without the `illustration` and `action` slots mentioned above.
541
541
 
542
- <!-- docs: demo live name:d2l-list-item-content -->
542
+ <!-- docs: demo live name:d2l-list-item-content display:block -->
543
543
  ```html
544
544
  <script type="module">
545
545
  import '@brightspace-ui/core/components/list/list.js';
@@ -547,7 +547,7 @@ The `d2l-list-item-content` provides additional consistent layout for primary an
547
547
  import '@brightspace-ui/core/components/list/list-item-content.js';
548
548
  </script>
549
549
 
550
- <d2l-list style="width: 100%">
550
+ <d2l-list>
551
551
  <d2l-list-item label="List Item 1">
552
552
  <d2l-list-item-content>
553
553
  <div>Item 1</div>
package/components/list/demo/list-item-layouts.html CHANGED
@@ -11,12 +11,28 @@
11
11
  import '../list-item-content.js';
12
12
  import '../list-item.js';
13
13
  import '../list.js';
14
+ import '../../tooltip/tooltip-help.js';
14
15
  </script>
15
16
  <style>
16
17
  img {
17
18
  height: 500px;
18
19
  object-fit: cover;
19
20
  }
21
+ .overflow-type {
22
+ font-weight: 700;
23
+ }
24
+ .clamp-single {
25
+ overflow: hidden;
26
+ text-overflow: ellipsis;
27
+ white-space: nowrap;
28
+ }
29
+ .clamp-multi {
30
+ -webkit-box-orient: vertical;
31
+ display: -webkit-box;
32
+ -webkit-line-clamp: 2;
33
+ overflow: hidden;
34
+ overflow-wrap: anywhere;
35
+ }
20
36
  </style>
21
37
  </head>
22
38
  <body unresolved>
@@ -30,23 +46,60 @@
30
46
  <d2l-list>
31
47
  <d2l-list-item>
32
48
  <d2l-list-item-content>
33
- <div>Identify categories of physical activities</div>
34
- <div slot="secondary">Secondary Information</div>
35
- <div slot="supporting-info">Specific Expectation A1.2</div>
49
+ <div>Primary text</div>
50
+ <div slot="secondary">Secondary text</div>
51
+ <div slot="supporting-info">Supporting info A1.1</div>
36
52
  </d2l-list-item-content>
37
53
  </d2l-list-item>
38
54
  <d2l-list-item>
39
55
  <d2l-list-item-content>
40
- <div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
41
- <div slot="secondary">Secondary Information</div>
42
- <div slot="supporting-info">Specific Expectation B2.1</div>
56
+ <div>Primary text</div>
57
+ <div slot="secondary">Secondary text</div>
58
+ <div slot="supporting-info">Supporting info A1.2</div>
43
59
  </d2l-list-item-content>
44
60
  </d2l-list-item>
45
61
  <d2l-list-item>
46
62
  <d2l-list-item-content>
47
- <div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
48
- <div slot="secondary">Secondary Information</div>
49
- <div slot="supporting-info">Specific Expectation B2.2</div>
63
+ <div>Primary text</div>
64
+ <div slot="secondary">Secondary text</div>
65
+ <div slot="supporting-info">Supporting info A1.3</div>
66
+ </d2l-list-item-content>
67
+ </d2l-list-item>
68
+ </d2l-list>
69
+ </template>
70
+ </d2l-demo-snippet>
71
+
72
+ <h2>Overflow Behaviour</h2>
73
+
74
+ <d2l-demo-snippet>
75
+ <template>
76
+ <d2l-list>
77
+ <d2l-list-item>
78
+ <d2l-list-item-content>
79
+ <div><span class="overflow-type">Overflow: wrap</span>. Primary text. Lookout take a caulk rope's end Jack Ketch Admiral of the Black yard jury mast barque no prey, no pay port. Carouser salmagundi rigging handsomely draft cog mizzen haul wind no prey, no pay lugsail. <d2l-tooltip-help text="Help tooltip." inherit-font-style>Bowsprit measured fer yer chains Cat o'nine tails ballast topsail hulk Plate Fleet chantey warp hail-shot. Deadlights league yard chase guns Gold Road pink case shot fathom mutiny hempen halter.</d2l-tooltip-help></div>
80
+ <div slot="secondary"><span class="overflow-type">Overflow: wrap</span>. Secondary text. Lookout take a caulk rope's end Jack Ketch Admiral of the Black yard jury mast barque no prey, no pay port. Carouser salmagundi rigging handsomely draft cog mizzen haul wind no prey, no pay lugsail. <d2l-tooltip-help text="Help tooltip." inherit-font-style>Bowsprit measured fer yer chains Cat o'nine tails ballast topsail hulk Plate Fleet chantey warp hail-shot. Deadlights league yard chase guns Gold Road pink case shot fathom mutiny hempen halter.</d2l-tooltip-help></div>
81
+ <div slot="supporting-info"><span class="overflow-type">Overflow: wrap</span>. Supporting info. Lookout take a caulk rope's end Jack Ketch Admiral of the Black yard jury mast barque no prey, no pay port. Carouser salmagundi rigging handsomely draft cog mizzen haul wind no prey, no pay lugsail. <d2l-tooltip-help text="Help tooltip." inherit-font-style>Bowsprit measured fer yer chains Cat o'nine tails ballast topsail hulk Plate Fleet chantey warp hail-shot. Deadlights league yard chase guns Gold Road pink case shot fathom mutiny hempen halter.</d2l-tooltip-help></div>
82
+ </d2l-list-item-content>
83
+ </d2l-list-item>
84
+ <d2l-list-item>
85
+ <d2l-list-item-content>
86
+ <div class="clamp-single"><span class="overflow-type">Overflow: clamp single-line</span>. Primary text. Lookout take a caulk rope's end Jack Ketch Admiral of the Black yard jury mast barque no prey, no pay port. Carouser salmagundi rigging handsomely draft cog mizzen haul wind no prey, no pay lugsail.</div>
87
+ <div slot="secondary" class="clamp-single"><span class="overflow-type">Overflow: clamp single-line</span>. Secondary text. Lookout take a caulk rope's end Jack Ketch Admiral of the Black yard jury mast barque no prey, no pay port. Carouser salmagundi rigging handsomely draft cog mizzen haul wind no prey, no pay lugsail.</div>
88
+ <div slot="supporting-info" class="clamp-single"><span class="overflow-type">Overflow: clamp single-line</span>. Supporting info. Lookout take a caulk rope's end Jack Ketch Admiral of the Black yard jury mast barque no prey, no pay port. Carouser salmagundi rigging handsomely draft cog mizzen haul wind no prey, no pay lugsail.</div>
89
+ </d2l-list-item-content>
90
+ </d2l-list-item>
91
+ <d2l-list-item>
92
+ <d2l-list-item-content>
93
+ <div class="clamp-multi"><span class="overflow-type">Overflow: clamp multi-line</span>. Primary text. Lookout take a caulk rope's end Jack Ketch Admiral of the Black yard jury mast barque no prey, no pay port. Carouser salmagundi rigging handsomely draft cog mizzen haul wind no prey, no pay lugsail.</div>
94
+ <div slot="secondary" class="clamp-multi"><span class="overflow-type">Overflow: clamp multi-line</span>. Secondary text. Lookout take a caulk rope's end Jack Ketch Admiral of the Black yard jury mast barque no prey, no pay port. Carouser salmagundi rigging handsomely draft cog mizzen haul wind no prey, no pay lugsail.</div>
95
+ <div slot="supporting-info" class="clamp-multi"><span class="overflow-type">Overflow: clamp multi-line</span>. Supporting info. Lookout take a caulk rope's end Jack Ketch Admiral of the Black yard jury mast barque no prey, no pay port. Carouser salmagundi rigging handsomely draft cog mizzen haul wind no prey, no pay lugsail.</div>
96
+ </d2l-list-item-content>
97
+ </d2l-list-item>
98
+ <d2l-list-item>
99
+ <d2l-list-item-content>
100
+ <div><div class="clamp-single"><span class="overflow-type">Overflow: clamp single-line, nested</span>. Primary text. Lookout take a caulk rope's end Jack Ketch Admiral of the Black yard jury mast barque no prey, no pay port. Carouser salmagundi rigging handsomely draft cog mizzen haul wind no prey, no pay lugsail.</div></div>
101
+ <div slot="secondary"><div class="clamp-single"><span class="overflow-type">Overflow: clamp single-line, nested</span>. Secondary text. Lookout take a caulk rope's end Jack Ketch Admiral of the Black yard jury mast barque no prey, no pay port. Carouser salmagundi rigging handsomely draft cog mizzen haul wind no prey, no pay lugsail.</div></div>
102
+ <div slot="supporting-info"><div class="clamp-single"><span class="overflow-type">Overflow: clamp single-line, nested</span>. Supporting info. Lookout take a caulk rope's end Jack Ketch Admiral of the Black yard jury mast barque no prey, no pay port. Carouser salmagundi rigging handsomely draft cog mizzen haul wind no prey, no pay lugsail.</div></div>
50
103
  </d2l-list-item-content>
51
104
  </d2l-list-item>
52
105
  </d2l-list>
package/components/list/list-item-content.js CHANGED
@@ -12,6 +12,10 @@ class ListItemContent extends LitElement {
12
12
 
13
13
  static get styles() {
14
14
  return [ bodySmallStyles, bodyCompactStyles, css`
15
+ :host {
16
+ min-width: 0;
17
+ }
18
+
15
19
  .d2l-list-item-content-text {
16
20
  margin: 0;
17
21
  }
@@ -19,7 +23,8 @@ class ListItemContent extends LitElement {
19
23
  .d2l-list-item-content-text > div {
20
24
  border-radius: var(--d2l-list-item-content-text-border-radius);
21
25
  color: var(--d2l-list-item-content-text-color);
22
- display: inline-block;
26
+ display: block; /* multi-line clamping won't work inside of inline-block in Safari - the compromise is the outline is full width */
27
+ max-width: 100%;
23
28
  outline: var(--d2l-list-item-content-text-outline, none);
24
29
  outline-offset: var(--d2l-list-item-content-text-outline-offset);
25
30
  overflow-wrap: anywhere;
package/components/selection/README.md CHANGED
@@ -175,12 +175,12 @@ The `d2l-selection-action-menu-item` is an optional component that is a menu ite
175
175
  import '@brightspace-ui/core/components/selection/selection-action-menu-item.js';
176
176
  </script>
177
177
  <d2l-dropdown-button-subtle text="Actions">
178
- <d2l-dropdown-menu>
179
- <d2l-menu label="Actions">
180
- <d2l-selection-action-menu-item text="Action 1" requires-selection></d2l-selection-action-menu-item>
181
- <d2l-selection-action-menu-item text="Action 2"></d2l-selection-action-menu-item>
182
- </d2l-menu>
183
- </d2l-dropdown-menu>
178
+ <d2l-dropdown-menu>
179
+ <d2l-menu label="Actions">
180
+ <d2l-selection-action-menu-item text="Action 1" requires-selection></d2l-selection-action-menu-item>
181
+ <d2l-selection-action-menu-item text="Action 2"></d2l-selection-action-menu-item>
182
+ </d2l-menu>
183
+ </d2l-dropdown-menu>
184
184
  </d2l-dropdown-button-subtle>
185
185
  ```
186
186
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.83.1",
3
+ "version": "2.83.2",
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",