Skip to content

fix(rn): card header subtitle wraps correctly, footer buttons stay within bounds #3468

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.

Sign up for GitHub

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

Open
rohitr-raz wants to merge 6 commits into
base: master
Choose a base branch
from
Open

fix(rn): card header subtitle wraps correctly, footer buttons stay within bounds #3468

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7afbb4f
fix(rn): card header subtitle wraps correctly, footer buttons stay wi…
rohitr-raz Jun 9, 2026
339713f
Create curly-kings-take.md
rohitr-raz Jun 9, 2026
9050348
test(rn): update Card snapshots for footer flex and header flexShrink…
rohitr-raz Jun 9, 2026
4f68e4b
fix(rn): use flex=1 on mobile and flexGrow=1 on desktop for CardFoote…
rohitr-raz Jun 9, 2026
cc79c4f
fix(rn): fix CardFooterTrailing button overflow using isReactNative p…
rohitr-raz Jun 9, 2026
1aca25f
fix(rn): scope CardHeader flexShrink and flex changes to React Native…
rohitr-raz Jun 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/curly-kings-take.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@razorpay/blade": patch
---

fix(rn): card header subtitle wraps correctly, footer buttons stay within bounds
7 changes: 4 additions & 3 deletions packages/blade/src/components/Card/CardFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,12 +141,14 @@ const _CardFooterTrailing = ({ actions, ...rest }: CardFooterTrailingProps): Rea
<BaseBox
display="flex"
flexDirection="row"
gap="spacing.5"
alignSelf={isMobile ? 'auto' : 'center'}
marginTop={isMobile ? 'spacing.5' : 'spacing.0'}
marginLeft={isMobile ? 'spacing.0' : 'spacing.5'}
width={isMobile ? '100%' : undefined}
{...makeAnalyticsAttribute(rest)}
>
<BaseBox flexGrow={1}>
<BaseBox flex={1}>
{actions?.secondary ? (
<Button
isFullWidth
Expand All @@ -159,8 +161,7 @@ const _CardFooterTrailing = ({ actions, ...rest }: CardFooterTrailingProps): Rea
</Button>
) : null}
</BaseBox>
<BaseBox marginLeft="spacing.5" />
<BaseBox flexGrow={1}>
<BaseBox flex={1}>
{actions?.primary ? (
<Button
isFullWidth
Expand Down
5 changes: 3 additions & 2 deletions packages/blade/src/components/Card/CardHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,15 +199,16 @@ const _CardHeaderLeading = ({
display="flex"
flexDirection="column"
gap="spacing.4"
flexShrink={1}

@swapnil-kr1 swapnil-kr1 Jun 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes will affect behavior on web as well since this is shared code. Could you please verify the UI impact on web, or use the isReactNative approach if needed to keep the behavior isolated?

>
<BaseBox flex={1} display="flex" flexDirection="row">
<BaseBox display="flex" flexDirection="row">

@swapnil-kr1 swapnil-kr1 Jun 11, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These changes will affect behavior on web as well since this is shared code. Could you please verify the UI impact on web, or use the isReactNative approach if needed to keep the behavior isolated?

{prefix && (
<BaseBox marginRight="spacing.3" alignSelf="center" display="flex">
{prefix}
</BaseBox>
)}

<BaseBox marginRight="spacing.5">
<BaseBox marginRight="spacing.5" flexShrink={1}>
<BaseBox display="flex" flexDirection="row" alignItems="center" flexWrap="wrap">
<Text color="surface.text.gray.normal" size={size} weight="semibold">
{title}
Expand Down
27 changes: 12 additions & 15 deletions packages/blade/src/components/Card/__tests__/__snapshots__/Card.native.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,25 +246,30 @@ exports[`<Card /> should render a Card with Footer 1`] = `
data-blade-component="base-box"
display="flex"
flexDirection="row"
gap="spacing.5"
style={
[
{
"alignSelf": "auto",
"display": "flex",
"flexDirection": "row",
"gap": 16,
"marginLeft": 0,
"marginTop": 16,
"width": "100%",
},
]
}
width="100%"
>
<View
data-blade-component="base-box"
flexGrow={1}
style={
[
{
"flexBasis": 0,
"flexGrow": 1,
"flexShrink": 1,
},
]
}
Expand Down Expand Up @@ -443,18 +448,9 @@ exports[`<Card /> should render a Card with Footer 1`] = `
style={
[
{
"marginLeft": 16,
},
]
}
/>
<View
data-blade-component="base-box"
flexGrow={1}
style={
[
{
"flexBasis": 0,
"flexGrow": 1,
"flexShrink": 1,
},
]
}
Expand Down Expand Up @@ -734,12 +730,14 @@ exports[`<Card /> should render a Card with Header 1`] = `
data-blade-component="base-box"
display="flex"
flexDirection="column"
flexShrink={1}
gap="spacing.4"
style={
[
{
"display": "flex",
"flexDirection": "column",
"flexShrink": 1,
"gap": 12,
},
]
Expand All @@ -753,10 +751,7 @@ exports[`<Card /> should render a Card with Header 1`] = `
[
{
"display": "flex",
"flexBasis": 0,
"flexDirection": "row",
"flexGrow": 1,
"flexShrink": 1,
},
]
}
Expand Down Expand Up @@ -866,9 +861,11 @@ exports[`<Card /> should render a Card with Header 1`] = `
</View>
<View
data-blade-component="base-box"
flexShrink={1}
style={
[
{
"flexShrink": 1,
"marginRight": 16,
},
]
Expand Down
Loading
Loading