@brightspace-ui/core 3.324.0 → 3.325.0

package/components/toolbar/toolbar-button-toggle.js

@@ -0,0 +1,111 @@
+import { css, html, LitElement } from 'lit';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { PropertyRequiredMixin } from '../../mixins/property-required/property-required-mixin.js';
+import { SlottedIconMixin } from '../icons/slotted-icon-mixin.js';
+import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
+import { toolbarButtonStyles } from './toolbar-item-styles.js';
+import { ToolbarItemMixin } from './toolbar-item-mixin.js';
+
+/**
+ * A toolbar toggle button that performs an action and supports pressed and expanded states
+ */
+class ToolbarButtonToggle extends SlottedIconMixin(FocusMixin(ToolbarItemMixin(ThemeMixin(PropertyRequiredMixin(LitElement))))) {
+
+	static properties = {
+		/**
+		 * Disables the toolbar button
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean },
+		/**
+		 * Expandable state
+		 * @type {boolean}
+		 */
+		expandable: { type: Boolean },
+		/**
+		 * Expanded state
+		 * @type {boolean}
+		 */
+		expanded: { type: Boolean },
+		/**
+		 * Pressed state
+		 * @type {boolean}
+		 */
+		pressed: { type: Boolean },
+		/**
+		 * ACCESSIBILITY: REQUIRED: Accessible text for the button
+		 * @type {string}
+		 */
+		text: { type: String, required: true }
+	};
+
+	static styles = [super.styles, toolbarButtonStyles, css`
+		button[aria-pressed="true"] > .background {
+			background-color: var(--d2l-color-celestine-plus-2);
+			transform: scale(1, 1);
+		}
+		button[aria-pressed="true"]:hover > .background {
+			background-color: #dbf5ff; /* not a daylight color */
+		}
+		button[aria-pressed="true"] ::slotted(d2l-icon-custom),
+		button[aria-pressed="true"] d2l-icon {
+			fill: var(--d2l-color-celestine);
+		}
+		:host([theme="dark"]) button[aria-pressed="true"] > .background,
+		:host([theme="dark"]) button[aria-pressed="true"]:hover > .background {
+			background-color: var(--d2l-color-tungsten);
+		}
+		:host([theme="dark"]) button[aria-pressed="true"] ::slotted(d2l-icon-custom),
+		:host([theme="dark"]) button[aria-pressed="true"] d2l-icon {
+			fill: var(--d2l-color-regolith);
+		}
+	`];
+
+	constructor() {
+		super();
+		this.disabled = false;
+		this.expandable = false;
+		this.expanded = false;
+		this.pressed = false;
+		this.text = '';
+	}
+
+	static get focusElementSelector() {
+		return 'button';
+	}
+
+	render() {
+		return html`
+			<button
+				aria-disabled="${this.disabled ? 'true' : 'false'}"
+				aria-expanded="${ifDefined(this.expandable ? (this.expanded ? 'true' : 'false') : undefined)}"
+				aria-label="${this.text}"
+				aria-pressed="${ifDefined(!this.expandable ? (this.pressed ? 'true' : 'false') : undefined)}"
+				@click="${this.#handleClick}"
+				tabindex="${this._activeFocusable ? 0 : -1}"
+				title="${this.text}"
+				type="button">
+				<div class="background"></div>
+				${this._renderIcon()}
+			</button>
+		`;
+	}
+
+	#handleClick(e) {
+		e.stopPropagation();
+		if (this.disabled) return;
+
+		if (this.expandable) {
+			this.expanded = !this.expanded;
+		} else {
+			this.pressed = !this.pressed;
+		}
+
+		/** Dispatched when the pressed state changes. */
+		this.dispatchEvent(new CustomEvent('d2l-toolbar-button-toggle-change'));
+	}
+
+}
+
+customElements.define('d2l-toolbar-button-toggle', ToolbarButtonToggle);

package/components/toolbar/toolbar-button.js

@@ -4,11 +4,12 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
 import { SlottedIconMixin } from '../icons/slotted-icon-mixin.js';
 import { ThemeMixin } from '../../mixins/theme/theme-mixin.js';
 import { toolbarButtonStyles } from './toolbar-item-styles.js';
