@brightspace-ui/core 2.31.2 → 2.32.1

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

@@ -14,6 +14,11 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 				reflect: true
 			},
 
+			/**
+			 * @ignore
+			 */
+			dropdownOpened: { state: true },
+
 			/**
 			 * @ignore
 			 */
@@ -40,7 +45,6 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 				attribute: 'open-on-hover'
 			},
 			_isHovering: { type: Boolean },
-			_isOpen: { type: Boolean },
 			_isOpenedViaClick: { type: Boolean },
 			_isFading: { type: Boolean }
 		};
@@ -55,7 +59,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 
 		// hover option
 		this._dismissTimerId = getUniqueId();
-		this._isOpen = false;
+		this.dropdownOpened = false;
 		this._isOpenedViaClick = false;
 		this._isHovering = false;
 		this._isFading = false;
@@ -121,7 +125,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 
 	/* used by open-on-hover option */
 	async closeDropdown(fadeOut) {
-		this._isOpen = false;
+		this.dropdownOpened = false;
 		this._isHovering = false;
 		this._isOpenedViaClick = false;
 		if (fadeOut) {
@@ -150,7 +154,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 
 	/* used by open-on-hover option */
 	async openDropdown(applyFocus) {
-		this._isOpen = true;
+		this.dropdownOpened = true;
 		const dropdownContent = this.__getContentElement();
 		if (!dropdownContent) return;
 		await dropdownContent.open(applyFocus);
@@ -167,7 +171,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 			return;
 		}
 		content.toggleOpen(applyFocus);
-		this._isOpen = !this._isOpen;
+		this.dropdownOpened = !this.dropdownOpened;
 	}
 
 	__getContentElement() {
@@ -183,12 +187,12 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		}
 		opener.setAttribute('aria-expanded', 'false');
 		opener.removeAttribute('active');
-		this._isOpen = false;
+		this.dropdownOpened = false;
 		this._isOpenedViaClick = false;
 	}
 
 	__onDropdownMouseUp() {
-		this._isOpen = true;
+		this.dropdownOpened = true;
 		this._isFading = false;
 		this._isHovering = false;
 		this._isOpenedViaClick = true;
@@ -216,7 +220,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 		const dropdownContent = this.__getContentElement();
 		if (dropdownContent._useMobileStyling) return;
 		clearTimeout(this._dismissTimerId);
-		if (!this._isOpen) await this.openDropdown(false);
+		if (!this.dropdownOpened) await this.openDropdown(false);
 		this._closeTimerStop();
 		if (!this._isOpenedViaClick) this._isHovering = true;
 	}
@@ -259,7 +263,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 				e.stopPropagation();
 			}
 			this._closeTimerStop();
