-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Card: Enhance CardHeader and CardFooter with Flex #22916
Conversation
This update enhances the CardHeader and CardFooter sub-components of Card with the new layout-based Flex component. This improves the alignment of child content for common header/footer use-cases. The various Card `README.md` files were updated to reflect the changes.
Size Change: +37 B (0%) Total Size: 1.12 MB
ℹ️ View Unchanged
|
@ItsJonQ I tested and indeed it works perfectly. My only concern is that this would break at least some places where |
@adamziel Thank you for testing! 🙏
I feel like it should be okay. Although of course, I cannot confirm 100%. cc'ing @nerrad + @jameskoster to double check 😊 |
@psealock @jeffstieler @mattsherman y'all have been using this component in the Woo Home Screen work I believe. |
@psealock @jeffstieler @mattsherman 👋 Hallo!! Just a quick follow up 😊 Thanks! |
We are, but I don't think that should be a blocker to progress. Thanks for the heads up. |
@psealock Awesome! I'll merge it up |
(Screenshot of CardHeader with content +
<Button />
aligned)This update enhances the CardHeader and CardFooter sub-components of Card with the new layout-based Flex component. This improves the alignment of child content for common header/footer use-cases.
The various Card
README.md
files were updated to reflect the changes.Lastly, a new
space()
style utility was added to help generatepx
values that follow the8px
grid systemhttps://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
This update was originally inspired from #22827 (review)
cc'ing @adamziel for sanity check!
How has this been tested?
Tested locally on Storybook.
npm run storybook:dev
cardheader
Alignment
exampleChecklist: