Skip to content

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

New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

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

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
beae7dd
feat(CC-expandable-section): separated expandable section variants
mattnolting Jul 22, 2025
4e730cd
feat(CC-expandable-section): remove double comments
mattnolting Jul 22, 2025
5fa8d87
feat(CC-expandable-section): group review 4 followup
mattnolting Jul 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 51 additions & 0 deletions packages/code-connect/components/ExpandableSection/ExandableSectionTruncate.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import figma from '@figma/code-connect';
import { ExpandableSection } from '@patternfly/react-core';

// TODO: DESIGN: Create toggle component
// onToggle={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
// isExpanded={() => {}} // only required if the user wants to be able to have other side effects when opening/closing

// Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section

figma.connect(
ExpandableSection,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2769-146',
{
props: {
toggleText: figma.string('Toggle Text More'),
isExpanded: false
},
example: (props) => (
<ExpandableSection
isExpanded={props.isExpanded}
onToggle={() => {}}
toggleText={props.isExpanded ? 'Show less basic example content' : `${props.toggleText}`}
>
This content is visible only when the component is expanded.
</ExpandableSection>
)
}
);

figma.connect(
ExpandableSection,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2769-146',
{
variant: { State: 'Expanded' },
props: {
toggleText: figma.string('Toggle Text Less'),
defaultContentSectionText: figma.string('Default Truncate Text'),
isExpanded: true
},
example: (props) => (
<ExpandableSection
isExpanded={props.isExpanded}
onToggle={() => {}}
toggleText={props.isExpanded ? 'Show less basic example content' : `${props.toggleText}`}
variant="truncate"
>
{props.defaultContentSectionText}
</ExpandableSection>
)
}
);
158 changes: 158 additions & 0 deletions packages/code-connect/components/ExpandableSection/ExpandableSection.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
import figma from '@figma/code-connect';
import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';

// TODO: DESIGN: This component needs to be overhauled. Using the base component approach present in
// other components would significantly reduce complexity.
// TODO: DESIGN: Create toggle component
// onToggle={() => {}} // only required if the user wants to be able to have other side effects when opening/closing
// isExpanded={() => {}} // only required if the user wants to be able to have other side effects when opening/closing

// Documentation for ExpandableSection can be found at https://www.patternfly.org/components/expandable-section

const customToggleContent = `
<div>
<span>You can also use icons </span>
<CheckCircleIcon />
<span> or badges </span>
<Badge isRead={true}>4</Badge>
<span> !</span>
</div>
`;

figma.connect(
ExpandableSection,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21',
{
props: {
toggleText: figma.string('Toggle Text More')
},
example: (props) => (
<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.

This content is visible only when the component is expanded.
</ExpandableSection>
)
}
);

figma.connect(
ExpandableSection,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21',
{
variant: { State: 'Expanded Basic' },
props: {
// enum
expandedContentSectionText: figma.string('Expanded Text'),
toggleText: figma.string('Toggle Text Less')
},
example: (props) => (
<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'

>
{props.expandedContentSectionText}
</ExpandableSection>
)
}
);

figma.connect(
ExpandableSection,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21',
{
variant: { State: 'Expand Detached' },
props: {
// enum
expandedContentSectionText: figma.string('Expanded Text'),
toggleText: figma.string('Toggle Text Less'),
toggleId: 'toggle-id',
contentId: 'content-id'
},
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}

{props.expandedContentSectionText}
</ExpandableSection>
</StackItem>
<StackItem>
<ExpandableSectionToggle
onToggle={() => {}}
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}

{isExpanded ? `${props.toggleText}` : 'Show less basic example content'}
</ExpandableSectionToggle>
</StackItem>
</Stack>
)
}
);

figma.connect(
ExpandableSection,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21',
{
variant: { State: 'Expanded Indent' },
props: {
// enum
expandedContentSectionText: figma.string('Expanded Text'),
toggleText: figma.string('Toggle Text Less'),
toggleId: 'toggle-id',
contentId: 'content-id'
},
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}

isIndented
onToggle={() => {}}
>
{props.expandedContentSectionText}
</ExpandableSection>
)
}
);

