@brightspace-ui/core 3.144.2 → 3.145.0

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/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",

package/package.json

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