Merge pull request #542 from rebeccaalpert/type-fix

fix(MessageBar): Adjust button types

Author: thatblindgeye

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

@@ -148,6 +148,17 @@ describe('Message bar', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Send' }));
     expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
   });
+  it('can handle buttonProps tooltipProps  appropriately for send', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        alwayShowSendButton
+        buttonProps={{ send: { tooltipProps: { isVisible: true } } }}
+      />
+    );
+    // isVisible, so no need for click
+    expect(screen.getByRole('tooltip', { name: 'Send' })).toBeTruthy();
+  });
   it('can handle buttonProps props appropriately for send', async () => {
     render(
       <MessageBar
@@ -236,6 +247,17 @@ describe('Message bar', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Attach' }));
     expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
   });
+  it('can handle buttonProps tooltipProps  appropriately for attach', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        alwayShowSendButton
+        buttonProps={{ attach: { tooltipProps: { isVisible: true } } }}
+      />
+    );
+    // isVisible, so no need for click
+    expect(screen.getByRole('tooltip', { name: 'Attach' })).toBeTruthy();
+  });
   it('can handle buttonProps props appropriately for attach', async () => {
     render(
       <MessageBar
@@ -271,6 +293,18 @@ describe('Message bar', () => {
     await userEvent.click(screen.getByRole('button', { name: 'Stop' }));
     expect(screen.getByRole('tooltip', { name: 'Test' })).toBeTruthy();
   });
+  it('can handle buttonProps tooltipProps  appropriately for stop', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        hasStopButton
+        handleStopButton={jest.fn}
+        buttonProps={{ stop: { tooltipProps: { isVisible: true } } }}
+      />
+    );
+    // isVisible, so no need for click
+    expect(screen.getByRole('tooltip', { name: 'Stop' })).toBeTruthy();
+  });
   it('can handle buttonProps props appropriately for stop', async () => {
     render(
       <MessageBar
@@ -317,6 +351,17 @@ describe('Message bar', () => {
     const input = screen.getByRole('textbox', { name: /I am listening/i });
     expect(input).toBeTruthy();
   });
+  it('can handle buttonProps tooltipProps  appropriately for microphone', () => {
+    render(
+      <MessageBar
+        onSendMessage={jest.fn}
+        hasMicrophoneButton
+        buttonProps={{ microphone: { tooltipProps: { isVisible: true } } }}
+      />
+    );
+    // isVisible, so no need for click
+    expect(screen.getByRole('tooltip', { name: 'Use microphone' })).toBeTruthy();
+  });
   it('can handle buttonProps props appropriately for microphone', async () => {
     mockSpeechRecognition();
     render(

packages/module/src/MessageBar/MessageBar.tsx

@@ -279,6 +279,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
           onClick={handleStopButton}
           tooltipContent={buttonProps?.stop?.tooltipContent}
           isCompact={isCompact}
+          tooltipProps={buttonProps?.stop?.tooltipProps}
           {...buttonProps?.stop?.props}
         />
       );
@@ -292,6 +293,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             isDisabled={isListeningMessage}
             tooltipContent={buttonProps?.attach?.tooltipContent}
             isCompact={isCompact}
+            tooltipProps={buttonProps?.attach?.tooltipProps}
             {...buttonProps?.attach?.props}
           />
         )}
@@ -302,6 +304,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             tooltipContent={buttonProps?.attach?.tooltipContent}
             inputTestId={buttonProps?.attach?.inputTestId}
             isCompact={isCompact}
+            tooltipProps={buttonProps?.attach?.tooltipProps}
             {...buttonProps?.attach?.props}
           />
         )}
@@ -313,6 +316,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             tooltipContent={buttonProps?.microphone?.tooltipContent}
             language={buttonProps?.microphone?.language}
             isCompact={isCompact}
+            tooltipProps={buttonProps?.microphone?.tooltipProps}
             {...buttonProps?.microphone?.props}
           />
         )}
@@ -323,6 +327,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
             isDisabled={isSendButtonDisabled}
             tooltipContent={buttonProps?.send?.tooltipContent}
             isCompact={isCompact}
+            tooltipProps={buttonProps?.send?.tooltipProps}
             {...buttonProps?.send?.props}
           />
         )}