@patternfly/react-core 6.5.0-prerelease.4 → 6.5.0-prerelease.40

package/src/components/Dropdown/examples/DropdownWithSplit.tsx

@@ -0,0 +1,97 @@
+import {
+  Dropdown,
+  MenuToggle,
+  MenuToggleCheckbox,
+  DropdownItem,
+  DropdownList,
+  Divider,
+  MenuToggleElement
+} from '@patternfly/react-core';
+import { useRef, useState } from 'react';
+
+export const DropdownSplitButtonText: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleRef = useRef<MenuToggleElement>(null);
+
+  const onFocus = () => {
+    if (!toggleRef.current) {
+      return;
+    }
+
+    const toggleButton = toggleRef.current.querySelector('button[aria-expanded]');
+    toggleButton?.focus();
+  };
+
+  const onSelect = () => {
+    setIsOpen(false);
+    onFocus();
+  };
+
+  const onToggleClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <Dropdown
+      onSelect={onSelect}
+      onOpenChange={(isOpen: boolean) => setIsOpen(isOpen)}
+      toggle={(toggleRefCallback: React.Ref<MenuToggleElement>) => (
+        <MenuToggle
+          ref={(node) => {
+            // Handle both callback ref and useRef
+            if (typeof toggleRefCallback === 'function') {
+              toggleRefCallback(node);
+            } else if (toggleRefCallback) {
+              (toggleRefCallback as React.MutableRefObject<MenuToggleElement | null>).current = node;
+            }
+            (toggleRef as React.MutableRefObject<MenuToggleElement | null>).current = node;
+          }}
+          splitButtonItems={[
+            <MenuToggleCheckbox id="split-button-checkbox-example" key="split-checkbox" aria-label="Select all" />
+          ]}
+          aria-label="Dropdown with checkbox split button"
+          onClick={onToggleClick}
+          isExpanded={isOpen}
+        />
+      )}
+      isOpen={isOpen}
+    >
+      <DropdownList>
+        <DropdownItem value={0} key="action">
+          Action
+        </DropdownItem>
+        <DropdownItem
+          value={1}
+          key="link"
+          to="#default-link2"
+          // Prevent the default onClick functionality for example purposes
+          onClick={(ev: any) => ev.preventDefault()}
+        >
+          Link
+        </DropdownItem>
+        <DropdownItem value={2} isDisabled key="disabled action">
+          Disabled Action
+        </DropdownItem>
+        <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
+          Disabled Link
+        </DropdownItem>
+        <DropdownItem
+          value={4}
+          isAriaDisabled
+          key="aria-disabled link"
+          to="#default-link5"
+          tooltipProps={{ content: 'aria-disabled link', position: 'top' }}
+        >
+          Aria-disabled Link
+        </DropdownItem>
+        <Divider component="li" key="separator" />
+        <DropdownItem value={5} key="separated action">
+          Separated Action
+        </DropdownItem>
+        <DropdownItem value={6} key="separated link" to="#default-link6" onClick={(ev) => ev.preventDefault()}>
+          Separated Link
+        </DropdownItem>
+      </DropdownList>
+    </Dropdown>
+  );
+};

package/src/components/DualListSelector/DualListSelector.tsx

@@ -1,6 +1,6 @@
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { GenerateId } from '../../helpers';
+import { useSSRSafeId } from '../../helpers';
 import { DualListSelectorContext } from './DualListSelectorContext';
 import { useHasAnimations } from '../../helpers';
 
@@ -33,24 +33,17 @@ export const DualListSelector: React.FunctionComponent<DualListSelectorProps> =
   ...props
 }: DualListSelectorProps) => {
   const hasAnimations = useHasAnimations(hasAnimationsProp);
+  const randomId = useSSRSafeId();
 
   return (
     <DualListSelectorContext.Provider value={{ isTree, hasAnimations }}>
-      <GenerateId>
-        {(randomId) => (
-          <div
-            className={css(
-              styles.dualListSelector,
-              hasAnimations && isTree && styles.modifiers.animateExpand,
-              className
-            )}
-            id={id || randomId}
-            {...props}
-          >
-            {children}
-          </div>
-        )}
-      </GenerateId>
+      <div
+        className={css(styles.dualListSelector, hasAnimations && isTree && styles.modifiers.animateExpand, className)}
+        id={id || randomId}
+        {...props}
+      >
+        {children}
+      </div>
     </DualListSelectorContext.Provider>
   );
 };

package/src/components/DualListSelector/DualListSelectorListItem.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useContext, useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { getUniqueId } from '../../helpers';
+import { useSSRSafeId } from '../../helpers';
 import GripVerticalIcon from '@patternfly/react-icons/dist/esm/icons/grip-vertical-icon';
 import { Button, ButtonVariant } from '../Button';
 import { DualListSelectorListContext } from './DualListSelectorContext';
@@ -38,7 +38,7 @@ export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelec
   orderIndex,
   children,
   className,
-  id = getUniqueId('dual-list-selector-list-item'),
+  id: idProp,
   isSelected,
   innerRef,
   isDraggable = false,
@@ -47,6 +47,8 @@ export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelec
   draggableButtonAriaLabel = 'Reorder option',
   ...props
 }: DualListSelectorListItemProps) => {
+  const generatedId = useSSRSafeId('dual-list-selector-list-item');
+  const id = idProp ?? generatedId;
   const privateRef = useRef<HTMLLIElement>(null);
   const ref = innerRef || privateRef;
   const { setFocusedOption } = useContext(DualListSelectorListContext);

package/src/components/DualListSelector/DualListSelectorListWrapper.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useContext, useEffect, useRef, useState } from 'react';
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { getUniqueId, handleArrows } from '../../helpers';
+import { handleArrows, useSSRSafeId } from '../../helpers';
 import { DualListSelectorList } from './DualListSelectorList';
 import { DualListSelectorContext, DualListSelectorListContext } from './DualListSelectorContext';
 
@@ -34,10 +34,12 @@ export const DualListSelectorListWrapperBase: React.FunctionComponent<DualListSe
   options = [],
   selectedOptions = [],
   displayOption,
