Skip to content

Commit f965966

Browse files
JialeclJialecl
authored
Merge pull request #2273 from dxc-technology/PelayoFelgueroso-fileInput-optional
Add optional prop to the File Input component
2 parents 85e12dd + 7769e0a commit f965966

File tree

5 files changed

+142
-112
lines changed

5 files changed

+142
-112
lines changed

‎apps/website/screens/components/file-input/code/FileInputCodePage.tsx

Lines changed: 85 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -24,31 +24,54 @@ const sections = [
2424
</thead>
2525
<tbody>
2626
<tr>
27-
<td>mode</td>
27+
<td>accept</td>
2828
<td>
29-
<TableCode>'file' | 'filedrop' | 'dropzone'</TableCode>
29+
<TableCode>string</TableCode>
3030
</td>
31-
<td>Available modes of the component.</td>
3231
<td>
33-
<TableCode>'file'</TableCode>
32+
The file types that the component accepts. Its value must be one of all the possible values of the HTML
33+
file input's <Code>accept</Code> attribute. Please check the documentation{" "}
34+
<DxcLink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept">here</DxcLink>.
3435
</td>
36+
<td>-</td>
3537
</tr>
3638
<tr>
37-
<td>label</td>
39+
<td>buttonLabel</td>
3840
<td>
3941
<TableCode>string</TableCode>
4042
</td>
41-
<td>Text to be placed above the component.</td>
43+
<td>Text to be placed inside the button.</td>
4244
<td>-</td>
4345
</tr>
4446
<tr>
45-
<td>buttonLabel</td>
4647
<td>
47-
<TableCode>string</TableCode>
48+
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
49+
<StatusBadge status="required" />
50+
callbackFile
51+
</DxcFlex>
52+
</td>
53+
<td>
54+
<TableCode>
55+
{"(val: {files: { file: File, error?: string, preview?: string }[], error?: string}) => void"}
56+
</TableCode>
57+
</td>
58+
<td>
59+
This function will be called when the user adds or deletes a file. That is, when the file input's inner
60+
value is modified. The list of files will be sent as a parameter. In this function, the files can be
61+
updated or returned as they come. These files must be passed to the value in order to be shown.
4862
</td>
49-
<td>Text to be placed inside the button.</td>
5063
<td>-</td>
5164
</tr>
65+
<tr>
66+
<td>disabled</td>
67+
<td>
68+
<TableCode>boolean</TableCode>
69+
</td>
70+
<td>If true, the component will be disabled.</td>
71+
<td>
72+
<TableCode>false</TableCode>
73+
</td>
74+
</tr>
5275
<tr>
5376
<td>dropAreaLabel</td>
5477
<td>
@@ -66,25 +89,21 @@ const sections = [
6689
<td>-</td>
6790
</tr>
6891
<tr>
69-
<td>accept</td>
92+
<td>label</td>
7093
<td>
7194
<TableCode>string</TableCode>
7295
</td>
73-
<td>
74-
The file types that the component accepts. Its value must be one of all the possible values of the HTML
75-
file input's <Code>accept</Code> attribute. Please check the documentation{" "}
76-
<DxcLink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept">here</DxcLink>.
77-
</td>
96+
<td>Text to be placed above the component.</td>
7897
<td>-</td>
7998
</tr>
8099
<tr>
81-
<td>minSize</td>
100+
<td>margin</td>
82101
<td>
83-
<TableCode>number</TableCode>
102+
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
84103
</td>
85104
<td>
86-
The minimum file size (in bytes) allowed. If the size of the file does not comply this value, the file
87-
will have an error.
105+
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
106+
'right' properties in order to specify different margin sizes.
88107
</td>
89108
<td>-</td>
90109
</tr>
@@ -100,43 +119,24 @@ const sections = [
100119
<td>-</td>
101120
</tr>
102121
<tr>
122+
<td>minSize</td>
103123
<td>
104-
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
105-
<StatusBadge status="required" />
106-
value
107-
</DxcFlex>
108-
</td>
109-
<td>
110-
<TableCode>{"{ file: File, error?: string, preview?: string }[]"}</TableCode>
124+
<TableCode>number</TableCode>
111125
</td>
112126
<td>
113-
An array of files representing the selected files. Each file has the following properties:
114-
<ul>
115-
<li>
116-
<b>file</b>: Selected file.
117-
</li>
118-
<li>
119-
<b>error</b>: Error of the file. If it is defined, it will be shown and the file item will be mark as
120-
invalid.
121-
</li>
122-
<li>
123-
<b>preview</b>: Preview of the file.
124-
</li>
125-
</ul>
127+
The minimum file size (in bytes) allowed. If the size of the file does not comply this value, the file
128+
will have an error.
126129
</td>
127130
<td>-</td>
128131
</tr>
129132
<tr>
130-
<td>showPreview</td>
131-
<td>
132-
<TableCode>boolean</TableCode>
133-
</td>
133+
<td>mode</td>
134134
<td>
135-
If true, if the file is an image, a preview of it will be shown. If not, an icon referring to the file
136-
type will be shown.
135+
<TableCode>'file' | 'filedrop' | 'dropzone'</TableCode>
137136
</td>
137+
<td>Available modes of the component.</td>
138138
<td>
139-
<TableCode>false</TableCode>
139+
<TableCode>'file'</TableCode>
140140
</td>
141141
</tr>
142142
<tr>
@@ -154,42 +154,40 @@ const sections = [
154154
</td>
155155
</tr>
156156
<tr>
157-
<td>disabled</td>
157+
<td>
158+
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
159+
<StatusBadge status="new" />
160+
optional
161+
</DxcFlex>
162+
</td>
158163
<td>
159164
<TableCode>boolean</TableCode>
160165
</td>
161-
<td>If true, the component will be disabled.</td>
166+
<td>If true, the input will be optional, showing '(Optional)' next to the label.</td>
162167
<td>
163168
<TableCode>false</TableCode>
164169
</td>
165170
</tr>
166171
<tr>
172+
<td>ref</td>
167173
<td>
168-
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
169-
<StatusBadge status="required" />
170-
callbackFile
171-
</DxcFlex>
172-
</td>
173-
<td>
174-
<TableCode>{"(files: { file: File, error?: string, preview?: string }[]) => void"}</TableCode>
175-
</td>
176-
<td>
177-
This function will be called when the user adds or deletes a file. That is, when the file input's inner
178-
value is modified. The list of files will be sent as a parameter. In this function, the files can be
179-
updated or returned as they come. These files must be passed to the value in order to be shown.
174+
<TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
180175
</td>
176+
<td>Reference to the component.</td>
181177
<td>-</td>
182178
</tr>
183179
<tr>
184-
<td>margin</td>
180+
<td>showPreview</td>
185181
<td>
186-
<TableCode>'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Margin</TableCode>
182+
<TableCode>boolean</TableCode>
187183
</td>
188184
<td>
189-
Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
190-
'right' properties in order to specify different margin sizes.
185+
If true, if the file is an image, a preview of it will be shown. If not, an icon referring to the file
186+
type will be shown.
187+
</td>
188+
<td>
189+
<TableCode>false</TableCode>
191190
</td>
192-
<td>-</td>
193191
</tr>
194192
<tr>
195193
<td>tabIndex</td>
@@ -204,11 +202,30 @@ const sections = [
204202
</td>
205203
</tr>
206204
<tr>
207-
<td>ref</td>
208205
<td>
209-
<TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
206+
<DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
207+
<StatusBadge status="required" />
208+
value
209+
</DxcFlex>
210+
</td>
211+
<td>
212+
<TableCode>{"{ file: File, error?: string, preview?: string }[]"}</TableCode>
213+
</td>
214+
<td>
215+
An array of files representing the selected files. Each file has the following properties:
216+
<ul>
217+
<li>
218+
<b>file</b>: Selected file.
219+
</li>
220+
<li>
221+
<b>error</b>: Error of the file. If it is defined, it will be shown and the file item will be mark as
222+
invalid.
223+
</li>
224+
<li>
225+
<b>preview</b>: Preview of the file.
226+
</li>
227+
</ul>
210228
</td>
211-
<td>Reference to the component.</td>
212229
<td>-</td>
213230
</tr>
214231
</tbody>

‎packages/lib/src/file-input/FileInput.stories.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import { Meta, StoryObj } from "@storybook/react";
22
import ExampleContainer from "../../.storybook/components/ExampleContainer";
33
import Title from "../../.storybook/components/Title";
44
import DxcFileInput from "./FileInput";
5-
import { userEvent, within } from "@storybook/test";
65

76
export default {
87
title: "File Input",
@@ -81,6 +80,10 @@ const FileInput = () => (
8180
<Title title="With label" theme="light" level={4} />
8281
<DxcFileInput label="File input" value={[]} callbackFile={() => {}} />
8382
</ExampleContainer>
83+
<ExampleContainer>
84+
<Title title="Optional" theme="light" level={4} />
85+
<DxcFileInput label="File input" value={[]} callbackFile={() => {}} optional />
86+
</ExampleContainer>
8487
<ExampleContainer>
8588
<Title title="With label and helper text" theme="light" level={4} />
8689
<DxcFileInput label="File input" helperText="Please select files" value={[]} callbackFile={() => {}} />

‎packages/lib/src/file-input/FileInput.tsx

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
105105
(
106106
{
107107
mode = "file",
108-
label = "",
108+
label,
109109
buttonLabel,
110110
dropAreaLabel,
111111
helperText = "",
@@ -119,6 +119,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
119119
value,
120120
margin,
121121
tabIndex = 0,
122+
optional = false,
122123
},
123124
ref
124125
): JSX.Element => {
@@ -226,10 +227,12 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
226227

227228
return (
228229
<FileInputContainer margin={margin} ref={ref}>
229-
<Label htmlFor={fileInputId} disabled={disabled}>
230-
{label}
231-
</Label>
232-
<HelperText disabled={disabled}>{helperText}</HelperText>
230+
{label && (
231+
<Label disabled={disabled} hasMargin={!helperText} htmlFor={fileInputId}>
232+
{label} {optional && <span>{translatedLabels.formFields.optionalLabel}</span>}
233+
</Label>
234+
)}
235+
{helperText && <HelperText disabled={disabled}>{helperText}</HelperText>}
233236
{mode === "file" ? (
234237
<FileContainer singleFileMode={!multiple && files.length === 1}>
235238
<ValueInput
@@ -240,6 +243,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
240243
onChange={selectFiles}
241244
disabled={disabled}
242245
readOnly
246+
required={!optional}
243247
/>
244248
<DxcButton
245249
mode="secondary"
@@ -282,6 +286,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
282286
onChange={selectFiles}
283287
disabled={disabled}
284288
readOnly
289+
required={!optional}
285290
/>
286291
<DragDropArea
287292
isDragging={isDragging}

0 commit comments

Comments
 (0)