@brightspace-ui/core 3.267.1 → 3.268.0

package/components/alert/alert-toast.js

@@ -38,119 +38,115 @@ let ALERT_HAS_HOVER = false; // if this alert or sibling alert is hovered on
  */
 class AlertToast extends LitElement {
 
-	static get properties() {
-		return {
-			/**
-			 * Text that is displayed within the alert's action button. If no text is provided the button is not displayed.
-			 * @type {string}
-			 */
-			buttonText: { type: String, attribute: 'button-text' },
-
-			/**
-			 * Hide the close button to prevent users from manually closing the alert
-			 * @type {boolean}
-			 */
-			hideCloseButton: { type: Boolean, attribute: 'hide-close-button' },
-
-			/**
-			 * Prevents the alert from automatically closing 4 seconds after opening
-			 * @type {boolean}
-			 */
-			noAutoClose: { type: Boolean, attribute: 'no-auto-close' },
-
-			/**
-			 * Open or close the toast alert
-			 * @type {boolean}
-			 */
-			open: { type: Boolean, reflect: true },
-
-			/**
-			 * The text that is displayed below the main alert message
-			 * @type {string}
-			 */
-			subtext: { type: String },
-
-			/**
-			 * Type of the alert being displayed
-			 * @type {'default'|'critical'|'success'|'warning'}
-			 * @default "default"
-			 */
-			type: { type: String, reflect: true },
-			_closeClicked: { state: true },
-			_numAlertsBelow: { state: true },
-			_smallWidth: { state: true },
-			_state: { type: String },
-			_totalSiblingHeightBelow: { state: true }
-		};
-	}
+	static properties = {
+		/**
+		 * Text that is displayed within the alert's action button. If no text is provided the button is not displayed.
+		 * @type {string}
+		 */
+		buttonText: { type: String, attribute: 'button-text' },
 
-	static get styles() {
-		return css`
-			:host {
-				display: block;
-			}
+		/**
+		 * Hide the close button to prevent users from manually closing the alert
+		 * @type {boolean}
+		 */
+		hideCloseButton: { type: Boolean, attribute: 'hide-close-button' },
 
-			.d2l-alert-toast-container {
-				border-radius: 0.3rem;
-				box-shadow: 0 0.1rem 0.6rem 0 rgba(0, 0, 0, 0.1);
-				display: none;
-				left: 0;
-				margin: 0 auto 1.5rem;
-				max-width: 600px;
-				position: fixed;
-				right: 0;
-				width: 100%;
-				z-index: 10000;
-			}
+		/**
+		 * Prevents the alert from automatically closing 4 seconds after opening
+		 * @type {boolean}
+		 */
+		noAutoClose: { type: Boolean, attribute: 'no-auto-close' },
 
-			.d2l-alert-toast-container:not([data-state="closed"]) {
-				display: block;
-			}
+		/**
+		 * Open or close the toast alert
+		 * @type {boolean}
+		 */
+		open: { type: Boolean, reflect: true },
 
-			.d2l-alert-toast-container[data-state="opening"],
-			.d2l-alert-toast-container.d2l-alert-toast-container-lowest[data-state="closing"] {
-				transition-duration: 600ms;
-				transition-property: opacity, transform;
-				transition-timing-function: ease;
-			}
-			.d2l-alert-toast-container[data-state="closing"] {
-				transition: opacity 200ms ease;
-			}
+		/**
+		 * The text that is displayed below the main alert message
+		 * @type {string}
+		 */
+		subtext: { type: String },
 
-			.d2l-alert-toast-container.d2l-alert-toast-container-close-clicked[data-state="closing"] {
-				transition-duration: 200ms;
-			}
+		/**
+		 * Type of the alert being displayed
+		 * @type {'default'|'critical'|'success'|'warning'}
+		 * @default "default"
+		 */
+		type: { type: String, reflect: true },
+		_closeClicked: { state: true },
+		_numAlertsBelow: { state: true },
+		_smallWidth: { state: true },
+		_state: { type: String },
+		_totalSiblingHeightBelow: { state: true }
+	};
+
+	static styles = css`
+		:host {
+			display: block;
+		}
 
-			.d2l-alert-toast-container[data-state="preopening"],
-			.d2l-alert-toast-container[data-state="closing"] {
-				opacity: 0;
-			}
-			.d2l-alert-toast-container[data-state="preopening"],
-			.d2l-alert-toast-container.d2l-alert-toast-container-lowest[data-state="closing"] {
-				transform: translateY(calc(100% + 1.5rem));
-			}
+		.d2l-alert-toast-container {
+			border-radius: 0.3rem;
+			box-shadow: 0 0.1rem 0.6rem 0 rgba(0, 0, 0, 0.1);
+			display: none;
+			left: 0;
+			margin: 0 auto 1.5rem;
+			max-width: 600px;
+			position: fixed;
+			right: 0;
+			width: 100%;
+			z-index: 10000;
+		}
 
-			.d2l-alert-toast-container[data-state="opening"] {
-				opacity: 1;
-				transform: translateY(0);
-			}
+		.d2l-alert-toast-container:not([data-state="closed"]) {
+			display: block;
+		}
 
-			.d2l-alert-toast-container[data-state="sliding"] {
-				transition: bottom 600ms ease;
-			}
+		.d2l-alert-toast-container[data-state="opening"],
+		.d2l-alert-toast-container.d2l-alert-toast-container-lowest[data-state="closing"] {
+			transition-duration: 600ms;
+			transition-property: opacity, transform;
+			transition-timing-function: ease;
+		}
+		.d2l-alert-toast-container[data-state="closing"] {
+			transition: opacity 200ms ease;
+		}
 
-			d2l-alert {
-				animation: none;
-			}
+		.d2l-alert-toast-container.d2l-alert-toast-container-close-clicked[data-state="closing"] {
+			transition-duration: 200ms;
+		}
 
-			@media (max-width: 615px) {
-				.d2l-alert-toast-container {
-					margin-bottom: 12px;
-					width: calc(100% - 16px);
-				}
+		.d2l-alert-toast-container[data-state="preopening"],
+		.d2l-alert-toast-container[data-state="closing"] {
+			opacity: 0;
+		}
+		.d2l-alert-toast-container[data-state="preopening"],
+		.d2l-alert-toast-container.d2l-alert-toast-container-lowest[data-state="closing"] {
+			transform: translateY(calc(100% + 1.5rem));
+		}
+
+		.d2l-alert-toast-container[data-state="opening"] {
+			opacity: 1;
+			transform: translateY(0);
+		}
+
+		.d2l-alert-toast-container[data-state="sliding"] {
+			transition: bottom 600ms ease;
+		}
+
+		d2l-alert {
+			animation: none;
+		}
+
+		@media (max-width: 615px) {
+			.d2l-alert-toast-container {
+				margin-bottom: 12px;
+				width: calc(100% - 16px);
 			}
-		`;
-	}
+		}
+	`;
 
 	constructor() {
 		super();

package/components/alert/alert.js

@@ -14,134 +14,130 @@ import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
  */
 class Alert extends LocalizeCoreElement(LitElement) {
 
-	static get properties() {
-		return {
-			/**
-			 * Text that is displayed within the alert's action button. If no text is provided the button is not displayed.
-			 * @type {string}
-			 */
-			buttonText: { type: String, attribute: 'button-text' },
-
-			/**
-			 * Gives the alert a close button that will close the alert when clicked
-			 * @type {boolean}
-			 */
-			hasCloseButton: { type: Boolean, attribute: 'has-close-button' },
-
-			/**
-			 * Opt out of default padding/whitespace around the alert
-			 * @type {boolean}
-			 */
-			noPadding: { type: Boolean, attribute: 'no-padding', reflect: true },
-
-			/**
-			 * The text that is displayed below the main alert message
-			 * @type {string}
-			 */
-			subtext: { type: String },
-
-			/**
-			 * Type of the alert being displayed
-			 * @type {'default'|'critical'|'success'|'warning'}
-			 */
-			type: { type: String, reflect: true }
-		};
-	}
-	static get styles() {
-		return [bodyCompactStyles, bodyStandardStyles, css`
+	static properties = {
+		/**
+		 * Text that is displayed within the alert's action button. If no text is provided the button is not displayed.
+		 * @type {string}
+		 */
+		buttonText: { type: String, attribute: 'button-text' },
+
+		/**
+		 * Gives the alert a close button that will close the alert when clicked
+		 * @type {boolean}
+		 */
+		hasCloseButton: { type: Boolean, attribute: 'has-close-button' },
+
+		/**
+		 * Opt out of default padding/whitespace around the alert
+		 * @type {boolean}
+		 */
+		noPadding: { type: Boolean, attribute: 'no-padding', reflect: true },
+
+		/**
+		 * The text that is displayed below the main alert message
+		 * @type {string}
+		 */
+		subtext: { type: String },
+
+		/**
+		 * Type of the alert being displayed
+		 * @type {'default'|'critical'|'success'|'warning'}
+		 */
+		type: { type: String, reflect: true }
+	};
+	static styles = [bodyCompactStyles, bodyStandardStyles, css`
+
+		:host {
+			animation: 600ms ease drop-in;
+			background: var(--d2l-theme-background-color-base);
+			border: 1px solid var(--d2l-theme-border-color-standard);
+			border-inline-start-width: 0.3rem;
+			border-radius: 0.3rem;
+			box-sizing: border-box;
+			display: flex;
+			flex: 1;
+			max-width: 710px;
+			position: relative;
+			width: 100%;
+		}
 
-			:host {
-				animation: 600ms ease drop-in;
-				background: var(--d2l-theme-background-color-base);
-				border: 1px solid var(--d2l-theme-border-color-standard);
-				border-inline-start-width: 0.3rem;
-				border-radius: 0.3rem;
-				box-sizing: border-box;
-				display: flex;
-				flex: 1;
-				max-width: 710px;
-				position: relative;
-				width: 100%;
-			}
+		:host([hidden]) {
+			display: none;
+		}
 
-			:host([hidden]) {
-				display: none;
-			}
+		:host([type="critical"]),
+		:host([type="error"]) {
+			border-inline-start-color: var(--d2l-theme-status-color-error);
+		}
+		:host([type="warning"]) {
+			border-inline-start-color: var(--d2l-theme-status-color-warning);
+		}
+		:host([type="default"]),
+		:host([type="call-to-action"]) {
+			border-inline-start-color: var(--d2l-theme-status-color-default);
+		}
+		:host([type="success"]) {
+			border-inline-start-color: var(--d2l-theme-status-color-success);
+		}
 
-			:host([type="critical"]),
-			:host([type="error"]) {
-				border-inline-start-color: var(--d2l-theme-status-color-error);
-			}
-			:host([type="warning"]) {
-				border-inline-start-color: var(--d2l-theme-status-color-warning);
-			}
-			:host([type="default"]),
-			:host([type="call-to-action"]) {
-				border-inline-start-color: var(--d2l-theme-status-color-default);
-			}
-			:host([type="success"]) {
-				border-inline-start-color: var(--d2l-theme-status-color-success);
-			}
+		.d2l-alert-text {
+			flex: 1;
+			padding-block: 0.9rem;
+			padding-inline-end: 1.5rem;
+			padding-inline-start: 1.2rem;
+			position: relative;
+		}
+		.d2l-alert-text-with-actions {
+			padding-inline-end: 0.9rem;
+		}
 
+		:host([no-padding]) .d2l-alert-text,
+		:host([no-padding]) .d2l-alert-text-with-actions {
+			padding-block: 0;
+			padding-inline-end: 0;
+			padding-inline-start: 0;
+		}
+
+		.d2l-alert-subtext {
+			margin: 0.5rem 0 0;
+		}
+
+		.d2l-alert-action {
+			margin-block: 0.6rem;
+			margin-inline-end: 0.6rem;
+			margin-inline-start: 0;
+		}
+		:host([no-padding]) .d2l-alert-action {
+			margin: 0;
+		}
+
+		@media (max-width: 615px) {
 			.d2l-alert-text {
 				flex: 1;
-				padding-block: 0.9rem;
-				padding-inline-end: 1.5rem;
-				padding-inline-start: 1.2rem;
 				position: relative;
 			}
-			.d2l-alert-text-with-actions {
-				padding-inline-end: 0.9rem;
-			}
-
-			:host([no-padding]) .d2l-alert-text,
-			:host([no-padding]) .d2l-alert-text-with-actions {
-				padding-block: 0;
-				padding-inline-end: 0;
-				padding-inline-start: 0;
-			}
-
-			.d2l-alert-subtext {
-				margin: 0.5rem 0 0;
-			}
-
 			.d2l-alert-action {
-				margin-block: 0.6rem;
-				margin-inline-end: 0.6rem;
-				margin-inline-start: 0;
-			}
-			:host([no-padding]) .d2l-alert-action {
-				margin: 0;
+				margin: 0.45rem;
 			}
+		}
 
-			@media (max-width: 615px) {
-				.d2l-alert-text {
-					flex: 1;
-					position: relative;
-				}
-				.d2l-alert-action {
-					margin: 0.45rem;
-				}
+		@keyframes drop-in {
+			from {
+				opacity: 0;
+				transform: translate(0, -10px);
 			}
-
-			@keyframes drop-in {
-				from {
-					opacity: 0;
-					transform: translate(0, -10px);
-				}
-				to {
-					opacity: 1;
-					transform: translate(0, 0);
-				}
+			to {
+				opacity: 1;
+				transform: translate(0, 0);
 			}
+		}
 
-			@media (prefers-reduced-motion: reduce) {
-				:host {
-					animation: none;
-				}
+		@media (prefers-reduced-motion: reduce) {
+			:host {
+				animation: none;
 			}
-		`];
-	}
+		}
+	`];
 
 	constructor() {
 		super();

package/components/backdrop/backdrop-dirty-overlay.js

@@ -34,25 +34,21 @@ const overlayStyles = css`
  */
 class BackdropDirtyOverlay extends LitElement {
 
-	static get properties() {
-		return {
-			/**
-			 * The text displayed on the dirty state overlay.
-			 * @type {string}
-			 */
-			description: { type: String, required: true },
+	static properties = {
+		/**
+		 * The text displayed on the dirty state overlay.
+		 * @type {string}
+		 */
+		description: { type: String, required: true },
 
-			/**
-			 * The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.
-			 * @type {string}
-			 */
-			action: { type: String, required: true }
-		};
-	}
+		/**
+		 * The text displayed on the button of the dirty state overlay when the 'dirty' dataState is set.
+		 * @type {string}
+		 */
+		action: { type: String, required: true }
+	};
 
-	static get styles() {
-		return [bodyCompactStyles, overlayStyles, getFocusRingStyles('.d2l-backdrop-dirty-overlay')];
-	}
+	static styles = [bodyCompactStyles, overlayStyles, getFocusRingStyles('.d2l-backdrop-dirty-overlay')];
 
 	render() {
 		return html`