fix(input): display error text

new behavior: - display helper text by default - display error text if present - hide helper text if error text is present - add text ellipsis on input fixes: #67
CheeseGrinder · Dec 5, 2024 · 876a432 · 876a432
1 parent a287099
commit 876a432
Show file tree

Hide file tree

Showing 19 changed files with 205 additions and 66 deletions.
diff --git a/packages/core/src/components/badge/badge.scss b/packages/core/src/components/badge/badge.scss
@@ -106,8 +106,8 @@
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: use_color("#{$color}.base");
-    $text: use_color("#{$color}.content");
+    $base: theme.use_color("#{$color}.base");
+    $text: theme.use_color("#{$color}.content");
 
     :host([color="#{$color}"]) {
       --border-color: #{$base};

diff --git a/packages/core/src/components/checkbox/checkbox.scss b/packages/core/src/components/checkbox/checkbox.scss
@@ -129,9 +129,9 @@
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: use_color("#{$color}.base");
-    $border: use_color("#{$color}.base", 0.2);
-    $text: use_color("#{$color}.content");
+    $base: theme.use_color("#{$color}.base");
+    $border: theme.use_color("#{$color}.base", 0.2);
+    $text: theme.use_color("#{$color}.content");
 
     :host([color="#{$color}"]) {
       --background: #{$base};
@@ -181,7 +181,7 @@
       var(--background) 57%
     );
   background-repeat: no-repeat;
-  background-color: var(--background, use_color("base.content"));
+  background-color: var(--background, #{theme.use_color("base.content")});
   animation: checkmark var(--animation-duration, 0.2s) ease-out;
 }
 

diff --git a/packages/core/src/components/divider/divider.scss b/packages/core/src/components/divider/divider.scss
@@ -95,7 +95,7 @@
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: use_color("#{$color}.base");
+    $base: theme.use_color("#{$color}.base");
 
     :host([color="#{$color}"]) {
       --background: #{$base};

diff --git a/packages/core/src/components/dropdown/dropdown.scss b/packages/core/src/components/dropdown/dropdown.scss
@@ -53,7 +53,7 @@
     &-backdrop {
       position: fixed;
       inset: 0;
-      background: use_color("neutral.base", 0.2);
+      background: theme.use_color("neutral.base", 0.2);
     }
   }
 }

