@brightspace-ui/core 3.286.2 → 3.287.1

package/components/dropdown/dropdown-popover-mixin.js

@@ -394,8 +394,11 @@ export const DropdownPopoverMixin = superclass => class extends LocalizeCoreElem
 	}
 
 	#toggleScrollStyles() {
-		this._blockEndScroll = this.#contentElement.scrollHeight - (this.#contentElement.scrollTop + this.#contentElement.clientHeight) >= 5;
-		this._blockStartScroll = this.#contentElement.scrollTop !== 0;
+		// scrollHeight can sometimes not be updated right away
+		requestAnimationFrame(() => {
+			this._blockEndScroll = this.#contentElement.scrollHeight - (this.#contentElement.scrollTop + this.#contentElement.clientHeight) >= 5;
+			this._blockStartScroll = this.#contentElement.scrollTop !== 0;
+		});
 	}
 
 };

package/components/page/page-divider-internal.js

@@ -1,6 +1,6 @@
 import '../colors/colors.js';
 import '../icons/icon-custom.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { formatPercent } from '@brightspace-ui/intl';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -138,6 +138,41 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 			color: white;
 		}
 
+		.divider-arrow {
+			align-items: center;
+			background-color: rgba(255, 255, 255, 0.5);
+			cursor: pointer;
+			display: none;
+			height: 24px;
+			inset-block-start: max(50%, 97px); /* Do not hide behind slider on short screens */
+			justify-content: center;
+			position: absolute;
+			transform: translateY(-50%);
+			width: 24px;
+		}
+		.divider-arrow d2l-icon-custom {
+			color: var(--d2l-color-celestine);
+		}
+		.divider:focus-within .divider-arrow:not([hidden]) {
+			display: flex;
+		}
+		.divider-arrow:hover {
+			background-color: var(--d2l-color-gypsum);
+		}
+		.divider-arrow:hover d2l-icon-custom {
+			color: var(--d2l-color-celestine-minus-1);
+		}
+		.divider-arrow.start {
+			border-end-start-radius: 6px;
+			border-start-start-radius: 6px;
+			inset-inline-end: 100%;
+		}
+		.divider-arrow.end {
+			border-end-end-radius: 6px;
+			border-start-end-radius: 6px;
+			inset-inline-start: 100%;
+		}
+
 		:host([panel-type="drawer"]) .divider {
 			background-color: var(--d2l-color-celestine);
 			cursor: ns-resize;
@@ -150,7 +185,7 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 			top: auto;
 		}
 
-		/* TO DO: Lots more divider styling to come */
+		/* TO DO: Lots more drawer styling to come */
 
 	`;
 
@@ -169,13 +204,22 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 	}
 
 	render() {
+		const { showStartArrow, showEndArrow } = this.#getArrowVisibility();
 		let ariaValues = {};
 		if (this.maxSize > 0) {
 			ariaValues = { max: this.maxSize, min: 0, now: this.currentSize, text: formatPercent(this.currentSize / this.maxSize, { maximumFractionDigits: 0 }) };
 		}
 
 		return html`
-		    <div class="divider" @pointerdown="${this.#handlePointerDown}">
+		    <div class="divider" @click="${this.#handleClick}" @pointerdown="${this.#handlePointerDown}">
+				${this.panelType === 'panel' ? html`
+					<div class="divider-arrow start" data-position="start" ?hidden="${!showStartArrow}">
+						<d2l-icon-custom size="tier1">${ICON_ARROW_COLLAPSE_LEFT}</d2l-icon-custom>
+					</div>
+					<div class="divider-arrow end" data-position="end" ?hidden="${!showEndArrow}">
+						<d2l-icon-custom size="tier1">${ICON_ARROW_COLLAPSE_RIGHT}</d2l-icon-custom>
+					</div>
+				` : nothing}
 				<div
 					class="slider"
 					role="slider"
