fix(Card): restore the border on the selected state

.changeset/card-selected-border.md

@@ -0,0 +1,7 @@
+---
+"@frontify/fondue-components": patch
+---
+
+fix(Card): restore the border on the selected state
+
+A selected card (and a selected card on hover) lost its border. The selected border now shows again, using the `color-line-strong` value from the design.

packages/components/src/components/Card/__tests__/Card.ct.tsx

@@ -0,0 +1,73 @@
+/* (c) Copyright Frontify Ltd., all rights reserved. */
+
+import { expect, test } from '@playwright/experimental-ct-react';
+import { type Locator } from '@playwright/test';
+
+import { RouterProvider } from '../../RouterProvider/RouterProvider';
+import { Card } from '../Card';
+
+const CARD_TEST_ID = 'test-card';
+
+const readBorder = (card: Locator) =>
+    card.evaluate((element: Element) => {
+        const probe = document.createElement('span');
+        probe.style.color = 'var(--color-line-strong)';
+        document.body.append(probe);
+        const expectedColor = getComputedStyle(probe).color;
+        probe.remove();
+
+        return {
+            boxShadow: getComputedStyle(element, '::after').boxShadow,
+            expectedColor,
+        };
+    });
+
+test('should render the border on the selected state', async ({ mount }) => {
+    const wrapper = await mount(
+        <RouterProvider navigate={() => {}} useHref={(path) => path}>
+            <Card.Root data-test-id={CARD_TEST_ID} href="/page" onSelect={() => {}} selected aria-label="Card">
+                <Card.Title>Card title</Card.Title>
+            </Card.Root>
+        </RouterProvider>,
+    );
+    const card = wrapper.getByTestId(CARD_TEST_ID);
+    await expect(card).toHaveAttribute('data-selected', 'true');
+
+    const { boxShadow, expectedColor } = await readBorder(card);
+
+    expect(boxShadow).not.toBe('none');
+    expect(boxShadow).toContain(expectedColor);
+});
+
+test('should keep the border on the selected state while hovered', async ({ mount }) => {
+    const wrapper = await mount(
+        <RouterProvider navigate={() => {}} useHref={(path) => path}>
+            <Card.Root data-test-id={CARD_TEST_ID} href="/page" onSelect={() => {}} selected aria-label="Card">
+                <Card.Title>Card title</Card.Title>
+            </Card.Root>
+        </RouterProvider>,
+    );
+    const card = wrapper.getByTestId(CARD_TEST_ID);
+    await card.hover();
+
+    const { boxShadow, expectedColor } = await readBorder(card);
+
+    expect(boxShadow).not.toBe('none');
+    expect(boxShadow).toContain(expectedColor);
+});
+
+test('should not render the card border when not selected', async ({ mount }) => {
+    const wrapper = await mount(
+        <RouterProvider navigate={() => {}} useHref={(path) => path}>
+            <Card.Root data-test-id={CARD_TEST_ID} href="/page" onSelect={() => {}} selected={false} aria-label="Card">
+                <Card.Title>Card title</Card.Title>
+            </Card.Root>
+        </RouterProvider>,
+    );
+    const card = wrapper.getByTestId(CARD_TEST_ID);
+    await expect(card).toHaveAttribute('data-selected', 'false');
+
+    const { boxShadow } = await readBorder(card);
+
+    expect(boxShadow).toBe('none');
+});

packages/components/src/components/Card/styles/card.module.scss

@@ -112,7 +112,7 @@
         // Selected state
         &[data-selected='true'] {
             @include card-state(
-                $card-shadow: (inset 0 0 0 1px var(--color-line-strong), inset 0 0 0 2px var(--color-interactive-default)),
+                $card-shadow: inset 0 0 0 1px var(--color-line-strong),
                 $root-bg: 'surface-dim'
             );
         }
@@ -121,7 +121,7 @@
         &[data-selected='true']:hover,
         &[data-selected='true']:has([data-state='open']) {
             @include card-state(
-                $card-shadow: (inset 0 0 0 1px var(--color-interactive-default), inset 0 0 0 2px var(--color-interactive-default)),
+                $card-shadow: inset 0 0 0 1px var(--color-line-strong),
                 $root-bg: 'surface-hover'
             );
         }