@brightspace-ui/core 2.83.0 → 2.83.2

package/components/filter/filter.js

@@ -137,8 +137,8 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				word-break: break-word;
 			}
 
-			d2l-list-item[disabled] .d2l-filter-dimension-set-value,
-			d2l-list-item[disabled] .d2l-body-small {
+			d2l-list-item[selection-disabled] .d2l-filter-dimension-set-value,
+			d2l-list-item[selection-disabled] .d2l-body-small {
 				color: var(--d2l-color-chromite);
 			}
 
@@ -424,7 +424,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				separators="between">
 				${dimension.values.map(item => html`
 					<d2l-list-item
-						?disabled="${item.disabled}"
+						?selection-disabled="${item.disabled}"
 						?hidden="${item.hidden}"
 						key="${item.key}"
 						label="${item.text}"

package/components/list/README.md

@@ -2,7 +2,7 @@
 
 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.
 
-<!-- docs: demo autoSize:false size:large -->
+<!-- docs: demo display:block autoSize:false size:large -->
 ```html
 <script type="module">
   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
   import '@brightspace-ui/core/components/menu/menu-item.js';
 </script>
 
-<d2l-list style="width: 100%">
+<d2l-list>
   <d2l-list-item label="List Item 1">
     <d2l-list-item-content>
       <div>Regular list item</div>
@@ -102,7 +102,7 @@ When using `d2l-list`, the `grid` attribute will enable the table-like keyboard
 
 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.
 
-<!-- docs: demo live name:d2l-list autoSize:false size:medium -->
+<!-- docs: demo live name:d2l-list display:block autoSize:false size:medium -->
 ```html
 <script type="module">
   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
   import '@brightspace-ui/core/components/list/list-item-content.js';
 </script>
 
-<d2l-list style="width: 100%">
+<d2l-list>
   <d2l-list-item selectable label="List Item 1">
     <d2l-list-item-content>
       <div>Regular list item</div>
@@ -164,7 +164,7 @@ If a `d2l-list-item` is selectable then it should have a `label` attribute that
 
 ### Example
 
-<!-- docs: demo code autoSize:false size:medium -->
+<!-- docs: demo code display:block autoSize:false size:medium -->
 ```html
 <script type="module">
   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
   import '@brightspace-ui/core/components/selection/selection-action.js';
 </script>
 
-<d2l-list style="width: 100%">
+<d2l-list>
   <d2l-list-controls slot="controls">
     <d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
   </d2l-list-controls>
@@ -203,7 +203,7 @@ If a `d2l-list-item` is expandable then it should have a `label` attribute that
 
 ### Expandable List Example
 
-<!-- docs: demo code autoSize:false size:medium -->
+<!-- docs: demo code display:block autoSize:false size:medium -->
 ```html
 <script type="module">
   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
   import '@brightspace-ui/core/components/selection/selection-action.js';
 </script>
 
-<d2l-list grid style="width: 100%">
+<d2l-list grid>
   <d2l-list-controls slot="controls">
     <d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
   </d2l-list-controls>
@@ -222,7 +222,7 @@ If a `d2l-list-item` is expandable then it should have a `label` attribute that
       <div>Expandable item #1</div>
       <div slot="supporting-info">Supporting information</div>
     </d2l-list-item-content>
-    <d2l-list grid style="width: 100%" slot="nested">
+    <d2l-list grid slot="nested">
       <d2l-list-item selectable key="nested-1" label="Nested 1">
         <d2l-list-item-content><div>Nested item #1</div></d2l-list-item-content>
       </d2l-list-item>
@@ -236,7 +236,7 @@ If a `d2l-list-item` is expandable then it should have a `label` attribute that
       <div>Expandable Item #2</div>
       <div slot="supporting-info">Supporting information</div>
     </d2l-list-item-content>
-    <d2l-list grid style="width: 100%" slot="nested">
+    <d2l-list grid slot="nested">
       <d2l-list-item selectable key="nested-3" label="Nested 3">
         <d2l-list-item-content><div>Nested item #3</div></d2l-list-item-content>
       </d2l-list-item>
@@ -272,7 +272,7 @@ If an item is draggable, the `drag-handle-text` attribute should be used to prov
 
 ### Example
 
-<!-- docs: demo code autoSize:false size:medium -->
+<!-- docs: demo code display:block autoSize:false size:medium -->
 ```html
 <script type="module">
   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
   }
   customElements.define('d2l-my-drag-drop-elem', ListDemoDragAndDropUsage);
 </script>
-<d2l-my-drag-drop-elem style="width: 100%;"></d2l-my-drag-drop-elem>
+<d2l-my-drag-drop-elem></d2l-my-drag-drop-elem>
 ```
 
 ## List Controls [d2l-list-controls]
 
 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.
 
-<!-- docs: demo live name:d2l-list-controls autoSize:false size:medium -->
+<!-- docs: demo live name:d2l-list-controls display:block autoSize:false size:medium -->
 ```html
 <script type="module">
   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
   import '@brightspace-ui/core/components/selection/selection-action.js';
 </script>
 
-<d2l-list style="width: 100%">
+<d2l-list>
   <d2l-list-controls slot="controls">
     <d2l-selection-action icon="tier1:delete" text="Delete" requires-selection></d2l-selection-action>
     <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
 
 The `d2l-list-item-button` provides the same functionality as `d2l-list-item` except with button semantics for its primary action.
 
-<!-- docs: demo live name:d2l-list-item-button -->
+<!-- docs: demo live name:d2l-list-item-button display:block -->
 ```html
 <script type="module">
   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
   import '@brightspace-ui/core/components/list/list-item-content.js';
 </script>
 
-<d2l-list style="width: 100%">
+<d2l-list>
   <d2l-list-item-button href="http://www.d2l.com" selectable key="1" label="Geomorphology and GIS">
     <d2l-list-item-content>
       <div>Geomorphology and GIS </div>
@@ -539,7 +539,7 @@ Where the parameters correspond to the slots of `d2l-list-item`:
 
 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.
 
-<!-- docs: demo live name:d2l-list-item-content -->
+<!-- docs: demo live name:d2l-list-item-content display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/list/list.js';
@@ -547,7 +547,7 @@ The `d2l-list-item-content` provides additional consistent layout for primary an
   import '@brightspace-ui/core/components/list/list-item-content.js';
 </script>
 
-<d2l-list style="width: 100%">
+<d2l-list>
   <d2l-list-item label="List Item 1">
     <d2l-list-item-content>
       <div>Item 1</div>

package/components/list/demo/list-item-layouts.html

@@ -11,12 +11,28 @@
 			import '../list-item-content.js';
 			import '../list-item.js';
 			import '../list.js';
+			import '../../tooltip/tooltip-help.js';
 		</script>
 		<style>
 			img {
 				height: 500px;
 				object-fit: cover;
 			}
+			.overflow-type {
+				font-weight: 700;
+			}
+			.clamp-single {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+			.clamp-multi {
+				-webkit-box-orient: vertical;
+				display: -webkit-box;
+				-webkit-line-clamp: 2;
+				overflow: hidden;
+				overflow-wrap: anywhere;
+			}
 		</style>
 	</head>
 	<body unresolved>
@@ -30,23 +46,60 @@
 					<d2l-list>
 						<d2l-list-item>
 							<d2l-list-item-content>
-								<div>Identify categories of physical activities</div>
-								<div slot="secondary">Secondary Information</div>
-								<div slot="supporting-info">Specific Expectation A1.2</div>
+								<div>Primary text</div>
+								<div slot="secondary">Secondary text</div>
+								<div slot="supporting-info">Supporting info A1.1</div>
 							</d2l-list-item-content>
 						</d2l-list-item>
 						<d2l-list-item>
 							<d2l-list-item-content>
-								<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
-								<div slot="secondary">Secondary Information</div>
-								<div slot="supporting-info">Specific Expectation B2.1</div>
+								<div>Primary text</div>
+								<div slot="secondary">Secondary text</div>
+								<div slot="supporting-info">Supporting info A1.2</div>
 							</d2l-list-item-content>
 						</d2l-list-item>
 						<d2l-list-item>
 							<d2l-list-item-content>
-								<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
-								<div slot="secondary">Secondary Information</div>
-								<div slot="supporting-info">Specific Expectation B2.2</div>
+								<div>Primary text</div>
+								<div slot="secondary">Secondary text</div>
+								<div slot="supporting-info">Supporting info A1.3</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+					</d2l-list>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Overflow Behaviour</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-list>
+						<d2l-list-item>
+							<d2l-list-item-content>
+								<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>
+								<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>
+								<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>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item>
+							<d2l-list-item-content>
+								<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>
+								<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>
+								<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>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item>
+							<d2l-list-item-content>
+								<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>
+								<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>
+								<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>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item>
+							<d2l-list-item-content>
+								<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>
+								<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>
+								<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>
 							</d2l-list-item-content>
 						</d2l-list-item>
 					</d2l-list>

package/components/list/list-item-content.js

@@ -12,6 +12,10 @@ class ListItemContent extends LitElement {
 
 	static get styles() {
 		return [ bodySmallStyles, bodyCompactStyles, css`
+			:host {
+				min-width: 0;
+			}
+
 			.d2l-list-item-content-text {
 				margin: 0;
 			}
@@ -19,7 +23,8 @@ class ListItemContent extends LitElement {
 			.d2l-list-item-content-text > div {
 				border-radius: var(--d2l-list-item-content-text-border-radius);
 				color: var(--d2l-list-item-content-text-color);
-				display: inline-block;
+				display: block; /* multi-line clamping won't work inside of inline-block in Safari - the compromise is the outline is full width */
+				max-width: 100%;
 				outline: var(--d2l-list-item-content-text-outline, none);
 				outline-offset: var(--d2l-list-item-content-text-outline-offset);
 				overflow-wrap: anywhere;

package/components/selection/README.md

@@ -175,12 +175,12 @@ The `d2l-selection-action-menu-item` is an optional component that is a menu ite
   import '@brightspace-ui/core/components/selection/selection-action-menu-item.js';
 </script>
 <d2l-dropdown-button-subtle text="Actions">
-	<d2l-dropdown-menu>
-		<d2l-menu label="Actions">
-			<d2l-selection-action-menu-item text="Action 1" requires-selection></d2l-selection-action-menu-item>
-			<d2l-selection-action-menu-item text="Action 2"></d2l-selection-action-menu-item>
-		</d2l-menu>
-	</d2l-dropdown-menu>
+  <d2l-dropdown-menu>
+    <d2l-menu label="Actions">
+      <d2l-selection-action-menu-item text="Action 1" requires-selection></d2l-selection-action-menu-item>
+      <d2l-selection-action-menu-item text="Action 2"></d2l-selection-action-menu-item>
+    </d2l-menu>
+  </d2l-dropdown-menu>
 </d2l-dropdown-button-subtle>
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.83.0",
+  "version": "2.83.2",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",