From 91d4c7639213f1b131f2582864f071c0711f277f Mon Sep 17 00:00:00 2001 From: GZolla <43836485+GZolla@users.noreply.github.com> Date: Fri, 14 Jul 2023 13:12:28 -0700 Subject: [PATCH] limit changes to d2l-input-text/area --- components/inputs/input-styles.js | 18 +++++-------- components/inputs/input-text.js | 16 +++++++++--- components/inputs/input-textarea.js | 40 +++++++++++++++++++++++++++-- 3 files changed, 57 insertions(+), 17 deletions(-) diff --git a/components/inputs/input-styles.js b/components/inputs/input-styles.js index 31aca43330..863a2729c8 100644 --- a/components/inputs/input-styles.js +++ b/components/inputs/input-styles.js @@ -25,7 +25,7 @@ export const inputStyles = css` width: 100%; } .d2l-input, - :host(:hover) .d2l-input:disabled, + .d2l-input:hover:disabled, .d2l-input:focus:disabled, [aria-invalid="true"].d2l-input:disabled { border-color: var(--d2l-input-border-color, var(--d2l-color-galena)); @@ -43,19 +43,15 @@ export const inputStyles = css` font-size: 0.8rem; font-weight: 400; } - :host(:hover) .d2l-input, + .d2l-input:hover, .d2l-input:focus, .d2l-input-focus { + border-color: var(--d2l-color-celestine); border-width: 2px; outline-style: none; outline-width: 0; padding: var(--d2l-input-padding-focus, calc(0.4rem - 1px) calc(0.75rem - 1px)); } - :host(:hover) .d2l-input:not([aria-invalid="true"]), - .d2l-input:focus, - .d2l-input-focus { - border-color: var(--d2l-color-celestine); - } [aria-invalid="true"].d2l-input { border-color: var(--d2l-color-cinnabar); } @@ -75,13 +71,13 @@ export const inputStyles = css` line-height: normal; } textarea.d2l-input, - :host(:hover) textarea.d2l-input:disabled, + textarea.d2l-input:hover:disabled, textarea.d2l-input:focus:disabled, textarea[aria-invalid="true"].d2l-input:disabled { padding-bottom: 0.5rem; padding-top: 0.5rem; } - :host(:hover) textarea.d2l-input, + textarea.d2l-input:hover, textarea.d2l-input:focus { padding: var(--d2l-input-padding-focus, calc(0.75rem - 1px)); padding-bottom: calc(0.5rem - 1px); @@ -94,7 +90,7 @@ export const inputStyles = css` background-size: 0.8rem 0.8rem; padding-right: calc(18px + 0.8rem); } - :host(:hover) textarea.d2l-input[aria-invalid="true"], + textarea.d2l-input[aria-invalid="true"]:hover, textarea.d2l-input[aria-invalid="true"]:focus { background-position: top calc(12px - 1px) right calc(18px - 1px); padding-right: calc(18px + 0.8rem - 1px); @@ -107,7 +103,7 @@ export const inputStyles = css` padding-top: 0.5rem; } :host([dir='rtl']) textarea.d2l-input[aria-invalid="true"]:focus, - :host([dir='rtl']:hover) textarea.d2l-input[aria-invalid="true"] { + :host([dir='rtl']) textarea.d2l-input[aria-invalid="true"]:hover { background-position: top calc(12px - 1px) left calc(18px - 1px); padding: var(--d2l-input-padding-focus, calc(0.75rem - 1px)); padding-bottom: calc(0.5rem - 1px); diff --git a/components/inputs/input-text.js b/components/inputs/input-text.js index 3aff33510a..aa2dae28dd 100644 --- a/components/inputs/input-text.js +++ b/components/inputs/input-text.js @@ -338,8 +338,9 @@ class InputText extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMixin( 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); + this.removeEventListener('mouseover', this._handleMouseEnter); + this.removeEventListener('mouseout', this._handleMouseLeave); + this.removeEventListener('click', this._handleClick); } firstUpdated(changedProperties) { @@ -352,8 +353,9 @@ 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); + this.addEventListener('mouseover', this._handleMouseEnter); + this.addEventListener('mouseout', this._handleMouseLeave); + this.addEventListener('click', this._handleClick); // 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 && 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 index 89eec1f4aa..62ab37eb1e 100644 --- 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: { type: Boolean } }; } @@ -157,6 +159,7 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi this.value = ''; this._descriptionId = getUniqueId(); + this._hovered = false; this._textareaId = getUniqueId(); } @@ -194,6 +197,20 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi } } + disconnectedCallback() { + super.disconnectedCallback(); + this.removeEventListener('mouseover', this._handleMouseEnter); + this.removeEventListener('mouseout', this._handleMouseLeave); + this.removeEventListener('click', this._handleClick); + } + + firstUpdated(changedProperties) { + super.firstUpdated(changedProperties); + this.addEventListener('mouseover', this._handleMouseEnter); + this.addEventListener('mouseout', this._handleMouseLeave); + this.addEventListener('click', this._handleClick); + } + render() { // convert \n to
for html mirror @@ -211,6 +228,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`
@@ -222,7 +244,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 +329,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 +344,14 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi e.preventDefault(); } + _handleMouseEnter() { + this._hovered = true; + } + + _handleMouseLeave() { + this._hovered = false; + } + } customElements.define('d2l-input-textarea', InputTextArea);