@@ -197,6 +241,17 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		`;
 	}
 
+	#clickedHandle = false;
+
+	#getArrowVisibility() {
+		if (this.panelType !== 'panel') return { showStartArrow: false, showEndArrow: false };
+		const canShrink = !this.collapsed && this.currentSize > this.minSize;
+		const canGrow = this.collapsed || this.currentSize < this.maxSize;
+		const showStartArrow = this.panelPosition === 'start' ? canShrink : canGrow;
+		const showEndArrow = this.panelPosition === 'start' ? canGrow : canShrink;
+		return { showStartArrow, showEndArrow };
+	}
+
 	#getHandleIcon() {
 		if (this.panelType === 'panel') {
 			if (this.panelPosition === 'start') {
@@ -209,6 +264,14 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		}
 	}
 
+	#handleClick(e) {
+		// Do not toggle until click event is received, to avoid clicking on elements under the handle in drawer mode
+		e.stopPropagation();
+		if (this.collapsed || this.#clickedHandle) {
+			this.#sendToggleEvent();
+		}
+	}
+
 	#handleKeyDown(e) {
 		if (!['Enter', ' ', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End', 'PageUp', 'PageDown'].includes(e.key)) return;
 		e.preventDefault();
@@ -248,12 +311,18 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		e.preventDefault();
 		this.focus();
 
-		const handle = this.shadowRoot.querySelector('.divider-handle');
-		const clickedHandle = handle && handle.contains(e.target);
+		const path = e.composedPath();
+		this.#clickedHandle = path.some(el => el.classList?.contains('divider-handle'));
 
-		// TO DO: Will move to PointerUp once we add dragging ability
-		if (this.collapsed || clickedHandle) {
-			this.#sendToggleEvent();
+		const clickedArrow = path.find(el => el.classList?.contains('divider-arrow'));
+		if (clickedArrow) {
+			const endArrowClicked = clickedArrow.dataset.position === 'end';
+			const shouldGrow = endArrowClicked === (this.panelPosition === 'start');
+
+			const step = (shouldGrow ? 1 : -1) * KEYBOARD_STEP;
+			const requestedSize = this.currentSize + step;
+			this.#sendResizeEvent(requestedSize);
+			return;
 		}
 	}
 

package/custom-elements.json

@@ -13202,7 +13202,7 @@
       "properties": [
         {
           "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tflex: none;\\n\\t\\t}\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\twidth: ${DIVIDER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-corundum);\\n\\t\\t}\\n\\t\\t.divider:focus-within {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\n\\t\\t.slider {\\n\\t\\t\\tinset-inline-start: -${DIVIDER_HANDLE_SIZE / 2 - DIVIDER_WIDTH / 2}px;\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 55px;\\n\\t\\t}\\n\\n\\t\\t.divider-handle {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tborder: 1px solid var(--d2l-color-mica);\\n\\t\\t\\tborder-radius: 50%;\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\twidth: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t}\\n\\t\\t.divider-handle:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle .handle-icon {\\n\\t\\t\\tcolor: white;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\tcursor: ns-resize;\\n\\t\\t\\theight: ${DIVIDER_WIDTH}px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .slider {\\n\\t\\t\\tinset-inline-end: 18px;\\n\\t\\t\\ttop: auto;\\n\\t\\t}\\n\\n\\t\\t/* TO DO: Lots more divider styling to come */\\n\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t\\tflex: none;\\n\\t\\t}\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-mica);\\n\\t\\t\\tcursor: ew-resize;\\n\\t\\t\\theight: 100%;\\n\\t\\t\\tposition: relative;\\n\\t\\t\\twidth: ${DIVIDER_WIDTH}px;\\n\\t\\t}\\n\\t\\t.divider:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-corundum);\\n\\t\\t}\\n\\t\\t.divider:focus-within {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\n\\t\\t.slider {\\n\\t\\t\\tinset-inline-start: -${DIVIDER_HANDLE_SIZE / 2 - DIVIDER_WIDTH / 2}px;\\n\\t\\t\\toutline: none;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttop: 55px;\\n\\t\\t}\\n\\n\\t\\t.divider-handle {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tborder: 1px solid var(--d2l-color-mica);\\n\\t\\t\\tborder-radius: 50%;\\n\\t\\t\\tbox-sizing: border-box;\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\theight: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\twidth: ${DIVIDER_HANDLE_SIZE}px;\\n\\t\\t}\\n\\t\\t.divider-handle:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t\\tborder-color: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.slider:focus .divider-handle .handle-icon {\\n\\t\\t\\tcolor: white;\\n\\t\\t}\\n\\n\\t\\t.divider-arrow {\\n\\t\\t\\talign-items: center;\\n\\t\\t\\tbackground-color: rgba(255, 255, 255, 0.5);\\n\\t\\t\\tcursor: pointer;\\n\\t\\t\\tdisplay: none;\\n\\t\\t\\theight: 24px;\\n\\t\\t\\tinset-block-start: max(50%, 97px); /* Do not hide behind slider on short screens */\\n\\t\\t\\tjustify-content: center;\\n\\t\\t\\tposition: absolute;\\n\\t\\t\\ttransform: translateY(-50%);\\n\\t\\t\\twidth: 24px;\\n\\t\\t}\\n\\t\\t.divider-arrow d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine);\\n\\t\\t}\\n\\t\\t.divider:focus-within .divider-arrow:not([hidden]) {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t}\\n\\t\\t.divider-arrow:hover {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t}\\n\\t\\t.divider-arrow:hover d2l-icon-custom {\\n\\t\\t\\tcolor: var(--d2l-color-celestine-minus-1);\\n\\t\\t}\\n\\t\\t.divider-arrow.start {\\n\\t\\t\\tborder-end-start-radius: 6px;\\n\\t\\t\\tborder-start-start-radius: 6px;\\n\\t\\t\\tinset-inline-end: 100%;\\n\\t\\t}\\n\\t\\t.divider-arrow.end {\\n\\t\\t\\tborder-end-end-radius: 6px;\\n\\t\\t\\tborder-start-end-radius: 6px;\\n\\t\\t\\tinset-inline-start: 100%;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-celestine);\\n\\t\\t\\tcursor: ns-resize;\\n\\t\\t\\theight: ${DIVIDER_WIDTH}px;\\n\\t\\t\\twidth: 100%;\\n\\t\\t}\\n\\n\\t\\t:host([panel-type=\\\"drawer\\\"]) .slider {\\n\\t\\t\\tinset-inline-end: 18px;\\n\\t\\t\\ttop: auto;\\n\\t\\t}\\n\\n\\t\\t/* TO DO: Lots more drawer styling to come */\\n\\n\\t`\""
         },
         {
           "name": "focusElementSelector",

package/package.json

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