@brightspace-ui/core 2.174.1 → 2.175.1

package/components/button/README.md

@@ -175,6 +175,27 @@ To make your `d2l-button-icon` accessible, use the following properties when app
 </d2l-button-icon>
 ```
 
+## Add Button [d2l-button-add]
+
+The `d2l-button-add` element is for quickly adding new items inline (for example in a list).
+
+<!-- docs: demo code properties name:d2l-button-add display:block autoSize:false size:xsmall -->
+```html
+<script type="module">
+  import '@brightspace-ui/core/components/button/button-add.js';
+</script>
+<d2l-button-add text="Add New Item"></d2l-button-add>
+```
+
+<!-- docs: start hidden content -->
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `text` | String, required | The text associated with the button. When mode is "icon-and-text", this text is displayed next to the icon. Otherwise this text is in a tooltip. |
+| `mode` | String | Display mode of the component. Defaults to "icon" (plus icon is always visible). Other options are "icon-and-text" (plus icon and text are always visible), and "icon-when-interacted" (plus icon is only visible when hover or focus). |
+<!-- docs: end hidden content -->
+
 ## Floating Buttons [d2l-floating-buttons]
 
 See [floating buttons](https://github.com/BrightspaceUI/core/tree/main/components/button/floating-buttons.md).

package/components/button/button-add.js

@@ -11,9 +11,9 @@ import { PropertyRequiredMixin } from '../../mixins/property-required/property-r
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 
 const MODE = {
-	ICON: 'icon',
-	ICON_AND_TEXT: 'icon-and-text',
-	ICON_WHEN_INTERACTED: 'icon-when-interacted'
+	icon: 'icon',
+	icon_and_text: 'icon-and-text',
+	icon_when_interacted: 'icon-when-interacted'
 };
 
 /**
@@ -23,12 +23,12 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 	static get properties() {
 		return {
 			/**
-			 * Display mode of the component. Defaults to "icon" (plus icon is always visible). Other options are "icon-and-text" (plus icon and text are always visible), and "icon-when-interacted" (plus icon is only visible when hover or focus).
+			 * Display mode of the component. Defaults to `icon` (plus icon is always visible). Other options are `icon-and-text` (plus icon and text are always visible), and `icon-when-interacted` (plus icon is only visible when hover or focus).
 			 * @type {'icon'|'icon-and-text'|'icon-when-interacted'}
 			 */
 			mode: { type: String, reflect: true },
 			/**
-			 * When text-visible is true, the text to show in the button. When text-visible is false, the text to show in the tooltip.
+			 * The text associated with the button. When mode is `icon-and-text` this text is displayed next to the icon, otherwise this text is in a tooltip.
 			 * @type {string}
 			 */
 			text: { type: String, required: true }
@@ -155,7 +155,7 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 	constructor() {
 		super();
 
-		this.mode = MODE.ICON;
+		this.mode = MODE.icon;
 
 		this._buttonId = getUniqueId();
 	}
@@ -166,13 +166,13 @@ class ButtonAdd extends RtlMixin(PropertyRequiredMixin(FocusMixin(LocalizeCoreEl
 
 	render() {
 		const text = this.text || this.localize('components.button-add.addItem');
-		const id = !this.mode !== MODE.ICON_AND_TEXT ? this._buttonId : undefined;
-		const offset = this.mode === MODE.ICON_WHEN_INTERACTED ? 23 : 18;
+		const id = !this.mode !== MODE.icon_and_text ? this._buttonId : undefined;
+		const offset = this.mode === MODE.icon_when_interacted ? 23 : 18;
 
-		const content = this.mode !== MODE.ICON_AND_TEXT
-			? html`<d2l-button-add-icon-text ?visible-on-ancestor="${this.mode === MODE.ICON_WHEN_INTERACTED}" animation-type="opacity"></d2l-button-add-icon-text>`
+		const content = this.mode !== MODE.icon_and_text
+			? html`<d2l-button-add-icon-text ?visible-on-ancestor="${this.mode === MODE.icon_when_interacted}" animation-type="opacity"></d2l-button-add-icon-text>`
 			: html`<d2l-button-add-icon-text text="${text}"></d2l-button-add-icon-text>`;
-		const tooltip = this.mode !== MODE.ICON_AND_TEXT
+		const tooltip = this.mode !== MODE.icon_and_text
 			? html`<d2l-tooltip class="vdiff-target" delay="100" offset="${offset}" for="${this._buttonId}" for-type="label">${text}</d2l-tooltip>`
 			: nothing;
 

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/custom-elements.json

@@ -350,29 +350,29 @@
       "attributes": [
         {
           "name": "text",
-          "description": "When text-visible is true, the text to show in the button. When text-visible is false, the text to show in the tooltip.",
+          "description": "The text associated with the button. When mode is `icon-and-text` this text is displayed next to the icon, otherwise this text is in a tooltip.",
           "type": "string"
         },
         {
           "name": "mode",
-          "description": "Display mode of the component. Defaults to \"icon\" (plus icon is always visible). Other options are \"icon-and-text\" (plus icon and text are always visible), and \"icon-when-interacted\" (plus icon is only visible when hover or focus).",
+          "description": "Display mode of the component. Defaults to `icon` (plus icon is always visible). Other options are `icon-and-text` (plus icon and text are always visible), and `icon-when-interacted` (plus icon is only visible when hover or focus).",
           "type": "'icon'|'icon-and-text'|'icon-when-interacted'",
-          "default": "\"ICON\""
+          "default": "\"icon\""
         }
       ],
       "properties": [
         {
           "name": "text",
           "attribute": "text",
-          "description": "When text-visible is true, the text to show in the button. When text-visible is false, the text to show in the tooltip.",
+          "description": "The text associated with the button. When mode is `icon-and-text` this text is displayed next to the icon, otherwise this text is in a tooltip.",
           "type": "string"
         },
         {
           "name": "mode",
           "attribute": "mode",
-          "description": "Display mode of the component. Defaults to \"icon\" (plus icon is always visible). Other options are \"icon-and-text\" (plus icon and text are always visible), and \"icon-when-interacted\" (plus icon is only visible when hover or focus).",
+          "description": "Display mode of the component. Defaults to `icon` (plus icon is always visible). Other options are `icon-and-text` (plus icon and text are always visible), and `icon-when-interacted` (plus icon is only visible when hover or focus).",
           "type": "'icon'|'icon-and-text'|'icon-when-interacted'",
-          "default": "\"ICON\""
+          "default": "\"icon\""
         },
         {
           "name": "documentLocaleSettings",

package/package.json

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