@brightspace-ui/core 3.327.2 → 3.328.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/custom-elements.json

@@ -17590,6 +17590,117 @@
         }
       ]
     },
+    {
+      "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": "open-on-hover",
+          "description": "Optionally open dropdown on click or hover action",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "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",
+          "description": "ACCESSIBILITY: REQUIRED: Accessible text for the button",
+          "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",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        },
+        {
+          "name": "isToolbarItem",
+          "type": "boolean"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-dropdown-opener-click",
+          "description": "Dispatched when the opener is clicked, useful for when no-auto-open is enabled"
+        }
+      ]
+    },
     {
       "name": "d2l-toolbar-separator",
       "path": "./components/toolbar/toolbar-separator.js",

package/package.json

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