fix: Relative input-widths use container's size

BrightspaceUI · Sep 27, 2024 · 98e1ef3 · 98e1ef3
1 parent 3a1da26
commit 98e1ef3
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 2 deletions.
diff --git a/components/inputs/input-number.js b/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,6 +179,7 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
 			 * @ignore
 			 */
 			valueTrailingZeroes: { type: String, attribute: 'value-trailing-zeroes' },
+			_afterSlotWidth: { type: Number },
 			_hintType: { type: Number },
 			_formattedValue: { type: String }
 		};
@@ -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;
 	}

diff --git a/components/inputs/test/input-number.vdiff.js b/components/inputs/test/input-number.vdiff.js
@@ -17,6 +17,7 @@ describe('d2l-input-number', () => {
 		{ name: 'disabled', template: html`<d2l-input-number label="Number" value="10" disabled></d2l-input-number>` },
 		{ name: 'placeholder', template: html`<d2l-input-number label="Number" placeholder="Number..."></d2l-input-number>` },
 		{ name: 'default-value', template: html`<d2l-input-number label="Number" value="10"></d2l-input-number>` },
+		{ name: 'percentage-input-width', template: html`<d2l-input-number input-width="50%"></d2l-input-number>` },
 		{
 			name: 'after-slot',
 			template: html`
@@ -25,6 +26,14 @@ describe('d2l-input-number', () => {
 				</d2l-input-number>
 			`
 		},
+		{
+			name: 'percentage-input-width-after-slot',
+			template: html`
+				<d2l-input-number label="Help Text" input-width="50%">
+					<d2l-button-icon icon="tier1:help" text="help" slot="after"></d2l-button-icon>
+				</d2l-input-number>
+			`
+		},
 		{ name: 'trailing-zeroes', template: html`<d2l-input-number label="Number" value-trailing-zeroes="1.000" trailing-zeroes></d2l-input-number>` },
 		{
 			name: 'inline-help',
@@ -91,6 +100,26 @@ describe('d2l-input-number', () => {
 		await expect(elem).to.be.golden();
 	});
 
+	it('right side tooltip', async() => {
+		const elem = await fixture(
+			html`<d2l-input-number label="Label" value=1 max=0 label-hidden></d2l-input-number>`,
+			{ viewport: { width:600, height:80 } }
+		);
+		await focusElem(elem);
+		await oneEvent(elem, 'd2l-tooltip-show');
+		await expect(elem).to.be.golden();
+	});
+
+	it('right side tooltip with percentage input-width', async() => {
+		const elem = await fixture(
+			html`<d2l-input-number label="Label" value=1 max=0 label-hidden input-width="50%"></d2l-input-number>`,
+			{ viewport: { width:800, height:80 } }
+		);
+		await focusElem(elem);
+		await oneEvent(elem, 'd2l-tooltip-show');
+		await expect(elem).to.be.golden();
+	});
+
 	describe('skeleton', () => {
 		[
 			{ name: 'simple', template: html`<d2l-input-number skeleton label="Number"></d2l-input-number>` },