@brightspace-ui/core 3.144.2 → 3.145.1

package/components/list/demo/demo-list-nav.js

@@ -14,6 +14,7 @@ class ListDemoNav extends LitElement {
 	static get properties() {
 		return {
 			addButton: { type: Boolean, attribute: 'add-button' },
+			indentation: { type: Boolean },
 			_currentItem: { state: true }
 		};
 	}
@@ -143,6 +144,7 @@ class ListDemoNav extends LitElement {
 				color="${ifDefined(item.color)}"
 				?expandable="${hasSubList}"
 				?expanded="${hasSubList}"
+				indentation="${ifDefined(this.indentation ? '41' : undefined)}"
 				drop-nested
 				label="${item.primaryText}"
 				prevent-navigation>

package/components/list/demo/list-demo-scenarios.js

@@ -328,7 +328,6 @@ export const listDemos = {
 			primaryText: 'Glaciation',
 			dropNested: true,
 			items: [],
-			color: '#29a6ff',
 			tooltipText: 'Starts: 2023-09-01, Ends: 2023-12-01',
 			tooltipOpenerText: 'Due: 2023-10-10',
 			hasIcon: true
@@ -337,7 +336,6 @@ export const listDemos = {
 			primaryText: 'Weathering',
 			dropNested: true,
 			items: [],
-			color: '#29a6ff',
 			tooltipText: 'Starts: 2023-10-01, Ends: 2023-12-01',
 			tooltipOpenerText: 'Due: 2023-11-10',
 			hasIcon: true
@@ -346,26 +344,36 @@ export const listDemos = {
 			primaryText: 'Volcanism',
 			dropNested: true,
 			items: [],
-			color: '#29a6ff',
 			hasIcon: true
 		}]
 	}, {
 		key: '2',
 		primaryText: 'Applied Wetland Science',
-		color: '#cd2026',
+		color: '#990006',
 		items: [{
 			key: '2-1',
 			primaryText: 'Carbon & Nitrogen Cycling',
 			dropNested: true,
 			items: [],
-			color: '#ff575a',
 			hasIcon: true
 		}, {
 			key: '2-2',
 			primaryText: 'Wetland Engineering',
 			dropNested: true,
-			items: [],
-			color: '#ff575a',
+			color: '#cd2026',
+			items: [{
+				key: '2-2-1',
+				primaryText: 'Wetland Engineering #1',
+				dropNested: true,
+				items: [],
+				hasIcon: true
+			}, {
+				key: '2-2-2',
+				primaryText: 'Wetland Engineering #2',
+				dropNested: true,
+				items: [],
+				hasIcon: true
+			}],
 			hasIcon: true
 		}]
 	}],

package/components/list/demo/list-nav.html

@@ -96,6 +96,14 @@
 					</template>
 			</d2l-demo-snippet>
 
+			<h2>Side nav list (draggable, indentation)</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-demo-list-nav indentation></d2l-demo-list-nav>
+					</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 
 	</body>

package/components/list/list-item-generic-layout.js

@@ -53,7 +53,12 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			 * Specifies whether the grid is active or not
 			 * @type {boolean}
 			 */
-			gridActive: { type: Boolean, attribute: 'grid-active' }
+			gridActive: { type: Boolean, attribute: 'grid-active' },
+			/**
+			 * Inline start padding (in px) to apply to list item(s) in the nested slot. When used, nested list items will not use the grid start calcuations and will only use this number to determine indentation.
+			 * @type {number}
+			 */
+			indentation: { type: Number, reflect: true }
 		};
 	}
 
@@ -185,6 +190,11 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 				grid-row: nested;
 			}
 
+			:host([indentation]) ::slotted([slot="nested"]) {
+				grid-column-start: start;
+				padding-inline-start: var(--d2l-list-item-generic-layout-nested-indentation);
+			}
+
 			::slotted([slot="add"]) {
 				grid-row: add;
 			}
