@brightspace-ui/core 3.224.0 → 3.225.1

package/components/backdrop/backdrop.js

@@ -2,10 +2,12 @@ import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
 import { cssEscape, getComposedChildren, getComposedParent, isComposedAncestor, isVisible } from '../../helpers/dom.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
+import { getFlag } from '../../helpers/flags.js';
 
 const BACKDROP_HIDDEN = 'data-d2l-backdrop-hidden';
 const BACKDROP_ARIA_HIDDEN = 'data-d2l-backdrop-aria-hidden';
 const BACKDROP_TABINDEX = 'data-d2l-backdrop-tabindex';
+const BACKDROP_INERT = 'data-d2l-backdrop-inert';
 const TRANSITION_DURATION = 200;
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -180,6 +182,13 @@ function hideAccessible(target) {
 			}
 			child.setAttribute('tabindex', '-1');
 
+			if (getFlag('GAUD-9398-make-backdrop-inert', false)) {
+				if (child.hasAttribute('inert')) {
+					child.setAttribute(BACKDROP_INERT, '');
+				}
+				child.setAttribute('inert', '');
+			}
+
 			child.setAttribute(BACKDROP_HIDDEN, BACKDROP_HIDDEN);
 			hiddenElements.push(child);
 		}
@@ -213,6 +222,13 @@ function showAccessible(elems) {
 		} else {
 			elem.removeAttribute('tabindex');
 		}
+		if (getFlag('GAUD-9398-make-backdrop-inert', false)) {
+			if (elem.hasAttribute(BACKDROP_INERT)) {
+				elem.removeAttribute(BACKDROP_INERT);
+			} else {
+				elem.removeAttribute('inert');
+			}
+		}
 		elem.removeAttribute(BACKDROP_HIDDEN);
 	}
 }

package/components/button/README.md

@@ -313,7 +313,7 @@ Use the Add button when users need to quickly insert new items at specific locat
 | `mode` | String | Display mode of the component. Defaults to "icon" (plus icon is always visible). Other options are "icon-and-text" (plus icon and text are always visible), and "icon-when-interacted" (plus icon is only visible when hover or focus). |
 <!-- docs: end hidden content -->
 
-## Copy Button [d2l-button-copy]
+## Copy Icon Button [d2l-button-copy]
 
 Use the Copy button to enable users to copy a text value to the clipboard. The `d2l-button-copy`'s `click` event provides the `writeTextToClipboard` method for writing the text to the clipboard.
 
