Skip to content

feat(CC-expandable-section): added expandable section #11930

New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

mattnolting
Copy link
Contributor

Relates to: #11624

Included components:

ExpandableSection

Component tracker

Figma preview

Resources:

@patternfly-build
Copy link
Contributor

patternfly-build commented Jul 22, 2025

<ExpandableSection
onToggle={() => {}}
toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`}
>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

stub out isExpanded={false/true} doesn't need to be connected to figma, true/false are acceptable values.

<ExpandableSection
isExpanded
onToggle={() => {}}
toggleText={isExpanded ? `${props.toggleText}` : 'Show less basic example content'}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

'Show more basic example content'

example: (props) => (
<Stack hasGutter>
<StackItem>
<ExpandableSection isExpanded={false} isDetached toggleId={props.toggleId} contentId={props.contentId}>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isExpanded={true}

toggleId={props.toggleId}
contentId={props.contentId}
direction="up"
>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isExpanded={true}

example: (props) => (
<ExpandableSection
toggleText={isExpanded ? `${props.toggleText}` : 'Show less indented example content'}
isExpanded={isExpanded}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
isExpanded={isExpanded}
isExpanded={true}

'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21',
{
variant: { State: 'Default Custom Content' },
example: () => (
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pass shared const into examples so user can see them, contextually.

<ExpandableSection
isExpanded={isExpanded}
onToggle={() => {}}
toggleText={isExpanded ? `${props.toggleText}` : 'Show less basic example content'}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
toggleText={isExpanded ? `${props.toggleText}` : 'Show less basic example content'}
toggleText={isExpanded ? `${props.toggleText}` : 'Show more basic example content'}

@mattnolting mattnolting force-pushed the feat-CC-expandable-section branch from ae0a1a6 to d51c5aa Compare July 31, 2025 19:43
@mattnolting mattnolting marked this pull request as ready for review July 31, 2025 19:50
@mattnolting mattnolting force-pushed the feat-CC-expandable-section branch from d51c5aa to 5fa8d87 Compare August 12, 2025 18:27
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants