@brightspace-ui/core 3.327.2 → 3.329.0

package/components/toolbar/toolbar-dropdown.js

@@ -0,0 +1,136 @@
+import '../tooltip/tooltip.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { DropdownOpenerMixin } from '../dropdown/dropdown-opener-mixin.js';
+import { dropdownOpenerStyles } from '../dropdown/dropdown-opener-styles.js';
+import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
+import { offscreenStyles } from '../offscreen/offscreen.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 button that opens a dropdown
+ */
+class ToolbarDropdown extends FocusMixin(DropdownOpenerMixin(SlottedIconMixin(ToolbarItemMixin(ThemeMixin(PropertyRequiredMixin(LitElement)))))) {
+
+	static properties = {
+		/**
+		 * Disables the toolbar button
+		 * @type {boolean}
+		 */
+		disabled: { type: Boolean },
+		/**
+		 * ACCESSIBILITY: REQUIRED: Accessible text for the button
+		 * @type {string}
+		 */
+		text: { type: String, required: true },
+		/**
+		 * Text describing the value
+		 * @type {string}
+		 */
+		valueText: { type: String, attribute: 'value-text' }
+	};
+
+	static styles = [super.styles, dropdownOpenerStyles, offscreenStyles, toolbarButtonStyles, css`
+			:host {
+				font-size: 1rem;
+			}
+			button {
+				align-items: center;
+				display: flex;
+				font-size: 0.7rem;
+				gap: 3px;
+				justify-content: center;
+				overflow: hidden;
+				padding-inline: 6px 4px;
+				text-align: start;
+				width: 100%;
+			}
+			button > .value-text {
+				flex: auto;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+			button[aria-expanded="true"] .background {
+				background-color: var(--d2l-theme-background-color-interactive-secondary-default);
+				transform: scale(1, 1);
+			}
+			:host([theme="dark"]) button[aria-expanded="true"] .background {
+				background-color: var(--d2l-color-tungsten);
+				transform: scale(1, 1);
+			}
+			.tooltip-hidden {
+				display: none;
+			}
+	`];
+
+	constructor() {
+		super();
+		this.disabled = false;
+		this.text = '';
+	}
+
+	static get focusElementSelector() {
+		return 'button';
+	}
+
+	get opened() {
+		return this.dropdownOpened;
+	}
+
+	render() {
+		const tooltipClasses = {
+			'tooltip-hidden': this.opened,
+			'vdiff-target': true
+		};
+		return html`
+			<button
+				aria-disabled="${this.disabled ? 'true' : 'false'}"
+				aria-label="${this.text}"
+				id="opener"
+				@keydown="${this.#handleKeyDown}"
+				tabindex="${this._activeFocusable ? 0 : -1}"
+				type="button">
+				<div class="background"></div>
+				${this._renderIcon()}
+				${this.valueText ? html`<div class="value-text">${this.valueText}</div>` : nothing}
+				<d2l-icon icon="tier1:chevron-down-small"></d2l-icon>
+			</button>
+			<d2l-tooltip class="${classMap(tooltipClasses)}" for="opener">
+				${this.text}
+				<span class="d2l-offscreen">${this.valueText}</span>
+			</d2l-tooltip>
+			<slot></slot>
+		`;
+	}
+
+	updated(changedProperties) {
+		if (changedProperties.has('disabled') && this.disabled && this.opened) {
+			this.closeDropdown(false);
+		}
+	}
+
+	/**
+	 * Gets the "button" opener element (required by dropdown-opener-mixin).
+	 * @return {HTMLElement}
+	 */
+	getOpenerElement() {
+		return this.shadowRoot?.querySelector('button');
+	}
+
+	#handleKeyDown(e) {
+		if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
+
+		// prevent scroll for up & down keys
+		e.preventDefault();
+
+		if ((e.key === 'ArrowDown' && !this.opened) || (e.key === 'ArrowUp' && this.opened)) this.toggleOpen(true);
+	}
+
+}
+
+customElements.define('d2l-toolbar-dropdown', ToolbarDropdown);

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

