-
Notifications
You must be signed in to change notification settings - Fork 370
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
base: main
Are you sure you want to change the base?
feat(CC-expandable-section): added expandable section #11930
Conversation
Preview: https://patternfly-react-pr-11930.surge.sh A11y report: https://patternfly-react-pr-11930-a11y.surge.sh Preview: https://pf-react-pr-11930.surge.sh A11y report: https://pf-react-pr-11930-a11y.surge.sh |
<ExpandableSection | ||
onToggle={() => {}} | ||
toggleText={isExpanded ? 'Show less basic example content' : `${props.toggleText}`} | ||
> |
There was a problem hiding this comment.
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'} |
There was a problem hiding this comment.
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}> |
There was a problem hiding this comment.
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" | ||
> |
There was a problem hiding this comment.
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} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
isExpanded={isExpanded} | |
isExpanded={true} |
'https://www.figma.com/design/aEBBvq0J3EPXxHvv6WgDx9/PatternFly-6--Components-Test?node-id=2404-21', | ||
{ | ||
variant: { State: 'Default Custom Content' }, | ||
example: () => ( |
There was a problem hiding this comment.
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'} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
toggleText={isExpanded ? `${props.toggleText}` : 'Show less basic example content'} | |
toggleText={isExpanded ? `${props.toggleText}` : 'Show more basic example content'} |
ae0a1a6
to
d51c5aa
Compare
d51c5aa
to
5fa8d87
Compare
Relates to: #11624
Included components:
ExpandableSection
Component tracker
Figma preview
Resources: