patternfly-react
patternfly-react copied to clipboard
Expandable section - update to use <Button> for toggle
Follow up to core PR - https://github.com/patternfly/patternfly/pull/7000
TL;DR of the updates:
- Replace the custom button in
expandableTogglewith a<Button variant="link">- Move all of the logic that was on the custom button to the new
<Button>
- Move all of the logic that was on the custom button to the new
- Wrap the
expandableTogglein<div className={css(styles.expandableSectionToggle)}>
Some more details:
- We want to pass the
span.expandableSectionToggleIcon(the span with the toggle icon class and icon inside, as it is currently) in as the<Button>'s icon. This whole thing: https://github.com/patternfly/patternfly-react/blob/2e6837ef5e7f25a0ee72d9fe4bc4ac16fed3d080/packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx#L240-L242 - The
<Button>should haveisInlineif the "truncate" variant is used on<ExpandableSection>(expandableSectionVariant.truncate) - Here is the logic on the expandable section's button in core in case it's helpful https://github.com/patternfly/patternfly/blob/3234848901d1bfe0c632445d7d93088e87b098d7/src/patternfly/components/ExpandableSection/expandable-section-toggle.hbs#L5-L18