Skip to content

[LG-5747] feat: Card - update styles, deprecate clickability #3318

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

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

[LG-5747] feat: Card - update styles, deprecate clickability #3318

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
13f6e86
[LG-5747] feat: Card - update styles, deprecate clickability
adamrasheed Nov 18, 2025
a6a781e
cleanup
adamrasheed Nov 18, 2025
438ddea
updated color tokens, updated readme
adamrasheed Nov 19, 2025
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/vast-facts-press.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@leafygreen-ui/card': minor
---

deprecated clickable stlying and functionality, updated styles (removed shadows and added border)
Copy link

Copilot AI Nov 18, 2025

Choose a reason for hiding this comment

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

Typo in the changeset description: "stlying" should be "styling".

Suggested change
deprecated clickable stlying and functionality, updated styles (removed shadows and added border)
deprecated clickable styling and functionality, updated styles (removed shadows and added border)

Copilot uses AI. Check for mistakes.
Copy link

Copilot AI Nov 18, 2025

Choose a reason for hiding this comment

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

The changeset description mentions "added border" but the changes actually update an existing border color from gray.light2 to gray.light1, not adding a new border. Consider revising to: "deprecated clickable styling and functionality, updated styles (removed shadows and updated border color)".

Suggested change
deprecated clickable stlying and functionality, updated styles (removed shadows and added border)
deprecated clickable styling and functionality, updated styles (removed shadows and updated border color)

Copilot uses AI. Check for mistakes.
8 changes: 1 addition & 7 deletions packages/card/src/Card.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react';
import { storybookArgTypes, StoryMetaType } from '@lg-tools/storybook-utils';
import { StoryFn } from '@storybook/react';

import { Card, CardProps, ContentStyle } from '.';
import { Card, CardProps } from '.';

const loremIpsum = `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy children ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.`;

Expand All @@ -14,7 +14,6 @@ const meta: StoryMetaType<typeof Card> = {
generate: {
combineArgs: {
darkMode: [false, true],
contentStyle: ['none', 'clickable'],
},
},
},
Expand All @@ -27,11 +26,6 @@ const meta: StoryMetaType<typeof Card> = {
as: storybookArgTypes.as,
darkMode: storybookArgTypes.darkMode,
children: storybookArgTypes.children,
contentStyle: {
options: Object.values(ContentStyle),
control: { type: 'radio' },
defaultValue: ContentStyle.None,
},
},
};
export default meta;
Expand Down
12 changes: 2 additions & 10 deletions packages/card/src/Card/Card.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
useInferredPolymorphic,
} from '@leafygreen-ui/polymorphic';

import { colorSet, containerStyle } from './styles';
import { getCardStyles } from './styles';
import { ContentStyle, InternalCardProps } from './types';

