Collapsible React-only
Open in Storybook Open in Figma
A Collapsible is a user interface element that expands when clicked on. It allows to hide content that is not immediately relevant to the user.
Collapsibles in George exist in a variety of different forms. Their default can be either collapsed - hence the name - or expanded.
Rules For Developers
- The state of a collapsible (expanded/collapsed) should be stored to display/hide the content when the user returns to that part of the application the page.
Basic Collapsible
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Content preview
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
In a FunctionCard
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
CollapsibleHeader
CollapsibleHeader automatically wraps its children in .g-faded
paragraph when they are a string. Any other type gets rendered as-is, this is useful e.g. for headings.
Rules For Developers
- Wrap complex children in
<Paragraph faded />
to align the visuals
Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=object&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Centered
CollapsibleHeader can be rendered in a centered state. In this case there are no children and only the button is shown, centered.