@brightspace-ui/core 3.116.6 → 3.118.0

package/custom-elements.json

@@ -4759,10 +4759,6 @@
       "name": "d2l-form-dialog-demo",
       "path": "./components/form/demo/form-dialog-demo.js"
     },
-    {
-      "name": "d2l-form-native-demo",
-      "path": "./components/form/demo/form-native-demo.js"
-    },
     {
       "name": "d2l-form-panel-demo",
       "path": "./components/form/demo/form-panel-demo.js"
@@ -4778,100 +4774,6 @@
         }
       ]
     },
-    {
-      "name": "d2l-form-native",
-      "path": "./components/form/form-native.js",
-      "description": "A component that can be used to build sections containing interactive controls that are validated and submitted as a group.\nThese interactive controls are submitted using a native HTML form submission.",
-      "attributes": [
-        {
-          "name": "action",
-          "description": "The URL that processes the form submission.",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "enctype",
-          "description": "If the value of the method attribute is post, enctype is the MIME type of the form submission.",
-          "type": "'application/x-www-form-urlencoded'|'multipart/form-data'|'text/plain'",
-          "default": "\"application/x-www-form-urlencoded\""
-        },
-        {
-          "name": "method",
-          "description": "The HTTP method to submit the form with.",
-          "type": "'get'|'post'",
-          "default": "\"get\""
-        },
-        {
-          "name": "target",
-          "description": "Indicates where to display the response after submitting the form.",
-          "type": "'_self '|'_blank'|'_parent'|'_top'",
-          "default": "\"_self\""
-        },
-        {
-          "name": "track-changes",
-          "description": "Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.",
-          "type": "boolean",
-          "default": "false"
-        }
-      ],
-      "properties": [
-        {
-          "name": "action",
-          "attribute": "action",
-          "description": "The URL that processes the form submission.",
-          "type": "string",
-          "default": "\"\""
-        },
-        {
-          "name": "enctype",
-          "attribute": "enctype",
-          "description": "If the value of the method attribute is post, enctype is the MIME type of the form submission.",
-          "type": "'application/x-www-form-urlencoded'|'multipart/form-data'|'text/plain'",
-          "default": "\"application/x-www-form-urlencoded\""
-        },
-        {
-          "name": "method",
-          "attribute": "method",
-          "description": "The HTTP method to submit the form with.",
-          "type": "'get'|'post'",
-          "default": "\"get\""
-        },
-        {
-          "name": "target",
-          "attribute": "target",
-          "description": "Indicates where to display the response after submitting the form.",
-          "type": "'_self '|'_blank'|'_parent'|'_top'",
-          "default": "\"_self\""
-        },
-        {
-          "name": "trackChanges",
-          "attribute": "track-changes",
-          "description": "Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.",
-          "type": "boolean",
-          "default": "false"
-        }
-      ],
-      "events": [
-        {
-          "name": "submit",
-          "description": "Dispatched when the form is submitted. Cancelling this event will prevent form submission."
-        },
-        {
-          "name": "formdata",
-          "description": "Dispatched after the entry list representing the form's data is constructed. This happens when the form is submitted just prior to submission. The form data can be obtained from the `detail`'s `formData` property."
-        },
-        {
-          "name": "d2l-form-dirty",
-          "description": "Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not."
-        }
-      ],
-      "slots": [
-        {
-          "name": "",
-          "description": "The native and custom form elements that participate in validation and submission"
-        }
-      ]
-    },
     {
       "name": "d2l-form",
       "path": "./components/form/form.js",
@@ -4913,13 +4815,13 @@
           "name": "d2l-form-invalid",
           "description": "Dispatched when the form fails validation. The error map can be obtained from the `detail`'s `errors` property."
         },
