-
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? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
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
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: