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`