-        {
-          "name": "d2l-form-submit",
-          "description": "Dispatched when the form is submitted. The form data can be obtained from the `detail`'s `formData` property."
-        },
         {
           "name": "d2l-form-dirty",
           "description": "Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not."
+        },
+        {
+          "name": "d2l-form-submit",
+          "description": "Dispatched when the form is submitted. The form data can be obtained from the `detail`'s `formData` property."
         }
       ],
       "slots": [
@@ -5171,10 +5073,6 @@
         }
       ]
     },
-    {
-      "name": "d2l-test-input-radio-label-simple",
-      "path": "./components/inputs/demo/input-radio-label-simple-test.js"
-    },
     {
       "name": "d2l-test-input-radio-label",
       "path": "./components/inputs/demo/input-radio-label-test.js"
@@ -5220,10 +5118,6 @@
         }
       ]
     },
-    {
-      "name": "d2l-test-input-radio-spacer",
-      "path": "./components/inputs/demo/input-radio-spacer-test.js"
-    },
     {
       "name": "d2l-test-input-select",
       "path": "./components/inputs/demo/input-select-test.js",
@@ -7017,6 +6911,86 @@
         }
       ]
     },
+    {
+      "name": "d2l-input-radio-group",
+      "path": "./components/inputs/input-radio-group.js",
+      "description": "A group of <d2l-input-radio> components.",
+      "attributes": [
+        {
+          "name": "label",
+          "description": "REQUIRED: Label for the input",
+          "type": "string"
+        },
+        {
+          "name": "label-hidden",
+          "description": "Hides the label visually",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "required",
+          "description": "Indicates that a value is required",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "skeleton",
+          "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
+          "type": "boolean"
+        },
+        {
+          "name": "name",
+          "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
+          "type": "string"
+        }
+      ],
+      "properties": [
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "REQUIRED: Label for the input",
+          "type": "string"
+        },
+        {
+          "name": "labelHidden",
+          "attribute": "label-hidden",
+          "description": "Hides the label visually",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "required",
+          "attribute": "required",
+          "description": "Indicates that a value is required",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
+          "type": "boolean"
+        },
+        {
+          "name": "name",
+          "attribute": "name",
+          "description": "Name of the form control. Submitted with the form as part of a name/value pair.",
+          "type": "string"
+        }
+      ],
+      "events": [
+        {
+          "name": "change",
+          "description": "Dispatched when the radio group's state changes"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "Radio components"
+        }
+      ]
+    },
     {
       "name": "d2l-input-radio-spacer",
       "path": "./components/inputs/input-radio-spacer.js",
@@ -7028,6 +7002,108 @@
         }
       ]
     },
