Skip to content

Commit 5483fce

Browse files
SukaatoSukaato
committed
test(core): add manual test
- Add manual tests for `button`, `input`, `input-file` and `textarea`
1 parent 68aec36 commit 5483fce

File tree

20 files changed

+376
-54
lines changed

20 files changed

+376
-54
lines changed

‎packages/core/api.txt

-3
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ pop-button,event,popFocus,void,true
5252
pop-button,css-prop,--animation
5353
pop-button,css-prop,--background
5454
pop-button,css-prop,--border-color
55-
pop-button,css-prop,--border-radius
5655
pop-button,css-prop,--color
5756
pop-button,css-prop,--focus-scale
5857
pop-button,part,native
@@ -188,7 +187,6 @@ pop-input,event,popFocus,void,true
188187
pop-input,event,popInput,InputInputEventDetail,true
189188
pop-input,css-prop,--background
190189
pop-input,css-prop,--border-color
191-
pop-input,css-prop,--border-radius
192190
pop-input,css-prop,--color
193191
pop-input,css-prop,--error-color
194192
pop-input,css-prop,--font
@@ -217,7 +215,6 @@ pop-input-file,event,popFocus,void,true
217215
pop-input-file,css-prop,--background
218216
pop-input-file,css-prop,--background-opacity
219217
pop-input-file,css-prop,--border-color
220-
pop-input-file,css-prop,--border-radius
221218
pop-input-file,css-prop,--button-animation
222219
pop-input-file,css-prop,--button-background
223220
pop-input-file,css-prop,--button-color

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

+2-7
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
@use "@poppy/utils/join-item";
21
@use "@poppy/global" as theme;
32

43
/**
5-
* @prop --border-radius: Change border radius
64
* @prop --border-color: Change border color
75
*
86
* @prop --background: Change background color
@@ -13,13 +11,10 @@
1311
*
1412
*/
1513

16-
@include join-item.item(button);
17-
1814
// Button
1915
// ----------------------------------------------------------------
2016

