feat(ExpandableSection): allow function toggleContent

Signed-off-by: gitdallas <[email protected]>

Author: gitdallas

packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx

@@ -44,8 +44,10 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
    * use the onToggle property of the expandable section toggle sub-component.
    */
   onToggle?: (event: React.MouseEvent, isExpanded: boolean) => void;
-  /** React node that appears in the attached toggle in place of the toggleText property. */
-  toggleContent?: React.ReactNode;
+  /** React node that appears in the attached toggle in place of the toggleText property.
+   * Can also be a function that receives the expanded state and returns a React node.
+   */
+  toggleContent?: React.ReactNode | ((isExpanded: boolean) => React.ReactNode);
   /** Text that appears in the attached toggle. */
   toggleText?: string;
   /** Text that appears in the attached toggle when collapsed (will override toggleText if
@@ -246,6 +248,9 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       propOrStateIsExpanded
     );
 
+    const computedToggleContent =
+      typeof toggleContent === 'function' ? toggleContent(propOrStateIsExpanded) : toggleContent;
+
     const expandableToggle = !isDetached && (
       <div className={`${styles.expandableSection}__toggle`}>
         <Button
@@ -265,7 +270,7 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
           aria-label={toggleAriaLabel}
           aria-labelledby={toggleAriaLabelledBy}
         >
-          {toggleContent || computedToggleText}
+          {computedToggleContent || computedToggleText}
         </Button>
       </div>
     );

packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx

@@ -208,3 +208,37 @@ test('Renders with aria-labelledby when toggleAriaLabelledBy is passed', () => {
 
   expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
 });
+test('Renders toggleContent as a function in uncontrolled mode (collapsed)', () => {
+  render(
+    <ExpandableSection toggleContent={(isExpanded) => (isExpanded ? 'Hide details' : 'Show details')}>
+      Test content
+    </ExpandableSection>
+  );
+
+  expect(screen.getByRole('button', { name: 'Show details' })).toBeInTheDocument();
+});
+
+test('Renders toggleContent as a function in uncontrolled mode (expanded after click)', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <ExpandableSection toggleContent={(isExpanded) => (isExpanded ? 'Hide details' : 'Show details')}>
+      Test content
+    </ExpandableSection>
+  );
+
+  const button = screen.getByRole('button', { name: 'Show details' });
+  await user.click(button);
+
+  expect(screen.getByRole('button', { name: 'Hide details' })).toBeInTheDocument();
+});
+
+test('Renders toggleContent as a function in controlled mode', () => {
+  render(
+    <ExpandableSection isExpanded={true} toggleContent={(isExpanded) => (isExpanded ? 'Collapse' : 'Expand')}>
+      Test content
+    </ExpandableSection>
+  );
+
+  expect(screen.getByRole('button', { name: 'Collapse' })).toBeInTheDocument();
+});