@brightspace-ui/core 2.80.2 → 2.80.4

package/components/collapsible-panel/README.md

@@ -130,7 +130,7 @@ The `d2l-collapsible-panel` element is a container that provides specific layout
 | `heading-style` | Number | The heading style to use |
 | `heading-level` | Number | Semantic heading level (h1-h4) |
 | `no-sticky` | Boolean | Disables sticky positioning for the header |
-| `padding` | String | Optionally set horizontal padding of inline panels |
+| `padding-type` | String | Optionally set horizontal padding of inline panels |
 | `panel-title` | String | The title of the panel |
 | `type` | String | The type of collapsible panel |
 <!-- docs: end hidden content -->

package/components/collapsible-panel/collapsible-panel.js

@@ -68,7 +68,7 @@ class CollapsiblePanel extends RtlMixin(LitElement) {
 			 * @type {'default'|'large'}
 			 * @default "default"
 			 */
-			padding: { type: String, reflect: true },
+			paddingType: { attribute: 'padding-type', type: String, reflect: true },
 			/**
 			 * Disables sticky positioning for the header
 			 * @type {boolean}
@@ -93,7 +93,7 @@ class CollapsiblePanel extends RtlMixin(LitElement) {
 			:host([hidden]) {
 				display: none;
 			}
-			:host([padding="large"][type="inline"]) {
+			:host([padding-type="large"][type="inline"]) {
 				--d2l-collapsible-panel-spacing-inline: 2rem;
 			}
 			.d2l-collapsible-panel {
@@ -248,7 +248,7 @@ class CollapsiblePanel extends RtlMixin(LitElement) {
 		this.expanded = false;
 		this.headingLevel = defaultHeading;
 		this.headingStyle = defaultHeading;
-		this.padding = 'default';
+		this.paddingType = 'default';
 		this.type = 'default';
 		this.noSticky = false;
 		this._focused = false;

package/components/collapsible-panel/demo/collapsible-panel.html

@@ -77,10 +77,10 @@
 
 			<h2>Inline with large padding</h2>
 			<d2l-demo-snippet>
-				<d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline" padding="large">
+				<d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline" padding-type="large">
 						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
 				</d2l-collapsible-panel>
-				<d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline" padding="large">
+				<d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline" padding-type="large">
 					<d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
 					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
 				</d2l-collapsible-panel>

package/components/object-property-list/demo/object-property-list.html

@@ -59,6 +59,19 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Object Property List: Hidden items</h2>
+
+			<d2l-demo-snippet overflow-hidden>
+				<template>
+					<d2l-object-property-list>
+						<d2l-object-property-list-item text="Item 1"></d2l-object-property-list-item>
+						<d2l-object-property-list-item text="Item 2 (Hidden)" hidden></d2l-object-property-list-item>
+						<d2l-object-property-list-item text="Item 3"></d2l-object-property-list-item>
+						<d2l-object-property-list-item text="Item 4 (Hidden)" hidden></d2l-object-property-list-item>
+					</d2l-object-property-list>
+				</template>
+			</d2l-demo-snippet>
+
 			<h2>Object Property List: No external whitespace (still contains internal whitespace in the component renderers)</h2>
 
 			<d2l-demo-snippet overflow-hidden>

package/components/object-property-list/object-property-list-item.js

@@ -11,6 +11,10 @@ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 export class ObjectPropertyListItem extends SkeletonMixin(LitElement) {
 	static get properties() {
 		return {
+			/**
+			 * @ignore
+			 */
+			hidden: { type: Boolean },
 			/**
 			 * Name of an optional icon to display
 			 * @type {string}
@@ -21,6 +25,7 @@ export class ObjectPropertyListItem extends SkeletonMixin(LitElement) {
 			 * @type {string}
 			 */
 			text: { type: String },
+			_showSeparator: { state: true },
 		};
 	}
 
