From d3b3dcdbda76b0f6e32cdf91cafd8af5967ad8c1 Mon Sep 17 00:00:00 2001 From: Sukaato Date: Thu, 5 Dec 2024 19:35:59 +0100 Subject: [PATCH] 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 --- packages/core/src/components/badge/badge.scss | 4 +- .../src/components/checkbox/checkbox.scss | 8 +- .../core/src/components/divider/divider.scss | 2 +- .../src/components/dropdown/dropdown.scss | 2 +- .../src/components/input-file/input-file.scss | 12 +-- packages/core/src/components/input/input.scss | 23 ++--- packages/core/src/components/input/input.tsx | 4 +- .../components/input/tests/basic/index.html | 92 +++++++++++++++++++ .../components/input/tests/text/index.html | 46 ++++++++++ packages/core/src/components/item/item.scss | 15 +-- packages/core/src/components/list/list.scss | 18 ++-- .../src/components/progress/progress.scss | 2 +- packages/core/src/components/radio/radio.scss | 10 +- packages/core/src/components/range/range.scss | 8 +- .../core/src/components/select/select.scss | 6 +- .../src/components/textarea/textarea.scss | 2 +- .../core/src/components/tooltip/tooltip.scss | 6 +- .../src/themes/functions/poppy.shadows.scss | 2 +- packages/core/src/themes/utils/_input.scss | 9 +- 19 files changed, 205 insertions(+), 66 deletions(-) create mode 100644 packages/core/src/components/input/tests/basic/index.html create mode 100644 packages/core/src/components/input/tests/text/index.html diff --git a/packages/core/src/components/badge/badge.scss b/packages/core/src/components/badge/badge.scss index e513847..d28cee2 100644 --- 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 index b8112a7..9953f90 100644 --- 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 index f9ac0f4..0152352 100644 --- 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 index fb06307..0985b9f 100644 --- 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 index 98bbdac..ab2774a 100644 --- 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 index 9e57faf..78f20e8 100644 --- 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 index 2de74a8..5dba0cd 100644 --- 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 new file mode 100644 index 0000000..0419878 --- /dev/null +++ b/packages/core/src/components/input/tests/basic/index.html @@ -0,0 +1,92 @@ + + + + + + Input Basic | Poppy-ui + + + + + + +
+
+

Input - basic

+
+ no color + primary + secondary + accent + info + success + warning + error + ghost +
+
+
+

Input - outlined

+
+ no color + primary + secondary + accent + info + success + warning + error +
+
+
+

Button - disabled (basic)

+
+ no color + primary + secondary + accent + info + success + warning + error + ghost +
+
+
+

Button - outlined disabled

+
+ no color + primary + secondary + accent + info + success + warning + error +
+
+
+ + diff --git a/packages/core/src/components/input/tests/text/index.html b/packages/core/src/components/input/tests/text/index.html new file mode 100644 index 0000000..1f7a5b0 --- /dev/null +++ b/packages/core/src/components/input/tests/text/index.html @@ -0,0 +1,46 @@ + + + + + + Input Basic | Poppy-ui + + + + + + +
+
+

Input - basic

