@brightspace-ui/core 3.187.0 → 3.188.0

package/components/inputs/input-checkbox.js

@@ -80,7 +80,7 @@ export const checkboxStyles = css`
 	input[type="checkbox"].d2l-input-checkbox:focus,
 	input[type="checkbox"].d2l-input-checkbox.d2l-input-checkbox-focus,
 	:host(.d2l-hovering) input[type="checkbox"]:not(:disabled).d2l-input-checkbox {
-		border-color: var(--d2l-color-celestine);
+		border-color: var(--d2l-input-checkbox-border-color-hover-focus, var(--d2l-color-celestine));
 		border-width: 2px;
 		outline-width: 0;
 	}

package/components/inputs/input-radio-styles.js

@@ -44,7 +44,7 @@ export const radioStyles = css`
 	.d2l-input-radio:focus,
 	.d2l-input-radio-label > input[type="radio"]:hover,
 	.d2l-input-radio-label > input[type="radio"]:focus {
-		border-color: var(--d2l-color-celestine);
+		border-color: var(--d2l-input-radio-border-color-hover-focus, var(--d2l-color-celestine));
 		border-width: 2px;
 		outline: none;
 	}

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

@@ -149,6 +149,46 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Selectable</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button-toggle pressed>
+						<d2l-button-subtle slot="not-pressed" icon="tier1:tile-view" text="Tiles"></d2l-button-subtle>
+						<d2l-button-subtle slot="pressed" icon="tier1:list-view" text="List"></d2l-button-subtle>
+					</d2l-button-toggle>
+					<d2l-list layout="tiles">
+						<d2l-list-item label="item 1" key="1" selectable>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Identify categories of physical activities</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation A1.2</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item label="item 2" key="2" selectable>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Apply a decision-making process to assess risks and make safe decisions in a variety of situations</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation B2.1</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+						<d2l-list-item label="item 3" key="3" selectable>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
+							<d2l-list-item-content>
+								<div>Retain objects of various shapes and sizes in different ways, while moving around others and equipment</div>
+								<div slot="secondary">Secondary Information</div>
+								<div slot="supporting-info">Specific Expectation B2.2</div>
+							</d2l-list-item-content>
+						</d2l-list-item>
+					</d2l-list>
+					<script data-demo-hide>
+						(demo => window.wireupListTileToggle(demo))(document.currentScript.parentNode);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Links</h2>
 
 			<d2l-demo-snippet>

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

