fix: make CardBody slot full width in selectable card component - #3898
fix: make CardBody slot full width in selectable card component#3898rzp-slash[bot] wants to merge 2 commits into
Conversation
The CardBody slot did not have an explicit width, causing it to not occupy the full card width in certain flex contexts (e.g. when nested inside RadioGroup/CheckboxGroup wrappers). This resulted in a layout discrepancy with the provided designs for selectable cards. Added width="100%" to the BaseBox in CardBody to ensure the slot always fills the card width. Co-authored-by: rsubhojitdesign <subhojit.roy@razorpay.com>
|
|
🤖 Slash AI Review has been triggered. View execution logs |
|
(Review Cancelled - Superseded by a new run) |
![rzp-slash[bot]](https://github.githubassets.com/images/gravatars/gravatar-user-420.png){kind=avatar}
Co-authored-by: admin <admin>
|
🤖 Slash AI Review has been triggered. View execution logs |
kamaleshs-bridge4
left a comment
kamaleshs-bridge4
left a comment
There was a problem hiding this comment.
✨ Agentic PR Review ✨
UI Review
✅ 4 passed
Passing checks (4)
| Check | Screenshot |
|---|---|
| ✅ Card Interactive - Single Selectable Card with Radio |  |
| ✅ Card Interactive - Multi Selectable Card with Checkbox |  |
| ✅ Card - Card Body Content |  |
| ✅ Card - Default Example |  |
| <BaseBox | ||
| {...metaAttribute({ name: MetaConstants.CardBody, testID })} | ||
| {...makeAnalyticsAttribute(rest)} | ||
| width="100%" |
There was a problem hiding this comment.
🟠 [MAJOR] · code-quality-critique · confidence: 9/10
Problem: Native test snapshots not updated — adding width="100%" changes CardBody's rendered style on React Native from {} to {"width":"100%"}, but Card.native.test.tsx.snap and CardInteractive.native.test.tsx.snap were not updated. CI runs yarn test which includes test:react-native, so native tests will fail with snapshot mismatches.
Suggestion: Update the native snapshots by running yarn test:react-native Card with --updateSnapshot (or -u).
| <BaseBox | ||
| {...metaAttribute({ name: MetaConstants.CardBody, testID })} | ||
| {...makeAnalyticsAttribute(rest)} | ||
| width="100%" |
There was a problem hiding this comment.
🔵 [MINOR] · code-quality-critique · confidence: 8/10
Problem: Missing changeset — this is a user-facing bug fix that changes CardBody's layout behavior, but no changeset file was added to .changeset/.
Suggestion: Add a changeset file (e.g., .changeset/card-body-full-width.md) with a patch bump for @razorpay/blade describing the CardBody width fix.
|
|
![rzp-slash[bot]](https://avatars.githubusercontent.com/u/7713209?s=60&v=4){kind=small}
There was a problem hiding this comment.
✨ Agentic PR Review ✨
Status: Approved ✅
UI Review
✅ 12 passed
Passing checks (12)
Usage
import { Card, CardBody } from '@razorpay/blade/components';
<Card>
<CardBody>Content</CardBody>
</Card>2 participants
Problem
The
CardBodyslot in the selectable card component does not occupy the full width, causing a layout discrepancy with the provided designs. The slot was missing an explicitwidthprop, and in certain flex contexts (e.g. when nested insideRadioGroup/CheckboxGroupwrappers) it would shrink to content width instead of filling the card.Solution
Added
width="100%"to theBaseBoxrendered byCardBodyinpackages/blade/src/components/Card/Card.tsx, ensuring the body slot always stretches to the full card width regardless of parent flex context.Changes
packages/blade/src/components/Card/Card.tsx— addedwidth="100%"toCardBody'sBaseBoxCard.web.test.tsx,Card.ssr.test.tsx, andCardInteractive.web.test.tsxVerification
yarn typecheck— passesyarn test:react Card— all 30 tests pass, 20 snapshots passReference
Slack thread discussion with @rastogi_saurav about selectable card slot not occupying full width.