@@ -248,6 +258,13 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 		`;
 	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('indentation')) {
+			this.style.setProperty('--d2l-list-item-generic-layout-nested-indentation', `${this.indentation}px`);
+		}
+	}
+
 	_focusCellItem(focusInfo) {
 		const cell = this.shadowRoot?.querySelector(`[data-cell-num="${focusInfo.cellNum}"]`);
 		if (!cell) return;

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

@@ -85,6 +85,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			 * @type {boolean}
 			 */
 			dragTargetHandleOnly: { type: Boolean, attribute: 'drag-target-handle-only' },
+			/**
+			 * Inline start padding (in px) to apply to list item(s) in the nested slot. When used, nested list items will not use the grid start calcuations and will only use this number to determine indentation.
+			 * @type {number}
+			 */
+			indentation: { type: Number, reflect: true },
 			/**
 			 * @ignore
 			 */
@@ -777,6 +782,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				@focusout="${this._onFocusOut}"
 				class="${classMap(classes)}"
 				data-separators="${ifDefined(this._separators)}"
+				indentation="${ifDefined(this.indentation)}"
 				?grid-active="${this.role === 'row'}"
 				?no-primary-action="${this.noPrimaryAction}">
 				${this._showAddButton && this.first ? html`

package/components/object-property-list/README.md

@@ -8,6 +8,7 @@ Object property lists are simple dot-separated lists of text, displayed sequenti
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
   import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
   import '@brightspace-ui/core/components/object-property-list/object-property-list-item-link.js';
+  import '@brightspace-ui/core/components/object-property-list/object-property-list-item-tooltip-help.js';
   import '@brightspace-ui/core/components/status-indicator/status-indicator.js';
 </script>
 
@@ -17,6 +18,9 @@ Object property lists are simple dot-separated lists of text, displayed sequenti
   <d2l-object-property-list-item text="Example item with icon" icon="tier1:grade"></d2l-object-property-list-item>
   <d2l-object-property-list-item-link text="Example link" href="https://www.d2l.com/"></d2l-object-property-list-item-link>
   <d2l-object-property-list-item-link text="Example link with icon" href="https://www.d2l.com/" icon="tier1:alert"></d2l-object-property-list-item-link>
+  <d2l-object-property-list-item-tooltip-help text="Example tooltip help with icon" icon="tier1:grade">
+    These are extra details
+  </d2l-object-property-list-item-tooltip-help>
 </d2l-object-property-list>
 ```
 
@@ -42,11 +46,15 @@ An object property list can be defined using `d2l-object-property-list` and a co
   import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
   import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
   import '@brightspace-ui/core/components/object-property-list/object-property-list-item-link.js';
+  import '@brightspace-ui/core/components/object-property-list/object-property-list-item-tooltip-help.js';
 </script>
 
 <d2l-object-property-list>
   <d2l-object-property-list-item text="Example item"></d2l-object-property-list-item>
   <d2l-object-property-list-item-link text="Example link" href="https://www.d2l.com/"></d2l-object-property-list-item-link>
+  <d2l-object-property-list-item-tooltip-help text="Example link">
+    These are extra details
+  </d2l-object-property-list-item-tooltip-help>
 </d2l-object-property-list>
 ```
 
@@ -130,6 +138,52 @@ The `d2l-object-property-list-item-link` component is a link item for the object
 | `target` | String | Where to display the linked URL |
 <!-- docs: end hidden content -->
 
