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}
/>
)}