figma.connect(
ExpandableSection,
'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 toggleContent={customToggleContent} isExpanded={false} onToggle={() => {}}>
This content is visible only when the component is expanded.
</ExpandableSection>
)
}
);

figma.connect(
ExpandableSection,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21',
{
variant: { State: 'Expanded Custom Content' },
example: () => (
<ExpandableSection toggleContent={customToggleContent} isExpanded={true} onToggle={() => {}}>
This content is visible only when the component is expanded.
</ExpandableSection>
)
}
);

figma.connect(
ExpandableSection,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21',
{
variant: { State: 'Expanded Custom with Component swap' },
example: () => (
<ExpandableSection toggleContent={customToggleContent} isExpanded={true} onToggle={() => {}}>
This content is visible only when the component is expanded.
</ExpandableSection>
)
}
);
133 changes: 133 additions & 0 deletions packages/code-connect/components/ExpandableSection/ExpandableSectionDisclosure.figma.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import figma from '@figma/code-connect';
import { ExpandableSection } from '@patternfly/react-core';

const customToggleContent = `
<div>
<span>You can also use icons </span>
<CheckCircleIcon />
<span> or badges </span>
<Badge isRead={true}>4</Badge>
<span> !</span>
</div>
`;

figma.connect(
ExpandableSection,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80',
{
props: {
toggleText: figma.string('Toggle Text More'),
isExpanded: false
},
example: (props) => (
<ExpandableSection
isExpanded={props.isExpanded}
onToggle={() => {}}
toggleText={props.isExpanded ? 'Show less basic example content' : `${props.toggleText}`}
>
This content is visible only when the component is expanded.
</ExpandableSection>
)
}
);

figma.connect(
ExpandableSection,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80',
{
variant: { State: 'Expanded' },
props: {
toggleText: figma.string('Toggle Text Less'),
expandedContentSectionText: figma.string('Expanded Text'),
isExpanded: true
},
example: (props) => (
<ExpandableSection
isExpanded={props.isExpanded}
onToggle={() => {}}
toggleText={props.isExpanded ? `${props.toggleText}` : 'Show more basic example content'}
>
{props.expandedContentSectionText}
</ExpandableSection>
)
}
);

figma.connect(
ExpandableSection,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80',
{
variant: { State: 'Expand Uncontrolled' },
props: {
toggleText: figma.string('Toggle Text More'),
expandedContentSectionText: figma.string('Expanded Text'),
isExpanded: true
},
example: (props) => (
<ExpandableSection
isExpanded={props.isExpanded}
onToggle={() => {}}
toggleText={props.isExpanded ? `${props.toggleText}` : 'Show less basic example content'}
>
{props.expandedContentSectionText}
</ExpandableSection>
)
}
);

figma.connect(
ExpandableSection,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80',
{
variant: { State: 'Expanded Indent' },
props: {
expandedContentSectionText: figma.string('Expanded Text'),
toggleText: figma.string('Toggle Text More'),
isExpanded: true
},
example: (props) => (
<ExpandableSection
isExpanded={props.isExpanded}
onToggle={() => {}}
toggleText={props.isExpanded ? `${props.toggleText}` : 'Show less basic example content'}
>
{props.expandedContentSectionText}
</ExpandableSection>
)
}
);

figma.connect(
ExpandableSection,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80',
{
variant: { State: 'Default Custom Content' },
example: () => (
<ExpandableSection toggleContent={customToggleContent} isExpanded={false} onToggle={() => {}}>
This content is visible only when the component is expanded.
</ExpandableSection>
)
}
);

figma.connect(
ExpandableSection,
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2810-80',
{
variant: { State: 'Expanded Custom Content' },
props: {
toggleText: figma.string('Toggle Text More'),
expandedContentSectionText: figma.string('Expanded Text'),
isExpanded: true
},
example: (props) => (
<ExpandableSection
isExpanded={props.isExpanded}
onToggle={() => {}}
toggleText={props.isExpanded ? `${props.toggleText}` : 'Show less basic example content'}
>
{props.expandedContentSectionText}
</ExpandableSection>
)
}
);
Loading