feat(ExpandableSection): Allow more control over toggle icon

Allow for custom icons and disabled icons.

Author: rebeccaalpert

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

@@ -56,6 +56,10 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
    * both are specified; used for uncontrolled expandable with dynamic toggle text).
    */
   toggleTextExpanded?: string;
+  /** Icon shown in toggle when variant is not truncated. */
+  toggleIcon?: React.ReactNode;
+  /** Whether to show a toggle icon when variant is not truncated. */
+  hasToggleIcon?: boolean;
   /** Truncates the expandable content to the specified number of lines when using the
    * "truncate" variant.
    */
@@ -196,6 +200,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       toggleTextExpanded,
       toggleTextCollapsed,
       toggleContent,
+      toggleIcon = <AngleRightIcon />,
+      hasToggleIcon = true,
       children,
       isExpanded,
       isDetached,
@@ -247,13 +253,10 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
           aria-controls={uniqueContentId}
           id={uniqueToggleId}
           onClick={(event) => onToggle(event, !propOrStateIsExpanded)}
-          {...(variant !== ExpandableSectionVariant.truncate && {
-            icon: (
-              <span className={css(styles.expandableSectionToggleIcon)}>
-                <AngleRightIcon />
-              </span>
-            )
-          })}
+          {...(variant !== ExpandableSectionVariant.truncate &&
+            hasToggleIcon && {
+              icon: <span className={css(styles.expandableSectionToggleIcon)}>{toggleIcon}</span>
+            })}
         >
           {toggleContent || computedToggleText}
         </Button>

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

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 
 import { ExpandableSection, ExpandableSectionVariant } from '../ExpandableSection';
 import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 const props = { contentId: 'content-id', toggleId: 'toggle-id' };
 
@@ -191,3 +192,33 @@ test('Renders with class pf-m-detached when isDetached is true and direction is
 
   expect(screen.getByText('Test content').parentElement).toHaveClass('pf-m-detached');
 });
+
+test('Can render custom toggle icon', () => {
+  render(<ExpandableSection toggleIcon={<BellIcon data-testid="bell-icon" />}>Test content</ExpandableSection>);
+
+  expect(screen.getByTestId('bell-icon')).not.toBeInTheDocument();
+});
+
+test('Does not render toggle icon when hasToggleIcon is false', () => {
+  render(<ExpandableSection hasToggleIcon={false}>Test content</ExpandableSection>);
+
+  const button = screen.getByRole('button');
+  expect(button.querySelector('.pf-v6-c-expandable-section__toggle-icon')).not.toBeInTheDocument();
+});
+
+test('Does not render custom toggle icon when hasToggleIcon is false', () => {
+  render(
+    <ExpandableSection toggleIcon={<BellIcon data-testid="bell-icon" />} hasToggleIcon={false}>
+      Test content
+    </ExpandableSection>
+  );
+
+  expect(screen.queryByTestId('bell-icon')).not.toBeInTheDocument();
+});
+
+test('Renders toggle icon by default when hasToggleIcon is true', () => {
+  render(<ExpandableSection>Test content</ExpandableSection>);
+
+  const button = screen.getByRole('button');
+  expect(button.querySelector('.pf-v6-c-expandable-section__toggle-icon')).toBeInTheDocument();
+});