@brightspace-ui/core 2.112.0 → 2.112.2

package/components/list/list-item-expand-collapse-mixin.js

@@ -2,11 +2,12 @@ import '../button/button-icon.js';
 import '../loading-spinner/loading-spinner.js';
 import { css, html, nothing } from 'lit';
 import { EventSubscriberController } from '../../controllers/subscriber/subscriberControllers.js';
+import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const dragIntervalDelay = 100;
 const dragHoverDropTime = 1000;
 
-export const ListItemExpandCollapseMixin = superclass => class extends superclass {
+export const ListItemExpandCollapseMixin = superclass => class extends SkeletonMixin(superclass) {
 
 	static get properties() {
 		return {
@@ -127,6 +128,7 @@ export const ListItemExpandCollapseMixin = superclass => class extends superclas
 		}
 		return html`
 			<d2l-button-icon
+				class="d2l-skeletize"
 				icon="${this.expanded ? 'tier1:arrow-collapse-small' : 'tier1:arrow-expand-small' }"
 				aria-expanded="${this.expanded ? 'true' : 'false'}"
 				text="${this.label}"

package/components/tooltip/demo/tooltip.html

@@ -198,6 +198,11 @@
 			</template>
 		</d2l-demo-snippet>
 
+		<script>
+			document.addEventListener('d2l-tooltip-show', e => console.log('d2l-tooltip-show', e.target));
+			document.addEventListener('d2l-tooltip-hide', e => console.log('d2l-tooltip-hide', e.target));
+		</script>
+
 	</d2l-demo-page>
 
 </body>

package/components/tooltip/tooltip.js

@@ -459,7 +459,7 @@ class Tooltip extends RtlMixin(LitElement) {
 		if (oldVal !== val) {
 			this._showing = val;
 			this.requestUpdate('showing', oldVal);
-			this._showingChanged(val);
+			this._showingChanged(val, oldVal !== undefined); // don't dispatch hide event when initializing
 		}
 	}
 
@@ -882,7 +882,7 @@ class Tooltip extends RtlMixin(LitElement) {
 		}
 	}
 
-	async _showingChanged(newValue) {
+	async _showingChanged(newValue, dispatch) {
 		clearTimeout(this._hoverTimeout);
 		clearTimeout(this._longPressTimeout);
 		if (newValue) {
@@ -895,9 +895,11 @@ class Tooltip extends RtlMixin(LitElement) {
 			this.setAttribute('aria-hidden', 'false');
 			await this.updateComplete;
 			await this.updatePosition();
-			this.dispatchEvent(new CustomEvent(
-				'd2l-tooltip-show', { bubbles: true, composed: true }
-			));
+			if (dispatch) {
+				this.dispatchEvent(new CustomEvent(
+					'd2l-tooltip-show', { bubbles: true, composed: true }
+				));
+			}
 
 			if (this.announced && !this._isInteractive(this._target)) announce(this.innerText);
 		} else {
@@ -908,9 +910,11 @@ class Tooltip extends RtlMixin(LitElement) {
 				clearDismissible(this._dismissibleId);
 				this._dismissibleId = null;
 			}
-			this.dispatchEvent(new CustomEvent(
-				'd2l-tooltip-hide', { bubbles: true, composed: true }
-			));
+			if (dispatch) {
+				this.dispatchEvent(new CustomEvent(
+					'd2l-tooltip-hide', { bubbles: true, composed: true }
+				));
+			}
 		}
 	}
 

package/custom-elements.json

@@ -7815,12 +7815,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "skeleton",
-          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "drag-handle-text",
           "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
@@ -7858,6 +7852,12 @@
           "description": "Default state for expand collapse toggle - if not set, collapsed will be the default state",
           "type": "boolean"
         },
+        {
+          "name": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "labelled-by",
           "description": "The id of element that provides the label for this element",
@@ -7921,13 +7921,6 @@
         {
           "name": "selectionInfo"
         },
-        {
-          "name": "skeleton",
-          "attribute": "skeleton",
-          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -7972,6 +7965,13 @@
           "description": "Default state for expand collapse toggle - if not set, collapsed will be the default state",
           "type": "boolean"
         },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "documentLocaleSettings",
           "default": "\"getDocumentLocaleSettings()\""
@@ -8149,12 +8149,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "skeleton",
-          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "drag-handle-text",
           "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
@@ -8192,6 +8186,12 @@
           "description": "Default state for expand collapse toggle - if not set, collapsed will be the default state",
           "type": "boolean"
         },
+        {
+          "name": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "labelled-by",
           "description": "The id of element that provides the label for this element",
@@ -8262,13 +8262,6 @@
         {
           "name": "selectionInfo"
         },
-        {
-          "name": "skeleton",
-          "attribute": "skeleton",
-          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -8313,6 +8306,13 @@
           "description": "Default state for expand collapse toggle - if not set, collapsed will be the default state",
           "type": "boolean"
         },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "documentLocaleSettings",
           "default": "\"getDocumentLocaleSettings()\""
@@ -8623,12 +8623,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "skeleton",
-          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "drag-handle-text",
           "description": "**Drag & drop:** The drag-handle label for assistive technology. If implementing drag & drop, you should change this to dynamically announce what the drag-handle is moving for assistive technology in keyboard mode.",
@@ -8666,6 +8660,12 @@
           "description": "Default state for expand collapse toggle - if not set, collapsed will be the default state",
           "type": "boolean"
         },
+        {
+          "name": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "labelled-by",
           "description": "The id of element that provides the label for this element",
@@ -8741,13 +8741,6 @@
         {
           "name": "selectionInfo"
         },
-        {
-          "name": "skeleton",
-          "attribute": "skeleton",
-          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
-          "type": "boolean",
-          "default": "false"
-        },
         {
           "name": "dragHandleText",
           "attribute": "drag-handle-text",
@@ -8792,6 +8785,13 @@
           "description": "Default state for expand collapse toggle - if not set, collapsed will be the default state",
           "type": "boolean"
         },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "documentLocaleSettings",
           "default": "\"getDocumentLocaleSettings()\""

package/package.json

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