@brightspace-ui/core 2.54.6 → 2.55.0

package/components/description-list/README.md

@@ -118,6 +118,7 @@ The `d2l-dl-wrapper` component can be combined with `descriptionListStyles` to a
 | Property | Type | Description | Default Value
 |---|---|---|---|
 | `breakpoint` | Number | Width for component to use a stacked layout. | 240 |
+| `force-stacked` | Boolean | Force the component to always use a stacked layout; will override breakpoint attribute | false |
 
 <!-- docs: end hidden content -->
 

package/components/description-list/demo/description-list-test.js

@@ -11,6 +11,11 @@ class TestDescriptionList extends LitElement {
 			 * @type {number}
 			 */
 			breakpoint: { type: Number, reflect: true },
+			/**
+			 * Force the component to always use a stacked layout; will override breakpoint attribute
+			 * @type {boolean}
+			 */
+			forceStacked: { type: Boolean, reflect: true, attribute: 'force-stacked' },
 			/**
 			 * @ignore
 			 */
@@ -47,7 +52,10 @@ class TestDescriptionList extends LitElement {
 
 	render() {
 		return html`
-			<d2l-dl-wrapper breakpoint="${ifDefined(this.breakpoint)}">
+			<d2l-dl-wrapper
+				breakpoint="${ifDefined(this.breakpoint)}"
+				?force-stacked="${this.forceStacked}"
+			>
 				${this._renderExample()}
 			</d2l-dl-wrapper>
 		`;

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

@@ -23,6 +23,11 @@
 				<d2l-test-dl type="long" breakpoint="300"></d2l-test-dl>
 			</d2l-demo-snippet>
 
+			<h2>Stacked</h2>
+			<d2l-demo-snippet fullscreen>
+				<d2l-test-dl type="long" force-stacked></d2l-test-dl>
+			</d2l-demo-snippet>
+
 			<h2>Activity Display</h2>
 			<d2l-demo-snippet fullscreen>
 				<d2l-test-dl type="activity-display"></d2l-test-dl>

package/components/description-list/description-list-wrapper.js

@@ -41,6 +41,11 @@ class DescriptionListWrapper extends LitElement {
 			 * @type {number}
 			 */
 			breakpoint: { type: Number, reflect: true },
+			/**
+			 * Force the component to always use a stacked layout; will override breakpoint attribute
+			 * @type {boolean}
+			 */
+			forceStacked: { type: Boolean, reflect: true, attribute: 'force-stacked' },
 			_stacked: { state: true },
 		};
 	}
@@ -55,7 +60,7 @@ class DescriptionListWrapper extends LitElement {
 			}
 			.stacked {
 				--d2l-dl-wrapper-dl-display: block;
-				--d2l-dl-wrapper-dt-max-width: unset;
+				--d2l-dl-wrapper-dt-max-width: none;
 				--d2l-dl-wrapper-dt-margin: 0 0 0.3rem 0;
 				--d2l-dl-wrapper-dd-margin: 0 0 0.9rem 0;
 			}
@@ -65,18 +70,16 @@ class DescriptionListWrapper extends LitElement {
 	constructor() {
 		super();
 		this.breakpoint = 240;
-		this._resizeObserver = new ResizeObserver(this._onResize.bind(this));
+		this.forceStacked = false;
 		this._stacked = false;
 	}
 
-	connectedCallback() {
-		super.connectedCallback();
-		this._resizeObserver.observe(this);
-	}
-
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		this._resizeObserver.disconnect();
+
+		if (this._resizeObserver) {
+			this._resizeObserver.disconnect();
+		}
 	}
 
 	render() {
@@ -86,6 +89,21 @@ class DescriptionListWrapper extends LitElement {
 		return html`<slot class="${classMap(classes)}"></slot>`;
 	}
 
+	updated(changedProperties) {
+		if (changedProperties.has('forceStacked')) {
+			if (!this.forceStacked) {
+				this._resizeObserver = new ResizeObserver(this._onResize.bind(this));
+				this._resizeObserver.observe(this);
+			} else {
+				if (this._resizeObserver) {
+					this._resizeObserver.disconnect();
+					this._resizeObserver = undefined;
+				}
+				this._stacked = true;
+			}
+		}
+	}
+
 	_onResize(entries) {
 		if (!entries || entries.length === 0) return;
 		const entry = entries[0];

package/custom-elements.json

@@ -1473,6 +1473,11 @@
           "name": "breakpoint",
           "description": "Width for component to use a stacked layout",
           "type": "number"
+        },
+        {
+          "name": "force-stacked",
+          "description": "Force the component to always use a stacked layout; will override breakpoint attribute",
+          "type": "boolean"
         }
       ],
       "properties": [
@@ -1482,6 +1487,12 @@
           "description": "Width for component to use a stacked layout",
           "type": "number"
         },
+        {
+          "name": "forceStacked",
+          "attribute": "force-stacked",
+          "description": "Force the component to always use a stacked layout; will override breakpoint attribute",
+          "type": "boolean"
+        },
         {
           "name": "type",
           "type": "string",
@@ -1499,6 +1510,12 @@
           "description": "Width for component to use a stacked layout",
           "type": "number",
           "default": "240"
+        },
+        {
+          "name": "force-stacked",
+          "description": "Force the component to always use a stacked layout; will override breakpoint attribute",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -1508,6 +1525,13 @@
           "description": "Width for component to use a stacked layout",
           "type": "number",
           "default": "240"
+        },
+        {
+          "name": "forceStacked",
+          "attribute": "force-stacked",
+          "description": "Force the component to always use a stacked layout; will override breakpoint attribute",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "slots": [

package/package.json

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