feat(ExpandableSection): Allow more control over toggle icon (#12051)

Allow for custom icons and disabled icons.

Author: rebeccaalpert

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

@@ -62,6 +62,10 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
   toggleAriaLabel?: string;
   /** Accessible name via space delimtted list of IDs for the expandable section toggle. */
   toggleAriaLabelledBy?: string;
+  /** Icon shown in toggle when variant is not truncated. */
+  toggleIcon?: React.ReactNode;
+  /** Whether to show a toggle icon when variant is not truncated. If omitted, it is important to ensure the current state of the ExpandableSection is conveyed, most likely by having dynamic toggle text. */
+  hasToggleIcon?: boolean;
   /** Truncates the expandable content to the specified number of lines when using the
    * "truncate" variant.
    */
@@ -211,6 +215,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       toggleContent,
       toggleAriaLabel,
       toggleAriaLabelledBy,
+      toggleIcon = <AngleRightIcon />,
+      hasToggleIcon = true,
       children,
       isExpanded,
       isDetached,
@@ -267,13 +273,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>
+            })}
           aria-label={toggleAriaLabel}
           aria-labelledby={toggleAriaLabelledBy}
         >

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' };
 
@@ -271,3 +272,33 @@ test('Renders with div wrapper when toggleWrapper="div"', () => {
   const toggle = screen.getByRole('button').parentElement;
   expect(toggle?.tagName).toBe('DIV');
 });
+
+test('Can render custom toggle icon', () => {
+  render(<ExpandableSection toggleIcon={<BellIcon data-testid="bell-icon" />}>Test content</ExpandableSection>);
+
+  expect(screen.getByTestId('bell-icon')).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();
+});