diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx index 82c09ca1d39..acdad435d26 100644 --- a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx +++ b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx @@ -56,6 +56,10 @@ export interface ExpandableSectionProps extends Omit, + hasToggleIcon = true, children, isExpanded, isDetached, @@ -247,13 +253,10 @@ class ExpandableSection extends Component onToggle(event, !propOrStateIsExpanded)} - {...(variant !== ExpandableSectionVariant.truncate && { - icon: ( - - - - ) - })} + {...(variant !== ExpandableSectionVariant.truncate && + hasToggleIcon && { + icon: {toggleIcon} + })} > {toggleContent || computedToggleText} diff --git a/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx b/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx index b4e77de49d9..590fbfd05d2 100644 --- a/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx +++ b/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(}>Test content); + + expect(screen.getByTestId('bell-icon')).toBeInTheDocument(); +}); + +test('Does not render toggle icon when hasToggleIcon is false', () => { + render(Test content); + + 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( + } hasToggleIcon={false}> + Test content + + ); + + expect(screen.queryByTestId('bell-icon')).not.toBeInTheDocument(); +}); + +test('Renders toggle icon by default when hasToggleIcon is true', () => { + render(Test content); + + const button = screen.getByRole('button'); + expect(button.querySelector('.pf-v6-c-expandable-section__toggle-icon')).toBeInTheDocument(); +});