feat(AttachButton): Allow custom icon (#751)

Author: rebeccaalpert

packages/module/src/MessageBar/AttachButton.test.tsx

@@ -173,4 +173,8 @@ describe('Attach button', () => {
     expect(validator).toHaveBeenCalledWith(file);
     expect(onAttachRejected).toHaveBeenCalled();
   });
+  it('should handle icon prop', () => {
+    render(<AttachButton icon={<img alt="" src="" />} />);
+    expect(screen.getByRole('img')).toBeVisible();
+  });
 });

packages/module/src/MessageBar/AttachButton.tsx

@@ -51,6 +51,8 @@ export interface AttachButtonProps extends ButtonProps {
   validator?: <T extends File>(file: T) => FileError | readonly FileError[] | null;
   /** Additional props passed to react-dropzone */
   dropzoneProps?: DropzoneOptions;
+  /** Icon displayed in attach button */
+  icon?: React.ReactNode;
 }
 
 const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
@@ -72,6 +74,7 @@ const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
   onAttachRejected,
   validator,
   dropzoneProps,
+  icon = <PaperclipIcon />,
   ...props
 }: AttachButtonProps) => {
   const { open, getInputProps } = useDropzone({
@@ -113,7 +116,7 @@ const AttachButtonBase: FunctionComponent<AttachButtonProps> = ({
           onClick={onClick ?? open}
           icon={
             <Icon iconSize={isCompact ? 'lg' : 'xl'} isInline>
-              <PaperclipIcon />
+              {icon}
             </Icon>
           }
           size={isCompact ? 'sm' : undefined}

packages/module/src/MessageBar/MessageBar.test.tsx

@@ -325,6 +325,20 @@ describe('Message bar', () => {
     );
     await userEvent.click(screen.getByRole('button', { name: 'Test' }));
   });
+  it('can change attach button icon', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        hasAttachButton
+        buttonProps={{
+          attach: {
+            icon: <img alt="" src="" />
+          }
+        }}
+      />
+    );
+    expect(screen.getByRole('img')).toBeVisible();
+  });
 
   // Stop button
   // --------------------------------------------------------------------------

packages/module/src/MessageBar/MessageBar.tsx

@@ -14,7 +14,7 @@ import {
 // Import Chatbot components
 import SendButton from './SendButton';
 import MicrophoneButton from './MicrophoneButton';
-import { AttachButton } from './AttachButton';
+import { AttachButton, AttachButtonProps } from './AttachButton';
 import AttachMenu from '../AttachMenu';
 import StopButton from './StopButton';
 import { ChatbotDisplayMode } from '../Chatbot';
@@ -95,12 +95,7 @@ export interface MessageBarProps extends Omit<TextAreaProps, 'innerRef'> {
   isSendButtonDisabled?: boolean;
   /** Prop to allow passage of additional props to buttons */
   buttonProps?: {
-    attach?: {
-      tooltipContent?: string;
-      props?: ButtonProps;
-      inputTestId?: string;
-      tooltipProps?: Omit<TooltipProps, 'content'>;
-    };
+    attach?: AttachButtonProps & { props?: ButtonProps };
     stop?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit<TooltipProps, 'content'> };
     send?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit<TooltipProps, 'content'> };
     microphone?: {
@@ -376,7 +371,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
             onAttachRejected={onAttachRejected}
             validator={validator}
             dropzoneProps={dropzoneProps}
-            {...buttonProps?.attach?.props}
+            {...buttonProps?.attach}
           />
         )}
         {!attachMenuProps && hasAttachButton && (
@@ -396,6 +391,7 @@ export const MessageBarBase: FunctionComponent<MessageBarProps> = ({
             onAttachRejected={onAttachRejected}
             validator={validator}
             dropzoneProps={dropzoneProps}
+            {...buttonProps?.attach}
             {...buttonProps?.attach?.props}
           />
         )}