Merge branch 'main' into tooltip-hover-content-dont-close

.lmsrelease

@@ -1 +1 @@
-20.25.2
+20.25.3

components/dialog/demo/dialog-async-content.js

@@ -3,8 +3,9 @@ import '../../list/list-item.js';
 import '../../list/list-item-content.js';
 import { html, LitElement } from 'lit';
 import { InitialStateError, runAsync } from '../../../directives/run-async/run-async.js';
+import { LoadingCompleteMixin } from '../../../mixins/loading-complete/loading-complete-mixin.js';
 
-class DialogAsyncContent extends LitElement {
+class DialogAsyncContent extends LoadingCompleteMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -32,21 +33,21 @@ class DialogAsyncContent extends LitElement {
 				resolve(html`
 					<d2l-list>
 						<d2l-list-item>
-							<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg"></img>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/38e839b1-37fa-470c-8830-b189ce4ae134/tile-high-density-max-size.jpg" @load="${this.#handleImageLoad}">
 							<d2l-list-item-content>
 								<div>Introductory Earth Sciences</div>
 								<div slot="supporting-info">This course explores the geological process of the Earth's interior and surface. These include volcanism, earthquakes, mountains...</div>
 							</d2l-list-item-content>
 						</d2l-list-item>
 						<d2l-list-item>
-							<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg"></img>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/e5fd575a-bc14-4a80-89e1-46f349a76178/tile-high-density-max-size.jpg" @load="${this.#handleImageLoad}">
 							<d2l-list-item-content>
 								<div>Engineering Materials for Energy Systems</div>
 								<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
 							</d2l-list-item-content>
 						</d2l-list-item>
 						<d2l-list-item>
-							<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg"></img>
+							<img slot="illustration" src="https://s.brightspace.com/course-images/images/63b162ab-b582-4bf9-8c1d-1dad04714121/tile-high-density-max-size.jpg" @load="${this.#handleImageLoad}">
 							<d2l-list-item-content>
 								<div>Geomorphology and GIS </div>
 								<div slot="supporting-info">This course explores the geological processes of the Earth's interior and surface. These include volcanism, earthquakes, mountain...</div>
@@ -58,6 +59,14 @@ class DialogAsyncContent extends LitElement {
 		});
 	}
 
+	#handleImageLoad() {
+		const images = this.shadowRoot.querySelectorAll('img');
+		for (const image of images) {
+			if (!image.complete) return;
+		}
+		this.resolveLoadingComplete();
+	}
+
 }
 
 customElements.define('d2l-dialog-demo-async-content', DialogAsyncContent);

components/dialog/dialog-mixin.js

@@ -2,7 +2,7 @@ import '../focus-trap/focus-trap.js';
 import '../../helpers/viewport-size.js';
 import { allowBodyScroll, preventBodyScroll } from '../backdrop/backdrop.js';
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
-import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
+import { findComposedAncestor, getComposedChildren, isComposedAncestor } from '../../helpers/dom.js';
 import { getComposedActiveElement, getFirstFocusableDescendant, getNextFocusable, isFocusable } from '../../helpers/focus.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
@@ -11,6 +11,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { tryGetIfrauBackdropService } from '../../helpers/ifrauBackdropService.js';
+import { waitForElem } from '../../helpers/internal/waitForElem.js';
 
 window.D2L = window.D2L || {};
 window.D2L.DialogMixin = window.D2L.DialogMixin || {};
@@ -148,6 +149,12 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		});
 	}
 
+	async waitForUpdateComplete() {
+		const predicate = () => true;
+		const composedChildren = getComposedChildren(this, predicate);
+		await Promise.all(composedChildren.map(child => waitForElem(child, predicate)));
+	}
+
 	_addHandlers() {
 		window.addEventListener('resize', this._updateSize);
 		this.addEventListener('touchstart', this._handleTouchStart);
@@ -452,6 +459,11 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			if (reduceMotion) await new Promise(resolve => requestAnimationFrame(resolve));
 			else await animPromise;
 
+			const flag = window.D2L?.LP?.Web?.UI?.Flags.Flag('GAUD-7397-dialog-resize-update-complete', true) ?? true;
+			if (flag) {
+				await this.waitForUpdateComplete();
+				await this._updateSize();
+			}
 			/** Dispatched when the dialog is opened */
 			this.dispatchEvent(new CustomEvent(
 				'd2l-dialog-open', { bubbles: true, composed: true }
@@ -580,4 +592,5 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			});
 		});
 	}
+
 };

components/dialog/dialog.js

@@ -205,7 +205,12 @@ class Dialog extends PropertyRequiredMixin(LocalizeCoreElement(AsyncContainerMix
 		super.updated(changedProperties);
 		if (!changedProperties.has('asyncState')) return;
 		if (this.asyncState === asyncStates.complete) {
-			this.resize();
+			const flag = window.D2L?.LP?.Web?.UI?.Flags.Flag('GAUD-7397-dialog-resize-update-complete', true) ?? true;
+			if (flag) {
+				this.waitForUpdateComplete().then(() => this.resize());
+			} else {
+				this.resize();
+			}
 		}
 	}
 

components/expand-collapse/README.md

@@ -36,7 +36,13 @@ The `d2l-expand-collapse-content` element can be used to create expandable and c
 - `d2l-expand-collapse-content-collapse`: dispatched when the content starts to collapse. The `detail` contains a `collapseComplete` promise that can be waited on to determine when the content has finished collapsing.
 <!-- docs: end hidden content -->
 
-### Accessibility Properties
+## Accessibility
 
-To make your usage of `d2l-expand-collapse-content` accessible, the [`aria-expanded` attribute](https://www.w3.org/TR/wai-aria/#aria-expanded) should be added to the element that controls expanding and collapsing the content with `"true"` or `"false"` to indicate that the content is expanded or collapsed.
+To make your usage of `d2l-expand-collapse-content` accessible, it should follow the [W3C Disclosure (Show/Hide) Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
+
+To achieve this, the control that toggles the expanded state should:
+ - Use the [`d2l-button`](../button) or use an element with the [`button`](https://w3c.github.io/aria/#button) role
+ - Toggle between states when using the `Enter` and `Space` buttons and retain focus upon toggle
+ - Have the [`aria-expanded`](https://www.w3.org/TR/wai-aria/#aria-expanded) attribute set to `'true'` or `'false'` depending on expansion state so that screen reader users will know what state it's in
+ - Be adjacent to the expanded/collapsed content
 

components/filter/demo/filter.html

@@ -16,7 +16,7 @@
 		import './filter-load-more-demo.js';
 	</script>
 	<script>
-		window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } };
+		window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } }; // TODO: remove with GAUD-131-dropdown-fixed-positioning flag clean up
 	</script>
 	<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0">
     <meta charset="UTF-8">

components/filter/filter.js

@@ -180,7 +180,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 				display: -webkit-box;
 				hyphens: auto;
 				-webkit-line-clamp: 2;
-				word-break: break-word;
+				overflow-wrap: anywhere;
 			}
 
 			d2l-list-item[selection-disabled] .d2l-filter-dimension-set-value,

components/focus-trap/focus-trap.js

@@ -29,7 +29,7 @@ class FocusTrap extends FocusMixin(LitElement) {
 				display: inline-block;
 			}
 			:host([hidden]) {
-				display: hidden;
+				display: none;
 			}
 		`;
 	}

components/form/demo/form-panel-demo.js

@@ -32,28 +32,9 @@ class FormPanelDemo extends LitElement {
 				display: none;
 			}
 
-			.d2l-form-panel-demo-panel {
-				background-color: white;
-				border-radius: 8px;
-				padding: 20px;
-			}
-
 			.d2l-form-panel-demo-container {
 				margin-bottom: 10px;
 			}
-
-			.d2l-form-panel-demo-header {
-				align-items: top;
-				cursor: pointer;
-				display: flex;
-				justify-content: space-between;
-			}
-
-			.d2l-form-panel-demo-text {
-				align-items: center;
-				display: flex;
-				margin: 0;
-			}
 		`];
 	}
 

components/form/form-errory-summary.js

@@ -26,7 +26,6 @@ class FormErrorSummary extends LocalizeCoreElement(RtlMixin(LitElement)) {
 			}
 
 			.d2l-form-error-summary-header {
-				align-items: top;
 				cursor: pointer;
 				display: flex;
 				justify-content: space-between;

components/inputs/input-textarea.js

@@ -126,10 +126,10 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 			.d2l-input-textarea-mirror {
 				line-height: 1rem;
 				overflow: hidden;
+				overflow-wrap: anywhere; /* prevent width from growing */
 				padding-bottom: 0.5rem;
 				padding-top: 0.5rem;
 				visibility: hidden;
-				word-break: break-word; /* prevent width from growing */
 			}
 			:host([no-padding]) .d2l-input {
 				padding-left: 0;

components/popover/demo/popover.html

@@ -280,7 +280,6 @@ <h2>Popover (mobile tray)</h2>
 				<d2l-test-popover mobile-tray-location="inline-start" style="max-width: 400px;">
 					<d2l-link href="https://pirateipsum.me/" target="_blank">Pirate Ipsum</d2l-link>
 					<div>Sink me piracy Gold Road quarterdeck wherry long boat line pillage walk the plank Plate Fleet. Haul wind black spot strike colors deadlights lee Barbary Coast yo-ho-ho ballast gally Shiver me timbers. Sea Legs quarterdeck yard scourge of the seven seas coffer plunder lanyard holystone code of conduct belay.</div>
-					<d2l-button-subtle text="Close"></d2l-button-subtle>
 				</d2l-test-popover>
 				<script>
 					window.wireUpPopover(document.currentScript.parentNode);

components/popover/popover-mixin.js

@@ -384,6 +384,7 @@ export const PopoverMixin = superclass => class extends superclass {
 		const backdrop = this._mobileTrayLocation ?
 			html`<d2l-backdrop for-target="content-wrapper" ?shown="${this._showBackdrop}"></d2l-backdrop>` :
 			nothing;
+
 		return html`${content}${backdrop}${pointer}`;
 
 	}

components/popover/test/popover.js

@@ -1,7 +1,6 @@
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { PopoverMixin } from '../popover-mixin.js';
-import { styleMap } from 'lit/directives/style-map.js';
 
 class Popover extends PopoverMixin(LitElement) {
 
@@ -67,8 +66,8 @@ class Popover extends PopoverMixin(LitElement) {
 			 * @type {boolean}
 			*/
 			trapFocus: { type: Boolean, reflect: true, attribute: 'trap-focus' },
-			_hasFooter: { state: true },
-			_hasHeader: { state: true }
+			_hasFooterSlotContent: { state: true },
+			_hasHeaderSlotContent: { state: true }
 		};
 	}
 
@@ -88,9 +87,25 @@ class Popover extends PopoverMixin(LitElement) {
 			.test-no-header {
 				display: none;
 			}
+			.test-footer {
+				box-sizing: border-box;
+				max-width: 100%;
+				padding: 0 1rem 1rem 1rem;
+				width: 100%;
+			}
 			.test-no-footer {
 				display: none;
 			}
+			.test-close {
+				margin-block-start: 12px;
+				width: 100%;
+			}
+			.test-no-close {
+				display: none;
+			}
+			.test-close-no-margin {
+				margin-block-start: 0;
+			}
 		`];
 	}
 
