Replace host-context

BrightspaceUI · Sep 26, 2024 · 9d1fe01 · 9d1fe01
1 parent 9edfd31
commit 9d1fe01
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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() {