feat(component): add icon props for FileUploader dropzone (#1343)

bigcommerce · Feb 14, 2024 · 96b8a86 · 96b8a86
1 parent f1e09a6
commit 96b8a86
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 12 deletions.
diff --git a/packages/big-design/src/components/FileUploader/DropZone.tsx b/packages/big-design/src/components/FileUploader/DropZone.tsx
@@ -26,8 +26,9 @@ export interface DropZoneLocalization {
 }
 
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
-  label?: string;
   description?: string;
+  icon?: React.ReactNode;
+  label?: string;
   localization?: DropZoneLocalization;
   onFilesChange(files: FileList | null): void;
 }
@@ -36,14 +37,15 @@ export const DropZone = ({
   accept,
   description,
   disabled,
+  icon = <DraftIcon />,
   id,
   label,
   localization = defaultLocalization,
   multiple,
   onFilesChange,
 }: Props) => {
   const [isDragOver, setIsDragOver] = useState(false);
-  const [isFilesValid, setIsFilesValid] = useState(false);
+  const [isFilesValid, setIsFilesValid] = useState(true);
 
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
@@ -114,11 +116,7 @@ export const DropZone = ({
   );
 
   const renderDropzoneIcon = useMemo(() => {
-    const icon = isFilesValid ? (
-      <FileDownloadIcon color="primary30" size={40} />
-    ) : (
-      <RemoveCircleOutlineIcon color="danger30" size={40} />
-    );
+    const icon = isFilesValid ? <FileDownloadIcon /> : <RemoveCircleOutlineIcon />;
 
     return (
       <Box as="span" marginHorizontal="auto">
@@ -185,7 +183,7 @@ export const DropZone = ({
       ) : (
         <>
           <Flex alignItems="center">
-            <DraftIcon color={disabled ? 'secondary50' : 'primary30'} size={40} />
+            {icon}
             <div>
               {renderedLabel}
               {renderedDescription}

diff --git a/packages/big-design/src/components/FileUploader/FileUploader.tsx b/packages/big-design/src/components/FileUploader/FileUploader.tsx
@@ -23,8 +23,9 @@ export interface FileUploaderLocalization extends DropZoneLocalization {
 }
 
 interface DropzoneConfig {
-  label?: string;
   description?: string;
+  icon?: React.ReactNode;
+  label?: string;
 }
 
 export interface FileValidationError {
@@ -50,10 +51,10 @@ interface Props {
   dropzoneConfig?: DropzoneConfig;
   error?: React.ReactNode | React.ReactNode[];
   files: File[];
-  previewHidden?: boolean;
   label?: React.ReactNode;
   labelId?: string;
   localization?: FileUploaderLocalization;
+  previewHidden?: boolean;
   validators?: ValidatorConfig[];
   onFilesChange(files: File[]): void;
   onFilesError?(errors: FileValidationError[]): void;
@@ -68,11 +69,11 @@ export const FileUploader: React.FC<FileUploaderProps> = ({
   dropzoneConfig = {},
   error,
   files,
-  previewHidden = false,
   label,
   labelId,
   localization = defaultLocalization,
   multiple,
+  previewHidden = false,
   validators = [],
   onFilesChange,
   onFilesError,
@@ -211,6 +212,7 @@ export const FileUploader: React.FC<FileUploaderProps> = ({
           accept={accept}
           description={dropzoneConfig.description}
           disabled={disabled}
+          icon={dropzoneConfig.icon}
           id={id}
           label={dropzoneConfig.label}
           localization={localization}
@@ -222,6 +224,7 @@ export const FileUploader: React.FC<FileUploaderProps> = ({
       accept,
       disabled,
       dropzoneConfig.description,
+      dropzoneConfig.icon,
       dropzoneConfig.label,
       files.length,
       handleFilesChange,

diff --git a/packages/big-design/src/components/FileUploader/styled.ts b/packages/big-design/src/components/FileUploader/styled.ts
@@ -42,6 +42,22 @@ export const DropzoneStyled = styled(Flex)<{
         background-color: ${({ theme }) => theme.colors.primary10};
       }
     `};
+
+  svg {
+    width: ${remCalc(40)};
+    height: ${remCalc(40)};
+    fill: ${({ theme, disabled, isValid, isDragOver }) => {
+      if (disabled) {
+        return theme.colors.secondary50;
+      }
+
+      if (!isValid && isDragOver) {
+        return theme.colors.danger30;
+      }
+
+      return theme.colors.primary30;
+    }};
+  }
 `;
 
 export const FileStyled = styled(Flex)<{ isValid: boolean }>`

diff --git a/packages/docs/PropTables/FileUploaderPropTable.tsx b/packages/docs/PropTables/FileUploaderPropTable.tsx
@@ -33,7 +33,7 @@ const fileUploaderProps: Prop[] = [
   },
   {
     name: 'dropzoneConfig',
-    types: '{ label?: string; description?: string }',
+    types: '{ label?: string; description?: string; icon?: ReactNode }',
     description: 'Adds a label and a description to the drop-zone box.',
   },
   {