diff --git a/packages/core/src/components/input-file/input-file.scss b/packages/core/src/components/input-file/input-file.scss
@@ -150,8 +150,8 @@ $minWidth: 12rem;
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: use_color("#{$color}.base");
-    $text: use_color("#{$color}.content");
+    $base: theme.use_color("#{$color}.base");
+    $text: theme.use_color("#{$color}.content");
 
     :host([color="#{$color}"]) {
       --button-background: #{$base};
@@ -167,7 +167,7 @@ $minWidth: 12rem;
 @include generate-color(primary, secondary, accent, info, success, warning, error);
 
 :host(:not([color], [disabled])) {
-  $color: use_color("neutral.base");
+  $color: theme.use_color("neutral.base");
 
   > input:hover {
     --button-background: color-mix(in oklab, #{$color} 90%, black);
@@ -189,9 +189,9 @@ $minWidth: 12rem;
 // ----------------------------------------------------------------
 
 :host([disabled]) {
-  $background: use_color("base.200");
-  $color: use_color("base.content", 0.2);
-  $btn-background: use_color("neutral.base", 0.2);
+  $background: theme.use_color("base.200");
+  $color: theme.use_color("base.content", 0.2);
+  $btn-background: theme.use_color("neutral.base", 0.2);
 
   --background: #{$background};
   --border-color: #{$background};

diff --git a/packages/core/src/components/input/input.scss b/packages/core/src/components/input/input.scss
@@ -24,7 +24,7 @@ $minWidth: 12rem;
   --border-radius: #{theme.use_radius(md)};
   --border-color: transparent;
   --outline-color: #{theme.use_color("base.content", 0.2)};
-  --background: #{theme.use_color("base.100")};
+  --background: #{theme.use_color("base.100", var(--opacity, 1))};
   --color: #{theme.use_color("base.content")};
 
   @include input.label;
@@ -69,6 +69,8 @@ $minWidth: 12rem;
 
       font-family: theme.use_font();
       white-space: pre-wrap;
+      text-overflow: ellipsis;
+      text-wrap: auto;
 
       cursor: inherit;
 
@@ -130,7 +132,7 @@ $minWidth: 12rem;
 
 @mixin generate-color($colors...) {
   @each $color in $colors {
-    $base: use_color("#{$color}.base");
+    $base: theme.use_color("#{$color}.base");
 
     :host([color="#{$color}"]) {
       --border-color: #{$base};
@@ -142,19 +144,18 @@ $minWidth: 12rem;
 
 :host([color="ghost"]) {
   --opacity: 0.05;
-
-  > .input-wrapper:has(input:focus) {
-    --opacity: 1;
-  }
+}
+:host([color="ghost"]:focus) {
+  --opacity: 1;
 }
 
 // Input State
 // ----------------------------------------------------------------
 
 :host([readonly]) {
-  $base: use_color("base.200");
-  $neutral: use_color("neutral.base");
-  $text: use_color("base.content", 0.8);
+  $base: theme.use_color("base.200");
+  $neutral: theme.use_color("neutral.base");
+  $text: theme.use_color("base.content", 0.8);
 
   --background: #{$base};
   --border-color: #{$neutral};
@@ -168,8 +169,8 @@ $minWidth: 12rem;
 }
 
 :host([disabled]) {
-  $base: use_color("base.200");
-  $text: use_color("base.content");
+  $base: theme.use_color("base.200");
+  $text: theme.use_color("base.content");
 
   --background: #{$base};
   --border-color: #{$base};

diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx
@@ -33,7 +33,9 @@ let inputIds = 0;
 @Component({
   tag: 'pop-input',
   styleUrl: 'input.scss',
-  shadow: true,
+  shadow: {
+    delegatesFocus: true,
+  },
   formAssociated: true,
 })
 export class Input implements ComponentInterface {

diff --git a/packages/core/src/components/input/tests/basic/index.html b/packages/core/src/components/input/tests/basic/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Input Basic | Poppy-ui</title>
+    <link rel="stylesheet" href="/dist/poppy/poppy.css">
+    <script type="module" src="/dist/poppy/poppy.esm.js"></script>
+    <script nomodule src="/dist/poppy/poppy.js"></script>
+    <style>
+        main {
+            width: 100vw;
+            height: 100dvh;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            padding: 1rem;
+
+            background-color: var(--base-300);
+        }
+        section {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            gap: .35rem;
+        }
+        div {
+            display: flex;
+            flex-wrap: wrap;
+            gap: .5rem;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <section>
+            <h2>Input - basic</h2>
+            <div>
+                <pop-input>no color</pop-input>
+                <pop-input color="primary">primary</pop-input>
+                <pop-input color="secondary">secondary</pop-input>
+                <pop-input color="accent">accent</pop-input>
+                <pop-input color="info">info</pop-input>
+                <pop-input color="success">success</pop-input>
+                <pop-input color="warning">warning</pop-input>
+                <pop-input color="error" error-text="test">error</pop-input>
+                <pop-input color="ghost">ghost</pop-input>
+            </div>
+        </section>
+        <section>
+            <h2>Input - outlined</h2>
+            <div>
+                <pop-input outlined>no color</pop-input>
+                <pop-input outlined color="primary">primary</pop-input>
+                <pop-input outlined color="secondary">secondary</pop-input>
+                <pop-input outlined color="accent">accent</pop-input>
+                <pop-input outlined color="info">info</pop-input>
+                <pop-input outlined color="success">success</pop-input>
+                <pop-input outlined color="warning">warning</pop-input>
+                <pop-input outlined color="error">error</pop-input>
+            </div>
+        </section>
+        <section>
+            <h2>Button - disabled (basic)</h2>
+            <div>
+                <pop-input disabled>no color</pop-input>
+                <pop-input disabled color="primary">primary</pop-input>
+                <pop-input disabled color="secondary">secondary</pop-input>
+                <pop-input disabled color="accent">accent</pop-input>
+                <pop-input disabled color="info">info</pop-input>
+                <pop-input disabled color="success">success</pop-input>
+                <pop-input disabled color="warning">warning</pop-input>
+                <pop-input disabled color="error">error</pop-input>
+                <pop-input disabled color="ghost">ghost</pop-input>
+            </div>
+        </section>
+        <section>
+            <h2>Button - outlined disabled</h2>
+            <div>
+                <pop-input outlined disabled>no color</pop-input>
+                <pop-input outlined disabled color="primary">primary</pop-input>
+                <pop-input outlined disabled color="secondary">secondary</pop-input>
+                <pop-input outlined disabled color="accent">accent</pop-input>
+                <pop-input outlined disabled color="info">info</pop-input>
+                <pop-input outlined disabled color="success">success</pop-input>
+                <pop-input outlined disabled color="warning">warning</pop-input>
+                <pop-input outlined disabled color="error">error</pop-input>
+            </div>
+        </section>
+    </main>
+</body>
+</html>
diff --git a/packages/core/src/components/input/tests/text/index.html b/packages/core/src/components/input/tests/text/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Input Basic | Poppy-ui</title>
+    <link rel="stylesheet" href="/dist/poppy/poppy.css">
+    <script type="module" src="/dist/poppy/poppy.esm.js"></script>
+    <script nomodule src="/dist/poppy/poppy.js"></script>
+    <style>
+        main {
+            width: 100vw;
+            height: 100dvh;
+            display: flex;
+            flex-direction: column;
+            gap: 1rem;
+            padding: 1rem;
+
+            background-color: var(--base-300);
+        }
+        section {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            gap: .35rem;
+        }
+        div {
+            display: flex;
+            flex-wrap: wrap;
+            gap: .5rem;
+        }
+    </style>
+</head>
+<body>
+    <main>
+        <section>
+            <h2>Input - basic</h2>
+            <div>
+                <pop-input color="primary" helper-text="helper">helper</pop-input>
+                <pop-input color="primary" error-text="error">error</pop-input>
+                <pop-input color="primary" helper-text="helper" error-text="error">helper + error</pop-input>
+            </div>
+        </section>
+    </main>
+</body>
+</html>
diff --git a/packages/core/src/components/item/item.scss b/packages/core/src/components/item/item.scss
@@ -40,14 +40,14 @@
 :host(:not(.has-list)) > {
   .item-inner:is(:hover, :focus),
   .item-inner:has(:focus) {
-    background-color: use_color("base.content", 0.1);
+    background-color: theme.use_color("base.content", 0.1);
     color: inherit;
   }
 }
 
 :host > .item-inner:active {
-  background-color: use_color("neutral.base");
-  color: use_color("neutral.content");
+  background-color: theme.use_color("neutral.base");
+  color: theme.use_color("neutral.content");
 }
 
 // Item context
@@ -59,30 +59,31 @@
 :host(.in-list-md) > .item-inner {
   height: 36px;
   padding: 0.5rem 1rem;
-  border-radius: use_radius(md);
+  border-radius: theme.use_radius(md);
+  border-radius: theme.use_radius(md);
 
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 :host(.in-list-xs) > .item-inner {
   height: 24px;
   padding: 0.25rem 0.5rem;
-  border-radius: use_radius(sm);
+  border-radius: theme.use_radius(sm);
 
   font-size: 0.75rem;
   line-height: 1rem;
 }
 :host(.in-list-sm) > .item-inner {
   height: 28px;
   padding: 0.25rem 0.75rem;
-  border-radius: use_radius(md);
+  border-radius: theme.use_radius(md);
 
   font-size: 0.875rem;
   line-height: 1.25rem;
 }
 :host(.in-list-lg) > .item-inner {
   height: 52px;
-  border-radius: use_radius(md);
+  border-radius: theme.use_radius(md);
 
   font-size: 1.125rem;
   line-height: 1.75rem;