From 47ae08e01da66e1d288499d15a51ee47c694de30 Mon Sep 17 00:00:00 2001 From: rarrojolopez Date: Tue, 28 Feb 2023 17:27:23 +0100 Subject: [PATCH 1/9] Changes file input --- lib/src/file-input/FileInput.tsx | 2 - lib/src/file-input/FileItem.tsx | 1 + .../file-input/code/FileInputCodePage.tsx | 16 ++++--- .../file-input/code/examples/basicUsage.ts | 8 +--- .../file-input/code/examples/formFileInput.ts | 45 +++++++++++++++++++ 5 files changed, 59 insertions(+), 13 deletions(-) create mode 100644 website/screens/components/file-input/code/examples/formFileInput.ts diff --git a/lib/src/file-input/FileInput.tsx b/lib/src/file-input/FileInput.tsx index 74d49d43b..0f0163dc9 100644 --- a/lib/src/file-input/FileInput.tsx +++ b/lib/src/file-input/FileInput.tsx @@ -179,7 +179,6 @@ const DxcFileInput = React.forwardRef( accept={accept} multiple={multiple} onChange={selectFiles} - name={name} disabled={disabled} readOnly aria-hidden="true" @@ -223,7 +222,6 @@ const DxcFileInput = React.forwardRef( accept={accept} multiple={multiple} onChange={selectFiles} - name={name} disabled={disabled} readOnly aria-hidden="true" diff --git a/lib/src/file-input/FileItem.tsx b/lib/src/file-input/FileItem.tsx index 7457ef700..1e4ec3d47 100644 --- a/lib/src/file-input/FileItem.tsx +++ b/lib/src/file-input/FileItem.tsx @@ -53,6 +53,7 @@ const FileItem = ({ {error && {errorIcon}} { onDelete(fileName); }} diff --git a/website/screens/components/file-input/code/FileInputCodePage.tsx b/website/screens/components/file-input/code/FileInputCodePage.tsx index 237ecaef2..972d0fd2e 100644 --- a/website/screens/components/file-input/code/FileInputCodePage.tsx +++ b/website/screens/components/file-input/code/FileInputCodePage.tsx @@ -4,8 +4,9 @@ import QuickNavContainer from "@/common/QuickNavContainer"; import Code from "@/common/Code"; import DocFooter from "@/common/DocFooter"; import Example from "@/common/example/Example"; -import errorHandling from "./examples/errorHandling"; import basicUsage from "./examples/basicUsage"; +import errorHandling from "./examples/errorHandling"; +import formFileInput from "./examples/formFileInput"; import HeaderDescriptionCell from "@/common/HeaderDescriptionCell"; import StatusTag from "@/common/StatusTag"; @@ -139,10 +140,11 @@ const sections = [ callbackFile: function - This function will be called when the user selects or drops a - file. The list of files will be sent as a parameter. In this - function, the files can be updated or returned as they come. These - files must be passed to the value in order to be shown. + This function will be called when the user adds or deletes a file. + That is, when the file input's inner value is modified. The + list of files will be sent as a parameter. In this function, the + files can be updated or returned as they come. These files must be + passed to the value in order to be shown. @@ -187,6 +189,10 @@ const sections = [ title: "Error handling", content: , }, + { + title: "Inside a form", + content: , + }, ], }, ]; diff --git a/website/screens/components/file-input/code/examples/basicUsage.ts b/website/screens/components/file-input/code/examples/basicUsage.ts index 5fca8fea6..c8930fffb 100644 --- a/website/screens/components/file-input/code/examples/basicUsage.ts +++ b/website/screens/components/file-input/code/examples/basicUsage.ts @@ -4,15 +4,13 @@ import { DxcButton, DxcFlex, } from "@dxc-technology/halstack-react"; -import { useState, useRef } from "react"; +import { useState } from "react"; const code = `() => { - const fileRef = useRef(); const [files, setFiles] = useState([]); const handleSubmit = () => { - const fileInput = fileRef.current.getElementsByTagName("input")[0]; - console.log(Array.from(fileInput.files).map(file => file.name)); + console.log(files.map((file) => file.file.name)); }; const callbackFile = (files) => { @@ -26,7 +24,6 @@ const code = `() => { label="Select your files" value={files} callbackFile={callbackFile} - ref={fileRef} /> @@ -40,7 +37,6 @@ const scope = { DxcInset, DxcFlex, useState, - useRef, }; export default { code, scope }; diff --git a/website/screens/components/file-input/code/examples/formFileInput.ts b/website/screens/components/file-input/code/examples/formFileInput.ts new file mode 100644 index 000000000..0b309c29c --- /dev/null +++ b/website/screens/components/file-input/code/examples/formFileInput.ts @@ -0,0 +1,45 @@ +import { + DxcFileInput, + DxcInset, + DxcButton, + DxcFlex, +} from "@dxc-technology/halstack-react"; +import { useState } from "react"; + +const code = `() => { + const [files, setFiles] = useState([]); + + const handleSubmit = (event) => { + event.preventDefault(); + console.log(files.map((file) => file.file.name)); + }; + + const callbackFile = (files) => { + setFiles(files); + }; + + return ( +
+ + + + + + +
+ ); +}`; + +const scope = { + DxcFileInput, + DxcButton, + DxcInset, + DxcFlex, + useState, +}; + +export default { code, scope }; From c72b214c47b51eca294516f4ac41688dd7da3a60 Mon Sep 17 00:00:00 2001 From: rarrojolopez Date: Wed, 1 Mar 2023 10:08:13 +0100 Subject: [PATCH 2/9] Remove file input test --- lib/src/file-input/FileInput.test.js | 26 -------------------------- 1 file changed, 26 deletions(-) diff --git a/lib/src/file-input/FileInput.test.js b/lib/src/file-input/FileInput.test.js index a8f377c93..52d9f41e1 100644 --- a/lib/src/file-input/FileInput.test.js +++ b/lib/src/file-input/FileInput.test.js @@ -280,30 +280,4 @@ describe("FileInput component tests", () => { ]); }); }); - test("File input sends value when submitted in a form", () => { - const newFile = new File(["newFile"], "newFile.pdf", { type: "pdf" }); - const handlerOnSubmit = jest.fn((e) => { - e.preventDefault(); - const formData = new FormData(e.target); - const formProps = Object.fromEntries(formData); - expect(formProps).toStrictEqual({ file: newFile }); - }); - const { getByText, getByLabelText } = render( -
- - - - ); - const inputFile = getByLabelText("File input label", { hidden: true }); - const submit = getByText("Submit"); - fireEvent.change(inputFile, { target: { files: [newFile] } }); - userEvent.click(submit); - }); }); From eafeb8b9437af8169d540d1f9480217b03938089 Mon Sep 17 00:00:00 2001 From: rarrojolopez Date: Wed, 1 Mar 2023 10:20:13 +0100 Subject: [PATCH 3/9] Change test --- lib/src/file-input/FileInput.test.js | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/src/file-input/FileInput.test.js b/lib/src/file-input/FileInput.test.js index 52d9f41e1..33a6f2e75 100644 --- a/lib/src/file-input/FileInput.test.js +++ b/lib/src/file-input/FileInput.test.js @@ -4,6 +4,7 @@ import userEvent from "@testing-library/user-event"; import DxcFileInput from "./FileInput"; const file1 = new File(["file1"], "file1.png", { type: "image/png" }); + const file2 = new File(["file2"], "file2.txt", { type: "text/plain", }); From e3a152ba0f24f49a08dbb50ec818fb367a37f04e Mon Sep 17 00:00:00 2001 From: rarrojolopez Date: Wed, 1 Mar 2023 10:30:15 +0100 Subject: [PATCH 4/9] Change to force Chromatic --- lib/src/file-input/FileInput.test.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/src/file-input/FileInput.test.js b/lib/src/file-input/FileInput.test.js index 33a6f2e75..52d9f41e1 100644 --- a/lib/src/file-input/FileInput.test.js +++ b/lib/src/file-input/FileInput.test.js @@ -4,7 +4,6 @@ import userEvent from "@testing-library/user-event"; import DxcFileInput from "./FileInput"; const file1 = new File(["file1"], "file1.png", { type: "image/png" }); - const file2 = new File(["file2"], "file2.txt", { type: "text/plain", }); From f77ccea4434271c148b157dd15afdcd914989674 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez Date: Thu, 2 Mar 2023 11:45:27 +0100 Subject: [PATCH 5/9] Changes based on feedback --- lib/src/file-input/FileInput.tsx | 2 -- .../components/file-input/code/examples/formFileInput.ts | 2 +- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/lib/src/file-input/FileInput.tsx b/lib/src/file-input/FileInput.tsx index 0f0163dc9..54f929f24 100644 --- a/lib/src/file-input/FileInput.tsx +++ b/lib/src/file-input/FileInput.tsx @@ -181,7 +181,6 @@ const DxcFileInput = React.forwardRef( onChange={selectFiles} disabled={disabled} readOnly - aria-hidden="true" /> ( onChange={selectFiles} disabled={disabled} readOnly - aria-hidden="true" /> { value={files} callbackFile={callbackFile} /> - + From 7b7f6c8ee3f6dfaeabe56444406a14454bb3f797 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez Date: Thu, 2 Mar 2023 11:54:41 +0100 Subject: [PATCH 6/9] Change to force Chromatic --- .../screens/components/file-input/code/examples/formFileInput.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/website/screens/components/file-input/code/examples/formFileInput.ts b/website/screens/components/file-input/code/examples/formFileInput.ts index 532e2d989..911e9d167 100644 --- a/website/screens/components/file-input/code/examples/formFileInput.ts +++ b/website/screens/components/file-input/code/examples/formFileInput.ts @@ -13,7 +13,6 @@ const code = `() => { event.preventDefault(); console.log(files.map((file) => file.file.name)); }; - const callbackFile = (files) => { setFiles(files); }; From 8311ac0d6060986e3c2d588be4f7abfc15deadf0 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez Date: Thu, 2 Mar 2023 11:59:26 +0100 Subject: [PATCH 7/9] Change to force Chromatic --- .../screens/components/file-input/code/examples/formFileInput.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/website/screens/components/file-input/code/examples/formFileInput.ts b/website/screens/components/file-input/code/examples/formFileInput.ts index 911e9d167..93b1bc634 100644 --- a/website/screens/components/file-input/code/examples/formFileInput.ts +++ b/website/screens/components/file-input/code/examples/formFileInput.ts @@ -13,6 +13,7 @@ const code = `() => { event.preventDefault(); console.log(files.map((file) => file.file.name)); }; + const callbackFile = (files) => { setFiles(files); }; From 94bd8fb94762d3b6d95aca26677763f583119542 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez Date: Thu, 2 Mar 2023 12:15:37 +0100 Subject: [PATCH 8/9] Change to force Chromatic --- .../screens/components/file-input/code/examples/formFileInput.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/website/screens/components/file-input/code/examples/formFileInput.ts b/website/screens/components/file-input/code/examples/formFileInput.ts index 93b1bc634..911e9d167 100644 --- a/website/screens/components/file-input/code/examples/formFileInput.ts +++ b/website/screens/components/file-input/code/examples/formFileInput.ts @@ -13,7 +13,6 @@ const code = `() => { event.preventDefault(); console.log(files.map((file) => file.file.name)); }; - const callbackFile = (files) => { setFiles(files); }; From a288e43c1d158251de3abe4ab39dde11a1db24c6 Mon Sep 17 00:00:00 2001 From: Raquel Arrojo Lopez Date: Thu, 2 Mar 2023 12:22:06 +0100 Subject: [PATCH 9/9] Change to force Chromatic --- lib/src/file-input/FileItem.tsx | 2 +- .../components/file-input/code/examples/formFileInput.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/src/file-input/FileItem.tsx b/lib/src/file-input/FileItem.tsx index 1e4ec3d47..b8b80801b 100644 --- a/lib/src/file-input/FileItem.tsx +++ b/lib/src/file-input/FileItem.tsx @@ -53,10 +53,10 @@ const FileItem = ({ {error && {errorIcon}} { onDelete(fileName); }} + type="button" title={translatedLabels.fileInput.deleteFileActionTitle} aria-label={translatedLabels.fileInput.deleteFileActionTitle} tabIndex={tabIndex} diff --git a/website/screens/components/file-input/code/examples/formFileInput.ts b/website/screens/components/file-input/code/examples/formFileInput.ts index 911e9d167..93b1bc634 100644 --- a/website/screens/components/file-input/code/examples/formFileInput.ts +++ b/website/screens/components/file-input/code/examples/formFileInput.ts @@ -13,6 +13,7 @@ const code = `() => { event.preventDefault(); console.log(files.map((file) => file.file.name)); }; + const callbackFile = (files) => { setFiles(files); };