@@ -337,6 +337,33 @@ Use the Copy button to enable users to copy a text value to the clipboard. The `
 | `disabled` | Boolean | Disables the button |
 <!-- docs: end hidden content -->
 
+## Copy Subtle Button [d2l-button-subtle-copy]
+
+Use the Copy button to enable users to copy a text value to the clipboard. The `d2l-button-subtle-copy`'s `click` event provides the `writeTextToClipboard` method for writing the text to the clipboard.
+
+<!-- docs: demo code properties name:d2l-button-subtle-copy sandboxTitle:'Subtle Copy Button' display:block autoSize:false size:xsmall -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/button/button-subtle-copy.js';
+  document.querySelector('d2l-button-subtle-copy').addEventListener('click', e => {
+    e.detail.writeTextToClipboard(document.querySelector('#to-copy').textContent);
+  });
+</script>
+<span id="to-copy">Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
+<d2l-button-subtle-copy text="Copy text"></d2l-button-subtle-copy>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `disabled` | Boolean | Disables the button |
+| `description` | String | A description to be added to the button for accessibility when text on button does not provide enough context |
+| `silm` | Boolean | Makes the button slimmer |
+| `text` | String | Label text for the button |
+<!-- docs: end hidden content -->
+
 ## Floating Buttons [d2l-floating-buttons]
 
 Floating workflow buttons `<d2l-floating-buttons>` cause buttons to float or 'dock' to the bottom of the viewport when they would otherwise be below the bottom of the viewport. When their normal position becomes visible, they will undock.

package/components/button/button-copy-mixin.js

@@ -0,0 +1,84 @@
+import '../alert/alert-toast.js';
+import { html } from 'lit';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
+
+export const ButtonCopyMixin = (superclass) => class extends LocalizeCoreElement(superclass) {
+
+	static get properties() {
+		return {
+			/**
+			 * Disables the button
+			 * @type {boolean}
+			 */
+			disabled: { type: Boolean, reflect: true },
+			_recentCopySuccessful: { state: true },
+			_toastState: { state: true }
+		};
+	}
+
+	constructor() {
+		super();
+		this.disabled = false;
+	}
+
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (!this._toastState) this._recentCopySuccessful = false;
+	}
+
+	#recentCopyTimerId;
+
+	async _handleClick(e) {
+		e.stopPropagation();
+		if (this.disabled) return;
+
+		clearTimeout(this.#recentCopyTimerId);
+
+		/** Dispatched when button is clicked. Use the event detail's `writeTextToClipboard` to write to the clipboard. */
+		this.dispatchEvent(new CustomEvent('click', {
+			detail: {
+				writeTextToClipboard: async(text) => {
+					text = text?.trim?.();
+					if (!text) return false;
+
+					try {
+						// writeText can throw NotAllowedError (ex. iframe without allow="clipboard-write" in Chrome)
+						await navigator.clipboard.writeText(text);
+						this._toastState = 'copied';
+						this.#recentCopyTimerId = setTimeout(() => this.#recentCopyTimerId = null, 2000);
+						this._recentCopySuccessful = true;
+						return true;
+					} catch {
+						this._toastState = 'error';
+						return false;
+					}
+				}
+			},
+			bubbles: false
+		}));
+
+	}
+
+	_handleToastClick(e) {
+		// swallow other click events because we are exposing our own special click event,
+		// and consumers need to be able to rely on writeTextToClipboard existing.
+		e.stopPropagation();
+	}
+
+	_handleToastClose() {
+		this._toastState = null;
+	}
+
+	_renderToast() {
+		return html`
+			<d2l-alert-toast
+				@d2l-alert-toast-close="${this._handleToastClose}"
+				@click="${this._handleToastClick}"
+				?open="${this._toastState}"
+				type="${this._toastState === 'error' ? 'critical' : 'default'}">
+					${this._toastState === 'error' ? this.localize('components.button-copy.error') : this.localize('components.button-copy.copied')}
+			</d2l-alert-toast>
+		`;
+	}
+};
+

package/components/button/button-copy.js

@@ -1,28 +1,20 @@
-import '../alert/alert-toast.js';
 import './button-icon.js';
 import { css, html, LitElement } from 'lit';
+import { ButtonCopyMixin } from './button-copy-mixin.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
-import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 
 /**
  * A button component that copies to the clipboard.
  */
-class ButtonCopy extends FocusMixin(LocalizeCoreElement(LitElement)) {
+class ButtonCopy extends FocusMixin(ButtonCopyMixin(LitElement)) {
 
 	static get properties() {
 		return {
-			/**
-			 * Disables the button
-			 * @type {boolean}
-			 */
-			disabled: { type: Boolean, reflect: true },
 			/**
 			 * Description of the content being copied to clipboard
 			 * @type {string}
 			 */
 			text: { type: String },
-			_iconCheckTimeoutId: { state: true },
-			_toastState: { state: true }
 		};
 	}
 
@@ -37,11 +29,6 @@ class ButtonCopy extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		`;
 	}
 
-	constructor() {
-		super();
-		this.disabled = false;
-	}
-
 	static get focusElementSelector() {
 		return 'd2l-button-icon';
 	}
@@ -50,51 +37,14 @@ class ButtonCopy extends FocusMixin(LocalizeCoreElement(LitElement)) {
 		return html`
 			<d2l-button-icon
 				?disabled="${this.disabled}"
-				icon="${this._iconCheckTimeoutId ? 'tier1:check' : 'tier1:copy'}"
+				icon="${this._recentCopySuccessful ? 'tier1:check' : 'tier1:copy'}"
 				text="${this.text ?? this.localize('intl-common:actions:copy')}"
-				@click="${this.#handleClick}"></d2l-button-icon>
-			<d2l-alert-toast
-				@d2l-alert-toast-close="${this.#handleToastClose}"
-				?open="${this._toastState}"
-				type="${this._toastState === 'error' ? 'critical' : 'default'}">
-					${this._toastState === 'error' ? this.localize('components.button-copy.error') : this.localize('components.button-copy.copied')}
-			</d2l-alert-toast>
+				@click="${this._handleClick}">
+			</d2l-button-icon>
+			${this._renderToast()}
 		`;
 	}
 
-	async #handleClick(e) {
-		e.stopPropagation();
-		if (this.disabled) return;
-
-		clearTimeout(this._iconCheckTimeoutId);
-
-		/** Dispatched when button is clicked. Use the event detail's `writeTextToClipboard` to write to the clipboard. */
-		this.dispatchEvent(new CustomEvent('click', {
-			detail: {
-				writeTextToClipboard: async(text) => {
-					text = text?.trim?.();
-					if (!text) return false;
-					try {
-						// writeText can throw NotAllowedError (ex. iframe without allow="clipboard-write" in Chrome)
-						await navigator.clipboard.writeText(text);
-						this._toastState = 'copied';
-						this._iconCheckTimeoutId = setTimeout(() => this._iconCheckTimeoutId = null, 2000);
-						return true;
-					} catch {
-						this._toastState = 'error';
-						return false;
-					}
-				}
-			},
-			bubbles: false
-		}));
-
-	}
-
-	#handleToastClose() {
-		this._toastState = null;
-	}
-
 }
 
 customElements.define('d2l-button-copy', ButtonCopy);

