Skip to content

Commit

Permalink
limit changes to d2l-input-text/area
Browse files Browse the repository at this point in the history
  • Loading branch information
@GZolla
GZolla committed Jul 14, 2023
1 parent ad6cea3 commit 91d4c76
Show file tree
Hide file tree
Showing 3 changed files with 57 additions and 17 deletions.
18 changes: 7 additions & 11 deletions components/inputs/input-styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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));
Expand All @@ -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);
}
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand Down
16 changes: 12 additions & 4 deletions components/inputs/input-text.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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') {
Expand Down Expand Up @@ -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;
}
Expand Down
40 changes: 38 additions & 2 deletions components/inputs/input-textarea.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 }
};
}

Expand Down Expand Up @@ -157,6 +159,7 @@ class InputTextArea extends FocusMixin(LabelledMixin(FormElementMixin(SkeletonMi
this.value = '';

this._descriptionId = getUniqueId();
this._hovered = false;
this._textareaId = getUniqueId();
}

Expand Down Expand Up @@ -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 <br> for html mirror
Expand All @@ -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`
<div class="d2l-input-textarea-container d2l-skeletize">
<div class="d2l-input d2l-input-textarea-mirror" style="${styleMap(mirrorStyles)}" aria-invalid="${ifDefined(ariaInvalid)}">
Expand All @@ -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}"
Expand Down Expand Up @@ -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;
Expand All @@ -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);

0 comments on commit 91d4c76

Please sign in to comment.