From 54d737cd437f94d51874d7a7a2ecd868362259ae Mon Sep 17 00:00:00 2001
From: Danny Gleckler <daniel.gleckler@d2l.com>
Date: Wed, 25 Sep 2024 17:41:01 -0400
Subject: [PATCH 1/5] Add linear list item

---
 components/list/demo/demo-list-nested.js     |  2 ++
 components/list/demo/list-drag-and-drop.html |  8 ++++++++
 components/list/list-item-content.js         | 15 +++++++++++++++
 components/list/list-item-generic-layout.js  |  5 +++++
 components/list/list-item-mixin.js           | 13 +++++++++++++
 5 files changed, 43 insertions(+)

diff --git a/components/list/demo/demo-list-nested.js b/components/list/demo/demo-list-nested.js
index 46d51949638..021c068cd93 100644
--- a/components/list/demo/demo-list-nested.js
+++ b/components/list/demo/demo-list-nested.js
@@ -32,6 +32,7 @@ class ListDemoNested extends LitElement {
 			showLoadMore: { type: Boolean, attribute: 'show-load-more' },
 			noPrimaryAction: { type: Boolean, attribute: 'no-primary-action' },
 			disableListGrid: { type: Boolean, attribute: 'disable-list-grid' },
+			linear: { type: Boolean },
 			_items: { state: true },
 			_loadedItems: { state: true },
 			_remainingItemCount: { state: true },
@@ -201,6 +202,7 @@ class ListDemoNested extends LitElement {
 		const hasChildren = item?.items?.length > 0;
 		return html`
 			<d2l-list-item
+				?linear="${this.linear}"
 				action-href="${this.includeActionHref ? 'http://www.d2l.com' : ''}"
 				?draggable="${this.isDraggable}"
 				drag-handle-text="${item.primaryText}"
diff --git a/components/list/demo/list-drag-and-drop.html b/components/list/demo/list-drag-and-drop.html
index ed01ee4d449..8207f435f6a 100644
--- a/components/list/demo/list-drag-and-drop.html
+++ b/components/list/demo/list-drag-and-drop.html
@@ -46,6 +46,14 @@ <h2>Add Button</h2>
 			</template>
 		</d2l-demo-snippet>
 
+		<h2>Linear Items</h2>
+
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-nested add-button demo-item-key="imgPrimaryAndSupporting" is-draggable selectable linear include-secondary-actions></d2l-demo-list-nested>
+			</template>
+		</d2l-demo-snippet>
+
 
 	</d2l-demo-page>
 
diff --git a/components/list/list-item-content.js b/components/list/list-item-content.js
index 438dadb7d08..115eb432c1a 100644
--- a/components/list/list-item-content.js
+++ b/components/list/list-item-content.js
@@ -47,6 +47,21 @@ class ListItemContent extends LitElement {
 			.d2l-list-item-content-text-supporting-info ::slotted(*) {
 				margin-top: 0.15rem;
 			}
+
+			:host-context(d2l-list-item[linear]) .d2l-list-item-content-text {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			:host-context(d2l-list-item[linear]) .d2l-list-item-content-text * {
+				display: inline;
+			}
+
+			:host-context(d2l-list-item[linear]) slot[name] {
+				display: none;
+			}
+
 		`];
 	}
 
diff --git a/components/list/list-item-generic-layout.js b/components/list/list-item-generic-layout.js
index 22ac38c009c..41325d53aaa 100644
--- a/components/list/list-item-generic-layout.js
+++ b/components/list/list-item-generic-layout.js
@@ -39,6 +39,11 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			 * @type {'content'|'control'}
 			 */
 			alignNested: { type: String, reflect: true, attribute: 'align-nested' },
