@brightspace-ui/core 3.315.0 → 3.316.0

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

@@ -72,6 +72,11 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		 * @type {number}
 		 */
 		currentSize: { type: Number, attribute: 'current-size' },
+		/**
+		 * Whether to force-hide the directional arrows
+		 * @type {boolean}
+		 */
+		hideArrows: { type: Boolean, attribute: 'hide-arrows' },
 		/**
 		 * REQUIRED: label for the divider
 		 * @type {string}
@@ -228,6 +233,7 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 		this.collapsed = false;
 		this.collapsedSize = 0;
 		this.currentSize = 0;
+		this.hideArrows = false;
 		this.label = '';
 		this.maxSize = 0;
 		this.minSize = 0;
@@ -258,7 +264,7 @@ class PageDivider extends FocusMixin(PropertyRequiredMixin(LitElement)) {
 
 		return html`
 		    <div class="${classMap(dividerClasses)}" @click="${this.#handleClick}" @pointerdown="${this.#handlePointerDown}">
-				${this.panelType === 'panel' ? html`
+				${this.panelType === 'panel' && !this.hideArrows ? html`
 					<div class="divider-arrow start" data-position="start" ?hidden="${!showStartArrow}">
 						<d2l-icon-custom size="tier1">${ICON_ARROW_COLLAPSE_LEFT}</d2l-icon-custom>
 					</div>

package/components/page/page.js

@@ -27,6 +27,8 @@ const MOBILE_MODE_BREAKPOINT = 767;
 const overlayModeQuery = window.matchMedia(`(max-width: ${OVERLAY_MODE_BREAKPOINT}px)`);
 const mobileModeQuery = window.matchMedia(`(max-width: ${MOBILE_MODE_BREAKPOINT}px)`);
 
+export const HIDE_ARROWS_BREAKPOINT = 400;
+
 class PanelStateController {
 	constructor(host, panelConfigs) {
 		this.#host = host;
@@ -594,6 +596,7 @@ class Page extends ProviderMixin(LocalizeCoreElement(LitElement)) {
 				max-size="${this._panelState.getMaxSize(panelKey)}"
 				min-size="${this._panelState.getMinSize(panelKey)}"
 				panel-position="${ifDefined(panelPosition)}"
+				?hide-arrows="${this._contentWidth < HIDE_ARROWS_BREAKPOINT}"
 				@d2l-page-divider-resize="${this.#handleDividerResize}"
 				@d2l-page-divider-resize-live="${this.#handleDividerResizeLive}"
 				@d2l-page-divider-toggle="${this.#handleDividerToggle}"

package/custom-elements.json

@@ -13366,6 +13366,12 @@
           "type": "number",
           "default": "0"
         },
+        {
+          "name": "hide-arrows",
+          "description": "Whether to force-hide the directional arrows",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "label",
           "description": "REQUIRED: label for the divider",
@@ -13428,6 +13434,13 @@
           "type": "number",
           "default": "0"
         },
+        {
+          "name": "hideArrows",
+          "attribute": "hide-arrows",
+          "description": "Whether to force-hide the directional arrows",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "label",
           "attribute": "label",

package/package.json

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