Skip to content

Commit 3a87bd6

Browse files
tewarigtewarig
authored
fix: unable to use switch inside card body (#2484)
* chore: unable to use switch inside card body * chore: added changset
1 parent 58c104f commit 3a87bd6

File tree

6 files changed

+161
-3
lines changed

6 files changed

+161
-3
lines changed

‎.changeset/itchy-boxes-learn.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@razorpay/blade': patch
3+
---
4+
5+
fix(blade): unable to use switch inside card body

‎packages/blade/src/components/Card/CardInteractive.stories.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { VisuallyHidden } from '~components/VisuallyHidden';
2525
import { Amount } from '~components/Amount';
2626
import { isReactNative } from '~utils';
2727
import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
28+
import { Switch } from '~components/Switch';
2829
import { Sandbox } from '~utils/storybook/Sandbox';
2930
import { Badge } from '~components/Badge';
3031
import { Radio, RadioGroup } from '~components/Radio';
@@ -315,6 +316,7 @@ export const Default = CardTemplate.bind({});
315316
export const ClickableCard = (): React.ReactElement => {
316317
const [cardClickCount, setCardClickCount] = React.useState(0);
317318
const [buttonClickCount, setButtonClickCount] = React.useState(0);
319+
const [switchToggleCounter, setSwitchToggleCounter] = React.useState(0);
318320

319321
return (
320322
<Box>
@@ -352,6 +354,12 @@ export const ClickableCard = (): React.ReactElement => {
352354
{buttonClickCount}
353355
</Text>
354356
</Text>
357+
<Text marginY="spacing.2">
358+
Switch Toggled:{' '}
359+
<Text as="span" weight="semibold">
360+
{switchToggleCounter}
361+
</Text>
362+
</Text>
355363
<Button
356364
size="small"
357365
marginTop="spacing.5"
@@ -361,6 +369,13 @@ export const ClickableCard = (): React.ReactElement => {
361369
>
362370
Get Demo
363371
</Button>
372+
<Switch
373+
accessibilityLabel="switch"
374+
size="small"
375+
onChange={() => {
376+
setSwitchToggleCounter((prev) => prev + 1);
377+
}}
378+
/>
364379
</CardBody>
365380
</Card>
366381
</Box>

‎packages/blade/src/components/Card/CardRoot.web.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,14 @@ const StyledCardRoot = styled(BaseBox)<CardRootProps & { isPressed: boolean; isM
5050
zIndex: 2,
5151
position: 'relative',
5252
},
53+
[`& label:not(a[data-blade-component="${CARD_LINK_OVERLAY_ID}"])`]: {
54+
zIndex: 2,
55+
position: 'relative',
56+
},
57+
[`& label:not(button[data-blade-component="${CARD_LINK_OVERLAY_ID}"])`]: {
58+
zIndex: 2,
59+
position: 'relative',
60+
},
5361
};
5462
},
5563
);

‎packages/blade/src/components/Card/__tests__/__snapshots__/Card.ssr.test.tsx.snap

+33-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`<Card /> should render a Card with Header & Footer 1`] = `"<div id="root"><div data-blade-component="card" class="BaseBox-bmPWx CardRootweb__StyledCardRoot-sc-1nb70ck-0 iAbwvA TtxLe"><div elevation="lowRaised" data-blade-component="base-box" class="BaseBox-bmPWx CardSurfaceweb__CardSurface-sc-1pgxikk-0 bcWxdc cGyVzL"><div data-blade-component="card-header" class="BaseBox-bmPWx dVKABc"><div data-blade-component="base-box" class="BaseBox-bmPWx biCNyr"><div data-blade-component="base-box" class="BaseBox-bmPWx gTkVyh"><div data-blade-component="base-box" class="BaseBox-bmPWx zthMO"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(212, 39%, 16%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(212, 39%, 16%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(212, 39%, 16%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx ihuchP"><div data-blade-component="base-box" class="BaseBox-bmPWx mKtKh"><p class="StyledBaseText-dVBfTO kICEzD" data-blade-component="text">Card Header</p><div data-blade-component="base-box" class="BaseBox-bmPWx jOqpMP"><div data-blade-component="counter" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 cTQuSp dbfGbJ"><div data-blade-component="base-box" class="BaseBox-bmPWx iUxudu"><p class="StyledBaseText-dVBfTO dTGEcz" data-blade-component="text">12</p></div></div></div></div></div><p class="StyledBaseText-dVBfTO licaLZ" data-blade-component="text">Card subtitle</p></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bLJxIg"><div data-blade-component="badge" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledBadgeweb__StyledBadge-sc-1svn4tv-0 bgUwrl bMPocw"><div data-blade-component="base-box" class="BaseBox-bmPWx iUxudu"><p class="StyledBaseText-dVBfTO iDpGlA" data-blade-component="text">NEW</p></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="card-body" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Plain Card</p></div><div data-blade-component="card-footer" class="BaseBox-bmPWx cdqgjM"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div><div data-blade-component="base-box" class="BaseBox-bmPWx jjVlQX"><div data-blade-component="base-box" class="BaseBox-bmPWx edNXIx"><p class="StyledBaseText-dVBfTO gXTKyw" data-blade-component="text">Card Footer</p><p class="StyledBaseText-dVBfTO eETJTC" data-blade-component="text">Card footer subtitle</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx jwvbFL"><div data-blade-component="base-box" class="BaseBox-bmPWx brkcZZ"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 cxbnnu"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0 eHcfsa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO RwjIC" data-blade-component="base-text">Delete</div></div></div></button></div><div data-blade-component="base-box" class="BaseBox-bmPWx kVSNdI"></div><div data-blade-component="base-box" class="BaseBox-bmPWx brkcZZ"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 cAjBUc"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0 eHcfsa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO eGcQGV" data-blade-component="base-text">Save</div></div></div></button></div></div></div></div></div></div></div>"`;
3+
exports[`<Card /> should render a Card with Header & Footer 1`] = `"<div id="root"><div data-blade-component="card" class="BaseBox-bmPWx CardRootweb__StyledCardRoot-sc-1nb70ck-0 iAbwvA dzkBld"><div elevation="lowRaised" data-blade-component="base-box" class="BaseBox-bmPWx CardSurfaceweb__CardSurface-sc-1pgxikk-0 bcWxdc cGyVzL"><div data-blade-component="card-header" class="BaseBox-bmPWx dVKABc"><div data-blade-component="base-box" class="BaseBox-bmPWx biCNyr"><div data-blade-component="base-box" class="BaseBox-bmPWx gTkVyh"><div data-blade-component="base-box" class="BaseBox-bmPWx zthMO"><svg aria-hidden="true" data-blade-component="icon" height="20px" viewBox="0 0 24 24" width="20px" fill="none" class="Svgweb__StyledSvg-vcmjs8-0"><path d="M12 11C12.5523 11 13 11.4477 13 12V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V12C11 11.4477 11.4477 11 12 11Z" fill="hsla(212, 39%, 16%, 1)" data-blade-component="svg-path"></path><path d="M12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9H12.01C12.5623 9 13.01 8.55228 13.01 8C13.01 7.44772 12.5623 7 12.01 7H12Z" fill="hsla(212, 39%, 16%, 1)" data-blade-component="svg-path"></path><path d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3Z" clip-rule="evenodd" fill="hsla(212, 39%, 16%, 1)" fill-rule="evenodd" data-blade-component="svg-path"></path></svg></div><div data-blade-component="base-box" class="BaseBox-bmPWx ihuchP"><div data-blade-component="base-box" class="BaseBox-bmPWx mKtKh"><p class="StyledBaseText-dVBfTO kICEzD" data-blade-component="text">Card Header</p><div data-blade-component="base-box" class="BaseBox-bmPWx jOqpMP"><div data-blade-component="counter" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledCounterweb__StyledCounter-sc-1itt9w6-0 cTQuSp dbfGbJ"><div data-blade-component="base-box" class="BaseBox-bmPWx iUxudu"><p class="StyledBaseText-dVBfTO dTGEcz" data-blade-component="text">12</p></div></div></div></div></div><p class="StyledBaseText-dVBfTO licaLZ" data-blade-component="text">Card subtitle</p></div></div><div data-blade-component="base-box" class="BaseBox-bmPWx bLJxIg"><div data-blade-component="badge" class="BaseBox-bmPWx ePenKG"><div data-blade-component="base-box" class="BaseBox-bmPWx StyledBadgeweb__StyledBadge-sc-1svn4tv-0 bgUwrl bMPocw"><div data-blade-component="base-box" class="BaseBox-bmPWx iUxudu"><p class="StyledBaseText-dVBfTO iDpGlA" data-blade-component="text">NEW</p></div></div></div></div></div><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div></div><div data-blade-component="card-body" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Plain Card</p></div><div data-blade-component="card-footer" class="BaseBox-bmPWx cdqgjM"><div data-blade-component="divider" role="separator" class="BaseBox-bmPWx Divider__StyledDivider-sc-8k3avj-0 bWVnPN WrXok"></div><div data-blade-component="base-box" class="BaseBox-bmPWx jjVlQX"><div data-blade-component="base-box" class="BaseBox-bmPWx edNXIx"><p class="StyledBaseText-dVBfTO gXTKyw" data-blade-component="text">Card Footer</p><p class="StyledBaseText-dVBfTO eETJTC" data-blade-component="text">Card footer subtitle</p></div><div data-blade-component="base-box" class="BaseBox-bmPWx jwvbFL"><div data-blade-component="base-box" class="BaseBox-bmPWx brkcZZ"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 cxbnnu"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0 eHcfsa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO RwjIC" data-blade-component="base-text">Delete</div></div></div></button></div><div data-blade-component="base-box" class="BaseBox-bmPWx kVSNdI"></div><div data-blade-component="base-box" class="BaseBox-bmPWx brkcZZ"><button type="button" data-blade-component="button" role="button" class="StyledBaseButtonweb__StyledBaseButton-sc-26bt38-0 cAjBUc"><div data-blade-component="base-box" class="BaseBox-bmPWx AnimatedButtonContentweb__AnimatedButtonContent-sc-1fkx0t6-0 eHcfsa"><div data-blade-component="base-box" class="BaseBox-bmPWx BaseButton__ButtonContent-zf1huq-0 LeezU esItiH"><div class="StyledBaseText-dVBfTO eGcQGV" data-blade-component="base-text">Save</div></div></div></button></div></div></div></div></div></div></div>"`;
44

55
exports[`<Card /> should render a Card with Header & Footer 2`] = `
66
.c0.c0.c0.c0.c0 {
@@ -237,6 +237,16 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
237237
position: relative;
238238
}
239239
240+
.c1.c1.c1.c1.c1 label:not(a[data-blade-component="card-link-overlay"]) {
241+
z-index: 2;
242+
position: relative;
243+
}
244+
245+
.c1.c1.c1.c1.c1 label:not(button[data-blade-component="card-link-overlay"]) {
246+
z-index: 2;
247+
position: relative;
248+
}
249+
240250
.c20.c20.c20.c20.c20 {
241251
background-color: hsla(211,20%,52%,0.09);
242252
border-radius: 9999px;
@@ -868,7 +878,7 @@ exports[`<Card /> should render a Card with Header & Footer 2`] = `
868878
</div>
869879
`;
870880

871-
exports[`<Card /> should render a Interactive Card with href 1`] = `"<div id="root"><div href="https://google.com" data-blade-component="card" class="BaseBox-bmPWx CardRootweb__StyledCardRoot-sc-1nb70ck-0 iAbwvA TtxLe"><div elevation="lowRaised" data-blade-component="base-box" class="BaseBox-bmPWx CardSurfaceweb__CardSurface-sc-1pgxikk-0 bcWxdc cGyVzL"><a href="https://google.com" data-blade-component="card-link-overlay" aria-pressed="false" class="LinkOverlayweb__LinkOverlay-ugib1o-0 cmIkCR"></a><div data-blade-component="card-body" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Plain Card</p></div></div></div></div>"`;
881+
exports[`<Card /> should render a Interactive Card with href 1`] = `"<div id="root"><div href="https://google.com" data-blade-component="card" class="BaseBox-bmPWx CardRootweb__StyledCardRoot-sc-1nb70ck-0 iAbwvA dzkBld"><div elevation="lowRaised" data-blade-component="base-box" class="BaseBox-bmPWx CardSurfaceweb__CardSurface-sc-1pgxikk-0 bcWxdc cGyVzL"><a href="https://google.com" data-blade-component="card-link-overlay" aria-pressed="false" class="LinkOverlayweb__LinkOverlay-ugib1o-0 cmIkCR"></a><div data-blade-component="card-body" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Plain Card</p></div></div></div></div>"`;
872882

873883
exports[`<Card /> should render a Interactive Card with href 2`] = `
874884
.c0.c0.c0.c0.c0 {
@@ -935,6 +945,16 @@ exports[`<Card /> should render a Interactive Card with href 2`] = `
935945
position: relative;
936946
}
937947
948+
.c1.c1.c1.c1.c1 label:not(a[data-blade-component="card-link-overlay"]) {
949+
z-index: 2;
950+
position: relative;
951+
}
952+
953+
.c1.c1.c1.c1.c1 label:not(button[data-blade-component="card-link-overlay"]) {
954+
z-index: 2;
955+
position: relative;
956+
}
957+
938958
.c5.c5.c5.c5.c5 {
939959
color: hsla(212,39%,16%,1);
940960
font-family: "Inter","Inter Fallback Arial",Arial;
@@ -987,7 +1007,7 @@ exports[`<Card /> should render a Interactive Card with href 2`] = `
9871007
</div>
9881008
`;
9891009

990-
exports[`<Card /> should render a Interactive Card with onClick 1`] = `"<div id="root"><div data-blade-component="card" class="BaseBox-bmPWx CardRootweb__StyledCardRoot-sc-1nb70ck-0 iAbwvA TtxLe"><div elevation="lowRaised" data-blade-component="base-box" class="BaseBox-bmPWx CardSurfaceweb__CardSurface-sc-1pgxikk-0 bcWxdc cGyVzL"><button data-blade-component="card-link-overlay" aria-pressed="false" class="LinkOverlayweb__LinkOverlay-ugib1o-0 cmIkCR"></button><div data-blade-component="card-body" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Plain Card</p></div></div></div></div>"`;
1010+
exports[`<Card /> should render a Interactive Card with onClick 1`] = `"<div id="root"><div data-blade-component="card" class="BaseBox-bmPWx CardRootweb__StyledCardRoot-sc-1nb70ck-0 iAbwvA dzkBld"><div elevation="lowRaised" data-blade-component="base-box" class="BaseBox-bmPWx CardSurfaceweb__CardSurface-sc-1pgxikk-0 bcWxdc cGyVzL"><button data-blade-component="card-link-overlay" aria-pressed="false" class="LinkOverlayweb__LinkOverlay-ugib1o-0 cmIkCR"></button><div data-blade-component="card-body" class="BaseBox-bmPWx"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">Plain Card</p></div></div></div></div>"`;
9911011

9921012
exports[`<Card /> should render a Interactive Card with onClick 2`] = `
9931013
.c0.c0.c0.c0.c0 {
@@ -1054,6 +1074,16 @@ exports[`<Card /> should render a Interactive Card with onClick 2`] = `
10541074
position: relative;
10551075
}
10561076
1077+
.c1.c1.c1.c1.c1 label:not(a[data-blade-component="card-link-overlay"]) {
1078+
z-index: 2;
1079+
position: relative;
1080+
}
1081+
1082+
.c1.c1.c1.c1.c1 label:not(button[data-blade-component="card-link-overlay"]) {
1083+
z-index: 2;
1084+
position: relative;
1085+
}
1086+
10571087
.c5.c5.c5.c5.c5 {
10581088
color: hsla(212,39%,16%,1);
10591089
font-family: "Inter","Inter Fallback Arial",Arial;

‎packages/blade/src/components/Card/__tests__/__snapshots__/Card.web.test.tsx.snap

+60
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,16 @@ exports[`<Card /> should render a Card with Footer 1`] = `
122122
position: relative;
123123
}
124124
125+
.c1.c1.c1.c1.c1 label:not(a[data-blade-component="card-link-overlay"]) {
126+
z-index: 2;
127+
position: relative;
128+
}
129+
130+
.c1.c1.c1.c1.c1 label:not(button[data-blade-component="card-link-overlay"]) {
131+
z-index: 2;
132+
position: relative;
133+
}
134+
125135
.c4.c4.c4.c4.c4 {
126136
color: hsla(212,39%,16%,1);
127137
font-family: "Inter","Inter Fallback Arial",Arial;
@@ -672,6 +682,16 @@ exports[`<Card /> should render a Card with Header 1`] = `
672682
position: relative;
673683
}
674684
685+
.c1.c1.c1.c1.c1 label:not(a[data-blade-component="card-link-overlay"]) {
686+
z-index: 2;
687+
position: relative;
688+
}
689+
690+
.c1.c1.c1.c1.c1 label:not(button[data-blade-component="card-link-overlay"]) {
691+
z-index: 2;
692+
position: relative;
693+
}
694+
675695
.c20.c20.c20.c20.c20 {
676696
background-color: hsla(211,20%,52%,0.09);
677697
border-radius: 9999px;
@@ -1036,6 +1056,16 @@ exports[`<Card /> should render a Card without 0 padding 1`] = `
10361056
position: relative;
10371057
}
10381058
1059+
.c1.c1.c1.c1.c1 label:not(a[data-blade-component="card-link-overlay"]) {
1060+
z-index: 2;
1061+
position: relative;
1062+
}
1063+
1064+
.c1.c1.c1.c1.c1 label:not(button[data-blade-component="card-link-overlay"]) {
1065+
z-index: 2;
1066+
position: relative;
1067+
}
1068+
10391069
<div>
10401070
<div
10411071
class="c0 c1"
@@ -1102,6 +1132,16 @@ exports[`<Card /> should render a border when elevation is \`none\` 1`] = `
11021132
position: relative;
11031133
}
11041134
1135+
.c1.c1.c1.c1.c1 label:not(a[data-blade-component="card-link-overlay"]) {
1136+
z-index: 2;
1137+
position: relative;
1138+
}
1139+
1140+
.c1.c1.c1.c1.c1 label:not(button[data-blade-component="card-link-overlay"]) {
1141+
z-index: 2;
1142+
position: relative;
1143+
}
1144+
11051145
<div>
11061146
<div
11071147
class="c0 c1"
@@ -1165,6 +1205,16 @@ exports[`<Card /> should render a plain Card 1`] = `
11651205
position: relative;
11661206
}
11671207
1208+
.c1.c1.c1.c1.c1 label:not(a[data-blade-component="card-link-overlay"]) {
1209+
z-index: 2;
1210+
position: relative;
1211+
}
1212+
1213+
.c1.c1.c1.c1.c1 label:not(button[data-blade-component="card-link-overlay"]) {
1214+
z-index: 2;
1215+
position: relative;
1216+
}
1217+
11681218
<div>
11691219
<div
11701220
class="c0 c1"
@@ -1308,6 +1358,16 @@ exports[`<Card /> should support adding data-analytics attributes 1`] = `
13081358
position: relative;
13091359
}
13101360
1361+
.c1.c1.c1.c1.c1 label:not(a[data-blade-component="card-link-overlay"]) {
1362+
z-index: 2;
1363+
position: relative;
1364+
}
1365+
1366+
.c1.c1.c1.c1.c1 label:not(button[data-blade-component="card-link-overlay"]) {
1367+
z-index: 2;
1368+
position: relative;
1369+
}
1370+
13111371
.c4.c4.c4.c4.c4 {
13121372
color: hsla(212,39%,16%,1);
13131373
font-family: "Inter","Inter Fallback Arial",Arial;

‎packages/blade/src/components/Card/__tests__/__snapshots__/CardInteractive.web.test.tsx.snap

+40
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,16 @@ exports[`<Card /> should render a clickable Card 1`] = `
6565
position: relative;
6666
}
6767
68+
.c1.c1.c1.c1.c1 label:not(a[data-blade-component="card-link-overlay"]) {
69+
z-index: 2;
70+
position: relative;
71+
}
72+
73+
.c1.c1.c1.c1.c1 label:not(button[data-blade-component="card-link-overlay"]) {
74+
z-index: 2;
75+
position: relative;
76+
}
77+
6878
<div>
6979
<div
7080
class="c0 c1"
@@ -156,6 +166,16 @@ exports[`<Card /> should render a linkable Card 1`] = `
156166
position: relative;
157167
}
158168
169+
.c1.c1.c1.c1.c1 label:not(a[data-blade-component="card-link-overlay"]) {
170+
z-index: 2;
171+
position: relative;
172+
}
173+
174+
.c1.c1.c1.c1.c1 label:not(button[data-blade-component="card-link-overlay"]) {
175+
z-index: 2;
176+
position: relative;
177+
}
178+
159179
<div>
160180
<div
161181
class="c0 c1"
@@ -249,6 +269,16 @@ exports[`<Card /> should render a linkable Card with onClick 1`] = `
249269
position: relative;
250270
}
251271
272+
.c1.c1.c1.c1.c1 label:not(a[data-blade-component="card-link-overlay"]) {
273+
z-index: 2;
274+
position: relative;
275+
}
276+
277+
.c1.c1.c1.c1.c1 label:not(button[data-blade-component="card-link-overlay"]) {
278+
z-index: 2;
279+
position: relative;
280+
}
281+
252282
<div>
253283
<div
254284
class="c0 c1"
@@ -355,6 +385,16 @@ exports[`<Card /> should render an interactive Card 1`] = `
355385
position: relative;
356386
}
357387
388+
.c1.c1.c1.c1.c1 label:not(a[data-blade-component="card-link-overlay"]) {
389+
z-index: 2;
390+
position: relative;
391+
}
392+
393+
.c1.c1.c1.c1.c1 label:not(button[data-blade-component="card-link-overlay"]) {
394+
z-index: 2;
395+
position: relative;
396+
}
397+
358398
<div>
359399
<div
360400
class="c0 c1"

0 commit comments

Comments
 (0)