@brightspace-ui/core 2.15.3 → 2.16.1

package/components/dialog/dialog-confirm.js

@@ -89,7 +89,12 @@ class DialogConfirm extends DialogMixin(LitElement) {
 		const descId = (this.titleText && this.text) ? this._textId : undefined;
 		return this._render(
 			inner,
-			{ labelId: labelId, descId: descId, role: 'alertdialog' }
+			{
+				descId: descId,
+				fullscreenMobile: false,
+				labelId: labelId,
+				role: 'alertdialog'
+			}
 		);
 	}
 

package/components/dialog/dialog-fullscreen.js

@@ -154,11 +154,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 					padding-bottom: 15px;
 				}
 
-				.d2l-dialog-header > div > d2l-button-icon {
-					flex: none;
-					margin: -8px -13px 0 15px;
-				}
-
 				.d2l-dialog-footer.d2l-footer-no-content {
 					padding: 0 0 5px 0;
 				}
@@ -171,17 +166,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 					height: calc(100% - 1px);
 				}
 
-				:host([dir="rtl"]) .d2l-dialog-header > div > d2l-button-icon {
-					margin-left: -13px;
-					margin-right: 15px;
-				}
-
-				dialog.d2l-dialog-outer,
-				div.d2l-dialog-outer {
-					margin: 0 !important;
-					min-width: calc(var(--d2l-vw, 1vw) * 100);
-					top: 42px;
-				}
 			}
 		`];
 	}
@@ -226,9 +210,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 				: 0;
 			const startTop = mediaQueryList.matches ? 42 : 0;
 			topOverride = iframeTop + startTop;
-		} else if (window.innerWidth <= 615 || (window.innerWidth <= 900 && window.innerHeight <= 420)) {
-			heightOverride.height = `${window.innerHeight - 42 - 2}px`; // render full window height - 42px top padding - 2px border
-			heightOverride.minHeight = heightOverride.height;
 		}
 
 		let loading = null;
@@ -269,7 +250,11 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 		`;
 		return this._render(
 			inner,
-			{ labelId: this._titleId, role: 'dialog' },
+			{
+				fullscreenMobile: true,
+				labelId: this._titleId,
+				role: 'dialog'
+			},
 			topOverride
 		);
 	}

package/components/dialog/dialog-mixin.js

@@ -1,4 +1,5 @@
 import '../focus-trap/focus-trap.js';
+import '../../helpers/viewport-size.js';
 import { allowBodyScroll, preventBodyScroll } from '../backdrop/backdrop.js';
 import { clearDismissible, setDismissible } from '../../helpers/dismissible.js';
 import { findComposedAncestor, isComposedAncestor } from '../../helpers/dom.js';
@@ -420,6 +421,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			'd2l-dialog-outer-nested': !this._useNative && this._parentDialog,
 			'd2l-dialog-outer-nested-showing': !this._useNative && this._nestedShowing,
 			'd2l-dialog-outer-scroll': this._scroll,
+			'd2l-dialog-fullscreen-mobile': info.fullscreenMobile,
 			'd2l-dialog-fullscreen-within': this._fullscreenWithin !== 0
 		};
 

package/components/dialog/dialog-styles.js