@@ -175,6 +175,8 @@ export const ListItemCheckboxMixin = superclass => class extends SkeletonMixin(s
 				?_indeterminate="${this.selectionInfo.state === SelectionInfo.states.some}"
 				key="${this.key}"
 				label="${this.label}"
+				@mouseenter="${this._onMouseEnterSelection}"
+				@mouseleave="${this._onMouseLeaveSelection}"
 				?selected="${this.selected}"
 				?skeleton="${this.skeleton}">
 			</d2l-selection-input>

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

@@ -219,15 +219,18 @@ class ListItemGenericLayout extends LitElement {
 
 			:host([layout="tile"]) {
 				grid-template-columns:
-					[start] minmax(0, auto)
+					[start control-start] minmax(0, min-content)
+					[control-end] minmax(0, auto)
 					[end];
 				grid-template-rows:
-					[start] auto
-					[end];
+					[start header-start] minmax(0, min-content)
+					[header-end content-start] auto
+					[content-end end];
 				height: 100%;
 			}
 			:host([layout="tile"]) ::slotted([slot="content"]),
-			:host([layout="tile"]) ::slotted([slot="content-action"]) {
+			:host([layout="tile"]) ::slotted([slot="content-action"]),
+			:host([layout="tile"]) ::slotted([slot="control-action"]) {
 				grid-column: start / end;
 				grid-row: start / end;
 			}
@@ -235,6 +238,12 @@ class ListItemGenericLayout extends LitElement {
 				grid-column: start / end;
 				grid-row: start / end;
 			}
+			:host([layout="tile"]) ::slotted([slot="control"]) {
+				grid-column: control-start / control-end;
+				grid-row: start;
+				pointer-events: all;
+				width: unset;
+			}
 
 			:host([layout="tile"]) slot[name="add-top"],
 			:host([layout="tile"]) slot[name="control-container"],
@@ -243,8 +252,6 @@ class ListItemGenericLayout extends LitElement {
 			:host([layout="tile"]) slot[name="outside-control-action"],
 			:host([layout="tile"]) slot[name="color-indicator"],
 			:host([layout="tile"]) slot[name="expand-collapse"],
-			:host([layout="tile"]) slot[name="control-action"],
-			:host([layout="tile"]) slot[name="control"],
 			:host([layout="tile"]) slot[name="actions"],
 			:host([layout="tile"]) slot[name="drop-target"],
 			:host([layout="tile"]) slot[name="nested"],

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

@@ -193,10 +193,10 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				border-top: 0;
 			}
 
-			:host(:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators > [slot="control"] {
+			:host(:not([layout="tile"]):not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators > [slot="control"] {
 				width: 3rem;
 			}
-			:host(:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators > [slot="control"] ~ [slot="control-action"] [slot="content"] {
+			:host(:not([layout="tile"]):not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators > [slot="control"] ~ [slot="control-action"] [slot="content"] {
 				padding-inline-start: 3rem;
 			}
 			:host(:not([_has-color-slot])) .d2l-list-item-content-extend-separators [slot="content"] {
@@ -303,7 +303,7 @@ export const ListItemMixin = superclass => class extends composeMixins(
 				margin-block: 0.55rem;
 				margin-inline-end: 0.55rem;
 			}
-			:host(:not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators d2l-selection-input {
+			:host(:not([layout="tile"]):not([_render-expand-collapse-slot])) .d2l-list-item-content-extend-separators d2l-selection-input {
 				margin-inline-start: 0.9rem;
 			}
 			:host(:not([_render-expand-collapse-slot])[_has-color-slot]) .d2l-list-item-content-extend-separators d2l-selection-input {
@@ -511,6 +511,33 @@ export const ListItemMixin = superclass => class extends composeMixins(
 					border-color: transparent;
 				}
 			}
+
+			:host([layout="tile"]) d2l-selection-input {
+				--d2l-input-checkbox-border-color-hover-focus: var(--d2l-color-celestine-minus-1);
+				--d2l-input-radio-border-color-hover-focus: var(--d2l-color-celestine-minus-1);
+				border: 2px solid transparent;
+				border-radius: 8px;
+				margin: 0;
+				padding: 3px;
+			}
+			:host([layout="tile"][_focusing]) d2l-selection-input {
+				border: 2px solid white;
+			}
+			:host([layout="tile"]) [slot="control"] {
+				background-color: rgba(0, 0, 0, 0.5);
+				border-radius: 8px;
+				box-sizing: border-box;
+				margin: 0.5rem;
+				outline: 2px solid transparent;
+			}
+			:host([layout="tile"][_focusing]) [slot="control"] {
+				background-color: var(--d2l-color-celestine);
+				outline-color: var(--d2l-color-celestine-minus-1);
+			}
+			:host([layout="tile"][skeleton]) [slot="control"] {
+				background-color: transparent;
+			}
+
 		`];
 
 		super.styles && styles.unshift(super.styles);

package/components/more-less/demo/more-less-test.js

@@ -0,0 +1,67 @@
+import '../more-less.js';
+import { css, html, LitElement } from 'lit';
+
+const text = {
+	short: 'Short text.',
+	long: 'This is a much longer piece of text that will demonstrate the more-less component functionality. It should initially be truncated and then expandable to show the full content when the user clicks "more".'
+};
+
+class MoreLessTest extends LitElement {
+	static get properties() {
+		return {
+			text: { type: String },
+			margin: { type: Boolean, reflect: true },
+			extraItems: { type: Number }
+		};
+	}
+	static get styles() {
+		return css`
+			button:last-of-type {
+				margin-bottom: 2em;
+			}
+			:host([margin]) .hidden-div {
+				margin-bottom: 500px;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		this.text = text.short;
+		this.margin = false;
+		this.extraItems = 0;
+	}
+
+	render() {
+		return html`
+			<button @click="${this.#toggleText}">Toggle Text Length</button>
+			<button @click="${this.#toggleDivMargin}">Toggle Text Margin</button>
+			<button @click="${this.#addExtraItem}">Add Extra Item</button>
+			<button ?disabled="${this.extraItems === 0}" @click="${this.#removeExtraItem}">Remove Extra Item</button>
+			<hr>
+			<d2l-more-less>
+				${this.text}
+				<div class="hidden-div"></div>
+				${Array.from({ length: this.extraItems }, (_, i) => html`<div>Extra item ${i + 1}</div>`)}
+			</d2l-more-less>
+		`;
+	}
+
+	#addExtraItem() {
+		this.extraItems += 1;
+	}
+
+	#removeExtraItem() {
+		if (this.extraItems > 0) this.extraItems -= 1;
+	}
+
+	#toggleDivMargin() {
+		this.margin = !this.margin;
+	}
+
+	#toggleText() {
+		this.text = this.text === text.short ? text.long : text.short;
+	}
+
+}
+customElements.define('d2l-more-less-test', MoreLessTest);

package/components/more-less/demo/more-less.html

@@ -7,6 +7,7 @@
 		<script type="module">
 			import '../../demo/demo-page.js';
 			import '../more-less.js';
+			import './more-less-test.js';
 		</script>
 	</head>
 	<body unresolved>
@@ -45,6 +46,14 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>More-less test</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-more-less-test></d2l-more-less-test>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 
 		<script>

package/components/more-less/more-less.js

@@ -1,5 +1,5 @@
 import '../button/button-subtle.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { getComposedChildren, isComposedAncestor } from '../../helpers/dom.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
@@ -77,6 +77,12 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 			:host([inactive]) .d2l-more-less-toggle {
 				display: none;
 			}
+
+			.force-margin-scroll {
+				height: 1px;
+				margin-top: -1px;
+			}
+
 			@media (prefers-reduced-motion: reduce) {
 				.d2l-more-less-transition {
 					transition: none;
@@ -97,13 +103,14 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 
 		this.__baseHeight = 0;
 		this.__contentId = getUniqueId();
-		this.__content = null;
 		this.__contentSlot = null;
+		this.__content = null;
 		this.__autoExpanded = false;
 		this.__shift = false;
 		this.__bound_transitionEvents = null;
 
-		this._mutationObserver = new MutationObserver(this.__reactToMutationChanges.bind(this));
+		this._observeContentOnly = getFlag('GAUD-8725-more-less-refactor-resizing', true);
+		if (!this._observeContentOnly) this._mutationObserver = new MutationObserver(this.__reactToMutationChanges.bind(this));
 		this._resizeObserver = new ResizeObserver(this.__reactToChanges.bind(this));
 	}
 
@@ -111,7 +118,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 		super.disconnectedCallback();
 
 		this._resizeObserver.disconnect();
-		this._mutationObserver.disconnect();
+		if (!this._observeContentOnly) this._mutationObserver.disconnect();
 
 		this.shadowRoot.removeEventListener('transitionstart', this.__bound_transitionEvents);
 		this.shadowRoot.removeEventListener('transitionend', this.__bound_transitionEvents);
@@ -123,8 +130,13 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 		super.firstUpdated();
 
 		this.__content = this.shadowRoot.querySelector('.d2l-more-less-content');
-		this.__contentSlot = this.shadowRoot.querySelector('.d2l-more-less-content slot');
-		this.__startObserving();
+		if (this._observeContentOnly) {
+			this.__reactToChanges();
+			this._resizeObserver.observe(this.__content);
+		} else {
+			this.__contentSlot = this.shadowRoot.querySelector('.d2l-more-less-content slot');
+			this.__startObserving();
+		}
 
 		this.__bound_transitionEvents = this.__transitionEvents.bind(this);
 		this.shadowRoot.addEventListener('transitionstart', this.__bound_transitionEvents);
@@ -138,6 +150,9 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 			'd2l-more-less-content': true,
 			'd2l-more-less-transition': this.__transitionAdded
 		};
+
+		// The .force-margin-scroll div is used to force content bottom margin to be included in scrollHeight calculations.
+		// The load and slotchange events can be removed when GAUD-8725-more-less-refactor-resizing is removed
 		return html`
 			<div
 				id="${this.__contentId}"
@@ -145,9 +160,9 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 				style=${styleMap({ maxHeight: `${this.__maxHeight}` })}
 				@focusin="${this.__focusIn}"
 				@focusout="${this.__focusOut}"
-				@load=${this.__reactToChanges}
-				@slotchange=${this.#handleSlotChange}>
-				<slot></slot>
+				@load=${this._observeContentOnly ? undefined : this.__reactToChanges}>
+				<slot @slotchange=${this._observeContentOnly ? undefined : this.#handleSlotChange}></slot>
+				${this._observeContentOnly ? html`<div class="force-margin-scroll"></div>` : nothing}
 			</div>
 			<d2l-button-subtle
 				class="d2l-more-less-toggle"
@@ -289,6 +304,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 		});
 	}
 
+	// Remove when GAUD-8725-more-less-refactor-resizing is removed
 	__isOwnMutation(mutation) {
 		return mutation.target === this.__content
 			&& (mutation.type === 'style' || mutation.type === 'attributes');
@@ -299,6 +315,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 		this.__adjustToContent();
 	}
 
+	// Remove when GAUD-8725-more-less-refactor-resizing is removed
 	__reactToMutationChanges(mutations) {
 		if (mutations
 			&& Array.isArray(mutations)
@@ -317,6 +334,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 		this.__content.scrollTo({ top: 0, behavior: 'instant' });
 	}
 
+	// Remove when GAUD-8725-more-less-refactor-resizing is removed
 	__startObserving() {
 		this._resizeObserver.disconnect();
 		this._mutationObserver.disconnect();
@@ -356,6 +374,7 @@ class MoreLess extends LocalizeCoreElement(LitElement) {
 		this.dispatchEvent(new CustomEvent(e.type, { bubbles: true, composed: true, detail: e.detail }));
 	}
 
+	// Remove when GAUD-8725-more-less-refactor-resizing is removed
 	#handleSlotChange() {
 		this.__reactToChanges();
 		this.__startObserving();

package/custom-elements.json

@@ -11352,6 +11352,47 @@
         }
       ]
     },
+    {
+      "name": "d2l-more-less-test",
+      "path": "./components/more-less/demo/more-less-test.js",
+      "attributes": [
+        {
+          "name": "text",
+          "type": "string",
+          "default": "\"short\""
+        },
+        {
+          "name": "margin",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "extraItems",
+          "type": "number",
+          "default": "0"
+        }
+      ],
+      "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "type": "string",
+          "default": "\"short\""
+        },
+        {
+          "name": "margin",
+          "attribute": "margin",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "extraItems",
+          "attribute": "extraItems",
+          "type": "number",
+          "default": "0"
+        }
+      ]
+    },
     {
       "name": "d2l-more-less",
       "path": "./components/more-less/more-less.js",

package/package.json

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