chore(docs): Add additional options for buttons

MessageBar buttons previously had non-user-configurable props. I added some props so users can pass in custom text for i18n and other Button props.
patternfly · Oct 30, 2024 · 04d693a · 04d693a
1 parent 1764ab7
commit 04d693a
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 23 deletions.
diff --git a/packages/module/src/MessageBar/AttachButton.tsx b/packages/module/src/MessageBar/AttachButton.tsx
@@ -9,18 +9,20 @@ import { useDropzone } from 'react-dropzone';
 import { PaperclipIcon } from '@patternfly/react-icons/dist/esm/icons/paperclip-icon';
 
 export interface AttachButtonProps extends ButtonProps {
-  /** OnClick Handler for the Attach Button */
-  onClick?: ((event: MouseEvent | React.MouseEvent<Element, MouseEvent> | KeyboardEvent) => void) | undefined;
-  /** Callback function for attach button when an attachment is made */
+  /** Callback for when button is clicked */
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Callback function for AttachButton when an attachment is made */
   onAttachAccepted?: (data: File[], event: DropEvent) => void;
-  /** Class Name for the Attach button */
+  /** Class name for AttachButton */
   className?: string;
-  /** Props to control is the attach button should be disabled */
+  /** Props to control if the AttachButton should be disabled */
   isDisabled?: boolean;
   /** Props to control the PF Tooltip component */
   tooltipProps?: TooltipProps;
   /** Ref applied to AttachButton and used in tooltip */
   innerRef?: React.Ref<any>;
+  /** English text "Attach" used in the tooltip */
+  tooltipContent?: string;
 }
 
 const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
@@ -30,6 +32,7 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
   className,
   tooltipProps,
   innerRef,
