@brightspace-ui/core 3.202.0 → 3.203.0

package/components/form/form.js

@@ -5,13 +5,10 @@ import { css, html, LitElement } from 'lit';
 import { findFormElements, flattenMap, getFormElementData, isCustomFormElement, isNativeFormElement } from './form-helper.js';
 import { findComposedAncestor } from '../../helpers/dom.js';
 import { getComposedActiveElement } from '../../helpers/focus.js';
-import { getFlag } from '../../helpers/flags.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { localizeFormElement } from './form-element-localize-helper.js';
 
-const formElementMixinWithNestedFormsParticipates = getFlag('form-element-mixin-nested-forms', true);
-
 /**
  * A component that can be used to build sections containing interactive controls that are validated and submitted as a group.
  * Values of these interactive controls are aggregated but the user is responsible for handling submission via the @d2l-form-submit event.
@@ -181,17 +178,10 @@ class Form extends LocalizeCoreElement(LitElement) {
 						}
 					}
 				}
-			} else if (!formElementMixinWithNestedFormsParticipates) {
-				const eleErrors = await this._validateFormElement(ele, true);
-				if (eleErrors.length > 0) {
-					errorMap.set(ele, eleErrors);
-				}
 			}
-			if (formElementMixinWithNestedFormsParticipates) {
-				const eleErrors = await this._validateFormElement(ele, true);
-				if (eleErrors.length > 0) {
-					errorMap.set(ele, eleErrors);
-				}
+			const eleErrors = await this._validateFormElement(ele, true);
+			if (eleErrors.length > 0) {
+				errorMap.set(ele, eleErrors);
 			}
 		}
 		const flattenedErrorMap = flattenMap(errorMap);

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

@@ -1,70 +1,22 @@
 import { css, html, LitElement } from 'lit';
-import { getFlag } from '../../helpers/flags.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
 import { LinkMixin } from '../link/link-mixin.js';
-import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { MenuItemMixin } from './menu-item-mixin.js';
 import { menuItemStyles } from './menu-item-styles.js';
 
-const newWindowIconEnabled = getFlag('GAUD-8295-menu-item-link-new-window-icon', true);
-
 /**
  * A menu item component used for navigating.
  * @fires click - Dispatched when the link is clicked
  * @slot supporting - Allows supporting information to be displayed on the right-most side of the menu item
  */
