fix(expandable section): update to use <Button> for toggle (#10891)

* fix(expandable section): update to use <Button> for toggle * update version and structure * fix cypress tests
patternfly · Sep 5, 2024 · fd9ce14 · fd9ce14
1 parent fce7209
commit fd9ce14
Show file tree

Hide file tree

Showing 11 changed files with 451 additions and 333 deletions.
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
@@ -54,7 +54,7 @@
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.210",
+    "@patternfly/patternfly": "6.0.0-alpha.226",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"

diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx
@@ -6,6 +6,7 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i
 import { PickOptional } from '../../helpers/typeUtils';
 import { debounce, getUniqueId } from '../../helpers/util';
 import { getResizeObserver } from '../../helpers/resizeObserver';
+import { Button } from '../Button';
 
 export enum ExpandableSectionVariant {
   default = 'default',
@@ -228,21 +229,25 @@ class ExpandableSection extends React.Component<ExpandableSectionProps, Expandab
     );
 
     const expandableToggle = !isDetached && (
-      <button
-        className={css(styles.expandableSectionToggle)}
-        type="button"
-        aria-expanded={propOrStateIsExpanded}
-        aria-controls={uniqueContentId}
-        id={uniqueToggleId}
-        onClick={(event) => onToggle(event, !propOrStateIsExpanded)}
-      >
-        {variant !== ExpandableSectionVariant.truncate && (
-          <span className={css(styles.expandableSectionToggleIcon)}>
-            <AngleRightIcon aria-hidden />
-          </span>
-        )}
-        <span className={css(styles.expandableSectionToggleText)}>{toggleContent || computedToggleText}</span>
-      </button>
+      <div 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 aria-hidden />
+              </span>
+            )
+          })}
+        >
+          {toggleContent || computedToggleText}
+        </Button>
+      </div>
     );
 
     return (

diff --git a/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx b/packages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section';
 import { css } from '@patternfly/react-styles';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import { Button } from '../Button';
 
 /** Acts as the toggle sub-component when the main expandable section component has the isDetached
  * property passed in. Allows for more custom control over the expandable section's toggle.
@@ -50,26 +51,30 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
     )}
     {...props}
   >
-    <button
-      className={css(styles.expandableSectionToggle)}
-      type="button"
-      aria-expanded={isExpanded}
-      aria-controls={contentId}
-      onClick={() => onToggle(!isExpanded)}
-      id={toggleId}
-    >
-      {!hasTruncatedContent && (
-        <span
-          className={css(
-            styles.expandableSectionToggleIcon,
-            isExpanded && direction === 'up' && styles.modifiers.expandTop
-          )}
-        >
-          <AngleRightIcon aria-hidden />
-        </span>
-      )}
-      <span className={css(styles.expandableSectionToggleText)}>{children}</span>
-    </button>
+    <div className={`${styles.expandableSection}__toggle`}>
+      <Button
+        variant="link"
+        {...(hasTruncatedContent && { isInline: true })}
+        aria-expanded={isExpanded}
+        aria-controls={contentId}
+        onClick={() => onToggle(!isExpanded)}
+        id={toggleId}
+        {...(!hasTruncatedContent && {
+          icon: (
+            <span
+              className={css(
+                styles.expandableSectionToggleIcon,
+                isExpanded && direction === 'up' && styles.modifiers.expandTop
+              )}
+            >
+              <AngleRightIcon aria-hidden />
+            </span>
+          )
+        })}
+      >
+        {children}
+      </Button>
+    </div>
   </div>
 );