chore(card): added header wrap example

[Mash707]

Closes #11668

[patternfly-build]

Preview: https://patternfly-react-pr-11765.surge.sh

A11y report: https://patternfly-react-pr-11765-a11y.surge.sh

[Mash707]

@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?

[thatblindgeye]

Change below. Also @mcoker @sg00dwin looks like Core may be missing a wrapper element. In React any child passed to CardHeader (in this example a CardTitle) gets wrapped in a pf-v6-c-card__header-main element. The Core header wraps example is missing that wrapper.

[thatblindgeye]

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):

Suggested change

	<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>

[Mash707]

Didn't realise actions are this useful. Will make the necessary changes

[Mash707]

In addition to changes suggested, I have also added the key prop in the actions array as I was getting lint errors for "missing key prop"

[mcoker]

🚀

[patternfly-build]

Your changes have been released in:

• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]
• [email protected]
• @patternfly/[email protected]
• @patternfly/[email protected]

Thanks for your contribution! 🎉