-  id = getUniqueId('dual-list-selector-list'),
+  id: idProp,
   isDisabled = false,
   ...props
 }: DualListSelectorListWrapperProps) => {
+  const generatedId = useSSRSafeId('dual-list-selector-list');
+  const id = idProp ?? generatedId;
   const [focusedOption, setFocusedOption] = useState('');
   const ref = useRef(null);
   const menuRef = innerRef || ref;

package/src/components/DualListSelector/DualListSelectorPane.tsx

@@ -1,6 +1,6 @@
 import styles from '@patternfly/react-styles/css/components/DualListSelector/dual-list-selector';
 import { css } from '@patternfly/react-styles';
-import { getUniqueId } from '../../helpers';
+import { useSSRSafeId } from '../../helpers';
 import { DualListSelectorListWrapper } from './DualListSelectorListWrapper';
 import { DualListSelectorPaneContext } from './DualListSelectorContext';
 import { SearchInput } from '../SearchInput';
@@ -44,50 +44,54 @@ export const DualListSelectorPane: React.FunctionComponent<DualListSelectorPaneP
   searchInput,
   children,
   title = '',
-  id = getUniqueId('dual-list-selector-pane'),
+  id: idProp,
   isDisabled = false,
   listMinHeight,
   ...props
-}: DualListSelectorPaneProps) => (
-  <div
-    className={css(styles.dualListSelectorPane, isChosen ? styles.modifiers.chosen : 'pf-m-available', className)}
-    {...props}
-  >
-    {title && (
-      <div className={css(styles.dualListSelectorHeader)}>
-        <div className={`${styles.dualListSelector}__title`}>
-          <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
+}: DualListSelectorPaneProps) => {
+  const generatedId = useSSRSafeId('dual-list-selector-pane');
+  const id = idProp ?? generatedId;
+  return (
+    <div
+      className={css(styles.dualListSelectorPane, isChosen ? styles.modifiers.chosen : 'pf-m-available', className)}
+      {...props}
+    >
+      {title && (
+        <div className={css(styles.dualListSelectorHeader)}>
+          <div className={`${styles.dualListSelector}__title`}>
+            <div className={css(styles.dualListSelectorTitleText)}>{title}</div>
+          </div>
+        </div>
+      )}
+      {(actions || searchInput) && (
+        <div className={css(styles.dualListSelectorTools)}>
+          {searchInput && (
+            <div className={css(styles.dualListSelectorToolsFilter)}>
+              {searchInput ? searchInput : <SearchInput isDisabled={isDisabled} />}
+            </div>
+          )}
+          {actions && <div className={css(styles.dualListSelectorToolsActions)}>{actions}</div>}
         </div>
-      </div>
-    )}
-    {(actions || searchInput) && (
-      <div className={css(styles.dualListSelectorTools)}>
-        {searchInput && (
-          <div className={css(styles.dualListSelectorToolsFilter)}>
-            {searchInput ? searchInput : <SearchInput isDisabled={isDisabled} />}
+      )}
+      {status && (
+        <div className={css(styles.dualListSelectorStatus)}>
+          <div className={css(styles.dualListSelectorStatusText)} id={`${id}-status`}>
+            {status}
           </div>
-        )}
-        {actions && <div className={css(styles.dualListSelectorToolsActions)}>{actions}</div>}
-      </div>
-    )}
-    {status && (
-      <div className={css(styles.dualListSelectorStatus)}>
-        <div className={css(styles.dualListSelectorStatusText)} id={`${id}-status`}>
-          {status}
         </div>
-      </div>
-    )}
-    <DualListSelectorPaneContext.Provider value={{ isChosen }}>
-      <DualListSelectorListWrapper
-        aria-labelledby={`${id}-status`}
-        id={`${id}-list`}
-        {...(listMinHeight && {
-          style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
-        })}
-      >
-        {children}
-      </DualListSelectorListWrapper>
-    </DualListSelectorPaneContext.Provider>
-  </div>
-);
+      )}
+      <DualListSelectorPaneContext.Provider value={{ isChosen }}>
+        <DualListSelectorListWrapper
+          aria-labelledby={`${id}-status`}
+          id={`${id}-list`}
+          {...(listMinHeight && {
+            style: { [cssMenuMinHeight.name]: listMinHeight } as React.CSSProperties
+          })}
+        >
+          {children}
+        </DualListSelectorListWrapper>
+      </DualListSelectorPaneContext.Provider>
+    </div>
+  );
+};
 DualListSelectorPane.displayName = 'DualListSelectorPane';

package/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap

@@ -90,12 +90,24 @@ exports[`DualListSelector with search inputs 1`] = `
                   fill="currentColor"
                   height="1em"
                   role="img"
-                  viewBox="0 0 512 512"
                   width="1em"
                 >
-                  <path
-                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                  />
+                  <svg
+                    class="pf-v6-icon-default"
+                    viewBox="0 0 512 512"
+                  >
+                    <path
+                      d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+                    />
+                  </svg>
+                  <svg
+                    class="pf-v6-icon-rh-ui"
+                    viewBox="0 0 32 32"
+                  >
+                    <path
+                      d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
+                    />
+                  </svg>
                 </svg>
               </span>
               <input

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap

@@ -11,12 +11,24 @@ exports[`EmptyStateIcon should match snapshot (auto-generated) 1`] = `
       fill="currentColor"
       height="1em"
       role="img"
-      viewBox="0 0 448 512"
       width="1em"
     >