-class MenuItemLink extends (newWindowIconEnabled ? LinkMixin(MenuItemMixin(LitElement)) : LocalizeCoreElement(MenuItemMixin(LitElement))) {
+class MenuItemLink extends LinkMixin(MenuItemMixin(LitElement)) {
 
 	static get properties() {
-		// remove this block when cleaning up GAUD-8295-menu-item-link-new-window-icon
-		if (!newWindowIconEnabled) return {
-			/**
-			 * Prompts the user to save the linked URL instead of navigating to it.
-			 * Must be to a resource on the same origin.
-			 * Can be used with or without a value, when set the value becomes the filename.
-			 * @type {string}
-			 */
-			download: { type: String },
-			/**
-			 * REQUIRED: The url the menu item link navigates to
-			 * @type {string}
-			 */
-			href: { type: String },
-			/**
-			 * Where to display the linked URL
-			 * @type {string}
-			 */
-			target: { type: String },
-			_ariaDescription: { type: String, attribute: 'aria-description', reflect: true },
-		};
-
 		return {
 			_ariaDescription: { type: String, attribute: 'aria-description', reflect: true },
 		};
 	}
 
 	static get styles() {
-		// remove this block when cleaning up GAUD-8295-menu-item-link-new-window-icon
-		if (!newWindowIconEnabled) return [ menuItemStyles,
-			css`
-				:host {
-					display: block;
-					padding: 0;
-				}
-
-				:host > a {
-					align-items: center;
-					color: inherit;
-					display: flex;
-					line-height: 1rem;
-					outline: none;
-					overflow-x: hidden;
-					padding: 0.75rem 1rem;
-					text-decoration: none;
-				}
-			`
-		];
-
 		return [ super.styles, menuItemStyles,
 			css`
 				:host {
@@ -107,17 +59,6 @@ class MenuItemLink extends (newWindowIconEnabled ? LinkMixin(MenuItemMixin(LitEl
 	}
 
 	render() {
-		// remove this block when cleaning up GAUD-8295-menu-item-link-new-window-icon
-		if (!newWindowIconEnabled) {
-			const rel = this.target ? 'noreferrer noopener' : undefined;
-			return html`
-				<a download="${ifDefined(this.download)}" href="${ifDefined(this.href)}" rel="${ifDefined(rel)}" target="${ifDefined(this.target)}" tabindex="-1">
-					<div class="d2l-menu-item-text">${this.text}</div>
-					<div class="d2l-menu-item-supporting"><slot name="supporting"></slot></div>
-				</a>
-			`;
-		}
-
 		const inner = html`
 			<div class="d2l-menu-item-text">${this.text}</div>
 			${this._renderNewWindowIcon()}
@@ -129,16 +70,11 @@ class MenuItemLink extends (newWindowIconEnabled ? LinkMixin(MenuItemMixin(LitEl
 
 	willUpdate(changedProperties) {
 		super.willUpdate(changedProperties);
-		if (newWindowIconEnabled && changedProperties.has('_ariaLabel') || changedProperties.has('target')) {
+		if (changedProperties.has('_ariaLabel') || changedProperties.has('target')) {
 			this._ariaDescription = this.getNewWindowDescription(this._ariaLabel);
 		}
 	}
 
-	// remove this function when cleaning up GAUD-8295-menu-item-link-new-window-icon
-	getNewWindowDescription(label) {
-		return label && this.target === '_blank' ? this.localize('components.link.open-in-new-window') : undefined;
-	}
-
 	_onKeyDown(e) {
 		if (e.keyCode === this.__keyCodes.ENTER || e.keyCode === this.__keyCodes.SPACE) {
 			this.shadowRoot.querySelector('a').click();

package/components/meter/demo/meter.html

@@ -45,6 +45,7 @@
 						<d2l-meter-linear value="3" max="6" text="Visited: {x/y}" percent text-hidden></d2l-meter-linear>
 						<d2l-meter-linear value="3" max="6" text="Visited: {%}"></d2l-meter-linear>
 						<d2l-meter-linear value="3" max="6" text="You're doing great!" percent></d2l-meter-linear>
+						<d2l-meter-linear value="3" max="6" text="You're doing great!" text-align-end></d2l-meter-linear>
 						<d2l-meter-linear value="1" max="3" text="Round up({x/y} => {%})" percent percent-rounding-mode="ceil"></d2l-meter-linear>
 						<d2l-meter-linear value="2" max="3" text="Round down({x/y} => {%})" percent percent-rounding-mode="floor"></d2l-meter-linear>
 					</div>

package/components/meter/meter-linear.js

@@ -13,7 +13,12 @@ class MeterLinear extends MeterMixin(LitElement) {
 			 * Keeps the meter to a single line
 			 * @type {boolean}
 			 */
-			textInline: { type: Boolean, attribute: 'text-inline', reflect: true }
+			textInline: { type: Boolean, attribute: 'text-inline', reflect: true },
+			/**
+			 * Force text to be aligned to the end of the meter
+			 * @type {boolean}
+			 */
+			textAlignEnd: { type: Boolean, attribute: 'text-align-end', reflect: true }
 		};
 	}
 	static get styles() {
@@ -94,6 +99,7 @@ class MeterLinear extends MeterMixin(LitElement) {
 	constructor() {
 		super();
 		this.textInline = false;
+		this.textAlignEnd = false;
 	}
 
 	render() {
@@ -106,7 +112,7 @@ class MeterLinear extends MeterMixin(LitElement) {
 		const primaryAria = this._primary(this.value, this.max, true);
 		const secondaryAria = this._secondary(this.value, this.max, this.text, true);
 		const textClasses = {
-			'd2l-meter-linear-text-space-between': !this.textInline && secondary !== this.text,
+			'd2l-meter-linear-text-space-between': !this.textInline && (secondary !== this.text || this.textAlignEnd),
 			'd2l-body-small': true,
 			'd2l-meter-linear-text': true
 		};

package/components/tag-list/README.md

@@ -1,5 +1,4 @@
 # Tag List
-*This component is in progress. The API is generally stable but there could be some appearance or minor behavior churn in the short-term.*
 
 Tag lists are used to present a list of compact, discrete pieces of information.
 

package/custom-elements.json

@@ -10985,10 +10985,103 @@
       "name": "d2l-menu-item-link",
       "path": "./components/menu/menu-item-link.js",
       "description": "A menu item component used for navigating.",
+      "attributes": [
+        {
+          "name": "download",
+          "description": "Prompts the user to save the linked URL instead of navigating to it.\nMust be to a resource on the same origin.\nCan be used with or without a value, when set the value becomes the filename.",
+          "type": "string"
+        },
+        {
+          "name": "href",
+          "description": "REQUIRED: URL or URL fragment of the link",
+          "type": "string"
+        },
+        {
+          "name": "target",
+          "description": "Where to display the linked URL",
+          "type": "string"
+        },
+        {
+          "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"
+        }
+      ],
+      "properties": [
+        {
+          "name": "download",
+          "attribute": "download",
+          "description": "Prompts the user to save the linked URL instead of navigating to it.\nMust be to a resource on the same origin.\nCan be used with or without a value, when set the value becomes the filename.",
+          "type": "string"
+        },
+        {
+          "name": "href",
+          "attribute": "href",
+          "description": "REQUIRED: URL or URL fragment of the link",
+          "type": "string"
+        },
+        {
+          "name": "target",
+          "attribute": "target",
+          "description": "Where to display the linked URL",
+          "type": "string"
+        },
+        {
+          "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"
+        }
+      ],
       "events": [
         {
           "name": "click",
           "description": "Dispatched when the link is clicked"
+        },
+        {
+          "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"
         }
       ],
       "slots": [
@@ -11383,6 +11476,12 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "text-align-end",
+          "description": "Force text to be aligned to the end of the meter",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "text",
           "description": "Context information for the meter. If the text contains {%} or {x/y}, they will be replaced with a percentage or fraction respectively.",
@@ -11427,6 +11526,13 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "textAlignEnd",
+          "attribute": "text-align-end",
+          "description": "Force text to be aligned to the end of the meter",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "text",
           "attribute": "text",

package/package.json

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

package/templates/primary-secondary/README.md

@@ -1,4 +1,6 @@
 # Templates
+*These templates are meant to take up the whole page and have a navbar slotted into them, rather than be used on a page that already includes a navbar. Therefore, a current limitation is they can only be used with the immersive nav. Work is actively underway to overhaul our page template strategy.*
+
 Page templates are used to provide generic ways to arrange content on a page
 
 ## Primary-Secondary [d2l-template-primary-secondary]