POC for linear list item

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}"

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}"

components/list/demo/list-drag-and-drop.html

@@ -46,6 +46,22 @@ <h2>Add Button</h2>
 			</template>
 		</d2l-demo-snippet>
 
+		<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>
+				<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>
 

components/list/list-item-content.js

@@ -10,6 +10,15 @@ import { css, html, LitElement } from 'lit';
  */
 class ListItemContent extends LitElement {
 
+	static get properties() {
+		return {
+			/**
+			 * @ignore
+			 */
+			linear: { type: Boolean, reflect: true }
+		};
+	}
+
 	static get styles() {
 		return [ bodySmallStyles, bodyCompactStyles, css`
 			:host {
@@ -20,6 +29,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);
@@ -47,14 +63,17 @@ class ListItemContent extends LitElement {
 			.d2l-list-item-content-text-supporting-info ::slotted(*) {
 				margin-top: 0.15rem;
 			}
+
 		`];
 	}
 
 	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>
+			`}
 		`;
 	}
 

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,24 @@ 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: 0;
+			}
+
+			:host([linear]) [slot="content"] {
+				align-items: center;
+			}
+
+			:host([linear]) [slot="content"] ::slotted([slot="illustration"]) {
+				max-height: calc(100% - 0.5rem);
+				overflow: hidden;
+			}
+
 			: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,
@@ -467,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() {