Merge pull request #2107 from dxc-technology/Mil4n0r/fix_whitespaces_…

…fileinput

Added fix for whitespaces not displaying in filename

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

@@ -24,13 +24,20 @@ const file4 = new File(["file4"], "file4file4file4file4file4file4file4file4file4
 const file5 = new File(["file5"], "file5file5file5file5file5file5file5file5file5.mp4", {
   type: "video",
 });
+const fileWithSpaces = new File(["fileSpaces"], "  f i l e     s  p    a    c  e s.png", { type: "image/png" });
 
 const fileExample = [
   {
     file: file1,
   },
 ];
 
+const fileWithSpacesExample = [
+  {
+    file: fileWithSpaces,
+  },
+];
+
 const fileExampleError = [
   {
     error: "Error message",
@@ -134,6 +141,16 @@ export const Chromatic = () => (
         callbackFile={() => {}}
       />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Single file (with spaces)" theme="light" level={4} />
+      <DxcFileInput
+        label="File input"
+        helperText="Please select files"
+        value={fileWithSpacesExample}
+        multiple={false}
+        callbackFile={() => {}}
+      />
+    </ExampleContainer>
     <ExampleContainer>
       <Title title="Invalid single file" theme="light" level={4} />
       <DxcFileInput

packages/lib/src/file-input/FileItem.tsx

@@ -125,7 +125,7 @@ const FileName = styled.span`
   font-size: ${(props) => props.theme.fileItemFontSize};
   font-weight: ${(props) => props.theme.fileItemFontWeight};
   line-height: ${(props) => props.theme.fileItemLineHeight};
-  white-space: nowrap;
+  white-space: pre;
   overflow: hidden;
   text-overflow: ellipsis;
 `;