@@ -44,11 +44,10 @@ export const toolbarButtonStyles = css`
 	.background {
 		background-color: transparent;
 		border-radius: 4px;
-		height: 100%;
+		inset: 0;
 		position: absolute;
 		transform: scale(0.89, 0.89);
 		transition: background-color 100ms linear, transform 100ms linear;
-		width: 100%;
 		z-index: -1;
 	}
 	${getFocusRingStyles('button')}

package/components/toolbar/{toolbar-button-toggle.js → toolbar-toggle.js}

@@ -10,11 +10,11 @@ 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))))) {
+class ToolbarToggle extends SlottedIconMixin(FocusMixin(ToolbarItemMixin(ThemeMixin(PropertyRequiredMixin(LitElement))))) {
 
 	static properties = {
 		/**
-		 * Disables the toolbar button
+		 * Disables the toolbar toggle button
 		 * @type {boolean}
 		 */
 		disabled: { type: Boolean },
@@ -34,7 +34,7 @@ class ToolbarButtonToggle extends SlottedIconMixin(FocusMixin(ToolbarItemMixin(T
 		 */
 		pressed: { type: Boolean },
 		/**
-		 * ACCESSIBILITY: REQUIRED: Accessible text for the button
+		 * ACCESSIBILITY: REQUIRED: Accessible text for the toggle button
 		 * @type {string}
 		 */
 		text: { type: String, required: true }
@@ -103,9 +103,9 @@ class ToolbarButtonToggle extends SlottedIconMixin(FocusMixin(ToolbarItemMixin(T
 		}
 
 		/** Dispatched when the pressed state changes. */
-		this.dispatchEvent(new CustomEvent('d2l-toolbar-button-toggle-change'));
+		this.dispatchEvent(new CustomEvent('d2l-toolbar-toggle-change'));
 	}
 
 }
 
-customElements.define('d2l-toolbar-button-toggle', ToolbarButtonToggle);
+customElements.define('d2l-toolbar-toggle', ToolbarToggle);

package/custom-elements.json

@@ -17430,9 +17430,9 @@
       ]
     },
     {
-      "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",
+      "name": "d2l-toolbar-button",
+      "path": "./components/toolbar/toolbar-button.js",
+      "description": "A toolbar button that performs an action",
       "attributes": [
         {
           "name": "disabled",
@@ -17440,24 +17440,6 @@
           "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",
@@ -17474,7 +17456,7 @@
         {
           "name": "styles",
           "type": "array",
-          "default": "[[null],\"toolbarButtonStyles\",null]"
+          "default": "[[null],\"toolbarButtonStyles\"]"
         },
         {
           "name": "disabled",
@@ -17484,26 +17466,85 @@
           "default": "false"
         },
         {
-          "name": "expandable",
-          "attribute": "expandable",
-          "description": "Expandable state",
+          "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": "click",
+          "description": "Dispatched when the toggle is clicked."
+        }
+      ]
+    },
+    {
+      "name": "d2l-toolbar-dropdown",
+      "path": "./components/toolbar/toolbar-dropdown.js",
+      "description": "A toolbar button that opens a dropdown",
+      "attributes": [
+        {
+          "name": "value-text",
+          "description": "Text describing the value",
+          "type": "string"
+        },
+        {
+          "name": "text",
+          "description": "ACCESSIBILITY: REQUIRED: Accessible text for the button",
+          "type": "string",
+          "default": "\"\""
+        },
+        {
+          "name": "no-auto-open",
+          "description": "Prevents the dropdown from opening automatically on or on key press",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "expanded",
-          "attribute": "expanded",
-          "description": "Expanded state",
+          "name": "open-on-hover",
+          "description": "Optionally open dropdown on click or hover action",
           "type": "boolean",
           "default": "false"
         },
         {
-          "name": "pressed",
-          "attribute": "pressed",
-          "description": "Pressed state",
+          "name": "disabled",
+          "description": "Disables the toolbar button",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "valueText",
+          "attribute": "value-text",
+          "description": "Text describing the value",
+          "type": "string"
+        },
+        {
+          "name": "styles",
+          "type": "array",
+          "default": "[\"styles\",\"dropdownOpenerStyles\",\"offscreenStyles\",\"toolbarButtonStyles\",null]"
+        },
+        {
+          "name": "opened"
+        },
         {
           "name": "text",
           "attribute": "text",
@@ -17511,6 +17552,37 @@
           "type": "string",
           "default": "\"\""
         },
+        {
+          "name": "dropdownOpener",
+          "type": "boolean",
+          "default": "true"
+        },
+        {
+          "name": "noAutoOpen",
+          "attribute": "no-auto-open",
+          "description": "Prevents the dropdown from opening automatically on or on key press",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "openOnHover",
+          "attribute": "open-on-hover",
+          "description": "Optionally open dropdown on click or hover action",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the toolbar button",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "dropdownOpened",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "icon",
           "attribute": "icon",
@@ -17524,25 +17596,54 @@
       ],
       "events": [
         {
-          "name": "d2l-toolbar-button-toggle-change",
-          "description": "Dispatched when the pressed state changes."
+          "name": "d2l-dropdown-opener-click",
+          "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled"
         }
       ]
     },
     {
-      "name": "d2l-toolbar-button",
-      "path": "./components/toolbar/toolbar-button.js",
-      "description": "A toolbar button that performs an action",
+      "name": "d2l-toolbar-separator",
+      "path": "./components/toolbar/toolbar-separator.js",
+      "description": "A toolbar item separator",
+      "properties": [
+        {
+          "name": "styles",
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t}\\n\\t\\t:host([hidden]) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\tdiv {\\n\\t\\t\\tborder-inline-start: 1px solid var(--d2l-theme-border-color-standard);\\n\\t\\t\\tmin-height: 34px;\\n\\t\\t}\\n\\t\\t:host([theme=\\\"dark\\\"]) div {\\n\\t\\t\\tborder-inline-start: 1px solid var(--d2l-color-tungsten);\\n\\t\\t}\\n\\t`\""
+        }
+      ]
+    },
+    {
+      "name": "d2l-toolbar-toggle",
+      "path": "./components/toolbar/toolbar-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",
+          "description": "Disables the toolbar toggle 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",
+          "description": "ACCESSIBILITY: REQUIRED: Accessible text for the toggle button",
           "type": "string",
           "default": "\"\""
         },
