Skip to content

Commit d3b3dcd

Browse files
SukaatoSukaato
committed
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
1 parent a287099 commit d3b3dcd

File tree

19 files changed

+205
-66
lines changed

19 files changed

+205
-66
lines changed

‎packages/core/src/components/badge/badge.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -106,8 +106,8 @@
106106

107107
@mixin generate-color($colors...) {
108108
@each $color in $colors {
109-
$base: use_color("#{$color}.base");
110-
$text: use_color("#{$color}.content");
109+
$base: theme.use_color("#{$color}.base");
110+
$text: theme.use_color("#{$color}.content");
111111

112112
:host([color="#{$color}"]) {
113113
--border-color: #{$base};

‎packages/core/src/components/checkbox/checkbox.scss

+4-4
Original file line numberDiff line numberDiff line change
@@ -129,9 +129,9 @@
129129

130130
@mixin generate-color($colors...) {
131131
@each $color in $colors {
132-
$base: use_color("#{$color}.base");
133-
$border: use_color("#{$color}.base", 0.2);
134-
$text: use_color("#{$color}.content");
132+
$base: theme.use_color("#{$color}.base");
133+
$border: theme.use_color("#{$color}.base", 0.2);
134+
$text: theme.use_color("#{$color}.content");
135135

136136
:host([color="#{$color}"]) {
137137
--background: #{$base};
@@ -181,7 +181,7 @@
181181
var(--background) 57%
182182
);
183183
background-repeat: no-repeat;
184-
background-color: var(--background, use_color("base.content"));
184+
background-color: var(--background, #{theme.use_color("base.content")});
185185
animation: checkmark var(--animation-duration, 0.2s) ease-out;
186186
}
187187

‎packages/core/src/components/divider/divider.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@
9595

9696
@mixin generate-color($colors...) {
9797
@each $color in $colors {
98-
$base: use_color("#{$color}.base");
98+
$base: theme.use_color("#{$color}.base");
9999

100100
:host([color="#{$color}"]) {
101101
--background: #{$base};

‎packages/core/src/components/dropdown/dropdown.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@
5353
&-backdrop {
5454
position: fixed;
5555
inset: 0;
56-
background: use_color("neutral.base", 0.2);
56+
background: theme.use_color("neutral.base", 0.2);
5757
}
5858
}
5959
}

‎packages/core/src/components/input-file/input-file.scss

+6-6
Original file line numberDiff line numberDiff line change
@@ -150,8 +150,8 @@ $minWidth: 12rem;
150150

151151
@mixin generate-color($colors...) {
152152
@each $color in $colors {
153-
$base: use_color("#{$color}.base");
154-
$text: use_color("#{$color}.content");
153+
$base: theme.use_color("#{$color}.base");
154+
$text: theme.use_color("#{$color}.content");
155155

156156
:host([color="#{$color}"]) {
157157
--button-background: #{$base};
@@ -167,7 +167,7 @@ $minWidth: 12rem;
167167
@include generate-color(primary, secondary, accent, info, success, warning, error);
168168

169169
:host(:not([color], [disabled])) {
170-
$color: use_color("neutral.base");
170+
$color: theme.use_color("neutral.base");
171171

172172
> input:hover {
173173
--button-background: color-mix(in oklab, #{$color} 90%, black);
@@ -189,9 +189,9 @@ $minWidth: 12rem;
189189
// ----------------------------------------------------------------
190190

191191
:host([disabled]) {
192-
$background: use_color("base.200");
193-
$color: use_color("base.content", 0.2);
194-
$btn-background: use_color("neutral.base", 0.2);
192+
$background: theme.use_color("base.200");
193+
$color: theme.use_color("base.content", 0.2);
194+
$btn-background: theme.use_color("neutral.base", 0.2);
195195

196196
--background: #{$background};
197197
--border-color: #{$background};

‎packages/core/src/components/input/input.scss

+12-11
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ $minWidth: 12rem;
2424
--border-radius: #{theme.use_radius(md)};
2525
--border-color: transparent;
2626
--outline-color: #{theme.use_color("base.content", 0.2)};
27-
--background: #{theme.use_color("base.100")};
27+
--background: #{theme.use_color("base.100", var(--opacity, 1))};
2828
--color: #{theme.use_color("base.content")};
2929

3030
@include input.label;
@@ -69,6 +69,8 @@ $minWidth: 12rem;
6969

7070
font-family: theme.use_font();
7171
white-space: pre-wrap;
72+
text-overflow: ellipsis;
73+
text-wrap: auto;
7274

7375
cursor: inherit;
7476

@@ -130,7 +132,7 @@ $minWidth: 12rem;
130132

131133
@mixin generate-color($colors...) {
132134
@each $color in $colors {
133-
$base: use_color("#{$color}.base");
135+
$base: theme.use_color("#{$color}.base");
134136

135137
:host([color="#{$color}"]) {
136138
--border-color: #{$base};
@@ -142,19 +144,18 @@ $minWidth: 12rem;
142144

143145
:host([color="ghost"]) {
144146
--opacity: 0.05;
145-
146-
> .input-wrapper:has(input:focus) {
147-
--opacity: 1;
148-
}
147+
}
148+
:host([color="ghost"]:focus) {
149+
--opacity: 1;
149150
}
150151

151152
// Input State
152153
// ----------------------------------------------------------------
153154

154155
:host([readonly]) {
155-
$base: use_color("base.200");
156-
$neutral: use_color("neutral.base");
157-
$text: use_color("base.content", 0.8);
156+
$base: theme.use_color("base.200");
157+
$neutral: theme.use_color("neutral.base");
158+
$text: theme.use_color("base.content", 0.8);
158159

159160
--background: #{$base};
160161
--border-color: #{$neutral};
@@ -168,8 +169,8 @@ $minWidth: 12rem;
168169
}
169170

170171
:host([disabled]) {
171-
$base: use_color("base.200");
172-
$text: use_color("base.content");
172+
$base: theme.use_color("base.200");
173+
$text: theme.use_color("base.content");
173174

174175
--background: #{$base};
175176
--border-color: #{$base};

‎packages/core/src/components/input/input.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ let inputIds = 0;
3333
@Component({
3434
tag: 'pop-input',
3535
styleUrl: 'input.scss',
36-
shadow: true,
36+
shadow: {
37+
delegatesFocus: true,
38+
},
3739
formAssociated: true,
3840
})
3941
export class Input implements ComponentInterface {

‎packages/core/src/components/input/tests/basic/index.html

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Input Basic | Poppy-ui</title>
7+
<link rel="stylesheet" href="/dist/poppy/poppy.css">
8+
<script type="module" src="/dist/poppy/poppy.esm.js"></script>
9+
<script nomodule src="/dist/poppy/poppy.js"></script>
10+
<style>
11+
main {
12+
width: 100vw;
13+
height: 100dvh;
14+
display: flex;
15+
flex-direction: column;
16+
gap: 1rem;
17+
padding: 1rem;
18+
19+
background-color: var(--base-300);
20+
}
21+
section {
22+
display: flex;
23+
flex-direction: column;
24+
justify-content: center;
25+
gap: .35rem;
26+
}
27+
div {
28+
display: flex;
29+
flex-wrap: wrap;
30+
gap: .5rem;
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<main>
36+
<section>
37+
<h2>Input - basic</h2>
38+
<div>
39+
<pop-input>no color</pop-input>
40+
<pop-input color="primary">primary</pop-input>
41+
<pop-input color="secondary">secondary</pop-input>
42+
<pop-input color="accent">accent</pop-input>
43+
<pop-input color="info">info</pop-input>
44+
<pop-input color="success">success</pop-input>
45+
<pop-input color="warning">warning</pop-input>
46+
<pop-input color="error" error-text="test">error</pop-input>
47+
<pop-input color="ghost">ghost</pop-input>
48+
</div>
49+
</section>
50+
<section>
51+
<h2>Input - outlined</h2>
52+
<div>
53+
<pop-input outlined>no color</pop-input>
54+
<pop-input outlined color="primary">primary</pop-input>
55+
<pop-input outlined color="secondary">secondary</pop-input>
56+
<pop-input outlined color="accent">accent</pop-input>
57+
<pop-input outlined color="info">info</pop-input>
58+
<pop-input outlined color="success">success</pop-input>
59+
<pop-input outlined color="warning">warning</pop-input>
60+
<pop-input outlined color="error">error</pop-input>
61+
</div>
62+
</section>
63+
<section>
64+
<h2>Button - disabled (basic)</h2>
65+
<div>
66+
<pop-input disabled>no color</pop-input>
67+
<pop-input disabled color="primary">primary</pop-input>
68+
<pop-input disabled color="secondary">secondary</pop-input>
69+
<pop-input disabled color="accent">accent</pop-input>
70+
<pop-input disabled color="info">info</pop-input>
71+
<pop-input disabled color="success">success</pop-input>
72+
<pop-input disabled color="warning">warning</pop-input>
73+
<pop-input disabled color="error">error</pop-input>
74+
<pop-input disabled color="ghost">ghost</pop-input>
75+
</div>
76+
</section>
77+
<section>
78+
<h2>Button - outlined disabled</h2>
79+
<div>
80+
<pop-input outlined disabled>no color</pop-input>
81+
<pop-input outlined disabled color="primary">primary</pop-input>
82+
<pop-input outlined disabled color="secondary">secondary</pop-input>
83+
<pop-input outlined disabled color="accent">accent</pop-input>
84+
<pop-input outlined disabled color="info">info</pop-input>
85+
<pop-input outlined disabled color="success">success</pop-input>
86+
<pop-input outlined disabled color="warning">warning</pop-input>
87+
<pop-input outlined disabled color="error">error</pop-input>
88+
</div>
89+
</section>
90+
</main>
91+
</body>
92+
</html>

‎packages/core/src/components/input/tests/text/index.html

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Input Basic | Poppy-ui</title>
7+
<link rel="stylesheet" href="/dist/poppy/poppy.css">
8+
<script type="module" src="/dist/poppy/poppy.esm.js"></script>
9+
<script nomodule src="/dist/poppy/poppy.js"></script>
10+
<style>
11+
main {
12+
width: 100vw;
13+
height: 100dvh;
14+
display: flex;
15+
flex-direction: column;
16+
gap: 1rem;
17+
padding: 1rem;
18+
19+
background-color: var(--base-300);
20+
}
21+
section {
22+
display: flex;
23+
flex-direction: column;
24+
justify-content: center;
25+
gap: .35rem;
26+
}
27+
div {
28+
display: flex;
29+
flex-wrap: wrap;
30+
gap: .5rem;
31+
}
32+
</style>
33+
</head>
34+
<body>
35+
<main>
36+
<section>
37+
<h2>Input - basic</h2>
38+
<div>
39+
<pop-input color="primary" helper-text="helper">helper</pop-input>
40+
<pop-input color="primary" error-text="error">error</pop-input>
41+
<pop-input color="primary" helper-text="helper" error-text="error">helper + error</pop-input>
42+
</div>
43+
</section>
44+
</main>
45+
</body>
46+
</html>

‎packages/core/src/components/item/item.scss

+8-7
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,14 @@
4040
:host(:not(.has-list)) > {
4141
.item-inner:is(:hover, :focus),
4242
.item-inner:has(:focus) {
43-
background-color: use_color("base.content", 0.1);
43+
background-color: theme.use_color("base.content", 0.1);
4444
color: inherit;
4545
}
4646
}
4747

4848
:host > .item-inner:active {
49-
background-color: use_color("neutral.base");
50-
color: use_color("neutral.content");
49+
background-color: theme.use_color("neutral.base");
50+
color: theme.use_color("neutral.content");
5151
}
5252

5353
// Item context
@@ -59,30 +59,31 @@
5959
:host(.in-list-md) > .item-inner {
6060
height: 36px;
6161
padding: 0.5rem 1rem;
62-
border-radius: use_radius(md);
62+
border-radius: theme.use_radius(md);
63+
border-radius: theme.use_radius(md);
6364

6465
font-size: 0.875rem;
6566
line-height: 1.25rem;
6667
}
6768
:host(.in-list-xs) > .item-inner {
6869
height: 24px;
6970
padding: 0.25rem 0.5rem;
70-
border-radius: use_radius(sm);
71+
border-radius: theme.use_radius(sm);
7172

7273
font-size: 0.75rem;
7374
line-height: 1rem;
7475
}
7576
:host(.in-list-sm) > .item-inner {
7677
height: 28px;
7778
padding: 0.25rem 0.75rem;
78-
border-radius: use_radius(md);
79+
border-radius: theme.use_radius(md);
7980

8081
font-size: 0.875rem;
8182
line-height: 1.25rem;
8283
}
8384
:host(.in-list-lg) > .item-inner {
8485
height: 52px;
85-
border-radius: use_radius(md);
86+
border-radius: theme.use_radius(md);
8687

8788
font-size: 1.125rem;
8889
line-height: 1.75rem;

0 commit comments

Comments
 (0)