Merge pull request #555 from rebeccaalpert/toggleprops

fix(ChatbotHeaderOptionsDropdown/ChatbotHeaderSelectorDropdown): Pass toggle props

Author: nicolethoen

packages/module/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.test.tsx

@@ -47,4 +47,13 @@ describe('ChatbotHeaderOptionsDropdown', () => {
     render(<ChatbotHeaderOptionsDropdown isCompact>{dropdownItems}</ChatbotHeaderOptionsDropdown>);
     expect(screen.getByRole('button', { name: 'Chatbot options' })).toHaveClass('pf-m-compact');
   });
+
+  it('should handle toggleProps', () => {
+    render(
+      <ChatbotHeaderOptionsDropdown isCompact toggleProps={{ isDisabled: true }}>
+        {dropdownItems}
+      </ChatbotHeaderOptionsDropdown>
+    );
+    expect(screen.getByRole('button', { name: /Chatbot options/i })).toBeDisabled();
+  });
 });

packages/module/src/ChatbotHeader/ChatbotHeaderOptionsDropdown.tsx

@@ -8,7 +8,8 @@ import {
   DropdownProps,
   MenuToggle,
   MenuToggleElement,
-  Icon
+  Icon,
+  MenuToggleProps
 } from '@patternfly/react-core';
 import EllipsisIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
@@ -23,6 +24,8 @@ export interface ChatbotHeaderOptionsDropdownProps extends Omit<DropdownProps, '
   menuToggleAriaLabel?: string;
   /** Sets menu to compact styling. */
   isCompact?: boolean;
+  /** Additional props passed to toggle */
+  toggleProps?: MenuToggleProps;
 }
 
 export const ChatbotHeaderOptionsDropdown: FunctionComponent<ChatbotHeaderOptionsDropdownProps> = ({
@@ -32,6 +35,7 @@ export const ChatbotHeaderOptionsDropdown: FunctionComponent<ChatbotHeaderOption
   tooltipProps,
   menuToggleAriaLabel = 'Chatbot options',
   isCompact,
+  toggleProps,
   ...props
 }: ChatbotHeaderOptionsDropdownProps) => {
   const [isOptionsMenuOpen, setIsOptionsMenuOpen] = useState(false);
@@ -58,6 +62,7 @@ export const ChatbotHeaderOptionsDropdown: FunctionComponent<ChatbotHeaderOption
         isExpanded={isOptionsMenuOpen}
         onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)}
         size={isCompact ? 'sm' : undefined}
+        {...toggleProps}
       />
     </Tooltip>
   );

packages/module/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.test.tsx

@@ -49,4 +49,13 @@ describe('ChatbotHeaderSelectorDropdown', () => {
     );
     expect(screen.getByRole('button', { name: /Select model/i })).toHaveClass('pf-m-compact');
   });
+
+  it('should handle toggleProps', () => {
+    render(
+      <ChatbotHeaderSelectorDropdown value="Option 1" toggleProps={{ isDisabled: true }}>
+        {dropdownItems}
+      </ChatbotHeaderSelectorDropdown>
+    );
+    expect(screen.getByRole('button', { name: /Select model/i })).toBeDisabled();
+  });
 });

packages/module/src/ChatbotHeader/ChatbotHeaderSelectorDropdown.tsx

@@ -1,7 +1,15 @@
 import type { FunctionComponent, Ref } from 'react';
 import { useState } from 'react';
 
-import { Tooltip, TooltipProps, Dropdown, DropdownProps, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+import {
+  Tooltip,
+  TooltipProps,
+  Dropdown,
+  DropdownProps,
+  MenuToggle,
+  MenuToggleElement,
+  MenuToggleProps
+} from '@patternfly/react-core';
 
 export interface ChatbotHeaderSelectorDropdownProps extends Omit<DropdownProps, 'toggle'> {
   /** Value of the selected dropdown item */
@@ -18,6 +26,8 @@ export interface ChatbotHeaderSelectorDropdownProps extends Omit<DropdownProps,
   tooltipContent?: string;
   /** Sets menu to compact styling. */
   isCompact?: boolean;
+  /** Additional props passed to toggle */
+  toggleProps?: MenuToggleProps;
 }
 
 export const ChatbotHeaderSelectorDropdown: FunctionComponent<ChatbotHeaderSelectorDropdownProps> = ({
@@ -29,6 +39,7 @@ export const ChatbotHeaderSelectorDropdown: FunctionComponent<ChatbotHeaderSelec
   tooltipContent = 'Select model',
   menuToggleAriaLabel,
   isCompact,
+  toggleProps,
   ...props
 }: ChatbotHeaderSelectorDropdownProps) => {
   const [isOptionsMenuOpen, setIsOptionsMenuOpen] = useState(false);
@@ -51,6 +62,7 @@ export const ChatbotHeaderSelectorDropdown: FunctionComponent<ChatbotHeaderSelec
         onClick={() => setIsOptionsMenuOpen(!isOptionsMenuOpen)}
         size={isCompact ? 'sm' : undefined}
         className={`${isCompact ? 'pf-m-compact' : ''}`}
+        {...toggleProps}
       >
         {value}
       </MenuToggle>