@brightspace-ui/core 3.174.1 → 3.174.2

package/components/inputs/input-text.js

@@ -210,6 +210,14 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 					display: inline-block;
 					vertical-align: bottom;
 				}
+				:host(:not([skeleton])) .d2l-input-label {
+					margin: 0;
+					padding-block: 0 0.4rem;
+					padding-inline: 0;
+				}
+				:host(:not([skeleton]):not([input-width])) .d2l-input-label {
+					width: 100%;
+				}
 				.d2l-input-container {
 					display: flex;
 				}
@@ -301,8 +309,6 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 
 		this._handleBlur = this._handleBlur.bind(this);
 		this._handleFocus = this._handleFocus.bind(this);
-		this._handleMouseEnter = this._handleMouseEnter.bind(this);
-		this._handleMouseLeave = this._handleMouseLeave.bind(this);
 		this._perfMonitor = new PerfMonitor(this);
 	}
 
@@ -361,18 +367,12 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		if (this.hasAttribute('aria-label')) {
 			this.labelRequired = false;
 		}
-		this.addEventListener('mouseover', this._handleMouseEnter);
-		this.addEventListener('mouseout', this._handleMouseLeave);
-		this.addEventListener('click', this._handleClick);
 	}
 
 	disconnectedCallback() {
 		super.disconnectedCallback();
 		if (this._intersectionObserver) this._intersectionObserver.disconnect();
 		const container = this.shadowRoot && this.shadowRoot.querySelector('.d2l-input-text-container');
-		this.removeEventListener('mouseover', this._handleMouseEnter);
-		this.removeEventListener('mouseout', this._handleMouseLeave);
-		this.removeEventListener('click', this._handleClick);
 		if (!container) return;
 		container.removeEventListener('blur', this._handleBlur, true);
 		container.removeEventListener('focus', this._handleFocus, true);
@@ -430,6 +430,9 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		const inputContainerStyles = {
 			maxWidth: this.inputWidth
 		};
+		const labelStyles = {
+			minWidth: this.skeleton ? undefined : this.inputWidth
+		};
 
 		const firstSlotName = (this.dir === 'rtl') ? 'right' : 'left';
 		const lastSlotName = (this.dir === 'rtl') ? 'left' : 'right';
@@ -453,7 +456,10 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 
 		const input = html`
 			<div class="d2l-input-container">
-				<div class="d2l-input-text-container d2l-skeletize" style="${styleMap(inputContainerStyles)}">
+				<div class="d2l-input-text-container d2l-skeletize"
+						@mouseenter="${this._handleMouseEnter}"
+						@mouseleave="${this._handleMouseLeave}"
+						style="${styleMap(inputContainerStyles)}">
 					<input
 						aria-describedby="${ifDefined(ariaDescribedByIds.length > 0 ? ariaDescribedByIds : undefined)}"
 						aria-haspopup="${ifDefined(this.ariaHaspopup)}"
@@ -496,7 +502,7 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		let label = nothing;
 		if (this.label && !this.labelHidden && !this.labelledBy) {
 			const unitLabel = this._getUnitLabel();
-			label = html`<label class="d2l-input-label d2l-skeletize" for="${this._inputId}">${this.label}${unitLabel ? html`<span class="d2l-offscreen">${unitLabel}</span>` : ''}</label>`;
+			label = html`<label class="d2l-input-label d2l-skeletize" for="${this._inputId}" style="${styleMap(labelStyles)}">${this.label}${unitLabel ? html`<span class="d2l-offscreen">${unitLabel}</span>` : ''}</label>`;
 		}
 
 		let tooltip = nothing;
@@ -587,12 +593,6 @@ class InputText extends InputInlineHelpMixin(PropertyRequiredMixin(FocusMixin(La
 		));
 	}
 
-	_handleClick(e) {
-		const input = this.shadowRoot?.querySelector('.d2l-input');
-		if (!input || e.composedPath()[0] !== this) return;
-		input.focus();
-	}
-
 	_handleFocus() {
 		this._focused = true;
 	}

package/components/inputs/input-textarea.js

@@ -92,8 +92,7 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 			 * Value of the input
 			 * @type {string}
 			 */
-			value: { type: String },
-			_hovered: { state: true }
+			value: { type: String }
 		};
 	}
 
@@ -109,6 +108,14 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 				display: inline-block;
 				vertical-align: bottom;
 			}
+			:host(:not([skeleton])) .d2l-input-label {
+				margin: 0;
+				padding-block: 0 0.4rem;
+				padding-inline: 0;
+			}
+			:host(:not([skeleton]):not([input-width])) .d2l-input-label {
+				width: 100%;
+			}
 			.d2l-input-textarea-container {
 				height: 100%;
 				max-width: 100%;
@@ -159,7 +166,6 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 		this.value = '';
 
 		this._descriptionId = getUniqueId();
-		this._hovered = false;
 		this._inlineHelpId = getUniqueId();
 		this._textareaId = getUniqueId();
 	}
@@ -196,16 +202,6 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 		if (this.hasAttribute('aria-label')) {
 			this.labelRequired = false;
 		}
-		this.addEventListener('mouseover', this._handleMouseEnter);
-		this.addEventListener('mouseout', this._handleMouseLeave);
-		this.addEventListener('click', this._handleClick);
-	}
-
-	disconnectedCallback() {
-		super.disconnectedCallback();
-		this.removeEventListener('mouseover', this._handleMouseEnter);
-		this.removeEventListener('mouseout', this._handleMouseLeave);
-		this.removeEventListener('click', this._handleClick);
 	}
 
 	render() {
@@ -227,12 +223,14 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 		if (this.maxRows > 0) mirrorStyles.maxHeight = `calc(${this.maxRows + 1}rem + 2px)`;
 
 		const inputClasses = {
-			'd2l-input': true,
-			'd2l-input-focus': !this.disabled && this._hovered
+			'd2l-input': true
 		};
 		const inputContainerStyles = {
 			maxWidth: this.inputWidth
 		};
+		const labelStyles = {
+			minWidth: this.skeleton ? undefined : this.inputWidth
+		};
 
 		const textarea = html`
 			<div class="d2l-input-textarea-container d2l-skeletize" style="${styleMap(inputContainerStyles)}">
@@ -264,7 +262,7 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 
 		if (this.label && !this.labelHidden && !this.labelledBy) {
 			return html`
-				<label class="d2l-input-label d2l-skeletize" for="${this._textareaId}">${this.label}</label>
+				<label class="d2l-input-label d2l-skeletize" for="${this._textareaId}" style="${styleMap(labelStyles)}">${this.label}</label>
 				${textarea}`;
 		}
 
@@ -332,12 +330,6 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 		));
 	}
 
-	_handleClick(e) {
-		const input = this.shadowRoot && this.shadowRoot.querySelector('textarea');
-		if (!input || e.composedPath()[0] !== this) return;
-		input.focus();
-	}
-
 	_handleInput(e) {
 		this.value = e.target.value;
 		return true;
@@ -347,14 +339,6 @@ class InputTextArea extends InputInlineHelpMixin(FocusMixin(LabelledMixin(FormEl
 		e.preventDefault();
 	}
 
-	_handleMouseEnter() {
-		this._hovered = true;
-	}
-
-	_handleMouseLeave() {
-		this._hovered = false;
-	}
-
 }
 
 customElements.define('d2l-input-textarea', InputTextArea);

package/package.json

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