feat: apply hover effects anywhere on the component (#3796)

* feat: apply hover effects anywhere on the component * prevent styles applying to disabled items * fix styles * Apply styles to textarea * limit changes to d2l-input-text/area * Move event listeners to `connectedCallback`
BrightspaceUI · Jul 24, 2023 · b81e832 · b81e832
1 parent d8528c6
commit b81e832
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 6 deletions.
diff --git a/components/inputs/input-text.js b/components/inputs/input-text.js
@@ -329,17 +329,21 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
 		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);
-		container.removeEventListener('mouseover', this._handleMouseEnter);
-		container.removeEventListener('mouseout', this._handleMouseLeave);
 	}
 
 	firstUpdated(changedProperties) {
@@ -352,8 +356,6 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
 		if (!container) return;
 		container.addEventListener('blur', this._handleBlur, true);
 		container.addEventListener('focus', this._handleFocus, true);
-		container.addEventListener('mouseover', this._handleMouseEnter);
-		container.addEventListener('mouseout', this._handleMouseLeave);
 
 		// if initially hidden then update layout when it becomes visible
 		if (typeof(IntersectionObserver) === 'function') {
@@ -542,6 +544,12 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin(
 		));
 	}
 
+	_handleClick(e) {
+		const input = this.shadowRoot?.querySelector('.d2l-input');
+		if (!input || e.composedPath()[0] !== this) return;
+		input.focus();
+	}
+
 	_handleFocus() {
 		this._focused = true;
 	}

diff --git a/components/inputs/input-textarea.js b/components/inputs/input-textarea.js
@@ -1,5 +1,6 @@
 import '../tooltip/tooltip.js';
 import { css, html, LitElement } from 'lit';
+import { classMap } from 'lit-html/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { formatNumber } from '@brightspace-ui/intl/lib/number.js';
 import { FormElementMixin } from '../form/form-element-mixin.js';
@@ -86,7 +87,8 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 			 * Value of the input
 			 * @type {string}
 			 */
-			value: { type: String }
+			value: { type: String },
+			_hovered: { state: true }
 		};
 	}
 
@@ -157,6 +159,7 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		this.value = '';
 
 		this._descriptionId = getUniqueId();
+		this._hovered = false;
 		this._textareaId = getUniqueId();
 	}
 
@@ -192,6 +195,16 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		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() {
@@ -211,6 +224,11 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		if (this.rows > 0) mirrorStyles.minHeight = `calc(${this.rows + 1}rem + 2px)`;
 		if (this.maxRows > 0) mirrorStyles.maxHeight = `calc(${this.maxRows + 1}rem + 2px)`;
 
+		const inputClasses = {
+			'd2l-input': true,
+			'd2l-input-focus': !this.disabled && this._hovered
+		};
+
 		const textarea = html`
 			<div class="d2l-input-textarea-container d2l-skeletize">
 				<div class="d2l-input d2l-input-textarea-mirror" style="${styleMap(mirrorStyles)}" aria-invalid="${ifDefined(ariaInvalid)}">
@@ -222,7 +240,7 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 					aria-required="${ifDefined(ariaRequired)}"
 					@blur="${this._handleBlur}"
 					@change="${this._handleChange}"
-					class="d2l-input"
+					class=${classMap(inputClasses)}
 					?disabled="${disabled}"
 					id="${this._textareaId}"
 					@input="${this._handleInput}"
@@ -307,6 +325,12 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		));
 	}
 
+	_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;
@@ -316,6 +340,14 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
 		e.preventDefault();
 	}
 
+	_handleMouseEnter() {
+		this._hovered = true;
+	}
+
+	_handleMouseLeave() {
+		this._hovered = false;
+	}
+
 }
 
 customElements.define('d2l-input-textarea', InputTextArea);