@brightspace-ui/core 2.88.0 → 2.90.0

package/components/button/button-icon.js

@@ -1,10 +1,11 @@
 import '../colors/colors.js';
 import '../icons/icon.js';
 import '../tooltip/tooltip.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, unsafeCSS } from 'lit';
 import { VisibleOnAncestorMixin, visibleOnAncestorStyles } from '../../mixins/visible-on-ancestor-mixin.js';
 import { ButtonMixin } from './button-mixin.js';
 import { buttonStyles } from './button-styles.js';
+import { getFocusPseudoClass } from '../../helpers/focus.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { RtlMixin } from '../../mixins/rtl-mixin.js';
@@ -116,7 +117,8 @@ class ButtonIcon extends ThemeMixin(ButtonMixin(VisibleOnAncestorMixin(RtlMixin(
 					--d2l-icon-fill-color: var(--d2l-button-icon-fill-color-hover, var(--d2l-color-tungsten));
 					background-color: var(--d2l-button-icon-background-color-hover);
 				}
-				button.focus-visible {
+				button.focus-visible,
+				button:${unsafeCSS(getFocusPseudoClass())} {
 					box-shadow: var(--d2l-button-icon-focus-box-shadow);
 				}
 

package/components/button/button-mixin.js

@@ -1,7 +1,6 @@
 import { FocusMixin } from '../../mixins/focus-mixin.js';
-import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
 
-export const ButtonMixin = superclass => class extends FocusMixin(FocusVisiblePolyfillMixin(superclass)) {
+export const ButtonMixin = superclass => class extends FocusMixin(superclass) {
 
 	static get properties() {
 		return {

package/components/button/button-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 buttonStyles = css`
 	button {
@@ -21,10 +22,8 @@ export const buttonStyles = css`
 		white-space: nowrap;
 		width: auto;
 	}
-	/* Outline on focus for elements not using FocusVisiblePolyfillMixin
-	 * or when focus-visible for those who are */
-	:host(:not([data-js-focus-visible])) button:focus,
-	button.focus-visible {
+	button.focus-visible, /* still required for when forceFocusVisible is used programatically */
+	button:${unsafeCSS(getFocusPseudoClass())} {
 		box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--d2l-color-celestine);
 	}
 `;

package/components/dialog/dialog-fullscreen.js

@@ -127,10 +127,6 @@ class DialogFullscreen extends LocalizeCoreElement(AsyncContainerMixin(DialogMix
 					animation: d2l-dialog-fullscreen-open 400ms ease-out;
 				}
 
-				dialog::backdrop {
-					transition: opacity 200ms ease-out;
-				}
-
 				:host([_state="showing"]) dialog::backdrop {
 					transition-duration: 400ms;
 				}

package/components/dialog/dialog-mixin.js

@@ -27,7 +27,7 @@ if (window.D2L.DialogMixin.preferNative === undefined) {
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 const abortAction = 'abort';
-const defaultMargin = { top: 100, right: 30, bottom: 30, left: 30 };
+const defaultMargin = { top: 75, right: 30, bottom: 30, left: 30 };
 
 export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 
@@ -42,7 +42,8 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			 * The optional title for the dialog
 			 */
 			titleText: { type: String, attribute: 'title-text' },
-			_autoSize: { type: Boolean, attribute: false },
+			_autoSize: { type: Boolean, attribute: 'auto-size', reflect: true },
+			_fullHeight: { type: Boolean, attribute: 'full-height', reflect: true },
 			_fullscreenWithin: { type: Number },
 			_height: { type: Number },
 			_inIframe: { type: Boolean, attribute: 'in-iframe', reflect: true },
@@ -65,6 +66,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		this.opened = false;
 		this._autoSize = true;
 		this._dialogId = getUniqueId();
+		this._fullHeight = false;
 		this._fullscreenWithin = 0;
 		this._handleMvcDialogOpen = this._handleMvcDialogOpen.bind(this);
 		this._inIframe = false;
@@ -259,7 +261,10 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 		const footer = this.shadowRoot.querySelector('.d2l-dialog-footer');
 		if (footer) preferredHeight += Math.ceil(footer.getBoundingClientRect().height);
 
-		const height = (preferredHeight < availableHeight ? preferredHeight : availableHeight);
+		const exceedsHeight = preferredHeight > availableHeight;
+		this._fullHeight = !this._ifrauContextInfo && exceedsHeight;
+
+		const height = exceedsHeight ? availableHeight : preferredHeight;
 		return height;
 	}
 
@@ -437,7 +442,7 @@ export const DialogMixin = superclass => class extends RtlMixin(superclass) {
 			if (this._ifrauContextInfo) styles.top = `${this._top}px`;
 			if (this._ifrauContextInfo) styles.bottom = 'auto';
 			if (this._left) styles.left = `${this._left}px`;
-			if (this._height) styles.height = `${this._height}px`;
+			if (this._height && !this._fullHeight) styles.height = `${this._height}px`;
 			if (this._width) styles.width = `${this._width}px`;
 			else styles.width = 'auto';
 		} else if (iframeTopOverride && this._ifrauContextInfo) {

package/components/dialog/dialog-styles.js

@@ -21,19 +21,24 @@ export const dialogStyles = css`
 	}
 
 	.d2l-dialog-outer {
-		animation: d2l-dialog-close 200ms ease-in;
+		animation: d2l-dialog-close 200ms ease-out;
 		background-color: white;
 		border: 1px solid var(--d2l-color-mica);
 		border-radius: 8px;
 		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 		box-sizing: border-box;
 		position: fixed; /* also required for native to override position: absolute */
-		top: 100px;
+		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-in;
+		animation: d2l-dialog-open 200ms ease-out;
 	}
 
 	@keyframes d2l-dialog-close {
@@ -70,7 +75,7 @@ export const dialogStyles = css`
 		/* cannot use variables inside of ::backdrop : https://github.com/whatwg/fullscreen/issues/124 */
 		background-color: #f9fbff;
 		opacity: 0;
-		transition: opacity 200ms ease-in;
+		transition: opacity 200ms ease-out;
 	}
 
 	:host([_state="showing"]) dialog::backdrop {

package/package.json

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