@brightspace-ui/core 1.208.2 → 1.210.1

package/README.md

@@ -119,29 +119,32 @@ Note: The axe tests require `prefers-reduced-motion` emulation to be turned on i
 
 This repo uses the [@brightspace-ui/visual-diff utility](https://github.com/BrightspaceUI/visual-diff/) to compare current snapshots against a set of golden snapshots stored in source control.
 
-The golden snapshots in source control must be updated by Github Actions.  If your PR's code changes result in visual differences, a PR with the new goldens will be automatically opened for you against your branch.
+The golden snapshots in source control must be updated by the [visual-diff GitHub Action](https://github.com/BrightspaceUI/actions/tree/main/visual-diff).  If a pull request results in visual differences, a draft pull request with the new goldens will automatically be opened against its branch.
 
-If you'd like to run the tests locally to help troubleshoot or develop new tests, you can use these commands:
+To run the tests locally to help troubleshoot or develop new tests, first install these dependencies:
 
 ```shell
-# Install dependencies locally
-npm install esm mocha puppeteer @brightspace-ui/visual-diff --no-save
+npm install @brightspace-ui/visual-diff@X mocha@Y puppeteer@Z  --no-save
+```
 
-# run visual-diff tests
-npx mocha './**/*.visual-diff.js' -t 10000 --require esm
+Replace `X`, `Y` and `Z` with [the current versions](https://github.com/BrightspaceUI/actions/tree/main/visual-diff#current-dependency-versions) the action is using.
 
-# subset of visual-diff tests:
-npx mocha './**/*.visual-diff.js' -t 10000 --require esm -g some-pattern
+Then run the tests:
 
+```shell
+# run visual-diff tests
+npx mocha './**/*.visual-diff.js' -t 10000
+# subset of visual-diff tests:
+npx mocha './**/*.visual-diff.js' -t 10000 -g some-pattern
 # update visual-diff goldens
-npx mocha './**/*.visual-diff.js' -t 10000 --require esm --golden
+npx mocha './**/*.visual-diff.js' -t 10000 --golden
 ```
 
 ## Versioning & Releasing
 
 > TL;DR: Commits prefixed with `fix:` and `feat:` will trigger patch and minor releases when merged to `main`. Read on for more details...
 
-The [semantic-release GitHub Action](https://github.com/BrightspaceUI/actions/tree/master/semantic-release) is called from the `release.yml` GitHub Action workflow to handle version changes and releasing.
+The [semantic-release GitHub Action](https://github.com/BrightspaceUI/actions/tree/main/semantic-release) is called from the `release.yml` GitHub Action workflow to handle version changes and releasing.
 
 ### Version Changes
 

package/components/alert/README.md

@@ -4,21 +4,38 @@ Alerts communicate critical information relating to the state of the system and
 <!-- docs: demo autoSize:false align:start -->
 ```html
 <script type="module">
-	import '@brightspace-ui/core/components/alert/alert-toast.js';
+  import '@brightspace-ui/core/components/alert/alert-toast.js';
+  import '@brightspace-ui/core/components/button/button.js';
+
+  var alert = document.querySelector('#alert');
+  var alertToast = document.querySelector('#alert-toast');
+  var button = document.querySelector('#open');
+
+  alert.addEventListener('d2l-alert-close', function() {
+    if (!alertToast.open) button.style.display = 'block';
+  });
+  alertToast.addEventListener('d2l-alert-toast-close', function() {
+    if (alert.hasAttribute('hidden')) button.style.display = 'block';
+  });
+
+  button.addEventListener('click', () => {
+    alert.removeAttribute('hidden');
+    alertToast.open = true;
+    button.style.display = 'none';
+  });
 </script>
-<!-- docs: start hidden content -->
 <style>
   d2l-alert-toast {
     margin-left: 0 !important;
     margin-right: 0 !important;
   }
 </style>
-<!-- docs: end hidden content -->
 
-<d2l-alert type="default" button-text="Undo" has-close-button>
+<d2l-button id="open" style="align-self:center;display:none;">Show Alerts</d2l-button>
+<d2l-alert id="alert" type="default" button-text="Undo" has-close-button>
 	A message.
 </d2l-alert>
-<d2l-alert-toast type="success" open no-auto-close>
+<d2l-alert-toast id="alert-toast" type="success" open no-auto-close>
 	A message.
 </d2l-alert-toast>
 ```

package/components/dialog/README.md

@@ -7,13 +7,17 @@ Dialogs interrupt the user to complete a set of tasks, confirm an action, or off
 <script type="module">
   import '@brightspace-ui/core/components/button/button.js';
   import '@brightspace-ui/core/components/dialog/dialog.js';
-</script>
 
+  document.querySelector('#open-demo').addEventListener('click', () => {
+    document.querySelector('#dialog-demo').opened = true;
+  });
+</script>
 <d2l-dialog id="dialog-demo" title-text="Dialog Title">
   <div>Some dialog content</div>
   <d2l-button slot="footer" primary data-dialog-action="done">Done</d2l-button>
   <d2l-button slot="footer" data-dialog-action>Cancel</d2l-button>
 </d2l-dialog>
+<d2l-button id="open-demo">Show Dialog</d2l-button>
 ```
 
 ## General Dialog [d2l-dialog]

package/components/dropdown/dropdown-content-mixin.js

@@ -394,7 +394,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 		if (this.opened) {
 			this.close();
 		} else {
-			this.open(applyFocus);
+			this.open(!this.noAutoFocus && applyFocus);
 		}
 	}
 
@@ -518,11 +518,10 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 
 			await this.__position();
 			this._showBackdrop = this._useMobileStyling && this.mobileTray;
-
 			if (!this.noAutoFocus && this.__applyFocus) {
 				const focusable = getFirstFocusableDescendant(this);
 				if (focusable) {
-					// bumping this to the next frame is required to prevent Legacy-Edge from crazily invoking click on the focused element
+					// Removing the rAF call can allow infinite focus looping to happen in content using a focus trap
 					requestAnimationFrame(() => focusable.focus());
 				} else {
 					content.setAttribute('tabindex', '-1');
@@ -1014,7 +1013,7 @@ export const DropdownContentMixin = superclass => class extends LocalizeCoreElem
 			const content = this.__getContentContainer();
 			const focusable = getFirstFocusableDescendant(content);
 			if (focusable) {
-				// bumping this to the next frame is required to prevent Legacy-Edge from crazily invoking click on the focused element
+				// Removing the rAF call can allow infinite focus looping to happen in content using a focus trap
 				requestAnimationFrame(() => focusable.focus());
 			} else {
 				content.setAttribute('tabindex', '-1');

package/components/dropdown/dropdown-menu.js

@@ -112,9 +112,7 @@ class DropdownMenu extends ThemeMixin(DropdownContentMixin(LitElement)) {
 
 		menu.resize();
 
-		if (this.__applyFocus) {
-			menu.focus();
-		}
+		menu.focus();
 	}
 
 	_onSelect(e) {

package/components/dropdown/dropdown-opener-mixin.js

@@ -262,7 +262,7 @@ export const DropdownOpenerMixin = superclass => class extends superclass {
 				this._isHovering = false;
 				this.openDropdown(false);
 			}
-		} else this.toggleOpen(false);
+		} else this.toggleOpen(true);
 	}
 
 	/* used by open-on-hover option */

package/components/form/form-element-mixin.js

@@ -97,6 +97,11 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 			 * @ignore
 			 */
 			noValidate: { type: Boolean, attribute: 'novalidate' },
+			/**
+			 * @ignore
+			 * Perform validation immediately instead of waiting for the user to make changes.
+			 */
+			validateOnInit: { type: Boolean, attribute: 'validate-on-init' },
 			/**
 			 * @ignore
 			 */
@@ -125,6 +130,8 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 		/** @ignore */
 		this.noValidate = false;
 		/** @ignore */
+		this.validateOnInit = false;
+		/** @ignore */
 		this.validationError = null;
 		/** @ignore */
 		this.childErrors = new Map();
@@ -171,6 +178,9 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 				this.dispatchEvent(new CustomEvent('invalid-change'));
 			}
 		}
+		if (this.validateOnInit && (changedProperties.has('noValidate') || changedProperties.has('validateOnInit'))) {
+			this.requestValidate(true);
+		}
 	}
 
 	async requestValidate(showNewErrors = true) {
@@ -210,6 +220,9 @@ export const FormElementMixin = superclass => class extends LocalizeCoreElement(
 
 	validationCustomConnected(custom) {
 		this._validationCustoms.add(custom);
+		if (this.validateOnInit) {
+			this.requestValidate(true);
+		}
 	}
 
 	validationCustomDisconnected(custom) {

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

@@ -1,4 +1,6 @@
-export const MenuItemMixin = superclass => class extends superclass {
+
+import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
+export const MenuItemMixin = superclass => class extends FocusVisiblePolyfillMixin(superclass) {
 
 	static get properties() {
 		return {

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

@@ -15,9 +15,10 @@ export const menuItemStyles = css`
 		outline: none;
 		width: 100%;
 	}
-	:host(:focus),
+
 	:host(:hover),
-	:host([first]:focus),
+	:host(.focus-visible),
+	:host(.focus-visible[first]),
 	:host([first]:hover) {
 		background-color: var(--d2l-menu-background-color-hover);
 		border-bottom: 1px solid var(--d2l-menu-border-color-hover);
@@ -26,7 +27,7 @@ export const menuItemStyles = css`
 		z-index: 2;
 	}
 
-	:host([disabled]), :host([disabled]:hover), :host([disabled]:focus) {
+	:host([disabled]), :host([disabled]:hover), :host([disabled].focus-visible) {
 		cursor: default;
 		opacity: 0.75;
 	}
@@ -39,7 +40,7 @@ export const menuItemStyles = css`
 		border-top-color: transparent;
 	}
 
-	:host([last]:focus),
+	:host([last].focus-visible),
 	:host([last]:hover) {
 		border-bottom-color: var(--d2l-menu-border-color-hover);
 	}

package/components/menu/menu.js

@@ -2,6 +2,7 @@ import '../colors/colors.js';
 import '../icons/icon.js';
 import './menu-item-return.js';
 import { css, html, LitElement } from 'lit-element/lit-element.js';
+import { FocusVisiblePolyfillMixin } from '../../mixins/focus-visible-polyfill-mixin.js';
 import { HierarchicalViewMixin } from '../hierarchical-view/hierarchical-view-mixin.js';
 import { ThemeMixin } from '../../mixins/theme-mixin.js';
 
@@ -20,7 +21,7 @@ const keyCodes = {
  * @slot - Menu items
  * @fires d2l-menu-resize - Dispatched when size of menu changes (e.g., when nested menu of a different size is opened)
  */
-class Menu extends ThemeMixin(HierarchicalViewMixin(LitElement)) {
+class Menu extends ThemeMixin(HierarchicalViewMixin(FocusVisiblePolyfillMixin(LitElement))) {
 
 	static get properties() {
 		return {

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "1.208.2",
+  "version": "1.210.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
+  "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
   "publishConfig": {
     "access": "public"
@@ -48,7 +49,7 @@
     "@web/test-runner": "^0.13",
     "@web/test-runner-playwright": "^0.8.8",
     "axe-core": "^4",
-    "chalk": "^4",
+    "chalk": "^5",
     "eslint": "^7",
     "eslint-config-brightspace": "^0.16",
     "eslint-plugin-html": "^6",
@@ -56,9 +57,10 @@
     "eslint-plugin-lit": "^1",
     "eslint-plugin-sort-class-members": "^1",
     "lit-analyzer": "^1",
-    "node-sass": "^6",
+    "node-sass": "^7",
     "sinon": "^12",
-    "stylelint": "^14"
+    "stylelint": "^14",
+    "web-test-runner-performance": "^0.1.4"
   },
   "dependencies": {
     "@brightspace-ui/intl": "^3",

package/tools/perf-test-helper.js

@@ -1,45 +0,0 @@
-import chai from '@open-wc/testing/import-wrappers/chai.js';
-import { fixture } from '@open-wc/testing';
-
-const numComponents = 1000;
-
-export async function runTest(element) {
-	return new Promise((resolve) => {
-
-		let total = 0;
-		let count = 0;
-		window.d2lPerfTestInProgress = true;
-		document.body.addEventListener('d2l-component-perf', (e) => {
-			count++;
-			total += e.detail.value;
-			if (count === numComponents) {
-				const avg = Math.round(total / count);
-				delete window.d2lPerfTestInProgress;
-				resolve(avg);
-			}
-		});
-
-		for (let i = 0; i < numComponents; i++) {
-			fixture(element);
-		}
-
-	});
-}
-
-export const chaiPerf = (_chai, utils) => {
-
-	utils.addMethod(_chai.Assertion.prototype, 'performant', function perfTest(baseline) {
-		// eslint-disable-next-line no-invalid-this
-		const fixture = this._obj;
-		const result = runTest(fixture).then(results => {
-			new _chai.Assertion(results).to.be.below(baseline);
-		});
-		// eslint-disable-next-line no-invalid-this
-		this.then = result.then.bind(result);
-		// eslint-disable-next-line no-invalid-this
-		return this;
-	});
-
-};
-
-chai.use(chaiPerf);