@@ -102,8 +117,8 @@ class Popover extends PopoverMixin(LitElement) {
 		this.opened = false;
 		this.trapFocus = false;
 
-		this._hasFooter = false;
-		this._hasHeader = false;
+		this._hasFooterSlotContent = false;
+		this._hasHeaderSlotContent = false;
 	}
 
 	connectedCallback() {
@@ -116,26 +131,29 @@ class Popover extends PopoverMixin(LitElement) {
 
 		const headerClasses = {
 			'test-header': true,
-			'test-no-header': !this._hasHeader
+			'test-no-header': !this._hasHeaderSlotContent
 		};
-		const headerStyle = {};
-
 		const footerClasses = {
 			'test-footer': true,
-			'test-no-footer': !this._hasFooter
+			'test-no-footer': !(this._hasFooterSlotContent || (this._mobile && this._mobileTrayLocation))
+		};
+		const closeButtonClasses = {
+			'test-close': true,
+			'test-no-close': !(this._mobile && this._mobileTrayLocation),
+			'test-close-no-margin': !this._hasFooterSlotContent
 		};
-		const footerStyle = {};
 
 		const content = html`
 			<div class="test-content-layout">
-				<div class="${classMap(headerClasses)}" style="${styleMap(headerStyle)}">
+				<div class="${classMap(headerClasses)}">
 					<slot name="header" @slotchange="${this.#handleHeaderSlotChange}"></slot>
 				</div>
 				<div class="test-content" @scroll="${this.#handleContentScroll}">
 					<slot></slot>
 				</div>
-				<div class=${classMap(footerClasses)} style=${styleMap(footerStyle)}>
+				<div class="${classMap(footerClasses)}">
 					<slot name="footer" @slotchange="${this.#handleFooterSlotChange}"></slot>
+					<d2l-button class="${classMap(closeButtonClasses)}" @click=${this.#handleCloseButtonClick}>Close</d2l-button>
 				</div>
 			</div>
 		`;
@@ -168,17 +186,21 @@ class Popover extends PopoverMixin(LitElement) {
 		return this.shadowRoot.querySelector('.test-content');
 	}
 
+	#handleCloseButtonClick() {
+		this.close();
+	}
+
 	#handleContentScroll() {
 		// eslint-disable-next-line
 		console.log('handle content scroll');
 	}
 
 	#handleFooterSlotChange(e) {