/**
Expand Down Expand Up @@ -40,15 +40,7 @@ export const Card = InferredPolymorphic<InternalCardProps, 'div'>(
return (
<Component
ref={ref}
className={cx(
containerStyle,
colorSet[theme].containerStyle,
{
[colorSet[theme].clickableStyle]:
contentStyle === ContentStyle.Clickable,
},
className,
)}
className={cx(getCardStyles({ theme, contentStyle, className }))}
Copy link

Copilot AI Nov 18, 2025

Choose a reason for hiding this comment

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

The cx() call is redundant here since getCardStyles() already returns a result from cx(). You can simplify this to just className={getCardStyles({ theme, contentStyle, className })} without the outer cx() wrapper.

Suggested change
className={cx(getCardStyles({ theme, contentStyle, className }))}
className={getCardStyles({ theme, contentStyle, className })}

Copilot uses AI. Check for mistakes.
{...rest}
/>
);
Expand Down
12 changes: 5 additions & 7 deletions packages/card/src/Card/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,10 @@ const darkHoverBoxShadow = boxShadows[Theme.Dark][2];
const lightFocusBoxShadow = focusRing.light.default;
const darkFocusBoxShadow = focusRing.dark.default;

export const colorSet: Record<Theme, ColorSet> = {
const colorSet: Record<Theme, ColorSet> = {
[Theme.Light]: {
containerStyle: css`
border: 1px solid ${palette.gray.light2};
box-shadow: ${lightBaseBoxShadow};
border: 1px solid ${palette.gray.light1};
background-color: ${palette.white};
color: ${palette.gray.dark3};
`,
Expand All @@ -54,7 +53,6 @@ export const colorSet: Record<Theme, ColorSet> = {
[Theme.Dark]: {
containerStyle: css`
border: 1px solid ${palette.gray.dark2};
box-shadow: ${darkBaseBoxShadow};
background-color: ${palette.black};
color: ${palette.white};
`,
Expand All @@ -77,7 +75,7 @@ export const colorSet: Record<Theme, ColorSet> = {
},
};

export const containerStyle = css`
const containerStyle = css`
position: relative;
transition: ${transitionDuration.default}ms ease-in-out;
transition-property: border, box-shadow;
Expand All @@ -95,13 +93,13 @@ export const getCardStyles = ({
className,
}: {
theme: Theme;
contentStyle: ContentStyle;
contentStyle?: ContentStyle;
className?: string;
}) =>
cx(
containerStyle,
colorSet[theme].containerStyle,
{
[colorSet[theme].containerStyle]: true,
[colorSet[theme].clickableStyle]: contentStyle === ContentStyle.Clickable,
},
className,
Expand Down
21 changes: 21 additions & 0 deletions packages/card/src/Card/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,17 @@ import {
PolymorphicAs,
} from '@leafygreen-ui/polymorphic';

/**
* @deprecated No longer supported. We don't want card to be clickable from a root level.
Copy link

Copilot AI Nov 18, 2025

Choose a reason for hiding this comment

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

The deprecation message should specify what developers should use instead. Consider adding guidance like: "@deprecated No longer supported. We don't want card to be clickable from a root level. If you need clickable behavior, wrap interactive elements inside the Card instead."

Copilot uses AI. Check for mistakes.
*/
export const ContentStyle = {
None: 'none',
Clickable: 'clickable',
} as const;

/**
* @deprecated No longer supported. We don't want card to be clickable from a root level.
*/
export type ContentStyle = (typeof ContentStyle)[keyof typeof ContentStyle];

export interface InternalCardProps extends DarkModeProps {
Expand All @@ -23,6 +29,7 @@ export interface InternalCardProps extends DarkModeProps {
* Defaults to `'clickable'` (when a valid `onClick` handler or `href` link is provided
*
* @default 'clickable' | 'none'
* @deprecated No longer supported. We don't want card to be clickable from a root level.
*/
contentStyle?: ContentStyle;

Expand All @@ -31,6 +38,20 @@ export interface InternalCardProps extends DarkModeProps {
*
*/
title?: string;

/**
* Click handler for the Card component.
*
* @deprecated No longer supported. We don't want card to be clickable from a root level.
*/
onClick?: React.MouseEventHandler<any>;
Comment on lines 43 to 47
Copy link

Copilot AI Nov 18, 2025

Choose a reason for hiding this comment

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

The JSDoc comment for the onClick handler is missing a description of what the parameter type is. Consider updating to: "Click handler for the Card component. Receives a MouseEvent." Also, using React.MouseEventHandler<any> with any is not type-safe - consider specifying the actual element type (e.g., HTMLDivElement) instead of any.

Suggested change
* Click handler for the Card component.
*
* @deprecated No longer supported. We don't want card to be clickable from a root level.
*/
onClick?: React.MouseEventHandler<any>;
* Click handler for the Card component. Receives a MouseEvent.
*
* @param event - The mouse event triggered by clicking the Card.
* @deprecated No longer supported. We don't want card to be clickable from a root level.
*/
onClick?: React.MouseEventHandler<HTMLDivElement>;

Copilot uses AI. Check for mistakes.

/**
* Link for the Card component.
*
* @deprecated No longer supported. We don't want card to be clickable from a root level.
*/
href?: string;
}

// External only
Expand Down
Loading