diff --git a/packages/module/src/MessageBar/AttachButton.test.tsx b/packages/module/src/MessageBar/AttachButton.test.tsx index 809f40504..eee23c82d 100644 --- a/packages/module/src/MessageBar/AttachButton.test.tsx +++ b/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(} />); + expect(screen.getByRole('img')).toBeVisible(); + }); }); diff --git a/packages/module/src/MessageBar/AttachButton.tsx b/packages/module/src/MessageBar/AttachButton.tsx index 016d1186c..f012cce67 100644 --- a/packages/module/src/MessageBar/AttachButton.tsx +++ b/packages/module/src/MessageBar/AttachButton.tsx @@ -51,6 +51,8 @@ export interface AttachButtonProps extends ButtonProps { validator?: (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 = ({ @@ -72,6 +74,7 @@ const AttachButtonBase: FunctionComponent = ({ onAttachRejected, validator, dropzoneProps, + icon = , ...props }: AttachButtonProps) => { const { open, getInputProps } = useDropzone({ @@ -113,7 +116,7 @@ const AttachButtonBase: FunctionComponent = ({ onClick={onClick ?? open} icon={ - + {icon} } size={isCompact ? 'sm' : undefined} diff --git a/packages/module/src/MessageBar/MessageBar.test.tsx b/packages/module/src/MessageBar/MessageBar.test.tsx index 66033f32c..505055cfd 100644 --- a/packages/module/src/MessageBar/MessageBar.test.tsx +++ b/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( + + } + }} + /> + ); + expect(screen.getByRole('img')).toBeVisible(); + }); // Stop button // -------------------------------------------------------------------------- diff --git a/packages/module/src/MessageBar/MessageBar.tsx b/packages/module/src/MessageBar/MessageBar.tsx index 8b06a72fd..c206ba8e4 100644 --- a/packages/module/src/MessageBar/MessageBar.tsx +++ b/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 { isSendButtonDisabled?: boolean; /** Prop to allow passage of additional props to buttons */ buttonProps?: { - attach?: { - tooltipContent?: string; - props?: ButtonProps; - inputTestId?: string; - tooltipProps?: Omit; - }; + attach?: AttachButtonProps & { props?: ButtonProps }; stop?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit }; send?: { tooltipContent?: string; props?: ButtonProps; tooltipProps?: Omit }; microphone?: { @@ -376,7 +371,7 @@ export const MessageBarBase: FunctionComponent = ({ onAttachRejected={onAttachRejected} validator={validator} dropzoneProps={dropzoneProps} - {...buttonProps?.attach?.props} + {...buttonProps?.attach} /> )} {!attachMenuProps && hasAttachButton && ( @@ -396,6 +391,7 @@ export const MessageBarBase: FunctionComponent = ({ onAttachRejected={onAttachRejected} validator={validator} dropzoneProps={dropzoneProps} + {...buttonProps?.attach} {...buttonProps?.attach?.props} /> )}