From 80da3319b3e4f16603eedef1fc96a6f805a08525 Mon Sep 17 00:00:00 2001
From: PelayoFelgueroso <pfelguerosogalguera@gmail.com>
Date: Mon, 23 Feb 2026 10:29:02 +0100
Subject: [PATCH 1/3] Add fillParent prop to FileInput component

---
 .../file-input/code/FileInputCodePage.tsx         | 15 +++++++++++++++
 packages/lib/src/file-input/FileInput.tsx         | 15 +++++++++++----
 packages/lib/src/file-input/types.ts              |  4 ++++
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/apps/website/screens/components/file-input/code/FileInputCodePage.tsx b/apps/website/screens/components/file-input/code/FileInputCodePage.tsx
index 736427146c..d630bf7bcf 100644
--- a/apps/website/screens/components/file-input/code/FileInputCodePage.tsx
+++ b/apps/website/screens/components/file-input/code/FileInputCodePage.tsx
@@ -79,6 +79,21 @@ const sections = [
             <td>Text to be placed inside the drag and drop zone alongside the button.</td>
             <td>-</td>
           </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                fillParent
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>boolean</TableCode>
+            </td>
+            <td>If true, the component will take all the width of its container.</td>
+            <td>
+              <TableCode>false</TableCode>
+            </td>
+          </tr>
           <tr>
             <td>helperText</td>
             <td>
diff --git a/packages/lib/src/file-input/FileInput.tsx b/packages/lib/src/file-input/FileInput.tsx
index bb05aee54a..4528ae81a7 100644
--- a/packages/lib/src/file-input/FileInput.tsx
+++ b/packages/lib/src/file-input/FileInput.tsx
@@ -9,7 +9,11 @@ import { getFilePreview, isFileIncluded } from "./utils";
 import HelperText from "../styles/forms/HelperText";
 import Label from "../styles/forms/Label";
 
-const FileInputContainer = styled.div<{ margin: FileInputPropsType["margin"] }>`
+const FileInputContainer = styled.div<{
+  margin: FileInputPropsType["margin"];
+  mode: FileInputPropsType["mode"];
+  fillParent: FileInputPropsType["fillParent"];
+}>`
   display: flex;
   flex-direction: column;
   margin: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
@@ -21,7 +25,7 @@ const FileInputContainer = styled.div<{ margin: FileInputPropsType["margin"] }>`
     props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
   margin-left: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
-  width: fit-content;
+  width: ${(props) => (props.mode !== "file" && props.fillParent ? "100%" : "fit-content")};
 `;
 
 const FileContainer = styled.div<{ singleFileMode: boolean }>`
@@ -54,6 +58,7 @@ const DragDropArea = styled.div<{
   mode: FileInputPropsType["mode"];
   disabled: FileInputPropsType["disabled"];
   isDragging: boolean;
+  fillParent: FileInputPropsType["fillParent"];
 }>`
   box-sizing: border-box;
   display: flex;
@@ -62,7 +67,7 @@ const DragDropArea = styled.div<{
       ? "flex-direction: row; column-gap: var(--spacing-gap-s);"
       : "justify-content: center; flex-direction: column; row-gap: var(--spacing-gap-s); height: 160px;"}
   align-items: center;
-  width: 320px;
+  width: ${(props) => (props.fillParent ? "100%" : "320px")};
   padding: ${(props) => (props.mode === "filedrop" ? `var(--spacing-padding-xxs)` : "var(--spacing-padding-m)")};
   overflow: hidden;
   border-radius: var(--border-radius-m);
@@ -109,6 +114,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
       buttonLabel,
       dropAreaLabel,
       helperText = "",
+      fillParent = false,
       accept,
       minSize,
       maxSize,
@@ -230,7 +236,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
     }, [value]);
 
     return (
-      <FileInputContainer margin={margin} ref={ref}>
+      <FileInputContainer margin={margin} ref={ref} mode={mode} fillParent={fillParent}>
         {label && (
           <Label disabled={disabled} hasMargin={!helperText} htmlFor={fileInputId}>
             {label} {optional && <span>{translatedLabels.formFields.optionalLabel}</span>}
@@ -295,6 +301,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
             <DragDropArea
               isDragging={isDragging}
               disabled={disabled}
+              fillParent={fillParent}
               mode={mode}
               onDrop={handleDrop}
               onDragEnter={handleDragIn}
diff --git a/packages/lib/src/file-input/types.ts b/packages/lib/src/file-input/types.ts
index a901167918..4951787d94 100644
--- a/packages/lib/src/file-input/types.ts
+++ b/packages/lib/src/file-input/types.ts
@@ -33,6 +33,10 @@ type CommonProps = {
    * If true, the component will be disabled.
    */
   disabled?: boolean;
+  /**
+   * If true, the component will take all the width of its container.
+   */
+  fillParent?: boolean;
   /**
    * Helper text to be placed above the component.
    */

From c28aefd0f4442d0aaf21899246505d9e48f2fd54 Mon Sep 17 00:00:00 2001
From: PelayoFelgueroso <pfelguerosogalguera@gmail.com>
Date: Mon, 23 Feb 2026 12:21:40 +0100
Subject: [PATCH 2/3] Changes based on comments

---
 .../file-input/code/FileInputCodePage.tsx     | 30 +++++++++----------
 .../lib/src/file-input/FileInput.stories.tsx  | 28 +++++++++++++++++
 packages/lib/src/file-input/FileInput.tsx     | 17 ++++++-----
 packages/lib/src/file-input/FileItem.tsx      | 15 ++++++----
 packages/lib/src/file-input/types.ts          |  9 +++---
 5 files changed, 68 insertions(+), 31 deletions(-)

diff --git a/apps/website/screens/components/file-input/code/FileInputCodePage.tsx b/apps/website/screens/components/file-input/code/FileInputCodePage.tsx
index d630bf7bcf..a00c8fe06f 100644
--- a/apps/website/screens/components/file-input/code/FileInputCodePage.tsx
+++ b/apps/website/screens/components/file-input/code/FileInputCodePage.tsx
@@ -79,21 +79,6 @@ const sections = [
             <td>Text to be placed inside the drag and drop zone alongside the button.</td>
             <td>-</td>
           </tr>
-          <tr>
-            <td>
-              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
-                <StatusBadge status="new" />
-                fillParent
-              </DxcFlex>
-            </td>
-            <td>
-              <TableCode>boolean</TableCode>
-            </td>
-            <td>If true, the component will take all the width of its container.</td>
-            <td>
-              <TableCode>false</TableCode>
-            </td>
-          </tr>
           <tr>
             <td>helperText</td>
             <td>
@@ -203,6 +188,21 @@ const sections = [
               <TableCode>false</TableCode>
             </td>
           </tr>
+          <tr>
+            <td>
+              <DxcFlex direction="column" gap="var(--spacing-gap-xs)" alignItems="baseline">
+                <StatusBadge status="new" />
+                size
+              </DxcFlex>
+            </td>
+            <td>
+              <TableCode>'medium' | 'fillParent'</TableCode>
+            </td>
+            <td>If true, the component will take all the width of its container.</td>
+            <td>
+              <TableCode>'medium'</TableCode>
+            </td>
+          </tr>
           <tr>
             <td>tabIndex</td>
             <td>
diff --git a/packages/lib/src/file-input/FileInput.stories.tsx b/packages/lib/src/file-input/FileInput.stories.tsx
index 67b5a16fba..92c655b912 100644
--- a/packages/lib/src/file-input/FileInput.stories.tsx
+++ b/packages/lib/src/file-input/FileInput.stories.tsx
@@ -2,6 +2,7 @@ import { Meta, StoryObj } from "@storybook/react-vite";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import Title from "../../.storybook/components/Title";
 import DxcFileInput from "./FileInput";
+import DxcContainer from "../container/Container";
 
 export default {
   title: "File Input",
@@ -510,6 +511,33 @@ const FileInput = () => (
         margin="xxlarge"
       />
     </ExampleContainer>
+    <Title title="Sizes" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="fillParent size" theme="light" level={4} />
+      <DxcContainer width="200px">
+        <DxcFileInput
+          label="File input"
+          helperText="Please select files"
+          value={fileExample}
+          callbackFile={() => {}}
+          mode="filedrop"
+          size="fillParent"
+        />
+      </DxcContainer>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="fillParent size" theme="light" level={4} />
+      <DxcContainer width="200px">
+        <DxcFileInput
+          label="File input"
+          helperText="Please select files"
+          value={fileExample}
+          callbackFile={() => {}}
+          mode="dropzone"
+          size="fillParent"
+        />
+      </DxcContainer>
+    </ExampleContainer>
   </>
 );
 // const EllipsisError = () => {
diff --git a/packages/lib/src/file-input/FileInput.tsx b/packages/lib/src/file-input/FileInput.tsx
index 4528ae81a7..b59c7dccf1 100644
--- a/packages/lib/src/file-input/FileInput.tsx
+++ b/packages/lib/src/file-input/FileInput.tsx
@@ -12,7 +12,7 @@ import Label from "../styles/forms/Label";
 const FileInputContainer = styled.div<{
   margin: FileInputPropsType["margin"];
   mode: FileInputPropsType["mode"];
-  fillParent: FileInputPropsType["fillParent"];
+  size: FileInputPropsType["size"];
 }>`
   display: flex;
   flex-direction: column;
@@ -25,7 +25,7 @@ const FileInputContainer = styled.div<{
     props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
   margin-left: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
-  width: ${(props) => (props.mode !== "file" && props.fillParent ? "100%" : "fit-content")};
+  width: ${(props) => (props.mode !== "file" && props.size === "fillParent" ? "100%" : "320px")};
 `;
 
 const FileContainer = styled.div<{ singleFileMode: boolean }>`
@@ -45,6 +45,7 @@ const FileItemListContainer = styled.div`
   display: flex;
   flex-direction: column;
   row-gap: var(--spacing-gap-xs);
+  width: 100%;
 `;
 
 const Container = styled.div`
@@ -58,7 +59,7 @@ const DragDropArea = styled.div<{
   mode: FileInputPropsType["mode"];
   disabled: FileInputPropsType["disabled"];
   isDragging: boolean;
-  fillParent: FileInputPropsType["fillParent"];
+  size: FileInputPropsType["size"];
 }>`
   box-sizing: border-box;
   display: flex;
@@ -67,7 +68,7 @@ const DragDropArea = styled.div<{
       ? "flex-direction: row; column-gap: var(--spacing-gap-s);"
       : "justify-content: center; flex-direction: column; row-gap: var(--spacing-gap-s); height: 160px;"}
   align-items: center;
-  width: ${(props) => (props.fillParent ? "100%" : "320px")};
+  width: ${(props) => props.size === "fillParent" && "100%"};
   padding: ${(props) => (props.mode === "filedrop" ? `var(--spacing-padding-xxs)` : "var(--spacing-padding-m)")};
   overflow: hidden;
   border-radius: var(--border-radius-m);
@@ -114,7 +115,6 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
       buttonLabel,
       dropAreaLabel,
       helperText = "",
-      fillParent = false,
       accept,
       minSize,
       maxSize,
@@ -122,6 +122,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
       multiple = true,
       disabled = false,
       callbackFile,
+      size = "medium",
       value,
       margin,
       tabIndex = 0,
@@ -236,7 +237,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
     }, [value]);
 
     return (
-      <FileInputContainer margin={margin} ref={ref} mode={mode} fillParent={fillParent}>
+      <FileInputContainer margin={margin} ref={ref} mode={mode} size={size}>
         {label && (
           <Label disabled={disabled} hasMargin={!helperText} htmlFor={fileInputId}>
             {label} {optional && <span>{translatedLabels.formFields.optionalLabel}</span>}
@@ -281,6 +282,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
                     onDelete={onDelete}
                     tabIndex={tabIndex}
                     key={`file-${index}`}
+                    size={size}
                   />
                 ))}
               </FileItemListContainer>
@@ -301,7 +303,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
             <DragDropArea
               isDragging={isDragging}
               disabled={disabled}
-              fillParent={fillParent}
+              size={size}
               mode={mode}
               onDrop={handleDrop}
               onDragEnter={handleDragIn}
@@ -344,6 +346,7 @@ const DxcFileInput = forwardRef<RefType, FileInputPropsType>(
                     onDelete={onDelete}
                     tabIndex={tabIndex}
                     key={`file-${index}`}
+                    size={size}
                   />
                 ))}
               </FileItemListContainer>
diff --git a/packages/lib/src/file-input/FileItem.tsx b/packages/lib/src/file-input/FileItem.tsx
index 149b7a948b..5f3a577883 100644
--- a/packages/lib/src/file-input/FileItem.tsx
+++ b/packages/lib/src/file-input/FileItem.tsx
@@ -18,12 +18,13 @@ const MainContainer = styled.div<{
   error: FileItemProps["error"];
   singleFileMode: FileItemProps["singleFileMode"];
   showPreview: FileItemProps["showPreview"];
+  size: FileItemProps["size"];
 }>`
   box-sizing: border-box;
   display: flex;
   align-items: center;
   gap: var(--spacing-gap-m);
-  width: ${(props) => (props.singleFileMode ? "230px" : "320px")};
+  width: ${(props) => (props.size === "fillParent" ? "100%" : props.singleFileMode ? "230px" : "320px")};
   height: ${(props) => (props.singleFileMode || !props.showPreview) && "var(--height-m)"};
   padding: ${(props) =>
     props.showPreview && !props.singleFileMode
@@ -80,12 +81,15 @@ const FileName = styled.span`
   text-overflow: ellipsis;
 `;
 
-const ErrorMessageContainer = styled.div<{ singleFileMode: FileItemProps["singleFileMode"] }>`
+const ErrorMessageContainer = styled.div<{
+  singleFileMode: FileItemProps["singleFileMode"];
+  size: FileItemProps["size"];
+}>`
   display: flex;
   align-items: center;
   gap: var(--spacing-gap-xs);
   color: var(--color-fg-error-medium);
-  max-width: ${(props) => (props.singleFileMode ? "230px" : "320px")};
+  max-width: ${(props) => (props.size === "fillParent" ? "100%" : props.singleFileMode ? "230px" : "320px")};
 `;
 const ErrorIcon = styled.span`
   display: flex;
@@ -114,6 +118,7 @@ const FileItem = ({
   type,
   onDelete,
   tabIndex,
+  size = "medium",
 }: FileItemProps): JSX.Element => {
   const translatedLabels = useContext(HalstackLanguageContext);
   const [hasTooltip, setHasTooltip] = useState(false);
@@ -126,7 +131,7 @@ const FileItem = ({
 
   return (
     <ListItem>
-      <MainContainer error={error} singleFileMode={singleFileMode} showPreview={showPreview}>
+      <MainContainer error={error} singleFileMode={singleFileMode} showPreview={showPreview} size={size}>
         {showPreview &&
           (type.includes("image") ? (
             <ImagePreview src={preview} alt={`Preview of ${fileName}`} />
@@ -150,7 +155,7 @@ const FileItem = ({
       </MainContainer>
       {error && (
         <TooltipWrapper condition={hasTooltip} label={error}>
-          <ErrorMessageContainer role="alert" aria-live="assertive" singleFileMode={singleFileMode}>
+          <ErrorMessageContainer role="alert" aria-live="assertive" singleFileMode={singleFileMode} size={size}>
             <ErrorIcon>
               <DxcIcon icon="filled_error" />
             </ErrorIcon>
diff --git a/packages/lib/src/file-input/types.ts b/packages/lib/src/file-input/types.ts
index 4951787d94..1028ff0c2f 100644
--- a/packages/lib/src/file-input/types.ts
+++ b/packages/lib/src/file-input/types.ts
@@ -33,10 +33,6 @@ type CommonProps = {
    * If true, the component will be disabled.
    */
   disabled?: boolean;
-  /**
-   * If true, the component will take all the width of its container.
-   */
-  fillParent?: boolean;
   /**
    * Helper text to be placed above the component.
    */
@@ -72,6 +68,10 @@ type CommonProps = {
    * If true, if the file is an image, a preview of it will be shown. If not, an icon refering to the file type will be shown.
    */
   showPreview?: boolean;
+  /**
+   * Size of the component.
+   */
+  size?: "medium" | "fillParent";
   /**
    * Value of the tabindex attribute.
    */
@@ -129,6 +129,7 @@ export type FileItemProps = {
   singleFileMode: boolean;
   tabIndex: number;
   type: string;
+  size: "medium" | "fillParent";
 };
 
 export default Props;

From 8b1300b27c259a3015dec031d913b4b79bfda1ac Mon Sep 17 00:00:00 2001
From: PelayoFelgueroso <pfelguerosogalguera@gmail.com>
Date: Mon, 23 Feb 2026 14:08:04 +0100
Subject: [PATCH 3/3] Fix based on comments

---
 .../screens/components/file-input/code/FileInputCodePage.tsx  | 2 +-
 packages/lib/src/file-input/FileInput.tsx                     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/website/screens/components/file-input/code/FileInputCodePage.tsx b/apps/website/screens/components/file-input/code/FileInputCodePage.tsx
index a00c8fe06f..a7a84529bf 100644
--- a/apps/website/screens/components/file-input/code/FileInputCodePage.tsx
+++ b/apps/website/screens/components/file-input/code/FileInputCodePage.tsx
@@ -198,7 +198,7 @@ const sections = [
             <td>
               <TableCode>'medium' | 'fillParent'</TableCode>
             </td>
-            <td>If true, the component will take all the width of its container.</td>
+            <td>Size of the component.</td>
             <td>
               <TableCode>'medium'</TableCode>
             </td>
diff --git a/packages/lib/src/file-input/FileInput.tsx b/packages/lib/src/file-input/FileInput.tsx
index b59c7dccf1..d60bfc083d 100644
--- a/packages/lib/src/file-input/FileInput.tsx
+++ b/packages/lib/src/file-input/FileInput.tsx
@@ -25,7 +25,7 @@ const FileInputContainer = styled.div<{
     props.margin && typeof props.margin === "object" && props.margin.bottom ? spaces[props.margin.bottom] : ""};
   margin-left: ${(props) =>
     props.margin && typeof props.margin === "object" && props.margin.left ? spaces[props.margin.left] : ""};
-  width: ${(props) => (props.mode !== "file" && props.size === "fillParent" ? "100%" : "320px")};
+  width: ${(props) => (props.mode !== "file" && props.size === "fillParent" ? "100%" : "fit-content")};
 `;
 
 const FileContainer = styled.div<{ singleFileMode: boolean }>`
@@ -68,7 +68,7 @@ const DragDropArea = styled.div<{
       ? "flex-direction: row; column-gap: var(--spacing-gap-s);"
       : "justify-content: center; flex-direction: column; row-gap: var(--spacing-gap-s); height: 160px;"}
   align-items: center;
-  width: ${(props) => props.size === "fillParent" && "100%"};
+  width: ${(props) => (props.size === "fillParent" ? "100%" : "320px")};
   padding: ${(props) => (props.mode === "filedrop" ? `var(--spacing-padding-xxs)` : "var(--spacing-padding-m)")};
   overflow: hidden;
   border-radius: var(--border-radius-m);