@brightspace-ui/core 3.45.0 → 3.46.0

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

@@ -47,13 +47,6 @@
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Empty Text</h2>
-			<d2l-demo-snippet>
-				<template>
-					<d2l-input-date label="Reminder Date" empty-text="No reminder date ever entered"></d2l-input-date>
-				</template>
-			</d2l-demo-snippet>
-
 			<h2>Required</h2>
 			<d2l-demo-snippet>
 				<template>

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

@@ -5,7 +5,9 @@
 		<meta charset="UTF-8">
 		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
 		<script type="module">
+			import '../../button/button-icon.js';
 			import '../../demo/demo-page.js';
+			import '../../icons/icon.js';
 			import '../input-number.js';
 		</script>
 	</head>

package/components/inputs/docs/input-date-time.md

@@ -47,7 +47,6 @@ Note: All `*value` properties should be in ISO 8601 calendar date format (`YYYY-
 |--|--|--|
 | `label` | String, **required** | Accessible label for the input |
 | `disabled` | Boolean | Disables the input |
-| `empty-text` | String | Text to reassure users that they can choose not to provide a value in this field (usually not necessary) |
 | `label-hidden` | Boolean | Hides the label visually (moves it to the input's `aria-label` attribute) |
 | `labelled-by` | String | HTML id of an element in the same shadow root which acts as the input's label |
 | `max-value` | String | Maximum valid date that could be selected by a user. |

package/components/inputs/input-date.js

@@ -38,11 +38,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			 * @type {boolean}
 			 */
 			disabled: { type: Boolean },
-			/**
-			 * ADVANCED: Text that appears as a placeholder in the input to reassure users that they can choose not to provide a value (usually not necessary)
-			 * @type {string}
-			 */
-			emptyText: { type: String, attribute: 'empty-text' },
 			/**
 			 * @ignore
 			 * Optionally add a 'Now' button to be used in date-time pickers only.
@@ -149,7 +144,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		super();
 
 		this.disabled = false;
-		this.emptyText = '';
 		/** @ignore */
 		this.hasNow = false;
 		this.labelHidden = false;
@@ -224,8 +218,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			this.updateComplete.then(() => tryUpdateHiddenContentWidth());
 		});
 
-		this._formattedValue = this.emptyText ? this.emptyText : '';
-
 		await (document.fonts ? document.fonts.ready : Promise.resolve());
 
 		// resize observer needed to handle case where it's initially hidden
@@ -283,7 +275,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			<div aria-hidden="true" class="d2l-input-date-hidden-text">
 				<div>${formattedWideDate}</div>
 				<div>${shortDateFormat}</div>
-				<div>${this.emptyText}</div>
 			</div>
 			${errorTooltip}
 			<d2l-dropdown ?disabled="${this.disabled || this.skeleton}" no-auto-open ?prefer-fixed-positioning="${this.preferFixedPositioning}">
@@ -294,7 +285,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 					@change="${this._handleChange}"
 					class="d2l-dropdown-opener vdiff-target"
 					instructions="${ifDefined((this._showInfoTooltip && !errorTooltip && !this.invalid && this.childErrors.size === 0 && this._inputTextFocusShowTooltip) ? this.localize(`${this._namespace}.openInstructions`, { format: shortDateFormat }) : undefined)}"
-					description="${ifDefined(this.emptyText ? this.emptyText : undefined)}"
 					?disabled="${this.disabled}"
 					@focus="${this._handleInputTextFocus}"
 					@keydown="${this._handleKeydown}"
@@ -361,7 +351,6 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 
 	_handleBlur() {
 		this._showInfoTooltip = true;
-		this._setFormattedValue(); // needed for case with empty text click on input-text then blur
 		this.requestValidate(true);
 	}
 
@@ -528,7 +517,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 	}
 
 	_setFormattedValue() {
-		this._formattedValue = this._shownValue ? formatISODateInUserCalDescriptor(this._shownValue) : (this.emptyText ? this.emptyText : '');
+		this._formattedValue = this._shownValue ? formatISODateInUserCalDescriptor(this._shownValue) : '';
 	}
 
 	async _updateValueDispatchEvent(dateInISO, setToNow) {

package/components/inputs/input-number.js

@@ -8,6 +8,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { LabelledMixin } from '../../mixins/labelled/labelled-mixin.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 const HINT_TYPES = {
 	NONE: 0,
@@ -178,8 +179,9 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 			 * @ignore
 			 */
 			valueTrailingZeroes: { type: String, attribute: 'value-trailing-zeroes' },
-			_hintType: { type: Number },
-			_formattedValue: { type: String }
+			_afterSlotWidth: { state: true },
+			_hintType: { state: true },
+			_formattedValue: { state: true }
 		};
 	}
 
@@ -218,6 +220,7 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 		this._trailingZeroes = false;
 		this._valueTrailingZeroes = '';
 		this._descriptor = getNumberDescriptor();
+		this._afterSlotWidth = 0;
 	}
 
 	get maxFractionDigits() {
@@ -337,6 +340,11 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 
 	render() {
 		const valueAlign = (this.valueAlign === 'end') ? 'end' : 'start';
+		const hasRelativeInputWidth = this.inputWidth.includes('%');
+		const inputWidthStyle = {
+			width : '100%',
+			maxWidth: `calc(${this.inputWidth} + ${this._afterSlotWidth}px)`
+		};
 		return html`
 			<d2l-input-text
 				autocomplete="${ifDefined(this.autocomplete)}"
@@ -351,7 +359,7 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 				.forceInvalid="${this.invalid}"
 				?hide-invalid-icon="${this.hideInvalidIcon}"
 				id="${this._inputId}"
-				input-width="${this.inputWidth}"
+				input-width="${hasRelativeInputWidth ? 'none' : this.inputWidth}"
 				@invalid-change="${this._handleInvalidChange}"
 				label="${ifDefined(this.label)}"
 				?label-hidden="${this.labelHidden || this.labelledBy}"
@@ -360,13 +368,14 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 				placeholder="${ifDefined(this.placeholder)}"
 				?required="${this.required}"
 				?skeleton="${this.skeleton}"
+				style="${ifDefined(hasRelativeInputWidth ? styleMap(inputWidthStyle) : undefined)}"
 				unit="${ifDefined(this.unit)}"
 				unit-label="${ifDefined(this.unitLabel)}"
 				.value="${this._formattedValue}"
 				value-align="${valueAlign}">
 					<slot slot="left" name="left"></slot>
 					<slot slot="right" name="right"></slot>
-					<slot slot="after" name="after"></slot>
+					<slot slot="after" name="after" @slotchange=${this._handleAfterSlotChange}></slot>
 					<slot slot="inline-help" name="inline-help"></slot>
 			</d2l-input-text>
 			${this._getTooltip()}
@@ -439,6 +448,13 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 		}
 	}
 