+## Help Tooltip Item [d2l-object-property-list-item-tooltip-help]
+
+The `d2l-object-property-list-item-tooltip-help` component is an item for the object property list which is used to also display additional information for users. It displays text as a help tooltip, with an optional leading icon.
+
+<!-- docs: demo code properties name:d2l-object-property-list-item-tooltip-help sandboxTitle:'Object Property List Help Tooltip Item' -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
+  import '@brightspace-ui/core/components/object-property-list/object-property-list-item-tooltip-help.js';
+</script>
+
+<d2l-object-property-list>
+  <d2l-object-property-list-item-tooltip-help text="Example item">
+	These are extra details
+  </d2l-object-property-list-item-tooltip-help>
+  <d2l-object-property-list-item-tooltip-help text="Example item with icon" icon="tier1:grade">
+	These are extra details
+  </d2l-object-property-list-item-tooltip-help>
+  <d2l-object-property-list-item-tooltip-help text="Example item with custom icon">
+	These are extra details
+	<d2l-icon-custom slot="icon">
+		<svg xmlns="http://www.w3.org/2000/svg" mirror-in-rtl="true">
+		<path fill="#494c4e" d="M18 12v5a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-5a1 1 0 0 1 2 0v4h14v-4a1 1 0 0 1 2 0z"/>
+		<path fill="#494c4e" d="M13.85 3.15l-2.99-3A.507.507 0 0 0 10.5 0H5.4A1.417 1.417 0 0 0 4 1.43v11.14A1.417 1.417 0 0 0 5.4 14h7.2a1.417 1.417 0 0 0 1.4-1.43V3.5a.47.47 0 0 0-.15-.35zM7 2h1a1 1 0 0 1 0 2H7a1 1 0 0 1 0-2zm4 10H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2zm0-4H7a1 1 0 0 1 0-2h4a1 1 0 0 1 0 2z"/>
+		</svg>
+	</d2l-icon-custom>
+  </d2l-object-property-list-item-tooltip-help>
+</d2l-object-property-list>
+```
+
+<!-- docs: start hidden content -->
+### Slots
+
+| Slot | Type | Description |
+|--|--|--|
+| `default` | required | Default content placed inside of the tooltip |
+| `icon` | optional | Optional slot for a custom icon |
+
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `text` | String, required | Text displayed by the item |
+| `icon` | String | [Preset icon key](../icons#preset-icons) (e.g. `tier1:gear`) |
+<!-- docs: end hidden content -->
+
 ## Status Slot
 
 Object property lists can optionally contain a single `d2l-status-indicator` inserted into the `status` slot.

package/components/object-property-list/object-property-list-item-tooltip-help.js

@@ -8,6 +8,7 @@ import { ObjectPropertyListItem } from './object-property-list-item.js';
  * A single object property, to be used within an object-property-list,
  * rendered as a help tooltip and with an optional icon.
  * @slot - Default content placed inside of the tooltip
+ * @slot icon - Optional slot for a custom icon
  */
 class ObjectPropertyListItemTooltipHelp extends FocusMixin(ObjectPropertyListItem) {
 	static get properties() {

package/components/tooltip/README.md

@@ -117,6 +117,7 @@ The `d2l-tooltip` component is used to display additional information when users
 | `disable-focus-lock` | Boolean, default: `false` | Disables focus lock so that the tooltip will automatically close when no longer hovered even if it still has focus |
 | `force-show` | Boolean, default: `false` | Force the tooltip to stay open as long as it remains `true` |
 | `for-type` | String, default: `descriptor` | Accessibility type for the tooltip to specify whether it is the primary label for the target or a secondary descriptor. Valid values are: `label` and `descriptor`. |
+| `icon` | String | [Preset icon key](../../components/icons#preset-icons) (e.g. `tier1:gear`) |
 | `show-truncated-only` | Boolean, default: `false` | Only show the tooltip if we detect the target element is truncated |
 | `position` | String | Optionally force the tooltip to open in a certain direction. Valid values are: `top`, `bottom`, `left` and `right`. If no position is provided, the tooltip will open in the first position that has enough space for it in the order: bottom, top, right, left. |
 
@@ -215,6 +216,13 @@ The `d2l-tooltip-help` component is used to display additional information when
 ```
 
 <!-- docs: start hidden content -->
+### Slots
+
+| Slot | Type | Description |
+|--|--|--|
+| `default` | required | Default content placed inside of the tooltip |
+| `icon` | optional | Optional slot for a custom icon |
+
 ### Properties
 
 | Property | Type | Description |

package/components/tooltip/tooltip-help.js

