@brightspace-ui/core 2.174.1 → 2.175.0

package/components/inputs/demo/input-date.html

@@ -60,6 +60,29 @@
 					<d2l-input-date label="Date" required></d2l-input-date>
 				</template>
 			</d2l-demo-snippet>
+
+			<h2>Inline Help</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-date label="Date">
+						<div slot="inline-help">
+							Help text <b>right here</b>!
+						</div>
+					</d2l-input-date>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Inline Help (multiline)</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-date label="Date">
+						<div slot="inline-help">
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+							sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+						</div>
+					</d2l-input-date>
+				</template>
+			</d2l-demo-snippet>
 		</d2l-demo-page>
 	</body>
 </html>

package/components/inputs/demo/input-percent.html

@@ -70,6 +70,34 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Inline Help</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-percent label="Grade" value="92">
+						<div slot="inline-help">
+							Help text <b>right here</b>!
+						</div>
+					</d2l-input-percent>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Inline Help (multiline)</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-percent label="Grade" value="92">
+						<div slot="inline-help">
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+							sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+							Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+							nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+							reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+							pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+							qui officia deserunt mollit anim id est laborum.
+						</div>
+					</d2l-input-percent>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 		<script>
 			document.body.addEventListener('change', e => console.log(e, e.target.value));

package/components/inputs/demo/input-textarea.html

@@ -75,6 +75,34 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h3>Inline Help</h3>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-textarea label="Description">
+						<div slot="inline-help">
+							Help text <b>right here</b>!
+						</div>
+					</d2l-input-textarea>
+				</template>
+			</d2l-demo-snippet>
+
+			<h3>Inline Help (multiline)</h3>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-textarea label="Description">
+						<div slot="inline-help">
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+							sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+							Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+							nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+							reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+							pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+							qui officia deserunt mollit anim id est laborum.
+						</div>
+					</d2l-input-textarea>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 		<script>
 			document.body.addEventListener('input', e => {

package/components/inputs/input-date.js

@@ -300,6 +300,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 					style="${styleMap({ maxWidth: inputTextWidth })}"
 					.value="${this._formattedValue}">
 					${icon}
+					<slot slot="inline-help" name="inline-help"></slot>
 				</d2l-input-text>
 				${dropdownContent}
 			</d2l-dropdown>

package/components/inputs/input-percent.js

@@ -127,6 +127,7 @@ class InputPercent extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMix
 				value="${ifDefined(this.value)}"
 				value-align="end">
 					<slot slot="after" name="after"></slot>
+					<slot slot="inline-help" name="inline-help"></slot>
 			</d2l-input-number>
 		`;
 	}

package/components/inputs/input-textarea.js

@@ -6,6 +6,7 @@ import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
 import { getUniqueId } from '../../helpers/uniqueId.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { InputInlineHelpMixin } from './input-inline-help-mixin.js';
 import { inputLabelStyles } from './input-label-styles.js';
 import { inputStyles } from './input-styles.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
@@ -19,7 +20,7 @@ import { styleMap } from 'lit/directives/style-map.js';
  * @fires change - Dispatched when an alteration to the value is committed (typically after focus is lost) by the user
  * @fires input - Dispatched immediately after changes by the user
  */
-class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(LitElement))))) {
+class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(LitElement)))))) {
 
 	static get properties() {
 		return {
@@ -160,6 +161,7 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 
 		this._descriptionId = getUniqueId();
 		this._hovered = false;
+		this._inlineHelpId = getUniqueId();
 		this._textareaId = getUniqueId();
 	}
 
@@ -217,6 +219,7 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		const ariaInvalid = this.invalid ? 'true' : this.ariaInvalid;
 		const offscreenContainer = this.description ? html`<div class="d2l-offscreen" id="${this._descriptionId}">${this.description}</div>` : null;
 		const disabled = this.disabled || this.skeleton;
+		const ariaDescribedByIds = `${this.description ? this._descriptionId : ''} ${this._hasInlineHelp ? this._inlineHelpId : ''}`.trim();
 
 		const mirrorStyles = {};
 
@@ -234,7 +237,8 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 				<div class="d2l-input d2l-input-textarea-mirror" style="${styleMap(mirrorStyles)}" aria-invalid="${ifDefined(ariaInvalid)}">
 					${lines.map(line => html`${line}<br />`)}
 				</div>
-				<textarea aria-describedby="${ifDefined(this.description ? this._descriptionId : undefined)}"
+				<textarea
+					aria-describedby="${ifDefined(ariaDescribedByIds.length > 0 ? ariaDescribedByIds : undefined)}"
 					aria-invalid="${ifDefined(ariaInvalid)}"
 					aria-label="${ifDefined(this._getAriaLabel())}"
 					aria-required="${ifDefined(ariaRequired)}"
@@ -252,6 +256,7 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 					.value="${this.value}">${this.value}</textarea>
 				${this.validationError ? html`<d2l-tooltip for=${this._textareaId} state="error" align="start">${this.validationError}</d2l-tooltip>` : null}
 			</div>
+			${this._renderInlineHelp(this._inlineHelpId)}
 			${offscreenContainer}
 		`;
 

package/package.json

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