@brightspace-ui/core 2.91.1 → 2.91.3

package/components/dialog/dialog-fullscreen.js

@@ -32,9 +32,10 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 			 * The preferred width (unit-less) for the dialog. Maximum 1170.
 			 */
 			width: { type: Number },
-			_hasFooterContent: { type: Boolean, attribute: false },
-			_icon: { type: String, attribute: false },
-			_headerStyle: { type: String, attribute: false },
+			_autoSize: { state: true }, /* DE52039 This is only redefined here to suppress a lit-analyzer linting issue */
+			_hasFooterContent: { state: true },
+			_icon: { state: true },
+			_headerStyle: { state: true },
 		};
 	}
 

package/components/dialog/dialog-mixin.js

@@ -42,22 +42,22 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			 * The optional title for the dialog
 			 */
 			titleText: { type: String, attribute: 'title-text' },
-			_autoSize: { type: Boolean, attribute: 'auto-size', reflect: true },
-			_fullHeight: { type: Boolean, attribute: 'full-height', reflect: true },
-			_fullscreenWithin: { type: Number },
-			_height: { type: Number },
+			_autoSize: { state: true },
+			_fullHeight: { state: true },
+			_fullscreenWithin: { state: true },
+			_height: { state: true },
 			_inIframe: { type: Boolean, attribute: 'in-iframe', reflect: true },
-			_left: { type: Number },
-			_margin: { type: Object },
-			_nestedShowing: { type: Boolean },
-			_overflowBottom: { type: Boolean },
-			_overflowTop: { type: Boolean },
-			_parentDialog: { type: Object },
-			_scroll: { type: Boolean },
+			_left: { state: true },
+			_margin: { state: true },
+			_nestedShowing: { state: true },
+			_overflowBottom: { state: true },
+			_overflowTop: { state: true },
+			_parentDialog: { state: true },
+			_scroll: { state: true },
 			_state: { type: String, reflect: true },
-			_top: { type: Number },
-			_width: { type: Number },
-			_useNative: { type: Boolean }
+			_top: { state: true },
+			_width: { state: true },
+			_useNative: { state: true }
 		};
 	}
 
@@ -451,6 +451,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 
 		const dialogOuterClasses = {
 			'd2l-dialog-outer': true,
+			'd2l-dialog-outer-full-height': this._autoSize && this._fullHeight,
 			'd2l-dialog-outer-overflow-bottom': this._overflowBottom,
 			'd2l-dialog-outer-overflow-top': this._overflowTop,
 			'd2l-dialog-outer-nested': !this._useNative && this._parentDialog,

package/components/dialog/dialog-styles.js

@@ -31,11 +31,6 @@ export const dialogStyles = css`
 		top: 75px;
 	}
 
-	:host([auto-size][full-height]) > .d2l-dialog-outer {
-		bottom: 1.5rem;
-		top: 1.5rem;
-	}
-
 	:host([_state="showing"]) > .d2l-dialog-outer {
 		/* must target direct child to avoid ancestor from interfering with closing child dialogs in Legacy-Edge */
 		animation: d2l-dialog-open 200ms ease-out;
@@ -51,6 +46,11 @@ export const dialogStyles = css`
 		100% { opacity: 1; transform: translateY(0); }
 	}
 
+	.d2l-dialog-outer.d2l-dialog-outer-full-height {
+		bottom: 1.5rem;
+		top: 1.5rem;
+	}
+
 	.d2l-dialog-outer.d2l-dialog-outer-nested-showing {
 		border-color: rgba(205, 213, 220, 0.35);
 		box-shadow: none;

package/components/filter/README.md

@@ -264,13 +264,17 @@ Note that when using multiple filter dimensions, the counts should be updated wh
 
 The `d2l-filter-dimension-set-empty-state` component allows you to customize the empty state components that are rendered in [d2l-filter-dimension-set](#d2l-filter-dimension-set). When placed in the `d2l-filter-dimension-set` empty state slots, it will replace the component's default empty state. This component can be placed in either the `set-empty-state` or the `search-empty-state` slots.
 
-<!-- docs: demo live name:d2l-filter-dimension-set-empty-state autoOpen:true autoSize:false size:large -->
+<!-- docs: demo live name:d2l-filter-dimension-set-empty-state align:start autoOpen:true autoSize:false size:large -->
 ```html
 <script type="module">
   import '@brightspace-ui/core/components/filter/filter.js';
   import '@brightspace-ui/core/components/filter/filter-dimension-set.js';
   import '@brightspace-ui/core/components/filter/filter-dimension-set-empty-state.js';
   import '@brightspace-ui/core/components/filter/filter-dimension-set-value.js';
+
+  document.querySelector('d2l-filter').addEventListener('d2l-filter-dimension-empty-state-action', e => {
+      console.log(`Filter dimension empty state action clicked:\nkey: ${e.detail.key}\ntype: ${e.detail.type}`);
+    });
 </script>
 <d2l-filter>
   <d2l-filter-dimension-set key="course" text="Course" >
@@ -281,11 +285,6 @@ The `d2l-filter-dimension-set-empty-state` component allows you to customize the
     <d2l-filter-dimension-set-empty-state slot="set-empty-state" description="There are no available items." action-text="Add a course"></d2l-filter-dimension-set-empty-state>
   </d2l-filter-dimension-set>
 </d2l-filter>
-<script>
-    document.querySelector('#filter-single').addEventListener('d2l-filter-dimension-empty-state-action', e => {
-            console.log(`Filter dimension empty state action clicked:\nkey: ${e.detail.key}\ntype: ${e.detail.type}`);
-        });
-</script>
 ```
 <!-- docs: start hidden content -->
 ### Properties

package/package.json

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