@@ -154,12 +154,29 @@ export const dialogStyles = css`
 		.d2l-dialog-header {
 			padding: 14px 20px 16px 20px;
 		}
+		.d2l-dialog-fullscreen-mobile .d2l-dialog-header > div > d2l-button-icon {
+			margin: -8px -13px 0 15px;
+		}
+		:host([dir="rtl"]) .d2l-dialog-fullscreen-mobile .d2l-dialog-header > div > d2l-button-icon {
+			margin-left: -13px;
+			margin-right: 15px;
+		}
 		.d2l-dialog-content {
 			padding: 0 20px;
 		}
 		.d2l-dialog-footer {
 			padding: 20px 20px 2px 20px;
 		}
+		.d2l-dialog-outer.d2l-dialog-fullscreen-mobile {
+			margin: 0 !important;
+			min-width: calc(var(--d2l-vw, 1vw) * 100);
+			top: 42px;
+		}
+		:host(:not([in-iframe])) dialog.d2l-dialog-outer.d2l-dialog-fullscreen-mobile,
+		:host(:not([in-iframe])) div.d2l-dialog-outer.d2l-dialog-fullscreen-mobile {
+			height: calc(var(--d2l-vh, 1vh) * 100 - 42px);
+			min-height: calc(var(--d2l-vh, 1vh) * 100 - 42px);
+		}
 	}
 
 	@media (prefers-reduced-motion: reduce) {

package/components/dialog/dialog.js

@@ -1,6 +1,5 @@
 import '../button/button-icon.js';
 import '../loading-spinner/loading-spinner.js';
-import '../../helpers/viewport-size.js';
 import { AsyncContainerMixin, asyncStates } from '../../mixins/async-container/async-container-mixin.js';
 import { css, html, LitElement } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
@@ -73,30 +72,6 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 				padding: 0 0 5px 0;
 			}
 
-			@media (max-width: 615px), (max-height: 420px) and (max-width: 900px) {
-
-				.d2l-dialog-outer {
-					margin: 0 !important;
-					min-width: calc(var(--d2l-vw, 1vw) * 100);
-					top: 42px;
-				}
-
-				.d2l-dialog-header > div > d2l-button-icon {
-					margin: -8px -13px 0 15px;
-				}
-
-				:host([dir="rtl"]) .d2l-dialog-header > div > d2l-button-icon {
-					margin-left: -13px;
-					margin-right: 15px;
-				}
-
-				:host(:not([in-iframe])) dialog.d2l-dialog-outer,
-				:host(:not([in-iframe])) div.d2l-dialog-outer {
-					height: calc(var(--d2l-vh, 1vh) * 100 - 42px);
-					min-height: calc(var(--d2l-vh, 1vh) * 100 - 42px);
-				}
-			}
-
 		`];
 	}
 
