[MediaCard] Remove extraneous space when card has no actions #4538
Conversation
|
👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. |
ghost
added
the
cla-needed
|
Is this project participating in hacktoberfest? |
Not that I know, but a huge thank you for this contribution! Could you also add a new example in https://github.com/emilycritter/polaris-react/blob/fix/media-card-extraneous-space/src/components/MediaCard/README.md to illustrate this use-case? |
ghost
removed
the
cla-needed
| title="Getting Started" | ||
| description="Discover how Shopify can power up your entrepreneurial journey." |
There was a problem hiding this comment.
This content wouldn't be something we'd want without a call to action, but that's something that can be addressed separately.
|
Not sure adding a test is useful here, since visual regression tests would catch any issues with how layout is impacted by future changes. I'll let the maintainers decide! |
| </div> | ||
| ); | ||
| const actionMarkup = | ||
| primaryActionMarkup || secondaryActionMarkup ? ( |
There was a problem hiding this comment.
If we had codecov still active it would complain about not adding tests for this and we don't have visual regression testing at the moment so I think it worth adding a couple of tests here. I think we can just test to make sure button group doesn't render if primary or secondary actions are passed in
|
Since some of the tests couldn't complete (probably due to the fact the PR comes from a fork), an admin will have to merge this PR. |
|
🎉 Thanks for your contribution to Polaris React! |
3 participants
WHY are these changes introduced?
Fixes #4534
In vertical view (smaller viewports), MediaCard without primaryAction or secondaryAction has extra space at the bottom.
WHAT is this pull request doing?
This PR adds a conditional to check for actions thus removing an extra, empty div that was resulting in extraneous space at the bottom of the card.
Before:
After:
