fix(card): add border radius to slotted content to match parent card

[cdransf]

Description

Addresses an issue where the content of a card can have a border radius that does not match that of the parent card.

Related issue(s)

• fixes SWC-1034

Screenshots (if appropriate)

Manual review test cases

1. Navigate to one of the VRTs for this pull request.
2. Select CardStories
3. Select smallQuiet
4. See that the corners of the image contained within the card are not rounded.
5. Drag the slider past the component to see the new state.
6. See that the new corner radius is now consistent with that of the card that contains it.

Author's checklist

• I have read the CONTRIBUTING and PULL_REQUESTS documents.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
• I have added automated tests to cover my changes.
• I have included a well-written changeset if my change needs to be published.
• I have included updated documentation if my change required it.

[changeset-bot]

⚠️ No Changeset found

Latest commit: c467d85

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

📚 Branch Preview

• Documentation Site
• Storybook

🔍 Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

• Spectrum | Light | Medium | LTR
• Spectrum | Dark | Large | RTL
• Express | Light | Medium | LTR
• Express | Dark | Large | RTL
• Spectrum-two | Light | Medium | LTR
• Spectrum-two | Dark | Large | RTL
• High Contrast Mode | Medium | LTR

Deployed to Azure Blob Storage: pr-5796

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

[github-actions]

Tachometer results

Currently, no packages are changed by this PR...

[coveralls]

Pull Request Test Coverage Report for Build 18501045955

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 97.957%

---

Totals
Change from base Build 18472233594:	0.0%
Covered Lines:	34182
Relevant Lines:	34716

---

💛 - Coveralls

[Rajdeepc]

Can you also attach the github here too?

[cdransf]

Can you also attach the github here too?

Ah, it was reported in Jira, I'm not sure there's anything from GitHub to attach.

[Rajdeepc]

can you please list some instructions for other reviewers to verify this change?

[cdransf]

can you please list some instructions for other reviewers to verify this change?

Added! ✨

Manual review test cases

1. Navigate to one of the VRTs for this pull request.
2. Select CardStories
3. Select smallQuiet
4. See that the corners of the image contained within the card are not rounded.
5. Drag the slider past the component to see the new state.
6. See that the new corner radius is now consistent with that of the card that contains it.

[Rajdeepc]

Few questions here:

1. We are adding a deliberate border-radius to the card content - Is this signed off from the design?
2. Why are we not allowing customisations? What happens to products which doesnt want a border-radius on the content?

[marissahuysentruyt]

I agree with @Rajdeepc that we're introducing some VRT diffs in a couple other quiet stories that I imagine we want to avoid. When I wrote the ticket, I was hoping we could target just the small-quiet story to get the image border-radius to match the rest of the container like the other cards.

[cdransf]

I agree with @Rajdeepc that we're introducing some VRT diffs in a couple other quiet stories that I imagine we want to avoid. When I wrote the ticket, I was hoping we could target just the small-quiet story to get the image border-radius to match the rest of the container like the other cards.

That makes sense! I've updated it to target that variant specifically and the VRTs now reflect a change to only that variant.

[Rajdeepc]

Once you update the hash, then we are good to go!

[marissahuysentruyt]

looking good! I didn't catch the VRTs before the hash was updated (that's my fault for being slooow) but the story looks great now!

Thank you! ❤️