fix(card): ensure that focus outline wraps all card content when `hei…

…ght` prop is set Ensures that the card content has a responsive height so the focus styles wrap all of the interactive area of the content when the `Card` has a `height` prop passed fix #6741
Sage · May 24, 2024 · 5b73495 · 5b73495
1 parent 8123b49
commit 5b73495
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 4 deletions.
diff --git a/src/components/card/card-test.stories.tsx b/src/components/card/card-test.stories.tsx
@@ -12,7 +12,7 @@ import Box from "../box";
 
 export default {
   title: "Card/Test",
-  includeStories: ["DefaultStory"],
+  includeStories: ["DefaultStory", "CustomHeight"],
   component: Card,
   parameters: {
     docs: {
@@ -277,3 +277,78 @@ export const CardTextAlignment = ({ ...props }) => {
     </Card>
   );
 };
+
+export const CustomHeight = () => {
+  return (
+    <>
+      <Card
+        height="500px"
+        onClick={() => {}}
+        footer={
+          <CardFooter>
+            <CardColumn>
+              <Link icon="link" href="https://carbon.sage.com/">
+                Footer link
+              </Link>
+            </CardColumn>
+          </CardFooter>
+        }
+      >
+        <CardRow>
+          <CardColumn align="left">
+            <Heading title="Heading" divider={false} />
+            <Typography fontSize="16px" m={0}>
+              Additional text
+            </Typography>
+          </CardColumn>
+          <CardColumn align="right">
+            <Icon type="image" />
+          </CardColumn>
+        </CardRow>
+        <CardRow>
+          <CardColumn>
+            <Typography fontSize="16px" m={0} fontWeight="bold">
+              Body text
+            </Typography>
+            <Heading title="More text" divider={false} />
+            <Typography>Even more text</Typography>
+          </CardColumn>
+        </CardRow>
+      </Card>
+      <Card
+        height="500px"
+        href="#"
+        footer={
+          <CardFooter>
+            <CardColumn>
+              <Link icon="link" href="https://carbon.sage.com/">
+                Footer link
+              </Link>
+            </CardColumn>
+          </CardFooter>
+        }
+      >
+        <CardRow>
+          <CardColumn align="left">
+            <Heading title="Heading" divider={false} />
+            <Typography fontSize="16px" m={0}>
+              Additional text
+            </Typography>
+          </CardColumn>
+          <CardColumn align="right">
+            <Icon type="image" />
+          </CardColumn>
+        </CardRow>
+        <CardRow>
+          <CardColumn>
+            <Typography fontSize="16px" m={0} fontWeight="bold">
+              Body text
+            </Typography>
+            <Heading title="More text" divider={false} />
+            <Typography>Even more text</Typography>
+          </CardColumn>
+        </CardRow>
+      </Card>
+    </>
+  );
+};
diff --git a/src/components/card/card.pw.tsx b/src/components/card/card.pw.tsx
@@ -60,7 +60,7 @@ test.describe("Check Card component styling", () => {
       mount,
       page,
     }) => {
-      await mount(<CardComponent {...props} />);
+      await mount(<WithCustomHeight {...props} />);
 
       const cardElement = card(page);
       const cardContentElement = cardContent(page);
@@ -78,6 +78,8 @@ test.describe("Check Card component styling", () => {
         "box-shadow",
         "rgb(255, 188, 25) 0px 0px 0px 3px, rgba(0, 0, 0, 0.9) 0px 0px 0px 6px"
       );
+
+      await expect(cardContentElement).toHaveCSS("height", "500px");
     });
 
     test(`should match the expected styling when ${key} is passed with custom boxShadow and hoverBoxShadow props`, async ({

diff --git a/src/components/card/card.style.ts b/src/components/card/card.style.ts
@@ -109,6 +109,9 @@ const StyledCardContent = styled.div.attrs(
     interactive &&
     css`
       cursor: pointer;
+      display: inline-flex;
+      flex-direction: column;
+      height: 100%;
 
       ${!theme.focusRedesignOptOut &&
       css`
@@ -119,6 +122,7 @@ const StyledCardContent = styled.div.attrs(
       `}
     `}
 
+  align-items: stretch;
   outline: none;
   text-decoration: none;
   background-color: inherit;

diff --git a/src/components/card/components.test-pw.tsx b/src/components/card/components.test-pw.tsx
@@ -334,8 +334,8 @@ export const WithWidthProvided = () => (
   </Card>
 );
 
-export const WithCustomHeight = () => (
-  <Card height="500px">
+export const WithCustomHeight = (props: Partial<CardProps>) => (
+  <Card height="500px" {...props}>
     <CardRow>
       <CardColumn align="left">
         <Heading title="Stripe - [account name]" divider={false} />