package/components/button/button-subtle-copy.js

@@ -0,0 +1,49 @@
+import './button-subtle.js';
+import { html, LitElement } from 'lit';
+import { ButtonCopyMixin } from './button-copy-mixin.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+
+/**
+ * A button component that copies to the clipboard, using the "subtle" button style.
+ */
+class ButtonSubtleCopy extends FocusMixin(ButtonCopyMixin(LitElement)) {
+	static get properties() {
+		return {
+			/**
+			 * ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context
+			 * @type {string}
+			 */
+			description: { type: String },
+			/**
+			 * ACCESSIBILITY: REQUIRED: Text for the button
+			 * @type {string}
+			 */
+			text: { type: String, reflect: true },
+			/**
+			 * Whether to render the slimmer version of the button
+			 * @type {boolean}
+			 */
+			slim: { type: Boolean, reflect: true },
+		};
+	}
+
+	static get focusElementSelector() {
+		return 'd2l-button-subtle';
+	}
+
+	render() {
+		return html`
+			<d2l-button-subtle
+				?slim="${this.slim}"
+				?disabled="${this.disabled}"
+				icon="${this._recentCopySuccessful ? 'tier1:check' : 'tier1:copy'}"
+				text="${this.text}"
+				description="${this.description}"
+				@click="${this._handleClick}">
+			</d2l-button-subtle>
+			${this._renderToast()}
+		`;
+	}
+}
+
+customElements.define('d2l-button-subtle-copy', ButtonSubtleCopy);

package/components/button/demo/button-copy.html

@@ -10,6 +10,7 @@
 			import '../../inputs/input-text.js';
 			import '../button-icon.js';
 			import '../button-copy.js';
+			import '../button-subtle-copy.js';
 		</script>
 		<style>
 			d2l-button-copy[slot="after"] {
@@ -70,6 +71,51 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Subtle Button Copy</h2>
+			<d2l-demo-snippet>
+				<template>
+					<span>Donuts are yummmmmy!</span>
+					<d2l-button-subtle-copy text="Copy text"></d2l-button-subtle-copy>
+					<script>
+						(demo => {
+							demo.querySelector('d2l-button-subtle-copy').addEventListener('click', async(e) => {
+								console.log('Copied', await e.detail.writeTextToClipboard(demo.querySelector('span').textContent));
+							});
+						})(document.currentScript.parentNode);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Subtle Button Copy Slim</h2>
+			<d2l-demo-snippet>
+				<template>
+					<span>Donuts are yummmmmy!</span>
+					<d2l-button-subtle-copy text="Copy text" slim></d2l-button-subtle-copy>
+					<script>
+						(demo => {
+							demo.querySelector('d2l-button-subtle-copy').addEventListener('click', async(e) => {
+								console.log('Copied', await e.detail.writeTextToClipboard(demo.querySelector('span').textContent));
+							});
+						})(document.currentScript.parentNode);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Subtle Button Copy Disabled</h2>
+			<d2l-demo-snippet>
+				<template>
+					<span>Donuts are yummmmmy!</span>
+					<d2l-button-subtle-copy text="Copy text" disabled></d2l-button-subtle-copy>
+					<script>
+						(demo => {
+							demo.querySelector('d2l-button-subtle-copy').addEventListener('click', async(e) => {
+								console.log('Copied', await e.detail.writeTextToClipboard(demo.querySelector('span').textContent));
+							});
+						})(document.currentScript.parentNode);
+					</script>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 
 	</body>

package/custom-elements.json

@@ -843,6 +843,67 @@
         }
       ]
     },
+    {
+      "name": "d2l-button-subtle-copy",
+      "path": "./components/button/button-subtle-copy.js",
+      "description": "A button component that copies to the clipboard, using the \"subtle\" button style.",
+      "attributes": [
+        {
+          "name": "description",
+          "description": "ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "description": "ACCESSIBILITY: REQUIRED: Text for the button",
+          "type": "string"
+        },
+        {
+          "name": "slim",
+          "description": "Whether to render the slimmer version of the button",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the button",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "ACCESSIBILITY: A description to be added to the button for accessibility when text on button does not provide enough context",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "ACCESSIBILITY: REQUIRED: Text for the button",
+          "type": "string"
+        },
+        {
+          "name": "slim",
+          "attribute": "slim",
+          "description": "Whether to render the slimmer version of the button",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the button",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "click",
+          "description": "Dispatched when button is clicked. Use the event detail's `writeTextToClipboard` to write to the clipboard."
+        }
+      ]
+    },
     {
       "name": "d2l-button-subtle",
       "path": "./components/button/button-subtle.js",

package/package.json

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