chore(card): added header wrap example#11765
Conversation
|
Preview: https://patternfly-react-pr-11765.surge.sh A11y report: https://patternfly-react-pr-11765-a11y.surge.sh |
|
@thatblindgeye have a look at this. I wanted to ask that how can we put spacing between the buttons? I did find a approach using nesting in flex https://www.patternfly.org/layouts/flex#nesting. Do you know a better approach? |
| <CardHeader hasWrap> | ||
| {' '} | ||
| <Flex columnGap={{ default: 'columnGapXl' }} justifyContent={{ default: 'justifyContentSpaceBetween' }}> | ||
| <FlexItem> | ||
| <CardTitle>This is a longer card title that takes up more space</CardTitle> | ||
| </FlexItem> | ||
| <FlexItem> | ||
| <Button variant="primary" ouiaId="Primary"> | ||
| Primary action | ||
| </Button> | ||
| <Button variant="secondary" ouiaId="Secondary"> | ||
| Secondary action | ||
| </Button> | ||
| <Button variant="tertiary" ouiaId="Tertiary"> | ||
| Tertiary action | ||
| </Button> | ||
| </FlexItem> | ||
| </Flex> | ||
| </CardHeader> |
There was a problem hiding this comment.
So for the content inside CardHeader, we can keep the CardTitle inside it as a child. The Buttons we want to pass to CardHeader's actions prop (and remove all of the Flex components):
| <CardHeader hasWrap> | |
| {' '} | |
| <Flex columnGap={{ default: 'columnGapXl' }} justifyContent={{ default: 'justifyContentSpaceBetween' }}> | |
| <FlexItem> | |
| <CardTitle>This is a longer card title that takes up more space</CardTitle> | |
| </FlexItem> | |
| <FlexItem> | |
| <Button variant="primary" ouiaId="Primary"> | |
| Primary action | |
| </Button> | |
| <Button variant="secondary" ouiaId="Secondary"> | |
| Secondary action | |
| </Button> | |
| <Button variant="tertiary" ouiaId="Tertiary"> | |
| Tertiary action | |
| </Button> | |
| </FlexItem> | |
| </Flex> | |
| </CardHeader> | |
| <CardHeader | |
| hasWrap | |
| actions={{ | |
| hasNoOffset: true, | |
| actions: [ | |
| <Button variant="primary" ouiaId="Primary"> | |
| Primary action | |
| </Button>, | |
| <Button variant="secondary" ouiaId="Secondary"> | |
| Secondary action | |
| </Button>, | |
| <Button variant="tertiary" ouiaId="Tertiary"> | |
| Tertiary action | |
| </Button> | |
| ] | |
| }} | |
| > | |
| <CardTitle>This is a longer card title that takes up more space</CardTitle> | |
| </CardHeader> |
There was a problem hiding this comment.
Didn't realise actions are this useful. Will make the necessary changes
|
In addition to changes suggested, I have also added the |
|
Your changes have been released in:
Thanks for your contribution! 🎉 |
5 participants
Closes #11668