+	async _handleAfterSlotChange(e) {
+		const nodes = e.target.assignedNodes();
+		const inputTextElem = this.shadowRoot.querySelector('d2l-input-text');
+		await inputTextElem.updateComplete;
+		this._afterSlotWidth = nodes.reduce((width, ele) => width + ele.clientWidth, 0);
+	}
+
 	_handleBlur() {
 		this._hintType = HINT_TYPES.NONE;
 	}

package/custom-elements.json

@@ -5961,12 +5961,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "empty-text",
-          "description": "ADVANCED: Text that appears as a placeholder in the input to reassure users that they can choose not to provide a value (usually not necessary)",
-          "type": "string",
-          "default": "\"\""
-        },
         {
           "name": "label-hidden",
           "description": "Hides the label visually. Hidden labels are still read by screen readers so make sure to set an appropriate label.",
@@ -6032,13 +6026,6 @@
           "type": "boolean",
           "default": "false"
         },
-        {
-          "name": "emptyText",
-          "attribute": "empty-text",
-          "description": "ADVANCED: Text that appears as a placeholder in the input to reassure users that they can choose not to provide a value (usually not necessary)",
-          "type": "string",
-          "default": "\"\""
-        },
         {
           "name": "labelHidden",
           "attribute": "label-hidden",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.45.0",
+  "version": "3.46.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -49,7 +49,7 @@
     "@brightspace-ui/testing": "^1",
     "@rollup/plugin-dynamic-import-vars": "^2",
     "@rollup/plugin-node-resolve": "^15",
-    "@rollup/plugin-replace": "^5",
+    "@rollup/plugin-replace": "^6",
     "@web/dev-server": "^0.4",
     "chalk": "^5",
     "eslint": "^8",