@@ -12,6 +12,7 @@ import { SlottedIconMixin } from '../icons/slotted-icon-mixin.js';
 /**
  * A component used to display additional information when users focus or hover over some text.
  * @slot - Default content placed inside of the tooltip
+ * @slot icon - Optional slot for a custom icon
  */
 class TooltipHelp extends SlottedIconMixin(SkeletonMixin(FocusMixin(LitElement))) {
 

package/custom-elements.json

@@ -8393,6 +8393,10 @@
       "name": "d2l-demo-list-nav",
       "path": "./components/list/demo/demo-list-nav.js",
       "attributes": [
+        {
+          "name": "indentation",
+          "type": "boolean"
+        },
         {
           "name": "add-button",
           "type": "boolean",
@@ -8400,6 +8404,11 @@
         }
       ],
       "properties": [
+        {
+          "name": "indentation",
+          "attribute": "indentation",
+          "type": "boolean"
+        },
         {
           "name": "addButton",
           "attribute": "add-button",
@@ -8660,6 +8669,11 @@
           "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
           "type": "boolean"
         },
+        {
+          "name": "indentation",
+          "description": "Inline start padding (in px) to apply to list item(s) in the nested slot. When used, nested list items will not use the grid start calcuations and will only use this number to determine indentation.",
+          "type": "number"
+        },
         {
           "name": "color",
           "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
@@ -8755,6 +8769,12 @@
           "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
           "type": "boolean"
         },
+        {
+          "name": "indentation",
+          "attribute": "indentation",
+          "description": "Inline start padding (in px) to apply to list item(s) in the nested slot. When used, nested list items will not use the grid start calcuations and will only use this number to determine indentation.",
+          "type": "number"
+        },
         {
           "name": "color",
           "attribute": "color",
@@ -8999,6 +9019,11 @@
           "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
           "type": "boolean"
         },
+        {
+          "name": "indentation",
+          "description": "Inline start padding (in px) to apply to list item(s) in the nested slot. When used, nested list items will not use the grid start calcuations and will only use this number to determine indentation.",
+          "type": "number"
+        },
         {
           "name": "color",
           "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
@@ -9101,6 +9126,12 @@
           "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
           "type": "boolean"
         },
+        {
+          "name": "indentation",
+          "attribute": "indentation",
+          "description": "Inline start padding (in px) to apply to list item(s) in the nested slot. When used, nested list items will not use the grid start calcuations and will only use this number to determine indentation.",
+          "type": "number"
+        },
         {
           "name": "color",
           "attribute": "color",
@@ -9368,6 +9399,11 @@
           "description": "Specifies whether the grid is active or not",
           "type": "boolean"
         },
+        {
+          "name": "indentation",
+          "description": "Inline start padding (in px) to apply to list item(s) in the nested slot. When used, nested list items will not use the grid start calcuations and will only use this number to determine indentation.",
+          "type": "number"
+        },
         {
           "name": "align-nested",
           "description": "How to align content in the nested slot",
@@ -9388,6 +9424,12 @@
           "description": "Specifies whether the grid is active or not",
           "type": "boolean"
         },
+        {
+          "name": "indentation",
+          "attribute": "indentation",
+          "description": "Inline start padding (in px) to apply to list item(s) in the nested slot. When used, nested list items will not use the grid start calcuations and will only use this number to determine indentation.",
+          "type": "number"
+        },
         {
           "name": "alignNested",
           "attribute": "align-nested",
@@ -9464,6 +9506,11 @@
           "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
           "type": "boolean"
         },
+        {
+          "name": "indentation",
+          "description": "Inline start padding (in px) to apply to list item(s) in the nested slot. When used, nested list items will not use the grid start calcuations and will only use this number to determine indentation.",
+          "type": "number"
+        },
         {
           "name": "color",
           "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
@@ -9578,6 +9625,12 @@
           "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
           "type": "boolean"
         },
+        {
+          "name": "indentation",
+          "attribute": "indentation",
+          "description": "Inline start padding (in px) to apply to list item(s) in the nested slot. When used, nested list items will not use the grid start calcuations and will only use this number to determine indentation.",
+          "type": "number"
+        },
         {
           "name": "color",
           "attribute": "color",
@@ -9756,6 +9809,11 @@
           "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
           "type": "boolean"
         },
+        {
+          "name": "indentation",
+          "description": "Inline start padding (in px) to apply to list item(s) in the nested slot. When used, nested list items will not use the grid start calcuations and will only use this number to determine indentation.",
+          "type": "number"
+        },
         {
           "name": "color",
           "description": "A color indicator to appear at the beginning of a list item. Expected value is a valid 3, 4, 6, or 8 character CSS color hex code (e.g., #006fbf).",
@@ -9863,6 +9921,12 @@
           "description": "Whether to allow the drag target to be the handle only rather than the entire cell",
           "type": "boolean"
         },
+        {
+          "name": "indentation",
+          "attribute": "indentation",
+          "description": "Inline start padding (in px) to apply to list item(s) in the nested slot. When used, nested list items will not use the grid start calcuations and will only use this number to determine indentation.",
+          "type": "number"
+        },
         {
           "name": "color",
           "attribute": "color",
@@ -11231,6 +11295,10 @@
         {
           "name": "",
           "description": "Default content placed inside of the tooltip"
+        },
+        {
+          "name": "icon",
+          "description": "Optional slot for a custom icon"
         }
       ]
     },
@@ -14209,6 +14277,10 @@
         {
           "name": "",
           "description": "Default content placed inside of the tooltip"
+        },
+        {
+          "name": "icon",
+          "description": "Optional slot for a custom icon"
         }
       ]
     },

package/package.json

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