2117
:host {
22-
--border-radius: #{theme.use_radius(md)};
2318
--border-color: transparent;
2419
--background: #{theme.use_color("base.200")};
2520
--color: #{theme.use_color("base.content")};
@@ -28,6 +23,7 @@
2823
--focus-scale: 0.97;
2924

3025
display: inline-block;
26+
border-radius: theme.use_radius(md);
3127

3228
button {
3329
box-sizing: border-box;
@@ -40,9 +36,8 @@
4036
gap: 0.5rem;
4137

4238
border: 1px solid var(--border-color);
43-
border-radius: var(--border-radius);
4439
outline-color: var(--background);
45-
40+
border-radius: inherit;
4641
background-color: var(--background);
4742

4843
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

‎packages/core/src/components/button/readme.md

+7-8
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,13 @@ Buttons allow the user to take actions or make choices.
4949

5050
## CSS Custom Properties
5151

52-
| Name | Description |
53-
| ----------------- | ----------------------------------------------------- |
54-
| `--animation` | Change animation duration |
55-
| `--background` | Change background color |
56-
| `--border-color` | Change border color |
57-
| `--border-radius` | Change border radius |
58-
| `--color` | Change text color |
59-
| `--focus-scale` | Change scale transformation when the button is active |
52+
| Name | Description |
53+
| ---------------- | ----------------------------------------------------- |
54+
| `--animation` | Change animation duration |
55+
| `--background` | Change background color |
56+
| `--border-color` | Change border color |
57+
| `--color` | Change text color |
58+
| `--focus-scale` | Change scale transformation when the button is active |
6059

6160

6261
----------------------------------------------

‎packages/core/src/components/button/test/basic/index.html ‎packages/core/src/components/button/tests/basic/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Input Basic | Poppy-ui</title>
6+
<title>button Basic | Poppy-ui</title>
77
<link rel="stylesheet" href="/dist/poppy/poppy.css">
88
<script type="module" src="/dist/poppy/poppy.esm.js"></script>
99
<script nomodule src="/dist/poppy/poppy.js"></script>

‎packages/core/src/components/button/tests/join/index.html

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Button Join | Poppy-ui</title>
8+
<link rel="stylesheet" href="/dist/poppy/poppy.css">
9+
<script type="module" src="/dist/poppy/poppy.esm.js"></script>
10+
<script nomodule src="/dist/poppy/poppy.js"></script>
11+
<style>
12+
main {
13+
width: 100vw;
14+
height: 100dvh;
15+
display: flex;
16+
flex-direction: column;
17+
gap: 1rem;
18+
padding: 1rem;
19+
20+
background-color: var(--base-300);
21+
}
22+
23+
section {
24+
display: flex;
25+
flex-direction: column;
26+
justify-content: center;
27+
gap: .35rem;
28+
}
29+
30+
div {
31+
display: flex;
32+
gap: .5rem;
33+
}
34+
</style>
35+
</head>
36+
37+
<body>
38+
<main>
39+
<section>
40+
<h2>Button - without join</h2>
41+
<div>
42+
<pop-button color="primary">button</pop-button>
43+
<pop-button color="primary">button</pop-button>
44+
<pop-button color="primary">button</pop-button>
45+
</div>
46+
</section>
47+
<section>
48+
<h2>Button - basic</h2>
49+
<div>
50+
<pop-join>
51+
<pop-button color="primary">button</pop-button>
52+
<pop-button color="primary">button</pop-button>
53+
<pop-button color="primary">button</pop-button>
54+
</pop-join>
55+
</div>
56+
</section>
57+
<section>
58+
<h2>Button - outlined</h2>
59+
<div>
60+
<pop-join>
61+
<pop-button color="primary" outlined>button</pop-button>
62+
<pop-button color="primary" outlined>button</pop-button>
63+
<pop-button color="primary" outlined>button</pop-button>
64+
</pop-join>
65+
</div>
66+
</section>
67+
</main>
68+
</body>
69+
70+
</html>

‎packages/core/src/components/button/test/theme/dark.html ‎packages/core/src/components/button/tests/theme/dark.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Input Basic | Poppy-ui</title>
6+
<title>Button Theme | Poppy-ui</title>
77
<link rel="stylesheet" href="/css/poppy.bundle.css">
88
<link rel="stylesheet" href="/css/themes/dark.always.css">
99

@@ -132,4 +132,4 @@ <h2>Button - outlined disabled</h2>
132132
</section>
133133
</main>
134134
</body>
135-
</html>
135+
</html>

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

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
@use "@poppy/utils/input";
2-
@use "@poppy/utils/join-item";
32
@use "@poppy/global" as theme;
43

54
/**
6-
* @prop --border-radius: Change border radius.
75
* @prop --border-color: Change border and outline color.
86
*
97
* @prop --button-background: Change button background.
@@ -17,14 +15,11 @@
1715
* @prop --error-color: Change error text .
1816
*/
1917

20-
@include join-item.item(input);
21-
2218
// Input-File
2319
// ----------------------------------------------------------------
2420

2521
$minWidth: 12rem;
2622
:host {
27-
--border-radius: #{theme.use_radius(md)};
2823
--border-color: #{theme.use_color("base.content", 0)};
2924
--outline-color: #{theme.use_color("base.content", 0.2)};
3025
--background-opacity: 1;
@@ -38,6 +33,7 @@ $minWidth: 12rem;
3833

3934
display: inline-flex;
4035
flex-direction: column;
36+
border-radius: theme.use_radius(md);
4137

4238
> input {
4339
box-sizing: border-box;
@@ -50,7 +46,7 @@ $minWidth: 12rem;
5046
border-width: 1px;
5147

5248
border-style: solid;
53-
border-radius: var(--border-radius);
49+
border-radius: inherit;
5450
border-color: var(--border-color);
5551

5652
background-color: var(--background);

‎packages/core/src/components/input-file/readme.md

-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ Type: `Promise<void>`
7171
| `--background` | Change background color. |
7272
| `--background-opacity` | CHange background opacity. |
7373
| `--border-color` | Change border and outline color. |
74-
| `--border-radius` | Change border radius. |
7574
| `--button-animation` | Change animation duration of the button. |
7675
| `--button-background` | Change button background. |
7776
| `--button-color` | Change button text color. |

‎packages/core/src/components/input-file/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 File 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-file>no color</pop-input-file>
40+
<pop-input-file color="primary">primary</pop-input-file>
41+
<pop-input-file color="secondary">secondary</pop-input-file>
42+
<pop-input-file color="accent">accent</pop-input-file>
43+
<pop-input-file color="info">info</pop-input-file>
44+
<pop-input-file color="success">success</pop-input-file>
45+
<pop-input-file color="warning">warning</pop-input-file>
46+
<pop-input-file color="error">error</pop-input-file>
47+
<pop-input-file color="ghost">ghost</pop-input-file>
48+
</div>
49+
</section>
50+
<section>
51+
<h2>Input - outlined</h2>
52+
<div>
53+
<pop-input-file outlined>no color</pop-input-file>
54+
<pop-input-file outlined color="primary">primary</pop-input-file>
55+
<pop-input-file outlined color="secondary">secondary</pop-input-file>
56+
<pop-input-file outlined color="accent">accent</pop-input-file>
57+
<pop-input-file outlined color="info">info</pop-input-file>
58+
<pop-input-file outlined color="success">success</pop-input-file>
59+
<pop-input-file outlined color="warning">warning</pop-input-file>
60+
<pop-input-file outlined color="error">error</pop-input-file>
61+
</div>
62+
</section>
63+
<section>
64+
<h2>Button - disabled (basic)</h2>
65+
<div>
66+
<pop-input-file disabled>no color</pop-input-file>
67+
<pop-input-file disabled color="primary">primary</pop-input-file>
68+
<pop-input-file disabled color="secondary">secondary</pop-input-file>
69+
<pop-input-file disabled color="accent">accent</pop-input-file>
70+
<pop-input-file disabled color="info">info</pop-input-file>
71+
<pop-input-file disabled color="success">success</pop-input-file>
72+
<pop-input-file disabled color="warning">warning</pop-input-file>
73+
<pop-input-file disabled color="error">error</pop-input-file>
74+
<pop-input-file disabled color="ghost">ghost</pop-input-file>
75+
</div>
76+
</section>
77+
<section>
78+
<h2>Button - outlined disabled</h2>
79+
<div>
80+
<pop-input-file outlined disabled>no color</pop-input-file>
81+
<pop-input-file outlined disabled color="primary">primary</pop-input-file>
82+
<pop-input-file outlined disabled color="secondary">secondary</pop-input-file>
83+
<pop-input-file outlined disabled color="accent">accent</pop-input-file>
84+
<pop-input-file outlined disabled color="info">info</pop-input-file>
85+
<pop-input-file outlined disabled color="success">success</pop-input-file>
86+
<pop-input-file outlined disabled color="warning">warning</pop-input-file>
87+
<pop-input-file outlined disabled color="error">error</pop-input-file>
88+
</div>
89+
</section>
90+
</main>
91+
</body>
92+
</html>

‎packages/core/src/components/input-file/tests/form/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<title>Input Basic | Poppy-ui</title>
7+
<title>Input File Form | Poppy-ui</title>
88
<link rel="stylesheet" href="/dist/poppy/poppy.css">
99
<script type="module" src="/dist/poppy/poppy.esm.js"></script>
1010
<script nomodule src="/dist/poppy/poppy.js"></script>

‎packages/core/src/components/input-file/tests/join/index.html

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

0 commit comments

Comments
 (0)