+  tooltipContent = 'Attach',
   ...props
 }: AttachButtonProps) => {
   const { open, getInputProps } = useDropzone({
@@ -43,7 +46,7 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
       <input {...getInputProps()} />
       <Tooltip
         id="pf-chatbot__tooltip--attach"
-        content="Attach"
+        content={tooltipContent}
         position="top"
         entryDelay={tooltipProps?.entryDelay || 0}
         exitDelay={tooltipProps?.exitDelay || 0}
@@ -55,7 +58,7 @@ const AttachButtonBase: React.FunctionComponent<AttachButtonProps> = ({
           variant="plain"
           ref={innerRef}
           className={`pf-chatbot__button--attach ${className ?? ''}`}
-          aria-label={props['aria-label'] || 'Attach Button'}
+          aria-label={props['aria-label'] || 'Attach button'}
           isDisabled={isDisabled}
           onClick={onClick ?? open}
           icon={

diff --git a/packages/module/src/MessageBar/MessageBar.tsx b/packages/module/src/MessageBar/MessageBar.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DropEvent, TextAreaProps } from '@patternfly/react-core';
+import { ButtonProps, DropEvent, TextAreaProps } from '@patternfly/react-core';
 import { AutoTextArea } from 'react-textarea-auto-witdth-height';
 
 // Import Chatbot components
@@ -44,13 +44,20 @@ export interface MessageBarProps extends TextAreaProps {
   /** Flag to enable the Stop button, used for streaming content */
   hasStopButton?: boolean;
   /** Callback function for when stop button is clicked */
-  handleStopButton?: () => void;
+  handleStopButton?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   /** Callback function for when attach button is used to upload a file */
   handleAttach?: (data: File[], event: DropEvent) => void;
   /** Props to enable a menu that opens when the Attach button is clicked, instead of the attachment window */
   attachMenuProps?: MessageBarWithAttachMenuProps;
   /** Flag to provide manual control over whether send button is disabled */
   isSendButtonDisabled?: boolean;
+  /** Prop to allow passage of additional props to buttons */
+  buttonProps?: {
+    attach: { tooltipContent?: string; props?: ButtonProps };
+    stop: { tooltipContent?: string; props?: ButtonProps };
+    send: { tooltipContent?: string; props?: ButtonProps };
+    microphone: { tooltipContent?: { active: string; inactive: string }; props?: ButtonProps };
+  };
 }
 
 export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
@@ -64,6 +71,7 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
   isSendButtonDisabled,
   handleStopButton,
   hasStopButton,
+  buttonProps,
   ...props
 }: MessageBarProps) => {
   // Text Input
@@ -105,25 +113,50 @@ export const MessageBar: React.FunctionComponent<MessageBarProps> = ({
 
   const renderButtons = () => {
     if (hasStopButton && handleStopButton) {
-      return <StopButton onClick={handleStopButton} />;
+      return (
+        <StopButton
+          onClick={handleStopButton}
+          tooltipContent={buttonProps?.stop.tooltipContent}
+          {...buttonProps?.stop.props}
+        />
+      );
     }
     return (
       <>
         {attachMenuProps && (
-          <AttachButton ref={attachButtonRef} onClick={handleAttachMenuToggle} isDisabled={isListeningMessage} />
+          <AttachButton
+            ref={attachButtonRef}
+            onClick={handleAttachMenuToggle}
+            isDisabled={isListeningMessage}
+            tooltipContent={buttonProps?.attach.tooltipContent}
+            {...buttonProps?.attach.props}
+          />
         )}
         {!attachMenuProps && hasAttachButton && (
-          <AttachButton onAttachAccepted={handleAttach} isDisabled={isListeningMessage} />
+          <AttachButton
+            onAttachAccepted={handleAttach}
+            isDisabled={isListeningMessage}
+            tooltipContent={buttonProps?.attach.tooltipContent}
+            {...buttonProps?.attach.props}
+          />
         )}
         {hasMicrophoneButton && (
           <MicrophoneButton
             isListening={isListeningMessage}
             onIsListeningChange={setIsListeningMessage}
             onSpeechRecognition={setMessage}
+            tooltipContent={buttonProps?.microphone.tooltipContent}
+            {...buttonProps?.microphone.props}
           />
         )}
         {(alwayShowSendButton || message) && (
-          <SendButton value={message} onClick={handleSend} isDisabled={isSendButtonDisabled} />
+          <SendButton
+            value={message}
+            onClick={handleSend}
+            isDisabled={isSendButtonDisabled}
+            tooltipContent={buttonProps?.send.tooltipContent}
+            {...buttonProps?.send.props}
+          />
         )}
       </>
     );

diff --git a/packages/module/src/MessageBar/MicrophoneButton.tsx b/packages/module/src/MessageBar/MicrophoneButton.tsx
@@ -12,14 +12,16 @@ import { MicrophoneIcon } from '@patternfly/react-icons/dist/esm/icons/microphon
 export interface MicrophoneButtonProps extends ButtonProps {
   /** Boolean check if the browser is listening to speech or not */
   isListening: boolean;
-  /** Class Name for the Microphone button */
+  /** Class name for MicrophoneButton */
   className?: string;
   /** Callback to update the value of isListening */
   onIsListeningChange: React.Dispatch<React.SetStateAction<boolean>>;
   /** Callback to update the message value once speech recognition is complete */
   onSpeechRecognition: React.Dispatch<React.SetStateAction<string>>;
   /** Props to control the PF Tooltip component */
   tooltipProps?: TooltipProps;
+  /** English text "Use microphone" and "Stop listening" used in the tooltip */
+  tooltipContent?: { active: string; inactive: string };
 }
 
 export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> = ({
@@ -28,6 +30,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
   onSpeechRecognition,
   className,
   tooltipProps,
+  tooltipContent = { active: 'Stop listening', inactive: 'Use microphone' },
   ...props
 }: MicrophoneButtonProps) => {
   // Microphone
@@ -84,7 +87,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
       aria="none"
       aria-live="polite"
       id="pf-chatbot__tooltip--use-microphone"
-      content={isListening ? 'Stop listening' : 'Use microphone'}
+      content={isListening ? tooltipContent.active : tooltipContent.inactive}
       position={tooltipProps?.position || 'top'}
       entryDelay={tooltipProps?.entryDelay || 0}
       exitDelay={tooltipProps?.exitDelay || 0}
@@ -95,7 +98,7 @@ export const MicrophoneButton: React.FunctionComponent<MicrophoneButtonProps> =
       <Button
         variant="plain"
         className={`pf-chatbot__button--microphone ${isListening ? 'pf-chatbot__button--microphone--active' : ''} ${className ?? ''}`}
-        aria-label={props['aria-label'] || 'Microphone Button'}
+        aria-label={props['aria-label'] || 'Microphone button'}
         onClick={isListening ? stopListening : startListening}
         icon={
           <Icon iconSize="xl" isInline>

diff --git a/packages/module/src/MessageBar/SendButton.tsx b/packages/module/src/MessageBar/SendButton.tsx
@@ -9,23 +9,26 @@ import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/re
 import { PaperPlaneIcon } from '@patternfly/react-icons/dist/esm/icons/paper-plane-icon';
 
 export interface SendButtonProps extends ButtonProps {
-  /** OnClick Handler for the Send Button */
-  onClick: () => void;
-  /** Class Name for the Send button */
+  /** Callback for when button is clicked */
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Class Name for SendButton */
   className?: string;
   /** Props to control the PF Tooltip component */
   tooltipProps?: TooltipProps;
+  /** English text "Send" used in the tooltip */
+  tooltipContent?: string;
 }
 
 export const SendButton: React.FunctionComponent<SendButtonProps> = ({
   className,
   onClick,
   tooltipProps,
+  tooltipContent = 'Send',
   ...props
 }: SendButtonProps) => (
   <Tooltip
     id="pf-chatbot__tooltip--send"
-    content="Send"
+    content={tooltipContent}
     position={tooltipProps?.position || 'top'}
     entryDelay={tooltipProps?.entryDelay || 0}
     exitDelay={tooltipProps?.exitDelay || 0}
@@ -36,7 +39,7 @@ export const SendButton: React.FunctionComponent<SendButtonProps> = ({
     <Button
       className={`pf-chatbot__button--send ${className ?? ''}`}
       variant="link"
-      aria-label={props['aria-label'] || 'Send Button'}
+      aria-label={props['aria-label'] || 'Send button'}
       onClick={onClick}
       icon={
         <Icon iconSize="xl" isInline>

diff --git a/packages/module/src/MessageBar/StopButton.tsx b/packages/module/src/MessageBar/StopButton.tsx
@@ -8,8 +8,8 @@ import { Button, ButtonProps, Tooltip, TooltipProps, Icon } from '@patternfly/re
 
 export interface StopButtonProps extends ButtonProps {
   /** Callback for when button is clicked */
-  onClick: () => void;
-  /** Class name for the stop button */
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  /** Class name for StopButton */
   className?: string;
   /** Props to control the PF Tooltip component */
   tooltipProps?: TooltipProps;