@brightspace-ui/core 3.101.2 → 3.102.1

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

@@ -1,3 +1,5 @@
+const defaultLines = 2;
+
 export const MenuItemMixin = superclass => class extends superclass {
 
 	static get properties() {
@@ -24,6 +26,11 @@ export const MenuItemMixin = superclass => class extends superclass {
 			 * @ignore
 			 */
 			last: { type: String, reflect: true }, // set by d2l-menu
+			/**
+			 * The number of lines to display before truncating text with an ellipsis. Defaults to 2.
+			 * @type {number}
+			 */
+			lines: { type: Number },
 			/**
 			 * @ignore
 			 */
@@ -60,6 +67,7 @@ export const MenuItemMixin = superclass => class extends superclass {
 		this.__children = null;
 
 		this.disabled = false;
+		this.lines = defaultLines;
 		/** @ignore */
 		this.role = 'menuitem';
 		/** @ignore */
@@ -83,14 +91,25 @@ export const MenuItemMixin = superclass => class extends superclass {
 
 	updated(changedProperties) {
 		super.updated(changedProperties);
+		if (changedProperties.has('hidden')) this._onHidden();
+	}
 
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
 		changedProperties.forEach((oldValue, propName) => {
-			if (propName === 'hidden') {
-				this._onHidden();
-			} else if (propName === 'disabled') {
-				this._ariaDisabled = this.disabled ? 'true' : 'false';
-			} else if (propName === 'text' || propName === 'description') {
-				this._ariaLabel = this.description || this.text;
+			switch (propName) {
+				case 'text':
+				case 'description':
+					this._ariaLabel = this.description || this.text;
+					break;
+				case 'disabled':
+					this._ariaDisabled = this.disabled ? 'true' : 'false';
+					break;
+				case 'lines':
+					if (!(changedProperties.get('lines') === undefined && this.lines === defaultLines)) {
+						this.style.setProperty('--d2l-menu-item-lines', this.lines);
+					}
+					break;
 			}
 		});
 	}

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

@@ -39,9 +39,9 @@ class MenuItemReturn extends RtlMixin(LocalizeCoreElement(MenuItemMixin(LitEleme
 		];
 	}
 
-	firstUpdated() {
-		super.firstUpdated();
-		this.setAttribute('aria-label', this.localize('components.menu-item-return.return'));
+	constructor() {
+		super();
+		this.text = null;
 	}
 
 	render() {
@@ -51,14 +51,15 @@ class MenuItemReturn extends RtlMixin(LocalizeCoreElement(MenuItemMixin(LitEleme
 		`;
 	}
 
-	updated(changedProperties) {
-		super.updated(changedProperties);
-
-		changedProperties.forEach((oldValue, propName) => {
-			if (propName === 'text') {
+	willUpdate(changedProperties) {
+		super.willUpdate(changedProperties);
+		if (changedProperties.has('text')) {
+			if (this.text) {
 				this.setAttribute('aria-label', this.localize('components.menu-item-return.returnCurrentlyShowing', 'menuTitle', this.text));
+			} else {
+				this.setAttribute('aria-label', this.localize('components.menu-item-return.return'));
 			}
-		});
+		}
 	}
 
 }

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

@@ -4,6 +4,7 @@ import { getFocusPseudoClass } from '../../helpers/focus.js';
 
 export const menuItemStyles = css`
 	:host {
+		--d2l-menu-item-lines: 2;
 		background-color: var(--d2l-menu-background-color);
 		border-top: 1px solid var(--d2l-menu-border-color);
 		box-sizing: border-box;
@@ -53,7 +54,7 @@ export const menuItemStyles = css`
 		-webkit-box-orient: vertical;
 		display: -webkit-box;
 		flex: auto;
-		-webkit-line-clamp: 2;
+		-webkit-line-clamp: var(--d2l-menu-item-lines, 2);
 		line-height: 1rem;
 		overflow-wrap: anywhere;
 		overflow-x: hidden;

package/custom-elements.json

@@ -9539,6 +9539,12 @@
           "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"
         }
       ],
       "properties": [
@@ -9560,6 +9566,13 @@
           "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"
         }
       ],
       "events": [
@@ -9608,6 +9621,12 @@
           "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"
         }
       ],
       "properties": [
@@ -9642,6 +9661,13 @@
           "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"
         }
       ],
       "events": [
@@ -9700,6 +9726,12 @@
           "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"
         }
       ],
       "properties": [
@@ -9739,6 +9771,13 @@
           "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"
         }
       ],
       "events": [
@@ -9793,6 +9832,12 @@
           "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"
         }
       ],
       "properties": [
@@ -9827,6 +9872,13 @@
           "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"
         }
       ],
       "events": [
@@ -9869,6 +9921,12 @@
           "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"
         }
       ],
       "properties": [
@@ -9890,6 +9948,13 @@
           "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"
         }
       ],
       "events": [
@@ -9928,6 +9993,12 @@
           "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"
         }
       ],
       "properties": [
@@ -9949,6 +10020,13 @@
           "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"
         }
       ],
       "events": [
@@ -11139,6 +11217,12 @@
           "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"
         }
       ],
       "properties": [
@@ -11183,6 +11267,13 @@
           "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"
         }
       ],
       "events": [
@@ -12393,6 +12484,12 @@
           "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"
         }
       ],
       "properties": [
@@ -12427,6 +12524,13 @@
           "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"
         }
       ],
       "events": [

package/package.json

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