Skip to content

Commit e4ae00d

Browse files
lisalupilisalupi
authored
feat(FileInput): improve component (#6337)
1 parent 2b89546 commit e4ae00d

9 files changed

Lines changed: 3214 additions & 2252 deletions

File tree

‎.changeset/tender-nights-warn.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
"@ultraviolet/ui": minor
3+
---
4+
5+
`FileInput`: various improvements to component:
6+
- new prop `validator` for custom errors
7+
- add default `onChange` for un formatted events
8+
- new prop `disabledDragndrop` to disabled drag and drop behavior
9+
- update prop `onDrop` to return `acceptedFiles` and `errorFiles`
10+
- new props `onKeyDown`, `onKeyUp`, `onFocus`, `onBlur` and `name`.
11+
- new prop `onDelete` for `FileInput.List`
12+
- When `type = "dropzone"` and `size="small"`, the component is now a button and clicking anywere on it opens the file selector (previously, only clicking on the label opened the file selector)
13+
- Fix style issues

‎packages/form/src/components/FileInputField/__tests__/__snapshots__/index.test.tsx.snap‎

Lines changed: 55 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -11,50 +11,47 @@ exports[`fileInputField > should render correctly 1`] = `
1111
>
1212
<div
1313
class="uv_toi52u0 uv_toi52u2d uv_toi52u3p"
14+
style="--uv_4k0ekn0: 100%;"
1415
>
1516
<div
1617
class="uv_toi52u0 uv_toi52u2d uv_toi52u5j"
1718
>
1819
<label
19-
class="uv_17td3g90 uv_m4c9ow0 uv_m4c9ow4 uv_m4c9owb uv_m4c9owl uv_m4c9ow1a uv_m4c9ow32"
20+
class="uv_17td3g92 uv_m4c9ow0 uv_m4c9ow4 uv_m4c9owb uv_m4c9owl uv_m4c9ow1a uv_m4c9ow32"
21+
for="_r_0_"
2022
>
2123
Test
2224
</label>
25+
<input
26+
class="uv_12cubgs9"
27+
id="_r_0_"
28+
name="Test"
29+
type="file"
30+
/>
2331
<div
24-
class="uv_m4c9ow0 uv_m4c9ow4 uv_m4c9owb uv_m4c9owj uv_m4c9ow1a uv_m4c9ow32"
32+
class="uv_12cubgs0 uv_12cubgs2 uv_12cubgs4"
33+
data-testid="drag-container"
2534
>
26-
<div
27-
class="uv_12cubgs0 uv_12cubgs2 uv_12cubgs4 uv_toi52u0 uv_toi52ud uv_toi52u2d uv_toi52u3v uv_toi52u61"
28-
data-testid="drag-container"
35+
<svg
36+
class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkz7 uv_icons_1sbwqkzh uv_icons_1sbwqkz1g"
37+
height="20"
38+
viewBox="0 0 20 20"
39+
width="20"
2940
>
30-
<input
31-
class="uv_12cubgs8"
32-
id="_r_0_"
33-
name="Test"
34-
type="file"
41+
<title>
42+
UploadIcon
43+
</title>
44+
<path
45+
d="M9.25 13.25a.75.75 0 0 0 1.5 0V4.636l2.955 3.129a.75.75 0 0 0 1.09-1.03l-4.25-4.5a.75.75 0 0 0-1.09 0l-4.25 4.5a.75.75 0 1 0 1.09 1.03L9.25 4.636z"
3546
/>
36-
<svg
37-
class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz1 uv_icons_1sbwqkz3 uv_icons_1sbwqkz7 uv_icons_1sbwqkzh uv_icons_1sbwqkz1g"
38-
height="20"
39-
viewBox="0 0 20 20"
40-
width="20"
41-
>
42-
<title>
43-
UploadIcon
44-
</title>
45-
<path
46-
d="M9.25 13.25a.75.75 0 0 0 1.5 0V4.636l2.955 3.129a.75.75 0 0 0 1.09-1.03l-4.25-4.5a.75.75 0 0 0-1.09 0l-4.25 4.5a.75.75 0 1 0 1.09 1.03L9.25 4.636z"
47-
/>
48-
<path
49-
d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25z"
50-
/>
51-
</svg>
52-
<div
53-
class="uv_m4c9ow0 uv_m4c9ow4 uv_m4c9owb uv_m4c9ow16 uv_m4c9ow1a uv_m4c9ow32"
54-
for="_r_0_"
55-
style="--uv_qabug40: left;"
47+
<path
48+
d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25z"
5649
/>
57-
</div>
50+
</svg>
51+
<div
52+
class="uv_m4c9ow0 uv_m4c9ow4 uv_m4c9owb uv_m4c9ow16 uv_m4c9ow1a uv_m4c9ow32"
53+
style="--uv_qabug40: left;"
54+
/>
5855
</div>
5956
</div>
6057
</div>
@@ -79,17 +76,17 @@ exports[`fileInputField > should render correctly as an overlay 1`] = `
7976
data-testid="drag-container"
8077
>
8178
<input
82-
class="uv_12cubgs8"
79+
class="uv_12cubgs9"
8380
id="_r_8_"
8481
name="Test"
8582
type="file"
8683
/>
8784
<div
88-
class="uv_12cubgsb"
85+
class="uv_12cubgsc"
8986
>
9087
overlay
9188
<div
92-
class="uv_12cubgsd uv_12cubgsc"
89+
class="uv_12cubgse uv_12cubgsd"
9390
/>
9491
</div>
9592
</div>
@@ -110,44 +107,42 @@ exports[`fileInputField > should render correctly disabled 1`] = `
110107
>
111108
<div
112109
class="uv_toi52u0 uv_toi52u2d uv_toi52u3p"
110+
style="--uv_4k0ekn0: 100%;"
113111
>
114112
<div
115113
class="uv_toi52u0 uv_toi52u2d uv_toi52u5j"
116114
>
117115
<label
118-
class="uv_17td3g90 uv_m4c9ow0 uv_m4c9ow4 uv_m4c9owb uv_m4c9owl uv_m4c9ow1a uv_m4c9ow32"
116+
class="uv_17td3g92 uv_m4c9ow0 uv_m4c9ow4 uv_m4c9owb uv_m4c9owl uv_m4c9ow1a uv_m4c9ow32"
117+
for="_r_4_"
119118
>
120119
Test
121120
</label>
122121
<div
123-
class="uv_m4c9ow0 uv_m4c9ow1 uv_m4c9ow4 uv_m4c9owb uv_m4c9owj uv_m4c9ow22"
122+
class="uv_12cubgs0 uv_12cubgs1 uv_12cubgs2 uv_12cubgs4"
123+
data-testid="drag-container"
124+
disabled=""
124125
>
125-
<div
126-
class="uv_12cubgs0 uv_12cubgs1 uv_12cubgs2 uv_12cubgs4 uv_toi52u0 uv_toi52ud uv_toi52u2d uv_toi52u3v uv_toi52u61"
127-
data-testid="drag-container"
126+
<svg
127+
class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz2 uv_icons_1sbwqkz3 uv_icons_1sbwqkz7 uv_icons_1sbwqkzh uv_icons_1sbwqkzk"
128+
height="20"
129+
viewBox="0 0 20 20"
130+
width="20"
128131
>
129-
<svg
130-
class="uv_icons_1sbwqkz0 uv_icons_1sbwqkz2 uv_icons_1sbwqkz3 uv_icons_1sbwqkz7 uv_icons_1sbwqkzh uv_icons_1sbwqkzk"
131-
height="20"
132-
viewBox="0 0 20 20"
133-
width="20"
134-
>
135-
<title>
136-
UploadIcon
137-
</title>
138-
<path
139-
d="M9.25 13.25a.75.75 0 0 0 1.5 0V4.636l2.955 3.129a.75.75 0 0 0 1.09-1.03l-4.25-4.5a.75.75 0 0 0-1.09 0l-4.25 4.5a.75.75 0 1 0 1.09 1.03L9.25 4.636z"
140-
/>
141-
<path
142-
d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25z"
143-
/>
144-
</svg>
145-
<div
146-
class="uv_m4c9ow0 uv_m4c9ow1 uv_m4c9ow4 uv_m4c9owb uv_m4c9ow16 uv_m4c9ow22"
147-
for="_r_4_"
148-
style="--uv_qabug40: left;"
132+
<title>
133+
UploadIcon
134+
</title>
135+
<path
136+
d="M9.25 13.25a.75.75 0 0 0 1.5 0V4.636l2.955 3.129a.75.75 0 0 0 1.09-1.03l-4.25-4.5a.75.75 0 0 0-1.09 0l-4.25 4.5a.75.75 0 1 0 1.09 1.03L9.25 4.636z"
137+
/>
138+
<path
139+
d="M3.5 12.75a.75.75 0 0 0-1.5 0v2.5A2.75 2.75 0 0 0 4.75 18h10.5A2.75 2.75 0 0 0 18 15.25v-2.5a.75.75 0 0 0-1.5 0v2.5c0 .69-.56 1.25-1.25 1.25H4.75c-.69 0-1.25-.56-1.25-1.25z"
149140
/>
150-
</div>
141+
</svg>
142+
<div
143+
class="uv_m4c9ow0 uv_m4c9ow1 uv_m4c9ow4 uv_m4c9owb uv_m4c9ow16 uv_m4c9ow22"
144+
style="--uv_qabug40: left;"
145+
/>
151146
</div>
152147
</div>
153148
</div>

‎packages/ui/src/components/FileInput/DropzoneContent.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,14 +27,13 @@ export const DropzoneContent = ({
2727
size={isSmall ? 'small' : 'xlarge'}
2828
/>
2929
<Text
30-
as={isSmall ? 'label' : 'div'}
30+
as={isSmall ? 'p' : 'div'}
3131
className={
3232
isSmall
3333
? fileInputStyle.titleSmall[disabled ? 'disabled' : 'default']
3434
: undefined
3535
}
3636
disabled={disabled}
37-
htmlFor={inputId}
3837
placement="left"
3938
sentiment="neutral"
4039
variant={isSmall ? 'bodySmallStrong' : 'headingSmallStrong'}

0 commit comments

Comments
 (0)