fix(text-area): styles and states

still to do: success and warning states, autoresize
patternfly · Oct 20, 2023 · 3632605 · 3632605
1 parent e08bb65
commit 3632605
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 24 deletions.
diff --git a/elements/pf-text-area/demo/invalid.html b/elements/pf-text-area/demo/invalid.html
@@ -2,7 +2,8 @@
 
 <script type="module">
   import '@patternfly/elements/pf-text-area/pf-text-area.js';
-  await customElements.whenDefined('pf-text-area');
-  document.querySelector('pf-text-area').checkValidity();
+  const textarea = document.querySelector('pf-text-area');
+  await textarea.updateComplete;
+        textarea.checkValidity();
 </script>
 
diff --git a/elements/pf-text-area/demo/validated.html b/elements/pf-text-area/demo/validated.html
@@ -1,9 +1,13 @@
-<form onsubmit="e => e.preventDefault()">
+<form>
   <pf-text-area required></pf-text-area>
   <pf-button>Validate</pf-button>
 </form>
 
 <script type="module">
   import '@patternfly/elements/pf-text-area/pf-text-area.js';
+  document.querySelector('form').addEventListener('submit', event => {
+    event.preventDefault();
+    document.querySelector('pf-text-area').checkValidity();
+  });
 </script>
 
diff --git a/elements/pf-text-area/pf-text-area.css b/elements/pf-text-area/pf-text-area.css
@@ -1,15 +1,5 @@
 :host {
   display: block;
-}
-
-textarea::placeholder {
-  --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
-  --pf-c-form-control--invalid--BackgroundPositionY: var(--pf-c-form-control--textarea--invalid--BackgroundPositionY);
-  --pf-c-form-control--m-warning--BackgroundPositionY: var(--pf-c-form-control--textarea--m-warning--BackgroundPositionY);
-  color: var(--pf-c-form-control--placeholder--Color);
-  width: var(--pf-c-form-control--textarea--Width);
-  height: var(--pf-c-form-control--textarea--Height);
-  vertical-align: bottom;
 
   /* .pf-c-form-control */
   --pf-c-form-control--Color: var(--pf-global--Color--100, #151515);
@@ -137,6 +127,16 @@ textarea::placeholder {
   --pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) + 1px - var(--pf-global--spacer--lg));
   --pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg) + 0.0625rem);
   --pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg));
+}
+
+textarea {
+  --pf-c-form-control--success--BackgroundPositionY: var(--pf-c-form-control--textarea--success--BackgroundPositionY);
+  --pf-c-form-control--invalid--BackgroundPositionY: var(--pf-c-form-control--textarea--invalid--BackgroundPositionY);
+  --pf-c-form-control--m-warning--BackgroundPositionY: var(--pf-c-form-control--textarea--m-warning--BackgroundPositionY);
+
+  width: var(--pf-c-form-control--textarea--Width);
+  height: var(--pf-c-form-control--textarea--Height);
+  vertical-align: bottom;
   color: var(--pf-c-form-control--Color);
   width: var(--pf-c-form-control--Width);
   padding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
@@ -150,9 +150,25 @@ textarea::placeholder {
   appearance: none;
 }
 
+textarea::placeholder {
+  color: var(--pf-c-form-control--placeholder--Color);
+}
+
+textarea:hover {
+  --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor);
+}
+
+textarea:focus {
+  --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--focus--BorderBottomColor);
+
+  padding-bottom: var(--pf-c-form-control--focus--PaddingBottom);
+  border-bottom-width: var(--pf-c-form-control--focus--BorderBottomWidth);
+}
+
 textarea:invalid {
   --pf-c-form-control--PaddingRight: var(--pf-c-form-control--invalid--PaddingRight);
   --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--invalid--BorderBottomColor);
+
   padding-bottom: var(--pf-c-form-control--invalid--PaddingBottom);
   background-image: var(--pf-c-form-control--invalid--BackgroundUrl);
   background-position: var(--pf-c-form-control--invalid--BackgroundPosition);
@@ -168,7 +184,7 @@ textarea:disabled {
 }
 
 textarea[readonly] {
-background-color: var(--pf-c-form-control--readonly--BackgroundColor);
+  background-color: var(--pf-c-form-control--readonly--BackgroundColor);
 }
 
 .vertical { resize: vertical; }

diff --git a/elements/pf-text-area/pf-text-area.ts b/elements/pf-text-area/pf-text-area.ts
@@ -6,6 +6,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
 
 import styles from './pf-text-area.css';
+import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 
 /**
  * A **text area** component is used for entering a paragraph of text that is longer than one line.
@@ -51,6 +52,8 @@ export class PfTextArea extends LitElement {
   /** Sets the orientation to limit the resize to */
   @property({ type: Boolean, attribute: 'auto-resize' }) autoResize = false;
 
+  #logger = new Logger(this);
+
   #internals = new InternalsController(this);
 
   #derivedLabel = '';
@@ -65,29 +68,35 @@ export class PfTextArea extends LitElement {
 
   override render() {
     return html`
-      <textarea id="input"
+      <textarea id="textarea"
                 @input="${this.#onInput}"
                 ?disabled="${this.matches(':disabled') || this.disabled}"
                 ?readonly="${this.readonly}"
                 ?required="${this.required}"
-                aria-label="${this.#derivedLabel}"
+                aria-label="${ifDefined(this.#derivedLabel)}"
                 placeholder="${ifDefined(this.placeholder)}"
                 .value="${this.value}"
       ></textarea>
     `;
   }
 
-  #onInput(event: Event & { target: HTMLInputElement }) {
-    const { value } = event.target;
-    this.value = value;
-    this.#internals.setFormValue(value);
+  #onInput(event: Event) {
+    if (event.target instanceof HTMLTextAreaElement) {
+      const { value } = event.target;
+      this.value = value;
+      this.#internals.setFormValue(value);
+    }
   }
 
   #setValidityFromInput() {
-    this.#internals.setValidity(
-      this.#input?.validity,
-      this.#input.validationMessage,
-    );
+    if (!this.#input) {
+      this.#logger.warn('await updateComplete before validating');
+    } else {
+      this.#internals.setValidity(
+        this.#input.validity,
+        this.#input.validationMessage,
+      );
+    }
   }
 
   async formDisabledCallback() {