@brightspace-ui/core 2.173.2 → 2.174.1

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

@@ -105,6 +105,34 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Inline Help</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-number label="Age" value="18">
+						<div slot="inline-help">
+							Help text <b>right here</b>!
+						</div>
+					</d2l-input-number>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Inline Help (multiline)</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-number label="Age" value="18">
+						<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-number>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 		<script>
 			document.body.addEventListener('change', e => console.log('change', e.srcElement.value));

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

@@ -36,6 +36,34 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Search Input with Inline Help</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-search label="Search" value="apples" placeholder="Search for some stuff">
+						<div slot="inline-help">
+							Help text <b>right here</b>!
+						</div>
+					</d2l-input-search>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Search Input with Inline Help (multiline)</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-search label="Search" value="apples" placeholder="Search for some stuff">
+						<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-search>
+				</template>
+			</d2l-demo-snippet>
+
 			<script>
 				document.body.addEventListener('d2l-input-search-searched', (e) => {
 					// eslint-disable-next-line no-console

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

@@ -136,6 +136,34 @@
 				</template>
 			</d2l-demo-snippet>
 
+			<h2>Inline Help</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-text label="Name">
+						<div slot="inline-help">
+							Help text <b>right here</b>!
+						</div>
+					</d2l-input-text>
+				</template>
+			</d2l-demo-snippet>
+
+			<h2>Inline help (multiline) checkbox</h2>
+			<d2l-demo-snippet>
+				<template>
+					<d2l-input-text label="Name">
+						<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-text>
+				</template>
+			</d2l-demo-snippet>
+
 		</d2l-demo-page>
 	</body>
 </html>

package/components/inputs/input-number.js

@@ -363,6 +363,7 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 					<slot slot="left" name="left"></slot>
 					<slot slot="right" name="right"></slot>
 					<slot slot="after" name="after"></slot>
+					<slot slot="inline-help" name="inline-help"></slot>
 			</d2l-input-text>
 			${this._getTooltip()}
 		`;

package/components/inputs/input-search.js

@@ -140,6 +140,7 @@ class InputSearch extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement)))
 				type="search"
 				.value="${this.value}">
 				${search}
+				<slot slot="inline-help" name="inline-help"></slot>
 			</d2l-input-text>
 		`;
 	}

package/components/inputs/input-text.js

@@ -7,6 +7,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';
@@ -25,7 +26,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 InputText extends PropertyRequiredMixin(FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(LitElement)))))) {
+class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(RtlMixin(LitElement))))))) {
 
 	static get properties() {
 		return {
@@ -278,6 +279,7 @@ class InputText extends PropertyRequiredMixin(FocusMixin(LabelledMixin(FormEleme
 		this._focused = false;
 		this._hasAfterContent = false;
 		this._hovered = false;
+		this._inlineHelpId = getUniqueId();
 		this._inputId = getUniqueId();
 		this._intersectionObserver = null;
 		this._isIntersecting = false;
@@ -427,11 +429,13 @@ class InputText extends PropertyRequiredMixin(FocusMixin(LabelledMixin(FormEleme
 		const unit = this.unit
 			? html`<span aria-hidden="true" class="d2l-input-unit" @click="${this._handleUnitClick}">${this.unit}</span>`
 			: null;
+		const ariaDescribedByIds = `${this.description ? this._descriptionId : ''} ${this._hasInlineHelp ? this._inlineHelpId : ''}`.trim();
 
 		const input = html`
 			<div class="d2l-input-container">
 				<div class="d2l-input-text-container d2l-skeletize" style="${styleMap(inputContainerStyles)}">
-					<input aria-describedby="${ifDefined(this.description ? this._descriptionId : undefined)}"
+					<input
+						aria-describedby="${ifDefined(ariaDescribedByIds.length > 0 ? ariaDescribedByIds : undefined)}"
 						aria-haspopup="${ifDefined(this.ariaHaspopup)}"
 						aria-invalid="${ifDefined(ariaInvalid)}"
 						aria-label="${ifDefined(this._getAriaLabel())}"
@@ -465,6 +469,7 @@ class InputText extends PropertyRequiredMixin(FocusMixin(LabelledMixin(FormEleme
 					${ (!isValid && !this.hideInvalidIcon && !this._focused) ? html`<div class="d2l-input-text-invalid-icon" style="${styleMap(invalidIconStyles)}" @click="${this._handleInvalidIconClick}"></div>` : null}
 				</div><div id="after-slot" class="d2l-skeletize" ?hidden="${!this._hasAfterContent}"><slot name="after" @slotchange="${this._handleAfterSlotChange}"></slot></div>
 			</div>
+			${this._renderInlineHelp(this._inlineHelpId)}
 			${offscreenContainer}
 		`;
 

package/package.json

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