@@ -17556,19 +17657,40 @@
         {
           "name": "styles",
           "type": "array",
-          "default": "[[null],\"toolbarButtonStyles\"]"
+          "default": "[[null],\"toolbarButtonStyles\",null]"
         },
         {
           "name": "disabled",
           "attribute": "disabled",
-          "description": "Disables the toolbar button",
+          "description": "Disables the toolbar toggle 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",
+          "description": "ACCESSIBILITY: REQUIRED: Accessible text for the toggle button",
           "type": "string",
           "default": "\"\""
         },
@@ -17585,19 +17707,8 @@
       ],
       "events": [
         {
-          "name": "click",
-          "description": "Dispatched when the toggle is clicked."
-        }
-      ]
-    },
-    {
-      "name": "d2l-toolbar-separator",
-      "path": "./components/toolbar/toolbar-separator.js",
-      "description": "A toolbar item separator",
-      "properties": [
-        {
-          "name": "styles",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\tdisplay: inline-block;\\n\\t\\t}\\n\\t\\t:host([hidden]) {\\n\\t\\t\\tdisplay: none;\\n\\t\\t}\\n\\t\\tdiv {\\n\\t\\t\\tborder-inline-start: 1px solid var(--d2l-theme-border-color-standard);\\n\\t\\t\\tmin-height: 34px;\\n\\t\\t}\\n\\t\\t:host([theme=\\\"dark\\\"]) div {\\n\\t\\t\\tborder-inline-start: 1px solid var(--d2l-color-tungsten);\\n\\t\\t}\\n\\t`\""
+          "name": "d2l-toolbar-toggle-change",
+          "description": "Dispatched when the pressed state changes."
         }
       ]
     },

package/package.json

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