-		this._hasFooter = e.target.assignedNodes().length !== 0;
+		this._hasFooterSlotContent = e.target.assignedNodes().length !== 0;
 	}
 
 	#handleHeaderSlotChange(e) {
-		this._hasHeader = e.target.assignedNodes().length !== 0;
+		this._hasHeaderSlotContent = e.target.assignedNodes().length !== 0;
 	}
 
 	#handlePopoverClose() {

components/table/demo/table.html

@@ -8,6 +8,9 @@
 			import '../../demo/demo-page.js';
 			import './table-test.js';
 		</script>
+		<script>
+			window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } }; // TODO: remove with GAUD-131-dropdown-fixed-positioning flag clean up
+		</script>
 	</head>
 	<body unresolved>
 

components/table/table-col-sort-button.js

@@ -184,9 +184,9 @@ export class TableColSortButton extends LocalizeCoreElement(FocusMixin(LitElemen
 				<slot></slot>${iconView}
 			</button><span id="${this._describedById}" hidden>${buttonDescription}</span>${sortedView}`;
 		if (this._hasDropdownItems) {
-			return html`<d2l-dropdown>
+			return html`<d2l-dropdown prefer-fixed-positioning>
 					${button}
-					<d2l-dropdown-menu no-pointer align="start" vertical-offset="0">
+					<d2l-dropdown-menu no-pointer align="start" vertical-offset="0" prefer-fixed-positioning>
 						<d2l-menu @d2l-table-col-sort-button-item-change="${this._handleTablColSortButtonItemChange}">
 							<slot name="items" @slotchange="${this._handleSlotChange}"></slot>
 						</d2l-menu>

components/table/test/table.vdiff.js

@@ -664,6 +664,26 @@ describe('table', () => {
 					await expect(elem).to.be.golden();
 				});
 
+				it('col-sort-button-dropdown-open-short-flag-off', async() => {
+					window.D2L = {};
+					const elem = await createTableFixture(html`
+						<thead>${createSortableButtonDropdownHeaderRow()}</thead>
+						<tbody>${createRows([1])}</tbody>
+					`);
+					await clickElem(elem.shadowRoot.querySelector('d2l-table-col-sort-button'));
+					await expect(elem).to.be.golden();
+				});
+
+				it('col-sort-button-dropdown-open-short-flag-on', async() => {
+					window.D2L = { LP: { Web: { UI: { Flags: { Flag: () => true } } } } };
+					const elem = await createTableFixture(html`
+						<thead>${createSortableButtonDropdownHeaderRow()}</thead>
+						<tbody>${createRows([1])}</tbody>
+					`);
+					await clickElem(elem.shadowRoot.querySelector('d2l-table-col-sort-button'));
+					await expect(elem).to.be.golden({ margin: 50 });
+				});
+
 				it('wrapper component', async() => {
 					const elem = await fixture(html`<d2l-test-table type="${type}"></d2l-test-table>`, { rtl });
 					await expect(elem).to.be.golden();