@brightspace-ui/core 2.81.1 → 2.82.1

package/components/dialog/demo/dialog-fullscreen.html

@@ -180,6 +180,64 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Fullscreen Dialog using width property</h2>
+
+			<d2l-demo-snippet>
+				<template>
+					<d2l-button id="openWidth">Show Dialog</d2l-button>
+					<d2l-dropdown-more text="Open!">
+						<d2l-dropdown-menu>
+							<d2l-menu label="Dialog">
+								<d2l-menu-item id="dropdownWidth" text="See dialog"></d2l-menu-item>
+							</d2l-menu>
+						</d2l-dropdown-menu>
+					</d2l-dropdown-more>
+					<d2l-dialog-fullscreen id="dialogWidth" title-text="Fullscreen Title" width="1800">
+						<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+						<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+						<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+						<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+						<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+						<d2l-dropdown-button-subtle text="More">
+							<d2l-dropdown-content mobile-tray="bottom">
+								<p>Deadlights jack lad schooner scallywag dance the hempen jig carouser broadside cable strike colors. Bring a spring upon her cable holystone blow the man down spanker</p>
+								<p>Shiver me timbers to go on account lookout wherry doubloon chase. Belay yo-ho-ho keelhaul squiffy black spot yardarm spyglass sheet transom heave to.</p>
+								<p>Trysail Sail ho Corsair red ensign hulk smartly boom jib rum gangway. Case shot Shiver me timbers gangplank crack Jennys tea cup ballast Blimey lee snow crow's nest rutters. Fluke jib scourge of the seven seas boatswain schooner gaff booty Jack Tar transom spirits.</p>
+							</d2l-dropdown-content>
+						</d2l-dropdown-button-subtle>
+						<d2l-filter>
+							<d2l-filter-dimension-set key="course" text="Course" 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="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>
+								<d2l-filter-dimension-set-value key="english" text="English"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="how-to" text="How To Write a How To Article With a Flashy Title"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="math" text="Math"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="physics" text="Physics"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="stats" text="Statistics"></d2l-filter-dimension-set-value>
+								<d2l-filter-dimension-set-value key="writerscraft" text="Writer's Craft"></d2l-filter-dimension-set-value>
+							</d2l-filter-dimension-set>
+						</d2l-filter>
+						<d2l-button slot="footer" primary data-dialog-action="save">Save</d2l-button>
+						<d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
+					</d2l-dialog-fullscreen>
+					<script>
+						document.querySelector('#openWidth').addEventListener('click', () => {
+							document.querySelector('#dialogWidth').opened = true;
+						});
+						document.querySelector('#dropdownWidth').addEventListener('click', () => {
+							document.querySelector('#dialogWidth').opened = true;
+						});
+						document.querySelector('#dialogWidth').addEventListener('d2l-dialog-close', (e) => {
+							console.log('confirm action:', e.detail.action);
+						});
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/dialog/dialog-fullscreen.js

@@ -27,9 +27,14 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 			 * @type {boolean}
 			 */
 			async: { type: Boolean },
