Adding Props to FileUpload Component (#1440)

.changeset/calm-scissors-smoke.md

@@ -0,0 +1,6 @@
+---
+'@itwin/itwinui-react': minor
+---
+
+Adding the ability for every DOM node to have a custom className passed to it.
+New prop for `FileUpload` component: `contentProps`

packages/itwinui-react/src/core/FileUpload/FileUpload.test.tsx

@@ -28,6 +28,32 @@ it('should render dragContent and children', () => {
   expect(children.textContent).toEqual(mockChildren);
 });
 
+it('should add props to iui-content', () => {
+  const mockContent = 'Mock drag content';
+  const mockChildren = 'Mock children to wrap';
+  const { container } = render(
+    <FileUpload
+      dragContent={mockContent}
+      onFileDropped={jest.fn}
+      contentProps={{ className: 'some-content' }}
+    >
+      {mockChildren}
+    </FileUpload>,
+  );
+
+  const component = container.querySelector('.iui-file-upload') as HTMLElement;
+  expect(component).toBeTruthy();
+
+  const content = container.querySelector('.iui-content') as HTMLElement;
+  expect(content).toBeTruthy();
+  expect(content.textContent).toEqual(mockContent);
+  expect(content).toHaveClass('iui-content', 'some-content');
+
+  const children = component.firstChild as HTMLElement;
+  expect(children).toBeTruthy();
+  expect(children.textContent).toEqual(mockChildren);
+});
+
 it('should apply content class to children if dragContent not passed', () => {
   const mockChildren = 'Mock children to wrap';
   const { container } = render(

packages/itwinui-react/src/core/FileUpload/FileUpload.tsx

@@ -22,6 +22,10 @@ type FileUploadProps = {
    * Either pass `FileUploadCard` (for default state) or a different component to wrap.
    */
   children: React.ReactNode;
+  /**
+   *  Allows for custom prop to be passed for content.
+   */
+  contentProps?: React.ComponentProps<'div'>;
 };
 
 /**
@@ -32,7 +36,14 @@ type FileUploadProps = {
  * <FileUpload dragContent='Drop file here' onFileDropped={console.log}><Textarea /></FileUpload>
  */
 export const FileUpload = React.forwardRef((props, ref) => {
-  const { dragContent, children, onFileDropped, className, ...rest } = props;
+  const {
+    dragContent,
+    children,
+    onFileDropped,
+    className,
+    contentProps,
+    ...rest
+  } = props;
 
   const [isDragActive, setIsDragActive] = React.useState(false);
   const fileUploadRef = React.useRef<HTMLDivElement>(null);
@@ -86,8 +97,26 @@ export const FileUpload = React.forwardRef((props, ref) => {
       ref={refs}
       {...rest}
     >
-      {dragContent ? children : <Box className='iui-content'>{children}</Box>}
-      {dragContent && <Box className='iui-content'>{dragContent}</Box>}
+      {dragContent ? (
+        children
+      ) : (
+        <Box
+          as='div'
+          {...contentProps}
+          className={cx('iui-content', contentProps?.className)}
+        >
+          {children}
+        </Box>
+      )}
+      {dragContent && (
+        <Box
+          as='div'
+          {...contentProps}
+          className={cx('iui-content', contentProps?.className)}
+        >
+          {dragContent}
+        </Box>
+      )}
     </Box>
   );
 }) as PolymorphicForwardRefComponent<'div', FileUploadProps>;