Merge pull request #17 from input-output-hk/fix-file-upload-onremove

fix: on remove triggering file upload click and label changes

Author: Shawn

src/design-system/file-upload/file-upload.component.tsx

@@ -13,25 +13,35 @@ import * as cx from './file-upload.css';
 import type { OmitClassName } from '../../types';
 
 type Props = OmitClassName<'input'> & {
-  label: { text: string; highlight: boolean }[];
+  label: string | React.ReactNode;
   supportedFormats: string;
   files?: string[];
   removeButtonLabel: string;
+  key?: string;
   onRemove?: (file: string, index: number) => void;
 };
 
 export const FileUpload = ({
-  label: labelText,
+  label,
   supportedFormats,
   id = crypto.randomUUID(),
   accept,
   files = [],
   removeButtonLabel,
+  key = 'file-upload',
   onRemove,
   ...props
 }: Readonly<Props>): JSX.Element => (
   <label htmlFor={id} className={cx.root} id={`${id}-label`}>
-    <input type="file" id={id} accept={accept} required hidden {...props} />
+    <input
+      type="file"
+      id={id}
+      accept={accept}
+      required
+      hidden
+      key={key}
+      {...props}
+    />
     <Flex
       className={cx.iconBox}
       mr="$24"
@@ -43,15 +53,7 @@ export const FileUpload = ({
     <Box w="$fill">
       <Box>
         <Box mb="$8">
-          {labelText.map(({ text, highlight }) => (
-            <Text.Body.Normal
-              weight="$medium"
-              color={highlight ? 'highlight' : 'primary'}
-              key={text}
-            >
-              {text}{' '}
-            </Text.Body.Normal>
-          ))}
+          <Text.Body.Normal weight="$medium">{label}</Text.Body.Normal>
         </Box>
         <Text.Body.Small color="secondary" weight="$medium">
           {supportedFormats}
@@ -70,8 +72,10 @@ export const FileUpload = ({
               </Flex>
               <button
                 className={cx.removeButtonBox}
-                onClick={(): void => {
+                onClick={(event): void => {
                   if (onRemove) {
+                    event.preventDefault();
+                    event.stopPropagation();
                     onRemove(file, index);
                   }
                 }}

src/design-system/file-upload/file-upload.css.ts

@@ -48,6 +48,7 @@ export const checkIconBox = style([
     h: '$24',
     fontSize: '$25',
     color: '$data_green',
+    lineHeight: '$0',
   }),
 ]);
 

src/design-system/file-upload/file-upload.stories.tsx

@@ -18,12 +18,6 @@ export default {
   decorators: [page({ title: 'File Upload', subtitle })],
 } as Meta;
 
-const label = [
-  { text: 'Drag & drop or', highlight: false },
-  { text: 'choose file', highlight: true },
-  { text: 'to upload', highlight: false },
-];
-
 const supportedFormats = 'Supported formats: JSON';
 
 const removeButtonLabel = 'Remove';
@@ -33,7 +27,7 @@ const RenderFileUpload = ({
   files,
 }: Readonly<{ id?: string; files?: string[] }>): JSX.Element => (
   <FileUpload
-    label={label}
+    label="Drag & drop or choose file to upload"
     supportedFormats={supportedFormats}
     removeButtonLabel={removeButtonLabel}
     id={id}

src/design-tokens/typography.data.ts

@@ -17,6 +17,7 @@ export const fontSizes = {
 } as const;
 
 export const lineHeights = {
+  $0: '0',
   $16: '16px',
   $17: '17px',
   $24: '24px',