use boxed row

Author: atabel

src/__screenshot_tests__/__fixtures__/file-upload-2.png

@@ -64,7 +64,7 @@ test('FileUpload - upload multiple files and remove', async () => {
     // Upload first file
     const fileInput = await screen.findByLabelText('Drag or upload your file');
     const firstFixturePath = prepareFile(path.join(__dirname, '__fixtures__', 'file-upload-1.txt'));
-    const secondFixturePath = prepareFile(path.join(__dirname, '__fixtures__', 'file-upload-2.svg'));
+    const secondFixturePath = prepareFile(path.join(__dirname, '__fixtures__', 'file-upload-2.png'));
     await fileInput.uploadFile(firstFixturePath);
     await screen.findByText('file-upload-1.txt');
 
@@ -73,7 +73,7 @@ test('FileUpload - upload multiple files and remove', async () => {
 
     // Upload second file
     await fileInput.uploadFile(secondFixturePath);
-    await screen.findByText('file-upload-2.svg');
+    await screen.findByText('file-upload-2.png');
     await screen.findAllByRole('button', {name: /^Eliminar archivo/});
 
     const imageWithTwoFiles = await fileUploader.screenshot();
@@ -82,7 +82,7 @@ test('FileUpload - upload multiple files and remove', async () => {
     // Remove one file
     const removeButtons = await screen.findAllByRole('button', {name: /^Eliminar archivo/});
     await removeButtons[0].click();
-    await screen.findByText('file-upload-2.svg');
+    await screen.findByText('file-upload-2.png');
     await expect(screen.findByText('file-upload-1.txt')).rejects.toThrow();
 
     const imageAfterRemoval = await fileUploader.screenshot();
@@ -97,14 +97,13 @@ test('FileUpload - custom gallery', async () => {
 
     const fileUploader = await screen.findByTestId('FileUpload');
     const fileInput = await screen.findByLabelText('Gallery');
-    const firstFixturePath = prepareFile(path.join(__dirname, '__fixtures__', 'file-upload-2.svg'));
-    const secondFixturePath = prepareFile(path.join(__dirname, '__fixtures__', 'file-upload-3.svg'));
+    const firstFixturePath = prepareFile(path.join(__dirname, '__fixtures__', 'file-upload-2.png'));
+    const secondFixturePath = prepareFile(path.join(__dirname, '__fixtures__', 'file-upload-3.png'));
 
     await fileInput.uploadFile(firstFixturePath);
-    await screen.findByLabelText('Remove file-upload-2.svg');
-
+    await screen.findByLabelText('Remove file-upload-2.png');
     await fileInput.uploadFile(secondFixturePath);
-    await screen.findByLabelText('Remove file-upload-3.svg');
+    await screen.findByLabelText('Remove file-upload-3.png');
 
     const image = await fileUploader.screenshot();
     expect(image).toMatchImageSnapshot();

src/__screenshot_tests__/__fixtures__/file-upload-2.svg

@@ -6,11 +6,9 @@ import {Text1, Text2, Text3} from './text';
 import Inline from './inline';
 import IconWarningRegular from './generated/mistica-icons/icon-warning-regular';
 import {vars as skinVars} from './skins/skin-contract.css';
-import {Boxed} from './boxed';
 import Box from './box';
 import {useInnerText, useTheme} from './hooks';
 import * as textTokens from './text-tokens';
-import {IconButton} from './icon-button';
 import Image from './image';
 import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
 import IconFilePdfRegular from './generated/mistica-icons/icon-file-pdf-regular';
@@ -32,6 +30,7 @@ import IconClipRegular from './generated/mistica-icons/icon-clip-regular';
 import * as styles from './file-upload.css';
 import {useThemeVariant} from './theme-variant-context';
 import {getPrefixedDataAttributes} from './utils/dom';
+import {BoxedRow, BoxedRowList} from './list';
 
 import type {DataAttributes, IconProps} from './utils/types';
 import type {ExclusifyUnion} from './utils/utility-types';
@@ -349,40 +348,28 @@ const useFileUpload = ({
 type FileItemProps = {
     file: File;
     onRemove: (file: File) => void;
-    formatSize?: (sizeInBytes: number) => string;
     removeLabel?: string;
 };
 
 export const FileItem = ({file, onRemove, removeLabel}: FileItemProps): JSX.Element => {
     const {i18n, t, texts} = useTheme();
 
     return (
-        <Boxed>
-            <Box paddingX={8} paddingY={16}>
-                <Inline space="between" alignItems="center">
-                    <Inline space={8} alignItems="center">
-                        <FileIcon file={file} />
-                        <Text2 regular>{file.name}</Text2>
-                    </Inline>
-                    <Inline space={16} alignItems="center">
-                        <Text2 regular color={skinVars.colors.textSecondary}>
-                            {formatSize(file.size, i18n.locale)}
-                        </Text2>
-                        <IconButton
-                            Icon={IconCloseRegular}
-                            type="neutral"
-                            small
-                            onPress={() => onRemove(file)}
-                            aria-label={
-                                removeLabel ??
-                                texts.fileUploadRemoveFile ??
-                                t(textTokens.fileUploadRemoveFile, file.name)
-                            }
-                        />
-                    </Inline>
-                </Inline>
-            </Box>
-        </Boxed>
+        <BoxedRow
+            title={file.name}
+            asset={<FileIcon file={file} />}
+            detail={formatSize(file.size, i18n.locale)}
+            iconButton={{
+                type: 'neutral',
+                Icon: IconCloseRegular,
+                small: true,
+                onPress: () => onRemove(file),
+                'aria-label':
+                    removeLabel ??
+                    texts.fileUploadRemoveFile ??
+                    t(textTokens.fileUploadRemoveFile, file.name),
+            }}
+        />
     );
 };
 
@@ -610,15 +597,13 @@ const FileUpload = (props: Props): JSX.Element => {
                 ? renderFiles({files, removeFile})
                 : files &&
                   files.length > 0 && (
-                      <Stack
-                          space={8}
-                          role="list"
+                      <BoxedRowList
                           aria-label={texts.fileUploadListLabel ?? t(textTokens.fileUploadListLabel)}
                       >
                           {Array.from(files).map((file, index) => (
                               <FileItem key={index} file={file} onRemove={removeFile} />
                           ))}
-                      </Stack>
+                      </BoxedRowList>
                   )}
         </Stack>
     );