@@ -167,7 +142,7 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 
 		if (!this._titleId) this._titleId = getUniqueId();
 		const inner = html`
-			<div class="d2l-dialog-inner"  style=${styleMap(heightOverride)}>
+			<div class="d2l-dialog-inner" style=${styleMap(heightOverride)}>
 				<div class="d2l-dialog-header">
 					<div>
 						<h2 id="${this._titleId}" class="d2l-heading-3">${this.titleText}</h2>
@@ -184,7 +159,12 @@ class Dialog extends LocalizeCoreElement(AsyncContainerMixin(DialogMixin(LitElem
 		const descId = (this.describeContent) ? this._textId : undefined;
 		return this._render(
 			inner,
-			{ labelId: this._titleId, descId: descId, role: 'dialog' },
+			{
+				descId: descId,
+				fullscreenMobile: true,
+				labelId: this._titleId,
+				role: 'dialog'
+			},
 			topOverride
 		);
 	}

package/components/filter/README.md

@@ -159,7 +159,8 @@ The filter will announce changes to filter selections, search results, and when
 | Property | Type | Description |
 |---|---|---|
 | `disabled` | Boolean, default: `false` | Disables the dropdown opener for the filter |
-| `opened` | Boolean, default: `false` | Whether or not the filter is open  |
+| `opened` | Boolean, default: `false` | Whether or not the filter is open |
+| `text` | String | Optional override for the button text used for a multi-dimensional filter |
 
 ### Events
 * `d2l-filter-change`: dispatched when any filter value has changed (may contain info about multiple dimensions and multiple changes in each)

package/components/filter/demo/filter.html

@@ -92,7 +92,7 @@
 				<d2l-filter>
 					<d2l-filter-dimension-set key="course" text="Course" loading select-all>
 						<d2l-filter-dimension-set-value key="art" text="Art"></d2l-filter-dimension-set-value>
-						<d2l-filter-dimension-set-value key="astronomy" text="Astronomy" selected></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="astronomy" text="Astronomy"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="biology" text="Biology"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="chemistry" text="Chemistry"></d2l-filter-dimension-set-value>
 						<d2l-filter-dimension-set-value key="drama" text="Drama"></d2l-filter-dimension-set-value>
@@ -105,9 +105,13 @@
 					</d2l-filter-dimension-set>
 					
 				</d2l-filter>
-				<d2l-filter>
+				<d2l-filter text="More Filters">
 					<d2l-filter-dimension-set key="course" text="Course" loading select-all></d2l-filter-dimension-set>
-					<d2l-filter-dimension-set key="role" text="Role" loading></d2l-filter-dimension-set>
+					<d2l-filter-dimension-set key="role" text="Role" loading>
+						<d2l-filter-dimension-set-value key="admin" text="Admin"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="instructor" text="Instructor"></d2l-filter-dimension-set-value>
+						<d2l-filter-dimension-set-value key="student" text="Student"></d2l-filter-dimension-set-value>
+					</d2l-filter-dimension-set>
 					<d2l-filter-dimension-set key="semester" text="Semester" loading selection-single></d2l-filter-dimension-set>
 				</d2l-filter>
 				<d2l-button id="finish-loading">Finish loading (in 5 seconds)</d2l-button>

package/components/filter/filter.js

@@ -52,6 +52,11 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 			 * @type {boolean}
 			 */
 			opened: { type: Boolean, reflect: true },
+			/**
+			 * Optional override for the button text used for a multi-dimensional filter
+			 * @type {string}
+			 */
+			text: { type: String },
 			_activeDimensionKey: { type: String, attribute: false },
 			_dimensions: { type: Array, attribute: false },
 			_totalAppliedCount: { type: Number, attribute: false }
@@ -175,7 +180,7 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
 		const dimensions = this._buildDimensions(singleDimension);
 
 		const filterCount = this._formatFilterCount(this._totalAppliedCount);
-		let buttonText = singleDimension ? this._dimensions[0].text : this.localize('components.filter.filters');
+		let buttonText = singleDimension ? this._dimensions[0].text : (this.text || this.localize('components.filter.filters'));
 		if (filterCount) buttonText = `${buttonText} (${filterCount})`;
 
 		let description = singleDimension ? this.localize('components.filter.singleDimensionDescription', { filterName: this._dimensions[0].text }) : this.localize('components.filter.filters');

package/custom-elements.json

@@ -3146,6 +3146,11 @@
       "path": "./components/filter/filter.js",
       "description": "A filter component that contains one or more dimensions a user can filter by.\nThis component is in charge of all rendering.",
       "attributes": [
+        {
+          "name": "text",
+          "description": "Optional override for the button text used for a multi-dimensional filter",
+          "type": "string"
+        },
         {
           "name": "disabled",
           "description": "Disables the dropdown opener for the filter",
@@ -3160,6 +3165,12 @@
         }
       ],
       "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "Optional override for the button text used for a multi-dimensional filter",
+          "type": "string"
+        },
         {
           "name": "disabled",
           "attribute": "disabled",

package/helpers/mathjax.js

@@ -56,19 +56,24 @@ export class HtmlBlockMathRenderer {
 
 		await loadMathJax(mathJaxConfig);
 
+		// MathJax 3 does not support newlines, but it does persist styles, so add custom styles to mimic a linebreak
+		// This work-around should be removed when linebreaks are natively supported.
+		// MathJax issue: https://github.com/mathjax/MathJax/issues/2312
+		// A duplicate that explains our exact issue: https://github.com/mathjax/MathJax/issues/2495
+		const lineBreakStyle = 'display: block; height: 0.5rem;';
+
 		// If we're opting out of deferred rendering, we need to rely
 		// on the global MathJax install for rendering.
 		if (options.noDeferredRendering) {
+			elem.querySelectorAll('mspace[linebreak="newline"]').forEach(elm => {
+				elm.setAttribute('style', lineBreakStyle);
+			});
 			await window.MathJax.startup.promise;
 			window.MathJax.typeset([elem]);
 			return elem;
 		}
 
-		// MathJax 3 does not support newlines, but it does persist styles, so add custom styles to mimic a linebreak
-		// This work-around should be removed when linebreaks are natively supported.
-		// MathJax issue: https://github.com/mathjax/MathJax/issues/2312
-		// A duplicate that explains our exact issue: https://github.com/mathjax/MathJax/issues/2495
-		const inner = elem.innerHTML.replaceAll('<mspace linebreak="newline">', '<mspace linebreak="newline" style="display: block; height: 0.5rem;">');
+		const inner = elem.innerHTML.replaceAll('<mspace linebreak="newline">', `<mspace linebreak="newline" style="${lineBreakStyle}">`);
 
 		const temp = document.createElement('div');
 		temp.style.display = 'none';

package/package.json

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