From a7c3d233745359cd683ff7015eb38d0cb15d9853 Mon Sep 17 00:00:00 2001
From: Mil4n0r <morenocarmonaenrique@gmail.com>
Date: Thu, 9 May 2024 14:26:12 +0200
Subject: [PATCH 1/5] Added DxcTooltip to file input component

---
 lib/src/file-input/FileItem.tsx | 35 ++++++++++++++++++++++-----------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/lib/src/file-input/FileItem.tsx b/lib/src/file-input/FileItem.tsx
index 98bbbd34b..e5ea2ee28 100644
--- a/lib/src/file-input/FileItem.tsx
+++ b/lib/src/file-input/FileItem.tsx
@@ -5,6 +5,7 @@ import useTheme from "../useTheme";
 import useTranslatedLabels from "../useTranslatedLabels";
 import { FileItemProps } from "./types";
 import DxcIcon from "../icon/Icon";
+import DxcTooltip from "../tooltip/Tooltip";
 
 const FileItem = ({
   fileName = "",
@@ -44,19 +45,29 @@ const FileItem = ({
                 <DxcIcon icon="filled_error" />
               </ErrorIcon>
             )}
-            <DeleteFileAction
-              onClick={() => {
-                onDelete(fileName);
-              }}
-              type="button"
-              title={translatedLabels.fileInput.deleteFileActionTitle}
-              aria-label={translatedLabels.fileInput.deleteFileActionTitle}
-              tabIndex={tabIndex}
-            >
-              <DxcIcon icon="close" />
-            </DeleteFileAction>
+            <DxcTooltip label={translatedLabels.fileInput.deleteFileActionTitle}>
+              <DeleteFileAction
+                onClick={() => {
+                  onDelete(fileName);
+                }}
+                type="button"
+                aria-label={translatedLabels.fileInput.deleteFileActionTitle}
+                tabIndex={tabIndex}
+              >
+                <DxcIcon icon="close" />
+              </DeleteFileAction>
+            </DxcTooltip>
           </DxcFlex>
-          {error && !singleFileMode && <ErrorMessage role="alert" aria-live="assertive">{error}</ErrorMessage>}
+          {error && !singleFileMode && (
+            <ErrorMessage role="alert" aria-live="assertive">
+              {error}
+            </ErrorMessage>
+          )}
+          {error && !singleFileMode && (
+            <ErrorMessage role="alert" aria-live="assertive">
+              {error}
+            </ErrorMessage>
+          )}
         </FileItemContent>
       </MainContainer>
     </ThemeProvider>

From 1b04e16c032b3ec630207b3e7dd6aa5c30c1c5f4 Mon Sep 17 00:00:00 2001
From: Mil4n0r <morenocarmonaenrique@gmail.com>
Date: Thu, 9 May 2024 16:08:26 +0200
Subject: [PATCH 2/5] Fixed duplicate error message

---
 lib/src/file-input/FileItem.tsx | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/lib/src/file-input/FileItem.tsx b/lib/src/file-input/FileItem.tsx
index e5ea2ee28..c2fd19fbb 100644
--- a/lib/src/file-input/FileItem.tsx
+++ b/lib/src/file-input/FileItem.tsx
@@ -51,7 +51,6 @@ const FileItem = ({
                   onDelete(fileName);
                 }}
                 type="button"
-                aria-label={translatedLabels.fileInput.deleteFileActionTitle}
                 tabIndex={tabIndex}
               >
                 <DxcIcon icon="close" />
@@ -63,11 +62,6 @@ const FileItem = ({
               {error}
             </ErrorMessage>
           )}
-          {error && !singleFileMode && (
-            <ErrorMessage role="alert" aria-live="assertive">
-              {error}
-            </ErrorMessage>
-          )}
         </FileItemContent>
       </MainContainer>
     </ThemeProvider>

From cae325e1840b67d67705480068439f48548ab12c Mon Sep 17 00:00:00 2001
From: Mil4n0r <morenocarmonaenrique@gmail.com>
Date: Thu, 9 May 2024 16:45:28 +0200
Subject: [PATCH 3/5] Added the aria-label to the button

---
 lib/src/file-input/FileItem.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/src/file-input/FileItem.tsx b/lib/src/file-input/FileItem.tsx
index c2fd19fbb..38ca364c4 100644
--- a/lib/src/file-input/FileItem.tsx
+++ b/lib/src/file-input/FileItem.tsx
@@ -51,6 +51,7 @@ const FileItem = ({
                   onDelete(fileName);
                 }}
                 type="button"
+                aria-label={translatedLabels.fileInput.deleteFileActionTitle}
                 tabIndex={tabIndex}
               >
                 <DxcIcon icon="close" />

From 0fb56cc61f6594154b523a926ddfcf6ec6a820b6 Mon Sep 17 00:00:00 2001
From: Mil4n0r <morenocarmonaenrique@gmail.com>
Date: Tue, 16 Jul 2024 11:17:51 +0200
Subject: [PATCH 4/5] Adding ActionIcon to FileItem

---
 packages/lib/src/file-input/FileItem.tsx | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/lib/src/file-input/FileItem.tsx b/packages/lib/src/file-input/FileItem.tsx
index ab7d110f9..a04570200 100644
--- a/packages/lib/src/file-input/FileItem.tsx
+++ b/packages/lib/src/file-input/FileItem.tsx
@@ -6,6 +6,7 @@ import useTranslatedLabels from "../useTranslatedLabels";
 import { FileItemProps } from "./types";
 import DxcIcon from "../icon/Icon";
 import DxcTooltip from "../tooltip/Tooltip";
+import DxcActionIcon from "../action-icon/ActionIcon";
 
 const FileItem = ({
   fileName = "",
@@ -45,18 +46,12 @@ const FileItem = ({
                 <DxcIcon icon="filled_error" />
               </ErrorIcon>
             )}
-            <DxcTooltip label={translatedLabels.fileInput.deleteFileActionTitle}>
-              <DeleteFileAction
-                onClick={() => {
-                  onDelete(fileName);
-                }}
-                type="button"
-                aria-label={translatedLabels.fileInput.deleteFileActionTitle}
-                tabIndex={tabIndex}
-              >
-                <DxcIcon icon="close" />
-              </DeleteFileAction>
-            </DxcTooltip>
+            <DxcActionIcon
+              onClick={() => onDelete(fileName)}
+              icon="close"
+              tabIndex={tabIndex}
+              title={translatedLabels.fileInput.deleteFileActionTitle}
+            />
           </DxcFlex>
           {error && !singleFileMode && (
             <ErrorMessage role="alert" aria-live="assertive">

From 93ee216ffc25c0a037ca69343a3734c8c894af03 Mon Sep 17 00:00:00 2001
From: Mil4n0r <morenocarmonaenrique@gmail.com>
Date: Tue, 16 Jul 2024 13:00:22 +0200
Subject: [PATCH 5/5] Removed dead code

---
 packages/lib/src/file-input/FileItem.tsx | 30 ------------------------
 1 file changed, 30 deletions(-)

diff --git a/packages/lib/src/file-input/FileItem.tsx b/packages/lib/src/file-input/FileItem.tsx
index a04570200..dab91a72e 100644
--- a/packages/lib/src/file-input/FileItem.tsx
+++ b/packages/lib/src/file-input/FileItem.tsx
@@ -142,36 +142,6 @@ const ErrorIcon = styled.span`
   color: #d0011b;
 `;
 
-const DeleteFileAction = styled.button`
-  display: flex;
-  flex-wrap: wrap;
-  align-content: center;
-  justify-content: center;
-  height: 24px;
-  width: 24px;
-  font-size: 1rem;
-  font-family: ${(props) => props.theme.fontFamily};
-  border: 1px solid transparent;
-  border-radius: 2px;
-  background-color: transparent;
-  box-shadow: 0 0 0 2px transparent;
-  padding: 3px;
-  cursor: pointer;
-  color: ${(props) => props.theme.deleteFileItemColor};
-  font-size: 18px;
-  &:hover {
-    background-color: ${(props) => props.theme.hoverDeleteFileItemBackgroundColor};
-  }
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    box-shadow: 0 0 0 2px ${(props) => props.theme.focusDeleteFileItemBorderColor};
-  }
-  &:active {
-    background-color: ${(props) => props.theme.activeDeleteFileItemBackgroundColor};
-  }
-`;
-
 const ErrorMessage = styled.span`
   color: ${(props) => props.theme.errorMessageFontColor};
   font-family: ${(props) => props.theme.errorMessageFontFamily};