@@ -29,12 +34,14 @@ export class ObjectPropertyListItem extends SkeletonMixin(LitElement) {
 			:host {
 				vertical-align: middle;
 			}
+			:host([hidden]) {
+				display: none;
+			}
 			d2l-icon {
 				height: 1.2857em; /* 18px desired height at main font size (14px), but using em to scale properly at smaller breakpoint. */
 				width: 1.2857em;
 			}
 			.separator {
-				display: var(--d2l-object-property-list-item-separator-display, inline);
 				margin: 0 -0.05rem; /* 10px desired margin, subtract 5px arbitrary whitespace and 6px whitespace inside bullet icon. */
 			}
 			.separator d2l-icon {
@@ -57,6 +64,11 @@ export class ObjectPropertyListItem extends SkeletonMixin(LitElement) {
 		`];
 	}
 
+	constructor() {
+		super();
+		this._showSeparator = true;
+	}
+
 	render() {
 		return html`
 			${this._renderIcon()}
@@ -65,17 +77,27 @@ export class ObjectPropertyListItem extends SkeletonMixin(LitElement) {
 		`;
 	}
 
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has('hidden')) this._onHidden();
+	}
+
+	_onHidden() {
+		/** Dispatched when the visibility of the item changes */
+		this.dispatchEvent(new CustomEvent('d2l-object-property-list-item-visibility-change', { bubbles: true, composed: true }));
+	}
+
 	_renderIcon() {
 		return this.icon && !this.skeleton ? html`<d2l-icon icon="${this.icon}" class="item-icon"></d2l-icon>` : nothing;
 	}
 
 	_renderSeparator() {
-		return html`
+		return this._showSeparator ? html`
 			<span class="separator">
 				<d2l-screen-reader-pause></d2l-screen-reader-pause>
 				<d2l-icon icon="tier1:bullet"></d2l-icon>
 			</span>
-		`;
+		` : nothing;
 	}
 
 	_renderText() {

package/components/object-property-list/object-property-list.js

@@ -28,9 +28,6 @@ class ObjectPropertyList extends LocalizeCoreElement(SkeletonMixin(LitElement))
 			:host([hidden]) {
 				display: none;
 			}
-			::slotted(:last-child), slot :last-child {
-				--d2l-object-property-list-item-separator-display: none;
-			}
 			::slotted([slot="status"]) {
 				display: none;
 			}
@@ -41,6 +38,13 @@ class ObjectPropertyList extends LocalizeCoreElement(SkeletonMixin(LitElement))
 		`];
 	}
 
+	firstUpdated() {
+		this.addEventListener('d2l-object-property-list-item-visibility-change', () => this._onItemsChanged());
+
+		const slot = this.shadowRoot.querySelector('slot:not([name])');
+		if (slot.childElementCount) this._setItemSeparatorVisibility(slot);
+	}
+
 	render() {
 		const slotContents = this.skeleton && this.skeletonCount > 0 ? [...Array(this.skeletonCount)].map(() => html`
 			<d2l-object-property-list-item text="${this.localize('components.object-property-list.item-placeholder-text')}" skeleton></d2l-object-property-list-item>
@@ -50,10 +54,24 @@ class ObjectPropertyList extends LocalizeCoreElement(SkeletonMixin(LitElement))
 			<div class="d2l-body-small">
 				<slot name="status"></slot>
 				<d2l-screen-reader-pause></d2l-screen-reader-pause>
-				<slot>${slotContents}</slot>
+				<slot @slotchange="${this._onItemsChanged}">${slotContents}</slot>
 			</div>
 		`;
 	}
+
+	_onItemsChanged(e) {
+		const slot = e?.target || this.shadowRoot.querySelector('slot:not([name])');
+		this._setItemSeparatorVisibility(slot);
+	}
+
+	_setItemSeparatorVisibility(slot) {
+		const slottedElements = slot.assignedElements();
+		const elements = slottedElements.length ? slottedElements : [ ...slot.children ];
+		const filtered = elements.filter(item => item.tagName?.toLowerCase().includes('d2l-object-property-list-') && !item.hidden);
+
+		const lastIndex = filtered.length - 1;
+		filtered.forEach((item, i) => item._showSeparator = (i !== lastIndex));
+	}
 }
 
 customElements.define('d2l-object-property-list', ObjectPropertyList);

package/custom-elements.json

@@ -1100,7 +1100,7 @@
           "default": "\"\\\"3\\\"\""
         },
         {
-          "name": "padding",
+          "name": "padding-type",
           "description": "Horizontal padding of the panel",
           "type": "'default'|'large'",
           "default": "\"\\\"default\\\"\""
@@ -1153,8 +1153,8 @@
           "default": "\"\\\"3\\\"\""
         },
         {
-          "name": "padding",
-          "attribute": "padding",
+          "name": "paddingType",
+          "attribute": "padding-type",
           "description": "Horizontal padding of the panel",
           "type": "'default'|'large'",
           "default": "\"\\\"default\\\"\""
@@ -9498,6 +9498,12 @@
           "type": "boolean",
           "default": "false"
         }
+      ],
+      "events": [
+        {
+          "name": "d2l-object-property-list-item-visibility-change",
+          "description": "Dispatched when the visibility of the item changes"
+        }
       ]
     },
     {
@@ -9542,6 +9548,12 @@
           "type": "boolean",
           "default": "false"
         }
+      ],
+      "events": [
+        {
+          "name": "d2l-object-property-list-item-visibility-change",
+          "description": "Dispatched when the visibility of the item changes"
+        }
       ]
     },
     {

package/package.json

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