+
+ helper + error + helper + error +
+
+
+ + diff --git a/packages/core/src/components/item/item.scss b/packages/core/src/components/item/item.scss index a7786b9..4a4454f 100644 --- 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,7 +59,8 @@ :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; @@ -67,7 +68,7 @@ :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; @@ -75,14 +76,14 @@ :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; diff --git a/packages/core/src/components/list/list.scss b/packages/core/src/components/list/list.scss index df16e84..19965f9 100644 --- a/packages/core/src/components/list/list.scss +++ b/packages/core/src/components/list/list.scss @@ -27,23 +27,23 @@ pop-list[orientation="horizontal"] { // ---------------------------------------------------------------- pop-list[size="xs"] { - border-radius: use_radius(sm); + border-radius: theme.use_radius(sm); font-size: 0.75rem; line-height: 1rem; } pop-list[size="sm"] { - border-radius: use_radius(md); + border-radius: theme.use_radius(md); font-size: 0.875rem; line-height: 1.25rem; } pop-list[size="md"], pop-list:not([size]) { - border-radius: use_radius(md); + border-radius: theme.use_radius(md); font-size: 0.875rem; line-height: 1.25rem; } pop-list[size="lg"] { - border-radius: use_radius(md); + border-radius: theme.use_radius(md); font-size: 1.125rem; line-height: 1.75rem; } @@ -52,12 +52,12 @@ pop-list[size="lg"] { // ---------------------------------------------------------------- pop-list[size="xs"] > :is(pop-list-title, pop-item) { - border-radius: use_radius(sm); + border-radius: theme.use_radius(sm); font-size: 0.75rem; line-height: 1rem; } pop-list[size="sm"] > :is(pop-list-title, pop-item) { - border-radius: use_radius(md); + border-radius: theme.use_radius(md); font-size: 0.875rem; line-height: 1.25rem; } @@ -65,14 +65,14 @@ pop-list { &[size="md"], &:not([size]) { > :is(pop-list-title, pop-item) { - border-radius: use_radius(md); + border-radius: theme.use_radius(md); font-size: 0.875rem; line-height: 1.25rem; } } } pop-list[size="lg"] > :is(pop-list-title, pop-item) { - border-radius: use_radius(md); + border-radius: theme.use_radius(md); font-size: 1.125rem; line-height: 1.75rem; } @@ -97,7 +97,7 @@ pop-list.in-item { content: ""; --tw-bg-opacity: 1; - background-color: use_color("base.content"); + background-color: theme.use_color("base.content"); opacity: 0.1; } } diff --git a/packages/core/src/components/progress/progress.scss b/packages/core/src/components/progress/progress.scss index b8bb05e..7c55f0b 100644 --- a/packages/core/src/components/progress/progress.scss +++ b/packages/core/src/components/progress/progress.scss @@ -71,7 +71,7 @@ // Color @mixin generate-color($colors...) { @each $color in $colors { - $base: use_color("#{$color}.base"); + $base: theme.use_color("#{$color}.base"); :host([color="#{$color}"]) { --background-active: #{$base}; diff --git a/packages/core/src/components/radio/radio.scss b/packages/core/src/components/radio/radio.scss index 7995f1f..1df0999 100644 --- a/packages/core/src/components/radio/radio.scss +++ b/packages/core/src/components/radio/radio.scss @@ -15,7 +15,7 @@ // Radio // ---------------------------------------------------------------- -$base: use_color("base.100"); +$base: get-color("base.100"); :host { --border-radius: #{theme.use_radius(full)}; @@ -121,8 +121,8 @@ $base: use_color("base.100"); @mixin generate-color($colors...) { @each $color in $colors { - $border: use_color("#{$color}.base", var(--border-opacity, 1)); - $background: use_color("#{$color}.base", var(--opacity, 1)); + $border: theme.use_color("#{$color}.base", var(--border-opacity, 1)); + $background: theme.use_color("#{$color}.base", var(--opacity, 1)); :host([color="#{$color}"]) { --border-color: #{$base}; @@ -133,8 +133,8 @@ $base: use_color("base.100"); @include generate-color(primary, secondary, accent, info, success, warning, error); :host(:not([color])) { - $border: use_color("base.content", var(--border-opacity, 1)); - $background: use_color("base.content", var(--opacity, 1)); + $border: theme.use_color("base.content", var(--border-opacity, 1)); + $background: theme.use_color("base.content", var(--opacity, 1)); --border-color: #{$border}; --background: #{$background}; diff --git a/packages/core/src/components/range/range.scss b/packages/core/src/components/range/range.scss index 6234378..ea9e967 100644 --- a/packages/core/src/components/range/range.scss +++ b/packages/core/src/components/range/range.scss @@ -118,7 +118,7 @@ @mixin generate-color($colors...) { @each $color in $colors { - $base: use_color("#{$color}.base", var(--active-track-opacity, 1)); + $base: theme.use_color("#{$color}.base", var(--active-track-opacity, 1)); :host([color="#{$color}"]) { --active-track-color: #{$base}; @@ -128,8 +128,8 @@ @include generate-color(primary, secondary, accent, info, success, warning, error); :host(:not([color])) { - $color: use_color("base.content", var(--track-opacity, 0.2)); - $active: use_color("base.content", var(--active-track-opacity, 1)); + $color: theme.use_color("base.content", var(--track-opacity, 0.2)); + $active: theme.use_color("base.content", var(--active-track-opacity, 1)); --track-color: #{$color}; --active-track-color: #{$active}; @@ -139,7 +139,7 @@ // ---------------------------------------------------------------- :host([disabled]) > input { - $active: use_color("base.content", var(--active-track-opacity, 1)); + $active: theme.use_color("base.content", var(--active-track-opacity, 1)); --active-track-color: #{$active}; cursor: not-allowed; diff --git a/packages/core/src/components/select/select.scss b/packages/core/src/components/select/select.scss index e2eeb52..8b5c54a 100644 --- a/packages/core/src/components/select/select.scss +++ b/packages/core/src/components/select/select.scss @@ -99,7 +99,7 @@ $minWidth: 12rem; // Color @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}; @@ -156,8 +156,8 @@ $minWidth: 12rem; } :host([disabled]) button { - $base: use_color("base.200"); - $text: use_color("base.content", 0.2); + $base: theme.use_color("base.200"); + $text: theme.use_color("base.content", 0.2); --background: #{$base}; --border-color: #{$base}; diff --git a/packages/core/src/components/textarea/textarea.scss b/packages/core/src/components/textarea/textarea.scss index b6c7e42..76d8628 100644 --- a/packages/core/src/components/textarea/textarea.scss +++ b/packages/core/src/components/textarea/textarea.scss @@ -99,7 +99,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}; diff --git a/packages/core/src/components/tooltip/tooltip.scss b/packages/core/src/components/tooltip/tooltip.scss index 0d4aef8..e5c8ce0 100644 --- a/packages/core/src/components/tooltip/tooltip.scss +++ b/packages/core/src/components/tooltip/tooltip.scss @@ -39,7 +39,7 @@ pop-tooltip { width: max-content; max-width: 20rem; padding: 0.5rem 0.25rem; - border-radius: use_radius(sm); + border-radius: theme.use_radius(sm); background-color: var(--background); content: attr(data-tip); @@ -146,8 +146,8 @@ pop-tooltip[position="right"] { @mixin generate-color($colors...) { @each $color in $colors { - $base: use_color("#{$color}.base", var(--background-opacity, 1)); - $text: use_color("#{$color}.content", var(--text-opacity, 1)); + $base: theme.use_color("#{$color}.base", var(--background-opacity, 1)); + $text: theme.use_color("#{$color}.content", var(--text-opacity, 1)); pop-tooltip[color="#{$color}"] { --background: #{$base}; diff --git a/packages/core/src/themes/functions/poppy.shadows.scss b/packages/core/src/themes/functions/poppy.shadows.scss index ce2f7f5..d912d22 100644 --- a/packages/core/src/themes/functions/poppy.shadows.scss +++ b/packages/core/src/themes/functions/poppy.shadows.scss @@ -2,7 +2,7 @@ @function use_shadow($size: md) { $value: map-get( - $map: $shadows, + $map: theme.$shadows, $key: $size, ); diff --git a/packages/core/src/themes/utils/_input.scss b/packages/core/src/themes/utils/_input.scss index 68b7b4d..93fd0a6 100644 --- a/packages/core/src/themes/utils/_input.scss +++ b/packages/core/src/themes/utils/_input.scss @@ -19,10 +19,10 @@ display: inline-flex; flex-wrap: wrap; align-items: center; - padding: 0.5rem 0.25rem; + padding: 0.25rem 0.25rem 0.5rem; gap: 4px; - font-size: 0.75rem; + font-size: 0.8rem; line-height: 1rem; &:empty { @@ -30,10 +30,7 @@ } } - > #{$selector}:not(:user-invalid) + .text-wrapper > .error-text { - display: none; - } - > #{$selector}:user-invalid + .text-wrapper > .helper-text { + > #{$selector} + .text-wrapper:has(.error-text) > .helper-text { display: none; }