-			if (this._isOpen && !this._isHovering) {
+			if (this.dropdownOpened && !this._isHovering) {
 				this.closeDropdown();
 			} else {
 				this._isOpenedViaClick = true;
@@ -271,7 +275,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 
 	/* used by open-on-hover option */
 	_closeTimerStart() {
-		if (this._isOpen) return;
+		if (this.dropdownOpened) return;
 		clearTimeout(this._setTimeoutId);
 		this._isFading = true;
 		this._setTimeoutId = setTimeout(() => {
@@ -289,7 +293,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 
 	/* used by open-on-hover option */
 	_onOutsideClick(e) {
-		if (!this._isOpen) return;
+		if (!this.dropdownOpened) return;
 		const isWithinDropdown = isComposedAncestor(this.__getContentElement(), e.composedPath()[0]);
 		const isWithinOpener = isComposedAncestor(this.getOpenerElement(), e.composedPath()[0]);
 		const isBackdropClick = isWithinDropdown

package/components/filter/README.md

@@ -239,47 +239,54 @@ A tag-list allowing the user to see (and remove) the currently applied filters.
   import '@brightspace-ui/core/components/filter/filter-tags.js';
 </script>
 <style>
-	d2l-filter-tags {
-		max-width: calc(100% - 300px);
-	}
-
-	@media(max-width: 600px) {
-      d2l-filter-tags {
+  .filter-wrapper {
+    display: flex;
+    justify-content: space-between;
+  }
+  d2l-filter-tags {
+    align-self: center;
+    position: relative;
+    width: 100%;
+  }
+
+  @media(max-width: 600px) {
+      .filter-wrapper {
         display: block;
         max-width: 100%;
       }
 	}
 </style>
-
-<d2l-filter-tags filter-ids="core-filter core-filter-2"></d2l-filter-tags>
-
-<d2l-filter id="core-filter">
-  <d2l-filter-dimension-set key="1" text="Dim 1">
-    <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
-  </d2l-filter-dimension-set>
-  <d2l-filter-dimension-set key="2" text="Dim 2">
-    <d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
-  </d2l-filter-dimension-set>
-</d2l-filter>
-
-<d2l-filter id="core-filter-2">
-  <d2l-filter-dimension-set key="1" text="Dim 1" value-only-active-filter-text>
-    <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
-  </d2l-filter-dimension-set>
-  <d2l-filter-dimension-set key="2" text="Dim 2" value-only-active-filter-text>
-    <d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
-    <d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
-  </d2l-filter-dimension-set>
-</d2l-filter>
+<div class="filter-wrapper">
+  <d2l-filter-tags filter-ids="core-filter core-filter-2"></d2l-filter-tags>
+
+  <d2l-filter id="core-filter">
+    <d2l-filter-dimension-set key="1" text="Dim 1">
+      <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
+    </d2l-filter-dimension-set>
+    <d2l-filter-dimension-set key="2" text="Dim 2">
+      <d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
+    </d2l-filter-dimension-set>
+  </d2l-filter>
+
+  <d2l-filter id="core-filter-2">
+    <d2l-filter-dimension-set key="1" text="Dim 1" value-only-active-filter-text>
+      <d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
+    </d2l-filter-dimension-set>
+    <d2l-filter-dimension-set key="2" text="Dim 2" value-only-active-filter-text>
+      <d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
+      <d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
+    </d2l-filter-dimension-set>
+  </d2l-filter>
+</div>
 ```
 
 <!-- docs: start hidden content -->

package/components/filter/demo/filter-tags.html

@@ -11,6 +11,11 @@
 			import '../filter-dimension-set-value.js';
 			import '../filter-tags.js';
 		</script>
+		<style>
+			d2l-demo-snippet {
+				max-width: 1400px;
+			}
+		</style>
 	</head>
 	<body unresolved class="d2l-typography">
 
@@ -23,14 +28,14 @@
 			<d2l-filter id="core-filter">
 				<d2l-filter-dimension-set key="1" text="Dim 1">
 					<d2l-filter-dimension-set-value selected text="Option 1 - 1" key="1" ></d2l-filter-dimension-set-value>
-					<d2l-filter-dimension-set-value text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value selected text="Option 1 - 2" key="2"></d2l-filter-dimension-set-value>
 					<d2l-filter-dimension-set-value text="Option 1 - 3" key="3"></d2l-filter-dimension-set-value>
 					<d2l-filter-dimension-set-value text="Option 1 - 4" key="4"></d2l-filter-dimension-set-value>
 				</d2l-filter-dimension-set>
 				<d2l-filter-dimension-set key="2" text="Dim 2">
-					<d2l-filter-dimension-set-value selected text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
-					<d2l-filter-dimension-set-value text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
-					<d2l-filter-dimension-set-value text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value text="Option 2 - 1" key="1"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value selected text="Option 2 - 2" key="2"></d2l-filter-dimension-set-value>
+					<d2l-filter-dimension-set-value selected text="Option 2 - 3" key="3"></d2l-filter-dimension-set-value>
 				</d2l-filter-dimension-set>
 			</d2l-filter>
 

package/components/filter/filter-tags.js

@@ -34,7 +34,6 @@ class FilterTags extends RtlMixin(LocalizeCoreElement(LitElement)) {
 		return [bodyCompactStyles, css`
 			:host {
 				display: inline-block;
-				width: 100%;
 			}
 			:host([hidden]) {
 				display: none;

package/components/tag-list/tag-list.js

@@ -3,6 +3,7 @@ import { css, html, LitElement } from 'lit';
 import { announce } from '../../helpers/announce.js';
 import { ArrowKeysMixin } from '../../mixins/arrow-keys-mixin.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { getOffsetParent } from '../../helpers/dom.js';
 import { InteractiveMixin } from '../../mixins/interactive-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js';
@@ -133,7 +134,8 @@ class TagList extends LocalizeCoreElement(InteractiveMixin(ArrowKeysMixin(LitEle
 		});
 		this._clearButtonResizeObserver.observe(clearButton);
 
-		const container = this.shadowRoot.querySelector('.tag-list-outer-container');
+		let container = getOffsetParent(this);
+		if (!container || container.tagName === 'BODY') container = this.shadowRoot.querySelector('.tag-list-outer-container');
 		this._resizeObserver = new ResizeObserver((e) => requestAnimationFrame(() => this._handleResize(e)));
 		this._resizeObserver.observe(container);
 

package/components/tooltip/tooltip-help.js

@@ -102,7 +102,7 @@ class TooltipHelp extends FocusMixin(FocusVisiblePolyfillMixin(LitElement)) {
 			'd2l-body-small': !this.inheritFontStyle
 		};
 		return html`
-			<button id="d2l-tooltip-help-text" class="${classMap(classes)}">
+			<button id="d2l-tooltip-help-text" class="${classMap(classes)}" type="button">
 				${this.text}
 			</button>
 			<d2l-tooltip for="d2l-tooltip-help-text" delay="0" offset="13" position="${ifDefined(this.position)}" ?showing="${this.showing}">

package/custom-elements.json

@@ -1808,6 +1808,11 @@
           "description": "Disables the dropdown opener",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "dropdownOpened",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "slots": [
@@ -1891,6 +1896,11 @@
           "description": "Disables the dropdown opener",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "dropdownOpened",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "slots": [
@@ -2245,6 +2255,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "dropdownOpened",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "visibleOnAncestor",
           "type": "boolean",
@@ -2603,6 +2618,11 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "dropdownOpened",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "visibleOnAncestor",
           "type": "boolean",
@@ -2936,6 +2956,11 @@
           "description": "Disables the dropdown opener",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "dropdownOpened",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "slots": [
@@ -8804,6 +8829,11 @@
           "description": "Disables the dropdown opener",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "dropdownOpened",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [

package/package.json

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