+
+			/**
+			 * 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 }
+			_headerStyle: { type: String, attribute: false },
 		};
 	}
 
@@ -44,6 +49,10 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 				text-align: center;
 			}
 
+			.d2l-dialog-outer {
+				max-width: calc(100% - 3rem);
+			}
+
 			@media (min-width: 616px) {
 
 				.d2l-dialog-header {
@@ -78,7 +87,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 					animation: d2l-dialog-fullscreen-close 200ms ease-out;
 					border-radius: 8px;
 					margin: 1.5rem;
-					max-width: 1170px;
 					top: 0;
 					width: auto;
 				}
@@ -179,6 +187,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 		this._headerStyle = 'd2l-heading-2';
 		this._handleResize = this._handleResize.bind(this);
 		this._handleResize();
+		this.width = 1170;
 	}
 
 	get asyncContainerCustom() {
@@ -196,7 +205,7 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 	}
 
 	render() {
-
+		this._width = Math.max(1170, this.width);
 		const heightOverride = {} ;
 		let topOverride = null;
 		if (this._ifrauContextInfo) {

package/components/dialog/dialog-mixin.js

@@ -432,6 +432,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 	_render(inner, info, iframeTopOverride) {
 
 		const styles = {};
+		if (this._width) styles.width = `${this._width}px`;
 		if (this._autoSize) {
 			if (this._ifrauContextInfo) styles.top = `${this._top}px`;
 			if (this._ifrauContextInfo) styles.bottom = 'auto';

package/components/html-block/html-block.js

@@ -1,9 +1,11 @@
 import '../colors/colors.js';
 import { codeStyles, createHtmlBlockRenderer as createCodeRenderer } from '../../helpers/prism.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { createHtmlBlockRenderer as createMathRenderer } from '../../helpers/mathjax.js';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { HtmlAttributeObserverController } from '../../controllers/attributeObserver/htmlAttributeObserverController.js';
+
 import { requestInstance } from '../../mixins/provider-mixin.js';
 
 export const htmlBlockContentStyles = css`
@@ -99,7 +101,7 @@ export const htmlBlockContentStyles = css`
 		color: var(--d2l-color-celestine-minus-1, #004489);
 		text-decoration: underline;
 	}
-	a:focus {
+	a:${unsafeCSS(getFocusPseudoClass())} {
 		border-radius: 3px;
 		outline: 2px solid var(--d2l-color-celestine, #006fbf);
 		outline-offset: 1px;

package/components/link/link.js

@@ -1,7 +1,8 @@
 import '../colors/colors.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus-mixin.js';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 
 export const linkStyles = css`
@@ -19,7 +20,7 @@ export const linkStyles = css`
 		color: var(--d2l-color-celestine-minus-1);
 		text-decoration: underline;
 	}
-	.d2l-link:focus {
+	.d2l-link:${unsafeCSS(getFocusPseudoClass())} {
 		border-radius: 3px;
 		outline: 2px solid var(--d2l-color-celestine);
 		outline-offset: 1px;

package/components/link/link.scss

@@ -14,12 +14,17 @@
 		color: $d2l-color-celestine-minus-1;
 		text-decoration: underline;
 	}
-	&:focus,
-	&.d2l-link-focus {
+	&:focus-visible {
 		outline: 2px solid $d2l-color-celestine;
 		outline-offset: 1px;
 		text-decoration: underline;
 	}
+	.d2l-focus-visible-not-supported &:focus {
+		outline: 2px solid $d2l-color-celestine;
+		outline-offset: 1px;
+		text-decoration: underline;
+	}
+
 	&[main] {
 		font-weight: 700;
 	}

package/components/menu/menu-item-styles.js

@@ -1,5 +1,6 @@
 import '../colors/colors.js';
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 
 export const menuItemStyles = css`
 	:host {
@@ -20,9 +21,8 @@ export const menuItemStyles = css`
 		color: var(--d2l-menu-foreground-color-hover);
 	}
 
-	/** separated from hover selectors because Safari <15.4 is having trouble parsing these */
-	:host(:focus-visible),
-	:host([first]:focus-visible) {
+	:host(:${unsafeCSS(getFocusPseudoClass())}),
+	:host([first]:${unsafeCSS(getFocusPseudoClass())}) {
 		border-radius: 6px;
 		border-top-color: transparent;
 		color: var(--d2l-menu-foreground-color-hover);
@@ -36,8 +36,7 @@ export const menuItemStyles = css`
 		opacity: 0.75;
 	}
 
-	/** separated because Safari <15.4 is having trouble parsing these */
-	:host([disabled]:focus-visible) {
+	:host([disabled]:${unsafeCSS(getFocusPseudoClass())}) {
 		cursor: default;
 		opacity: 0.75;
 	}

package/custom-elements.json

@@ -1816,6 +1816,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "width",
+          "description": "The preferred width (unit-less) for the dialog. Maximum 1170.",
+          "type": "number",
+          "default": "1170"
+        },
         {
           "name": "title-text",
           "description": "The optional title for the dialog",
@@ -1836,6 +1842,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "width",
+          "attribute": "width",
+          "description": "The preferred width (unit-less) for the dialog. Maximum 1170.",
+          "type": "number",
+          "default": "1170"
+        },
         {
           "name": "documentLocaleSettings",
           "default": "\"getDocumentLocaleSettings()\""

package/helpers/README.md

@@ -129,6 +129,9 @@ getComposedActiveElement()
 // gets the first focusable descendant given a node, including those within the shadow DOM
 getFirstFocusableDescendant(node, includeHidden, predicate, includeTabbablesOnly)
 
+// gets the focus pseudo-class to used in selectors (focus-visible if supported, or focus)
+getFocusPseudoClass()
+
 // gets the last focusable descendant given a node, including those within the shadow DOM
 getLastFocusableDescendant(node, includeHidden)
 
@@ -144,6 +147,9 @@ getPreviousFocusableAncestor(node, includeHidden, includeTabbablesOnly)
 // returns true/false whether the element is focusable
 isFocusable(node, includeHidden, includeTabbablesOnly, includeDisabled)
 
+// returns true/false whether the :focus-visible is supported
+isFocusVisibleSupported()
+
 // returns true and focuses on node or its nearest focusable ancestor;
 // or false if node and its ancestors are not focusable
 tryApplyFocus(node)

package/helpers/focus.js

@@ -52,6 +52,10 @@ export function getFirstFocusableDescendant(node, includeHidden, predicate, incl
 	return null;
 }
 
+export function getFocusPseudoClass() {
+	return isFocusVisibleSupported() ? 'focus-visible' : 'focus';
+}
+
 export function getLastFocusableDescendant(node, includeHidden) {
 	const composedChildren = getComposedChildren(node);
 
@@ -182,6 +186,25 @@ export function isFocusable(node, includeHidden, includeTabbablesOnly, includeDi
 
 }
 
+let _isFocusVisibleSupported;
+
+export function isFocusVisibleSupported() {
+	if (_isFocusVisibleSupported === undefined) {
+		const style = document.createElement('style');
+		try {
+			document.head.appendChild(style);
+			style.sheet.insertRule(':focus-visible { color: inherit; }');
+			_isFocusVisibleSupported = true;
+		} catch (error) {
+			_isFocusVisibleSupported = false;
+		} finally {
+			style.remove();
+		}
+	}
+
+	return _isFocusVisibleSupported;
+}
+
 export function tryApplyFocus(elem) {
 	if (isFocusable(elem)) {
 		forceFocusVisible(elem);

package/package.json

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