card: Add header, footer & footerOutside props. Improve layouts #1990
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: 74a9af3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
stowball
changed the title
stowball
changed the title
stowball
force-pushed
the
card-footer-and-footer-outside-props
branch
from
95bf3eb to
cd90827
Compare
atlee025
reviewed
Mar 27, 2025
atlee025
reviewed
Mar 27, 2025
stowball
force-pushed
the
card-footer-and-footer-outside-props
branch
from
1e774aa to
1bb2910
Compare
stowball
commented
Mar 30, 2025
15 tasks
stowball
changed the title
stowball
commented
Apr 1, 2025
atlee025
approved these changes
Apr 1, 2025
adrian-yee
reviewed
Apr 3, 2025
|
|
Checked again, looks good to go |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Teams need to be able to have footer card actions that sit outside of a standard clickable card.
To be able to achieve all of the various configurations, I ended up needing to create
footerandfooterOutsideprops. I also created aheaderprop to be consistent, but realised this was also required with various configurations to havefooterOutside.Doing this also highlighted that cards with footers didn't flex to fill their space and that the
CardLinkhit area and focus states were always applied to the full card even whenclickablewasfalseplus other bugs.Please compare the focus, mouse over and visual states of the first 9 cards in the demos below.
View preview
Playroom card demo
Same demo on develop
Checklist
Preflight
accordion: Updated paddingordocs: Updated header linksyarn changeset. Learn more about change management.Testing
yarn testto ensure tests are passing. If required, runyarn test -uto update any generated snapshots.Documentation