@brightspace-ui/core 3.23.0 → 3.24.1

package/components/dropdown/dropdown-content-styles.js

@@ -49,9 +49,6 @@ export const dropdownContentStyles = css`
 		bottom: calc(100% + var(--d2l-dropdown-verticaloffset, 16px));
 		top: auto;
 	}
-	:host([_fixed-positioning][opened-above]) {
-		bottom: 0;
-	}
 
 	:host([data-mobile][opened]:not([mobile-tray])) {
 		animation: var(--d2l-dropdown-animation-name) 300ms ease;
@@ -64,6 +61,11 @@ export const dropdownContentStyles = css`
 		top: auto;
 	}
 
+	:host([_fixed-positioning][opened-above]),
+	:host([_fixed-positioning][data-mobile][opened-above]:not([mobile-tray])) {
+		bottom: 0;
+	}
+
 	.d2l-dropdown-content-pointer {
 		clip: rect(-5px, 21px, 8px, -7px);
 		display: inline-block;

package/components/filter/README.md

@@ -301,7 +301,7 @@ The `getUTCDateTimeRange(rangeType, diff)` helper function can be used to get th
 
 This component is built to be used alongside the [d2l-filter-dimension-set](#d2l-filter-dimension-set) component. It will give you a selectable filter value which expands to allow the user to select a date range using either the `d2l-input-date-time-range` or `d2l-input-date-range` component (depending on the `type` of the component). Selection triggers the `d2l-filter-change` event, with `start-value` and `end-value` (in UTC) being included in the changes for the `selected` item.
 
-<!-- docs: demo code properties name:d2l-filter-dimension-set-date-time-range-value align:start autoOpen:true autoSize:false size:large -->
+<!-- docs: demo code properties name:d2l-filter-dimension-set-date-time-range-value align:start autoOpen:true autoSize:false size:xlarge -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';
@@ -311,9 +311,12 @@ This component is built to be used alongside the [d2l-filter-dimension-set](#d2l
 </script>
 <d2l-filter>
   <d2l-filter-dimension-set key="dates" text="Dates">
-    <d2l-filter-dimension-set-date-text-value key="48hours" range="48hours"></d2l-filter-dimension-set-date-text-value>
-    <d2l-filter-dimension-set-date-text-value key="14days" range="14days"></d2l-filter-dimension-set-date-text-value>
-    <d2l-filter-dimension-set-date-time-range-value key="custom" selected></d2l-filter-dimension-set-date-time-range-value>
+    <d2l-filter-dimension-set-value key="60days" text="Last 60 days"></d2l-filter-dimension-set-value>
+    <d2l-filter-dimension-set-date-text-value key="lastHour" range="lastHour"></d2l-filter-dimension-set-date-text-value>
+    <d2l-filter-dimension-set-date-text-value key="48hours" range="48hours" disabled></d2l-filter-dimension-set-date-text-value>
+    <d2l-filter-dimension-set-date-text-value key="today" range="today"></d2l-filter-dimension-set-date-text-value>
+    <d2l-filter-dimension-set-date-text-value key="6months" range="6months"></d2l-filter-dimension-set-date-text-value>
+    <d2l-filter-dimension-set-date-time-range-value key="custom" type="date"></d2l-filter-dimension-set-date-time-range-value>
   </d2l-filter-dimension-set>
 </d2l-filter>
 ```

package/components/filter/filter.js

@@ -1052,7 +1052,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			this._changeEventsToDispatch.set(dimension.key, { dimensionKey: dimension.key, cleared: false, changes: new Map() });
 		}
 		const dimensionChanges = this._changeEventsToDispatch.get(dimension.key);
-		dimensionChanges.cleared = dimensionCleared;
+		dimensionChanges.cleared = dimensionCleared || (dimension.selectionSingle && !change.selected && !dimension.appliedCount);
 
 		switch (dimension.type) {
 			case 'd2l-filter-dimension-set':

package/components/popover/popover-mixin.js

@@ -30,6 +30,7 @@ export const PopoverMixin = superclass => class extends superclass {
 	static get styles() {
 		return css`
 			:host {
+				--d2l-popover-default-animation-name: d2l-popover-animation;
 				--d2l-popover-default-background-color: #ffffff;
 				--d2l-popover-default-border-color: var(--d2l-color-mica);
 				--d2l-popover-default-border-radius: 0.3rem;
@@ -65,6 +66,16 @@ export const PopoverMixin = superclass => class extends superclass {
 				box-shadow: var(--d2l-popover-shadow, var(--d2l-popover-default-shadow));
 				box-sizing: border-box;
 			}
+
+			@keyframes d2l-popover-animation {
+				0% { opacity: 0; transform: translate(0, -10px); }
+				100% { opacity: 1; transform: translate(0, 0); }
+			}
+			@media (prefers-reduced-motion: no-preference) {
+				:host([opened]) {
+					animation: var(--d2l-popover-animation-name, var(--d2l-popover-default-animation-name)) 6000ms ease;
+				}
+			}
 		`;
 	}
 

package/components/selection/selection-input.js

@@ -155,7 +155,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 	_handleRadioClick(e) {
 		e.stopPropagation();
 		if (this.disabled) return;
-		this.selected = true;
+		this.selected = !this.selected;
 	}
 
 	_handleRadioKeyDown(e) {
@@ -163,7 +163,7 @@ class Input extends SkeletonMixin(LabelledMixin(LitElement)) {
 	}
 
 	_handleRadioKeyUp(e) {
-		if (e.keyCode === keyCodes.SPACE) this.selected = true;
+		if (e.keyCode === keyCodes.SPACE) this.selected = !this.selected;
 	}
 
 }

package/package.json

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