-      <path
-        d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"
-      />
+      <svg
+        class="pf-v6-icon-default"
+        viewBox="0 0 448 512"
+      >
+        <path
+          d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4z"
+        />
+      </svg>
+      <svg
+        class="pf-v6-icon-rh-ui"
+        viewBox="0 0 32 32"
+      >
+        <path
+          d="M20.354 15.702C22.545 14.273 24 11.805 24 9c0-4.411-3.589-8-8-8S8 4.589 8 9a7.995 7.995 0 0 0 3.646 6.702C6.053 17.538 2 22.801 2 29a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1c0-6.199-4.053-11.462-9.646-13.298ZM10 9c0-3.309 2.691-6 6-6s6 2.691 6 6-2.691 6-6 6-6-2.691-6-6ZM4.041 28C4.551 21.85 9.72 17 16 17s11.449 4.85 11.959 11H4.041Z"
+        />
+      </svg>
     </svg>
   </div>
 </DocumentFragment>

package/src/components/EmptyState/__tests__/__snapshots__/EmptyState.test.tsx.snap

@@ -95,7 +95,7 @@ exports[`EmptyState Main 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-primary"
-            data-ouia-component-id="OUIA-Generated-Button-primary-1"
+            data-ouia-component-id="OUIA-Generated-Button-primary-:r0:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -113,7 +113,7 @@ exports[`EmptyState Main 1`] = `
           <button
             aria-label="learn more action"
             class="pf-v6-c-button pf-m-link"
-            data-ouia-component-id="OUIA-Generated-Button-link-1"
+            data-ouia-component-id="OUIA-Generated-Button-link-:r1:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -4,8 +4,9 @@ import { css } from '@patternfly/react-styles';
 import lineClamp from '@patternfly/react-tokens/dist/esm/c_expandable_section_m_truncate__content_LineClamp';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { PickOptional } from '../../helpers/typeUtils';
-import { debounce, getUniqueId } from '../../helpers/util';
+import { debounce } from '../../helpers/util';
 import { getResizeObserver } from '../../helpers/resizeObserver';
+import { GenerateId } from '../../helpers';
 import { Button } from '../Button';
 
 export enum ExpandableSectionVariant {
@@ -62,6 +63,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.
    */
@@ -102,6 +107,7 @@ const setLineClamp = (lines: number, element: HTMLDivElement) => {
 
 class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSectionState> {
   static displayName = 'ExpandableSection';
+
   constructor(props: ExpandableSectionProps) {
     super(props);
 
@@ -211,6 +217,8 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       toggleContent,
       toggleAriaLabel,
       toggleAriaLabelledBy,
+      toggleIcon = <AngleRightIcon />,
+      hasToggleIcon = true,
       children,
       isExpanded,
       isDetached,
@@ -236,8 +244,6 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
 
     let onToggle = onToggleProp;
     let propOrStateIsExpanded = isExpanded;
-    const uniqueContentId = contentId || getUniqueId('expandable-section-content');
-    const uniqueToggleId = toggleId || getUniqueId('expandable-section-toggle');
 
     // uncontrolled
     if (isExpanded === undefined) {
@@ -258,58 +264,68 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       typeof toggleContent === 'function' ? toggleContent(propOrStateIsExpanded) : toggleContent;
     const ToggleWrapper = toggleWrapper as any;
 
-    const expandableToggle = !isDetached && (
-      <ToggleWrapper className={`${styles.expandableSection}__toggle`}>
-        <Button
-          variant="link"
-          {...(variant === ExpandableSectionVariant.truncate && { isInline: true })}
-          aria-expanded={propOrStateIsExpanded}
-          aria-controls={uniqueContentId}
-          id={uniqueToggleId}
-          onClick={(event) => onToggle(event, !propOrStateIsExpanded)}
-          {...(variant !== ExpandableSectionVariant.truncate && {
-            icon: (
-              <span className={css(styles.expandableSectionToggleIcon)}>
-                <AngleRightIcon />
-              </span>
-            )
-          })}
-          aria-label={toggleAriaLabel}
-          aria-labelledby={toggleAriaLabelledBy}
-        >
-          {computedToggleContent || computedToggleText}
-        </Button>
-      </ToggleWrapper>
-    );
-
     return (
-      <div
-        className={css(
-          styles.expandableSection,
-          propOrStateIsExpanded && styles.modifiers.expanded,
-          displaySize === 'lg' && styles.modifiers.displayLg,
-          isWidthLimited && styles.modifiers.limitWidth,
-          isIndented && styles.modifiers.indented,
-          isDetached && direction && directionClassMap[direction],
-          isDetached && direction && 'pf-m-detached',
-          variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate,
-          className
+      <GenerateId prefix="expandable-section-content-">
+        {(genContentId) => (
+          <GenerateId prefix="expandable-section-toggle-">
+            {(genToggleId) => {
+              const uniqueContentId = contentId || genContentId;
+              const uniqueToggleId = toggleId || genToggleId;
+
+              const expandableToggle = !isDetached && (
+                <ToggleWrapper className={`${styles.expandableSection}__toggle`}>
+                  <Button
+                    variant="link"
+                    {...(variant === ExpandableSectionVariant.truncate && { isInline: true })}
+                    aria-expanded={propOrStateIsExpanded}
+                    aria-controls={uniqueContentId}
+                    id={uniqueToggleId}
+                    onClick={(event) => onToggle(event, !propOrStateIsExpanded)}
+                    {...(variant !== ExpandableSectionVariant.truncate &&
+                      hasToggleIcon && {
+                        icon: <span className={css(styles.expandableSectionToggleIcon)}>{toggleIcon}</span>
+                      })}
+                    aria-label={toggleAriaLabel}
+                    aria-labelledby={toggleAriaLabelledBy}
+                  >
+                    {computedToggleContent || computedToggleText}
+                  </Button>
+                </ToggleWrapper>
+              );
+
+              return (
+                <div
+                  className={css(
+                    styles.expandableSection,
+                    propOrStateIsExpanded && styles.modifiers.expanded,
+                    displaySize === 'lg' && styles.modifiers.displayLg,
+                    isWidthLimited && styles.modifiers.limitWidth,
+                    isIndented && styles.modifiers.indented,
+                    isDetached && direction && directionClassMap[direction],
+                    isDetached && direction && 'pf-m-detached',
+                    variant === ExpandableSectionVariant.truncate && styles.modifiers.truncate,
+                    className
+                  )}
+                  {...props}
+                >
+                  {variant === ExpandableSectionVariant.default && expandableToggle}
+                  <div
+                    ref={this.expandableContentRef}
+                    className={css(styles.expandableSectionContent)}
+                    hidden={variant !== ExpandableSectionVariant.truncate && !propOrStateIsExpanded}
+                    id={uniqueContentId}
+                    aria-labelledby={uniqueToggleId}
+                    role="region"
+                  >
+                    {children}
+                  </div>
+                  {variant === ExpandableSectionVariant.truncate && this.state.hasToggle && expandableToggle}
+                </div>
+              );
+            }}
+          </GenerateId>
         )}
-        {...props}
-      >
-        {variant === ExpandableSectionVariant.default && expandableToggle}
-        <div
-          ref={this.expandableContentRef}
-          className={css(styles.expandableSectionContent)}
-          hidden={variant !== ExpandableSectionVariant.truncate && !propOrStateIsExpanded}
-          id={uniqueContentId}
-          aria-labelledby={uniqueToggleId}
-          role="region"
-        >
-          {children}
-        </div>
-        {variant === ExpandableSectionVariant.truncate && this.state.hasToggle && expandableToggle}
-      </div>
+      </GenerateId>
     );
   }
 }

package/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();
+});