+    {
+      "name": "d2l-input-radio",
+      "path": "./components/inputs/input-radio.js",
+      "description": "A radio input within a <d2l-input-radio-group>.",
+      "attributes": [
+        {
+          "name": "description",
+          "description": "ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "description": "REQUIRED: Label for the input",
+          "type": "string"
+        },
+        {
+          "name": "checked",
+          "description": "Checked state",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled",
+          "description": "Disables the input",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "supporting-hidden-when-unchecked",
+          "description": "Hides the supporting slot when unchecked",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "description": "Value of the input",
+          "type": "string",
+          "default": "\"on\""
+        },
+        {
+          "name": "skeleton",
+          "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
+          "type": "boolean"
+        }
+      ],
+      "properties": [
+        {
+          "name": "description",
+          "attribute": "description",
+          "description": "ACCESSIBILITY: Additional information communicated to screenreader users when focusing on the input",
+          "type": "string"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "REQUIRED: Label for the input",
+          "type": "string"
+        },
+        {
+          "name": "checked",
+          "attribute": "checked",
+          "description": "Checked state",
+          "type": "boolean"
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Disables the input",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "supportingHiddenWhenUnchecked",
+          "attribute": "supporting-hidden-when-unchecked",
+          "description": "Hides the supporting slot when unchecked",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Value of the input",
+          "type": "string",
+          "default": "\"on\""
+        },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Render the component as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton).",
+          "type": "boolean"
+        }
+      ],
+      "slots": [
+        {
+          "name": "inline-help",
+          "description": "Help text that will appear below the input. Use this only when other helpful cues are not sufficient, such as a carefully-worded label."
+        },
+        {
+          "name": "supporting",
+          "description": "Supporting information which will appear below and be aligned with the input."
+        }
+      ]
+    },
     {
       "name": "d2l-input-search",
       "path": "./components/inputs/input-search.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.116.6",
+  "version": "3.118.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/components/form/demo/form-native-demo.js

@@ -1,80 +0,0 @@
-
-import '../../button/button.js';
-import '../../inputs/input-date.js';
-import '../../inputs/input-date-time-range.js';
-import '../../inputs/input-text.js';
-import '../../validation/validation-custom.js';
-import '../form-native.js';
-import { css, html, LitElement } from 'lit';
-import { inputStyles } from '../../inputs/input-styles.js';
-import { selectStyles } from '../../inputs/input-select-styles.js';
-
-class FormNativeDemo extends LitElement {
-
-	static get styles() {
-		return [inputStyles, selectStyles, css`
-			:first-child.d2l-form-demo-container {
-				margin-top: 18px;
-			}
-			.d2l-form-demo-container {
-				margin-bottom: 10px;
-			}
-		`];
-	}
-
-	render() {
-		return html`
-			<d2l-form-native>
-				<div class="d2l-form-demo-container">
-					<d2l-input-text label="Name" type="text" name="name" required minlength="4" maxlength="8"></d2l-input-text>
-				</div>
-				<div class="d2l-form-demo-container">
-					<d2l-input-text label="Email" name="email" type="email"></d2l-input-text>
-				</div>
-				<div class="d2l-form-demo-container">
-					<d2l-validation-custom for="password" @d2l-validation-custom-validate=${this._validatePassword} failure-text="Expected hunter2 or 12345" ></d2l-validation-custom>
-					<d2l-input-text label="Password" id="password" name="password" required type="password"></d2l-input-text>
-				</div>
-				<fieldset class="d2l-form-demo-container">
-					<legend>Choose your favorite monster</legend>
-					<input type="radio" id="kraken" name="monster" value="kraken">
-					<label for="kraken">Kraken</label><br />
-					<input type="radio" id="sasquatch" name="monster" value="sasquatch">
-					<label for="sasquatch">Sasquatch</label><br />
-				</fieldset>
-				<div class="d2l-form-demo-container">
-					<label for="pet-select">Favorite Pet</label><br />
-					<select class="d2l-input-select" name="pets" id="pet-select" required>
-						<option value="">--Please choose an option--</option>
-						<option value="porpoise">Porpoise</option>
-						<option value="house hippo">House Hippo</option>
-						<option value="spiker monkey">Spider Monkey</option>
-						<option value="capybara">Capybara</option>
-					</select>
-				</div>
-				<d2l-input-date label="Date" name="my-date" required></d2l-input-date>
-				<div class="d2l-form-demo-container">
-					<label for="story">Tell us your story</label>
-						<textarea class="d2l-input" minlength="20" id="story" name="story" rows="5" cols="33">It was...</textarea>
-					</label>
-				</div>
-				<d2l-input-date-time-range label="Assignment Dates" required min-value="2018-08-27T12:30:00Z" max-value="2018-09-30T12:30:00Z"></d2l-input-date-time-range>
-				<div class="d2l-form-demo-container">
-					<label for="file">Super Secret File</label><br />
-					<input type="file" id="file" name="super-secret-file">
-				</div>
-				<button name="action" value="save" type="submit" @click=${this._onClick}>Save</button>
-			</d2l-form-native>
-		`;
-	}
-
-	_onClick(e) {
-		if (this.shadowRoot) this.shadowRoot.querySelector('d2l-form-native').requestSubmit(e.target);
-	}
-
-	_validatePassword(e) {
-		e.detail.resolve(e.detail.forElement.value === 'hunter2' || e.detail.forElement.value === '12345');
-	}
-
-}
-customElements.define('d2l-form-native-demo', FormNativeDemo);

package/components/form/demo/form-native.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<meta charset="UTF-8">
-	<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-	<script type="module">
-		import '../../demo/demo-page.js';
-		import './form-native-demo.js';
-	</script>
-</head>
-
-<body unresolved>
-
-	<d2l-demo-page page-title="d2l-form-native">
-
-		<h2>Basic</h2>
-		<d2l-demo-snippet>
-			<template>
-				<d2l-form-native-demo></d2l-form-native-demo>
-			</template>
-		</d2l-demo-snippet>
-
-	</d2l-demo-page>
-
-</body>
-
-</html>

package/components/form/form-mixin.js

@@ -1,202 +0,0 @@
-import './form-errory-summary.js';
-import '../tooltip/tooltip.js';
-import '../link/link.js';
-import { isCustomFormElement, isNativeFormElement } from './form-helper.js';
-import { getComposedActiveElement } from '../../helpers/focus.js';
-import { getUniqueId } from '../../helpers/uniqueId.js';
-import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
-import { localizeFormElement } from './form-element-localize-helper.js';
-
-export const FormMixin = superclass => class extends LocalizeCoreElement(superclass) {
-
-	static get properties() {
-		return {
-			/**
-			 * Indicates that the form should interrupt and warn on navigation if the user has unsaved changes on native elements.
-			 * @type {boolean}
-			 */
-			trackChanges: { type: Boolean, attribute: 'track-changes', reflect: true },
-			_errors: { type: Object },
-			_hasErrors: { type: Boolean, attribute: '_has-errors', reflect: true },
-		};
-	}
-
-	constructor() {
-		super();
-		this._onUnload = this._onUnload.bind(this);
-		this._onNativeSubmit = this._onNativeSubmit.bind(this);
-
-		this.trackChanges = false;
-		this._errors = new Map();
-		this._firstUpdateResolve = null;
-		this._firstUpdatePromise = new Promise((resolve) => {
-			this._firstUpdateResolve = resolve;
-		});
-		this._tooltips = new Map();
-		this._validationCustoms = new Set();
-
-		this.addEventListener('d2l-form-errors-change', this._onErrorsChange);
-		this.addEventListener('d2l-form-element-errors-change', this._onErrorsChange);
-		this.addEventListener('d2l-validation-custom-connected', this._validationCustomConnected);
-	}
-
-	connectedCallback() {
-		super.connectedCallback();
-		window.addEventListener('beforeunload', this._onUnload);
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		window.removeEventListener('beforeunload', this._onUnload);
-	}
-
-	firstUpdated(changedProperties) {
-		super.firstUpdated(changedProperties);
-		this.addEventListener('change', this._onFormElementChange);
-		this.addEventListener('input', this._onFormElementChange);
-		this.addEventListener('focusout', this._onFormElementChange);
-		this._firstUpdateResolve();
-	}
-
-	willUpdate(changedProperties) {
-		super.willUpdate(changedProperties);
-		if (changedProperties.has('_errors')) {
-			this._hasErrors = this._errors.size > 0;
-		}
-	}
-
-	// eslint-disable-next-line no-unused-vars
-	async requestSubmit(submitter) {
-		throw new Error('FormMixin.requestSubmit must be overridden');
-	}
-
-	async submit() {
-		throw new Error('FormMixin.submit must be overridden');
-	}
-
-	async validate() {
-		throw new Error('FormMixin.validate must be overridden');
-	}
-
-	_displayInvalid(ele, message) {
-		let tooltip = this._tooltips.get(ele);
-		if (!tooltip) {
-			tooltip = document.createElement('d2l-tooltip');
-			tooltip.for = ele.id;
-			tooltip.align = 'start';
-			tooltip.state = 'error';
-			ele.parentNode.append(tooltip);
-			this._tooltips.set(ele, tooltip);
-
-			tooltip.appendChild(document.createTextNode(message));
-		} else if (tooltip.innerText.trim() !== message.trim()) {
-			tooltip.textContent = '';
-			tooltip.appendChild(document.createTextNode(message));
-			tooltip.updatePosition();
-		}
-		ele.setAttribute('aria-invalid', 'true');
-	}
-
-	_displayValid(ele) {
-		const tooltip = this._tooltips.get(ele);
-		if (tooltip) {
-			this._tooltips.delete(ele);
-			tooltip.remove();
-		}
-		ele.setAttribute('aria-invalid', 'false');
-	}
-
-	_onErrorsChange(e) {
-		if (e.target === this) {
-			return;
-		}
-		e.stopPropagation();
-		this._updateErrors(e.target, e.detail.errors);
-	}
-
-	async _onFormElementChange(e) {
-		const ele = e.target;
-
-		if ((isNativeFormElement(ele) || isCustomFormElement(ele)) && e.type !== 'focusout') {
-			this._dirty = true;
-			/** Dispatched whenever any form element fires an `input` or `change` event. Can be used to track whether the form is dirty or not. */
-			this.dispatchEvent(new CustomEvent('d2l-form-dirty'));
-		}
-
-		if (!isNativeFormElement(ele)) {
-			return;
-		}
-		e.stopPropagation();
-		const errors = await this._validateFormElement(ele, e.type === 'focusout');
-		this._updateErrors(ele, errors);
-	}
-
-	_onNativeSubmit(e) {
-		e.preventDefault();
-		e.stopPropagation();
-		const submitter = e.submitter || getComposedActiveElement();
-		this.requestSubmit(submitter);
-	}
-
-	_onUnload(e) {
-		if (this.trackChanges && this._dirty) {
-			e.preventDefault();
-			e.returnValue = false;
-		}
-	}
-
-	_updateErrors(ele, errors) {
-
-		if (!this._errors.has(ele)) {
-			return false;
-		}
-		if (Array.from(errors).length === 0) {
-			this._errors.delete(ele);
-		} else {
-			this._errors.set(ele, errors);
-		}
-		const detail = { bubbles: true, composed: true, detail: { errors: this._errors } };
-		/** @ignore */
-		this.dispatchEvent(new CustomEvent('d2l-form-errors-change', detail));
-		this.requestUpdate('_errors');
-		return true;
-	}
-
-	async _validateFormElement(ele, showNewErrors) {
-		// if validation occurs before we've rendered,
-		// localization may not have loaded yet
-		await this._firstUpdatePromise;
-		ele.id = ele.id || getUniqueId();
-		if (isCustomFormElement(ele)) {
-			return ele.validate(showNewErrors);
-		} else if (isNativeFormElement(ele)) {
-			const customs = [...this._validationCustoms].filter(custom => custom.forElement === ele);
-			const results = await Promise.all(customs.map(custom => custom.validate()));
-			const errors = customs.map(custom => custom.failureText).filter((_, i) => !results[i]);
-			if (!ele.checkValidity()) {
-				const validationMessage = localizeFormElement(this.localize.bind(this), ele);
-				errors.unshift(validationMessage);
-			}
-			if (errors.length > 0 && (showNewErrors || ele.getAttribute('aria-invalid') === 'true')) {
-				this._displayInvalid(ele, errors[0]);
-			} else {
-				this._displayValid(ele);
-			}
-			return errors;
-		}
-		return [];
-	}
-
-	_validationCustomConnected(e) {
-		e.stopPropagation();
-		const custom = e.composedPath()[0];
-		this._validationCustoms.add(custom);
-
-		const onDisconnect = () => {
-			custom.removeEventListener('d2l-validation-custom-disconnected', onDisconnect);
-			this._validationCustoms.delete(custom);
-		};
-		custom.addEventListener('d2l-validation-custom-disconnected', onDisconnect);
-	}
-
-};