@brightspace-ui/core 3.331.3 → 3.333.0

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

@@ -0,0 +1,46 @@
+import { css } from 'lit';
+
+export const toolbarMenuItemStyles = css`
+	:host {
+		--d2l-menu-item-lines: 1;
+		align-items: center;
+		border-radius: 3px;
+		display: flex;
+		gap: 12px;
+		margin: 0;
+		padding: 7px 12px;
+		width: 100%;
+	}
+	:host([hidden]) {
+		display: none;
+	}
+`;
+
+export const toolbarMenuItemIconStyles = css`
+	.item-icon-container {
+		flex: none;
+	}
+	.item-icon-hidden {
+		display: none;
+	}
+	:host(:hover) d2l-icon,
+	:host(:focus-visible) d2l-icon,
+	:host(:hover) ::slotted(d2l-icon-custom),
+	:host(:focus-visible) ::slotted(d2l-icon-custom) {
+		fill: var(--d2l-menu-foreground-color-hover);
+	}
+`;
+
+export const toolbarMenuItemTextStyles = css`
+	::slotted(p),
+	::slotted(h1),
+	::slotted(h2),
+	::slotted(h3),
+	::slotted(h4),
+	::slotted(h5),
+	::slotted(h6),
+	::slotted(blockquote),
+	::slotted(code) {
+		margin: 0.2em 0 !important;
+	}
+`;

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

@@ -0,0 +1,53 @@
+import '../icons/icon.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { toolbarMenuItemIconStyles, toolbarMenuItemStyles, toolbarMenuItemTextStyles } from './toolbar-menu-item-styles.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { MenuItemMixin } from '../menu/menu-item-mixin.js';
+import { menuItemStyles } from '../menu/menu-item-styles.js';
+import { SlottedIconMixin } from '../icons/slotted-icon-mixin.js';
+
+/**
+ * A toolbar menu-item that performs an action
+ */
+class ToolbarMenuItem extends MenuItemMixin(SlottedIconMixin(LitElement)) {
+
+	static get styles() {
+		return [menuItemStyles, toolbarMenuItemStyles, toolbarMenuItemIconStyles, toolbarMenuItemTextStyles, css`
+			.nested-icon {
+				flex: none;
+			}
+		`];
+	}
+
+	firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		this.addEventListener('d2l-menu-item-select', this.#handleMenuItemSelect);
+	}
+
+	render() {
+		const itemIconClasses = {
+			'item-icon-container': true,
+			'item-icon-hidden': !this.hasIcon()
+		};
+		return html`
+			<div class="${classMap(itemIconClasses)}">${this._renderIcon()}</div>
+			<div class="d2l-menu-item-text"><slot name="text">${this.text}</slot></div>
+			${this.hasChildView ? html`<d2l-icon class="nested-icon" icon="tier1:chevron-right"></d2l-icon>` : nothing}
+			<slot></slot>
+		`;
+
+	}
+
+	#handleMenuItemSelect = e => {
+		e.stopPropagation();
+
+		// ignore if target is not this item (nested menu case)
+		if (e.target !== this) return;
+
+		/** Dispatched when the toolbar menu item is selected */
+		this.dispatchEvent(new CustomEvent('d2l-toolbar-menu-item-select'));
+	};
+
+}
+
+customElements.define('d2l-toolbar-menu-item', ToolbarMenuItem);

package/custom-elements.json

@@ -17579,6 +17579,88 @@
         }
       ]
     },
+    {
+      "name": "d2l-toolbar-menu-item",
+      "path": "./components/toolbar/toolbar-menu-item.js",
+      "description": "A toolbar menu-item that performs an action",
+      "attributes": [
+        {
+          "name": "text",
+          "description": "REQUIRED: Text displayed by the menu item",
+          "type": "string"
+        },
+        {
+          "name": "description",
+          "description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the menu item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "lines",
+          "description": "The number of lines to display before truncating text with an ellipsis. Defaults to 2.",
+          "type": "number",
+          "default": "2"
+        },
+        {
+          "name": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "text",
+          "attribute": "text",
+          "description": "REQUIRED: Text displayed by the menu item",
+          "type": "string"
+        },
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "ACCESSIBILITY: A description of the menu item that will be used by screen readers for additional context",
+          "type": "string"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the menu item",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "lines",
+          "attribute": "lines",
+          "description": "The number of lines to display before truncating text with an ellipsis. Defaults to 2.",
+          "type": "number",
+          "default": "2"
+        },
+        {
+          "name": "icon",
+          "attribute": "icon",
+          "description": "Preset icon key (e.g. \"tier1:gear\")",
+          "type": "string"
+        }
+      ],
+      "events": [
+        {
+          "name": "d2l-toolbar-menu-item-select",
+          "description": "Dispatched when the toolbar menu item is selected"
+        },
+        {
+          "name": "d2l-menu-item-select",
+          "description": "Dispatched when the menu item is selected"
+        },
+        {
+          "name": "d2l-menu-item-visibility-change",
+          "description": "Dispatched when the visibility of the menu item changes"
+        }
+      ]
+    },
     {
       "name": "d2l-toolbar-separator",
       "path": "./components/toolbar/toolbar-separator.js",

package/package.json

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