fix error states

socketsupply · Sep 17, 2023 · 85cff6d · 85cff6d
1 parent bc9d833
commit 85cff6d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/input/index.js b/input/index.js
@@ -171,7 +171,7 @@ export class TonicInput extends Tonic {
         bottom: 100%;
         left: 50%;
         width: fit-content;
-        transform: translateY(-10px);
+        transform: translate(-50%, -10px);
         transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s ease 1s;
         visibility: hidden;
         opacity: 0;

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@socketsupply/components",
-  "version": "14.0.6",
+  "version": "14.0.7",
   "description": "Example components",
   "type": "module",
   "scripts": {

diff --git a/textarea/index.js b/textarea/index.js
@@ -44,7 +44,7 @@ export class TonicTextarea extends Tonic {
         appearance: none;
       }
 
-      tonic-textarea textarea:invalid {
+      tonic-textarea[edited] textarea:invalid {
         border-color: var(--tonic-danger, #f66);
       }
 
@@ -87,7 +87,7 @@ export class TonicTextarea extends Tonic {
       }
 
       tonic-textarea[label] .tonic--invalid {
-        margin-bottom: 13px;
+        margin-bottom: 0px;
       }
 
       tonic-textarea .tonic--invalid {
@@ -98,7 +98,7 @@ export class TonicTextarea extends Tonic {
         bottom: 100%;
         left: 50%;
         width: fit-content;
-        transform: translateY(-10px);
+        transform: translate(-50%, -10px);
         transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s ease 1s;
         visibility: hidden;
         opacity: 0;
@@ -127,7 +127,6 @@ export class TonicTextarea extends Tonic {
         border-right: 6px solid transparent;
         border-top: 6px solid var(--tonic-error, #f66);
       }
-
     `
   }
 
@@ -214,6 +213,12 @@ export class TonicTextarea extends Tonic {
   }
 
   keyup (e) {
+    const value = e.target.value.trim()
+
+    if (this.props.required && !value) {
+      return this.setInvalid('Value Required')
+    }
+
     if (!this.props.pattern) {
       return
     }
@@ -222,8 +227,6 @@ export class TonicTextarea extends Tonic {
       this.regex = new RegExp(this.props.pattern)
     }
 
-    const value = e.target.value.trim()
-
     value.match(this.regex)
       ? this.setValid()
       : this.setInvalid('Invalid')