+			/**
+			 * Specifies whether lineat mode is active or not
+			 * @type {boolean}
+			 */
+			linear: { type: Boolean, attribute: 'linear' },
 			/**
 			 * Whether to constrain actions so they do not fill the item. Required if slotted content is interactive.
 			 * @type {boolean}
diff --git a/components/list/list-item-mixin.js b/components/list/list-item-mixin.js
index 55f981a97d8..c4d33ecc912 100644
--- a/components/list/list-item-mixin.js
+++ b/components/list/list-item-mixin.js
@@ -140,6 +140,19 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				bottom: -1px;
 			}
 
+			:host([linear]) d2l-list-item-generic-layout > [slot] {
+				align-content: center;
+				padding-block: 0px;
+			}
+
+			:host([linear]) [slot="content"] {
+				align-items: center;
+			}
+
+			:host([linear]) [slot="content"] ::slotted([slot="illustration"]) {
+				max-height: 1.5rem;
+			}
+
 			:host(:first-of-type[_separators="between"]) [slot="control-container"]::before,
 			:host(:last-of-type[_separators="between"]) [slot="control-container"]::after,
 			:host([_separators="none"]) [slot="control-container"]::before,

From dd32fe39d27f00c189c81ae13bab235eaf8645a4 Mon Sep 17 00:00:00 2001
From: Danny Gleckler <daniel.gleckler@d2l.com>
Date: Wed, 25 Sep 2024 20:21:12 -0400
Subject: [PATCH 2/5] Replace host-context

---
 .../list/demo/list-drag-and-drop-position.js  |  4 ++-
 components/list/demo/list-drag-and-drop.html  | 10 ++++++-
 components/list/list-item-content.js          | 29 ++++++++++---------
 components/list/list-item-generic-layout.js   |  5 ----
 components/list/list-item-mixin.js            | 16 +++++++++-
 5 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/components/list/demo/list-drag-and-drop-position.js b/components/list/demo/list-drag-and-drop-position.js
index 6b24852ac5e..c8e23fab54c 100644
--- a/components/list/demo/list-drag-and-drop-position.js
+++ b/components/list/demo/list-drag-and-drop-position.js
@@ -14,7 +14,8 @@ class ListDemoDragAndDropPosition extends LitElement {
 			// below are for demonstration only
 			grid: { type: Boolean },
 			hrefs: { type: Boolean },
-			selectable: { type: Boolean }
+			selectable: { type: Boolean },
+			linear: { type: Boolean }
 		};
 	}
 
@@ -77,6 +78,7 @@ class ListDemoDragAndDropPosition extends LitElement {
 				${repeat(this.list, (item) => item.key, (item) => html`
 					<d2l-list-item
 						key="${ifDefined(item.key)}"
+						?linear="${this.linear}"
 						draggable
 						?selectable="${this.selectable}"
 						drag-handle-text="${item.name}"
diff --git a/components/list/demo/list-drag-and-drop.html b/components/list/demo/list-drag-and-drop.html
index 8207f435f6a..5e6c440f9fc 100644
--- a/components/list/demo/list-drag-and-drop.html
+++ b/components/list/demo/list-drag-and-drop.html
@@ -46,7 +46,15 @@ <h2>Add Button</h2>
 			</template>
 		</d2l-demo-snippet>
 
-		<h2>Linear Items</h2>
+		<h2>Linear Grid</h2>
+
+		<d2l-demo-snippet>
+			<template>
+				<d2l-demo-list-drag-and-drop-position hrefs add-button demo-item-key="imgPrimaryAndSupporting" is-draggable selectable linear include-secondary-actions></d2l-demo-list-drag-and-drop-position>
+			</template>
+		</d2l-demo-snippet>
+
+		<h2>Linear Nested Grid</h2>
 
 		<d2l-demo-snippet>
 			<template>
diff --git a/components/list/list-item-content.js b/components/list/list-item-content.js
index 115eb432c1a..049b1f1fd54 100644
--- a/components/list/list-item-content.js
+++ b/components/list/list-item-content.js
@@ -10,6 +10,12 @@ import { css, html, LitElement } from 'lit';
  */
 class ListItemContent extends LitElement {
 
+	static get properties() {
+		return {
+			linear: { type: Boolean, reflect: true }
+		}
+	}
+
 	static get styles() {
 		return [ bodySmallStyles, bodyCompactStyles, css`
 			:host {
@@ -20,6 +26,13 @@ class ListItemContent extends LitElement {
 				margin: 0;
 			}
 
+			:host([linear]) .d2l-list-item-content-text > div,
+			:host([linear]) .d2l-list-item-content-text ::slotted(*) {
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
 			.d2l-list-item-content-text > div {
 				border-radius: var(--d2l-list-item-content-text-border-radius);
 				color: var(--d2l-list-item-content-text-color);
@@ -48,28 +61,16 @@ class ListItemContent extends LitElement {
 				margin-top: 0.15rem;
 			}
 
-			:host-context(d2l-list-item[linear]) .d2l-list-item-content-text {
-				overflow: hidden;
-				text-overflow: ellipsis;
-				white-space: nowrap;
-			}
-
-			:host-context(d2l-list-item[linear]) .d2l-list-item-content-text * {
-				display: inline;
-			}
-
-			:host-context(d2l-list-item[linear]) slot[name] {
-				display: none;
-			}
-
 		`];
 	}
 
 	render() {
 		return html`
 			<div class="d2l-list-item-content-text d2l-body-compact"><div><slot></slot></div></div>
+			${this.linear ? null : html`
 			<div class="d2l-list-item-content-text-secondary d2l-body-small"><slot name="secondary"></slot></div>
 			<div class="d2l-list-item-content-text-supporting-info d2l-body-small"><slot name="supporting-info"></slot></div>
+			`}
 		`;
 	}
 
diff --git a/components/list/list-item-generic-layout.js b/components/list/list-item-generic-layout.js
index 41325d53aaa..22ac38c009c 100644
--- a/components/list/list-item-generic-layout.js
+++ b/components/list/list-item-generic-layout.js
@@ -39,11 +39,6 @@ class ListItemGenericLayout extends RtlMixin(LitElement) {
 			 * @type {'content'|'control'}
 			 */
 			alignNested: { type: String, reflect: true, attribute: 'align-nested' },
-			/**
-			 * Specifies whether lineat mode is active or not
-			 * @type {boolean}
-			 */
-			linear: { type: Boolean, attribute: 'linear' },
 			/**
 			 * Whether to constrain actions so they do not fill the item. Required if slotted content is interactive.
 			 * @type {boolean}
diff --git a/components/list/list-item-mixin.js b/components/list/list-item-mixin.js
index c4d33ecc912..4fbc9c27c4d 100644
--- a/components/list/list-item-mixin.js
+++ b/components/list/list-item-mixin.js
@@ -69,6 +69,11 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			 * @type {boolean}
 			 */
 			dragTargetHandleOnly: { type: Boolean, attribute: 'drag-target-handle-only' },
+			/**
+			 * Whether to display the list item on a single line
+			 * @type {boolean}
+			 */
+			linear: { type: Boolean, attribute: 'linear' },
 			/**
 			 * Whether to disable rendering the entire item as the primary action. Required if slotted content is interactive.
 			 * @type {boolean}
@@ -140,6 +145,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				bottom: -1px;
 			}
 
+			:host([linear]) d2l-list-item-generic-layout > [slot="content"] {
+				height: 2.6rem;
+			}
+
 			:host([linear]) d2l-list-item-generic-layout > [slot] {
 				align-content: center;
 				padding-block: 0px;
@@ -150,7 +159,8 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			}
 
 			:host([linear]) [slot="content"] ::slotted([slot="illustration"]) {
-				max-height: 1.5rem;
+				max-height: calc(100% - .5rem);
+				overflow: hidden;
 			}
 
 			:host(:first-of-type[_separators="between"]) [slot="control-container"]::before,
@@ -480,6 +490,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 		if (changedProperties.has('_siblingHasColor') || changedProperties.has('color')) {
 			this._hasColorSlot = this.color || this._siblingHasColor;
 		}
+		if (changedProperties.has('linear')) {
+			const content = this.querySelector('d2l-list-item-content');
+			if (content) content.linear = this.linear;
+		}
 	}
 
 	focus() {

From cfc9fd8e033ffaf089b8334afc24a516c0df7da4 Mon Sep 17 00:00:00 2001
From: Danny Gleckler <daniel.gleckler@d2l.com>
Date: Wed, 25 Sep 2024 20:39:53 -0400
Subject: [PATCH 3/5] Fix lint

---
 components/list/list-item-content.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/list/list-item-content.js b/components/list/list-item-content.js
index 049b1f1fd54..f65b9f7c302 100644
--- a/components/list/list-item-content.js
+++ b/components/list/list-item-content.js
@@ -12,8 +12,11 @@ class ListItemContent extends LitElement {
 
 	static get properties() {
 		return {
+			/**
+			 * @ignore
+			 */
 			linear: { type: Boolean, reflect: true }
-		}
+		};
 	}
 
 	static get styles() {

From 51f0d3409aa47421f9728c30ff3f0552dc2c9d50 Mon Sep 17 00:00:00 2001
From: Danny Gleckler <daniel.gleckler@d2l.com>
Date: Wed, 25 Sep 2024 20:53:45 -0400
Subject: [PATCH 4/5] Bump arrow-collapse-small into correct position

---
 components/icons/images/tier1/arrow-expand-small.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/icons/images/tier1/arrow-expand-small.svg b/components/icons/images/tier1/arrow-expand-small.svg
index b28ba0790a2..29fee66feb4 100644
--- a/components/icons/images/tier1/arrow-expand-small.svg
+++ b/components/icons/images/tier1/arrow-expand-small.svg
@@ -1,3 +1,3 @@
-<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" mirror-in-rtl="true">
+<svg width="18" height="18" xmlns="http://www.w3.org/2000/svg" viewBox="0 1 18 18" mirror-in-rtl="true">
 	<path fill="#494c4e" d="M6 14V6c0-.4.2-.8.6-.9s.8-.1 1.1.2l4 4c.4.4.4 1 0 1.4l-4 4c-.3.3-.7.4-1.1.2-.4-.1-.6-.5-.6-.9zm2-5.6v3.2L9.6 10 8 8.4z"/>
 </svg>

From 82706b2ca01451e7439c16c5fa706f9f9a8702ec Mon Sep 17 00:00:00 2001
From: Danny Gleckler <daniel.gleckler@d2l.com>
Date: Wed, 25 Sep 2024 21:14:49 -0400
Subject: [PATCH 5/5] Fix style lint

---
 components/list/list-item-mixin.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/list/list-item-mixin.js b/components/list/list-item-mixin.js
index 4fbc9c27c4d..d2b954318c6 100644
--- a/components/list/list-item-mixin.js
+++ b/components/list/list-item-mixin.js
@@ -151,7 +151,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 
 			:host([linear]) d2l-list-item-generic-layout > [slot] {
 				align-content: center;
-				padding-block: 0px;
+				padding-block: 0;
 			}
 
 			:host([linear]) [slot="content"] {
@@ -159,7 +159,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 			}
 
 			:host([linear]) [slot="content"] ::slotted([slot="illustration"]) {
-				max-height: calc(100% - .5rem);
+				max-height: calc(100% - 0.5rem);
 				overflow: hidden;
 			}