+import { ToolbarItemMixin } from './toolbar-item-mixin.js';
 
 /**
  * A toolbar button that performs an action
  */
-class ToolbarButton extends SlottedIconMixin(FocusMixin(ThemeMixin(PropertyRequiredMixin(LitElement)))) {
+class ToolbarButton extends SlottedIconMixin(FocusMixin(ToolbarItemMixin(ThemeMixin(PropertyRequiredMixin(LitElement))))) {
 
 	static properties = {
 		/**
@@ -20,8 +21,7 @@ class ToolbarButton extends SlottedIconMixin(FocusMixin(ThemeMixin(PropertyRequi
 		 * ACCESSIBILITY: REQUIRED: Accessible text for the button
 		 * @type {string}
 		 */
-		text: { type: String, required: true },
-		_activeFocusable: { state: true }
+		text: { type: String, required: true }
 	};
 
 	static styles = [super.styles, toolbarButtonStyles];
@@ -30,7 +30,6 @@ class ToolbarButton extends SlottedIconMixin(FocusMixin(ThemeMixin(PropertyRequi
 		super();
 		this.disabled = false;
 		this.text = '';
-		this._activeFocusable = false;
 	}
 
 	static get focusElementSelector() {
@@ -53,7 +52,11 @@ class ToolbarButton extends SlottedIconMixin(FocusMixin(ThemeMixin(PropertyRequi
 	}
 
 	#handleClick(e) {
-		if (this.disabled) e.stopPropagation();
+		e.stopPropagation();
+		if (this.disabled) return;
+
+		/** Dispatched when the toggle is clicked. */
+		this.dispatchEvent(new CustomEvent('click'));
 	}
 
 }

package/components/toolbar/toolbar-item-mixin.js

@@ -0,0 +1,16 @@
+export const ToolbarItemMixin = superclass => class extends superclass {
+
+	static properties = {
+		_activeFocusable: { state: true }
+	};
+
+	constructor() {
+		super();
+		this._activeFocusable = false;
+	}
+
+	get isToolbarItem() {
+		return true;
+	}
+
+};

package/components/toolbar/toolbar.js

@@ -81,7 +81,7 @@ class Toolbar extends PropertyRequiredMixin(LitElement) {
 
 	#getFocusables() {
 		return this.#slotRef.value?.assignedElements({ flatten: true })
-			.filter(elem => elem.tagName === 'D2L-TOOLBAR-BUTTON') ?? [];
+			.filter(elem => elem.isToolbarItem) ?? [];
 	}
 
 	async #handleKeyDown(e) {

package/custom-elements.json

@@ -17365,6 +17365,106 @@
         }
       ]
     },
+    {
+      "name": "d2l-toolbar-button-toggle",
+      "path": "./components/toolbar/toolbar-button-toggle.js",
+      "description": "A toolbar toggle button that performs an action and supports pressed and expanded states",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "Disables the toolbar button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "expandable",
+          "description": "Expandable state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "expanded",
+          "description": "Expanded state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "pressed",
+          "description": "Pressed state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "text",
+          "description": "ACCESSIBILITY: REQUIRED: Accessible text for the button",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[[null],\"toolbarButtonStyles\",null]"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the toolbar button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "expandable",
+          "attribute": "expandable",
+          "description": "Expandable state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "expanded",
+          "attribute": "expanded",
+          "description": "Expanded state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "pressed",
+          "attribute": "pressed",
+          "description": "Pressed state",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "ACCESSIBILITY: REQUIRED: Accessible text for the button",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        },
+        {
+          "name": "isToolbarItem",
+          "type": "boolean"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-toolbar-button-toggle-change",
+          "description": "Dispatched when the pressed state changes."
+        }
+      ]
+    },
     {
       "name": "d2l-toolbar-button",
       "path": "./components/toolbar/toolbar-button.js",
@@ -17413,6 +17513,16 @@
           "attribute": "icon",
           "description": "Preset icon key (e.g. \"tier1:gear\")",
           "type": "string"
+        },
+        {
+          "name": "isToolbarItem",
+          "type": "boolean"
+        }
+      ],
+      "events": [
+        {
+          "name": "click",
+          "description": "Dispatched when the toggle is clicked."
         }
       ]
     },

package/package.json

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