patternfly-react icon indicating copy to clipboard operation
patternfly-react copied to clipboard

Expandable section - update to use <Button> for toggle

Open mcoker opened this issue 1 year ago • 0 comments

Follow up to core PR - https://github.com/patternfly/patternfly/pull/7000

TL;DR of the updates:

  • Replace the custom button in expandableToggle with a <Button variant="link">
    • Move all of the logic that was on the custom button to the new <Button>
  • Wrap the expandableToggle in <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 have isInline if 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

mcoker avatar Aug 22 '24 21:08 mcoker