diff --git a/.changeset/vast-facts-press.md b/.changeset/vast-facts-press.md new file mode 100644 index 0000000000..f56730de5a --- /dev/null +++ b/.changeset/vast-facts-press.md @@ -0,0 +1,6 @@ +--- +'@leafygreen-ui/card': minor +'@leafygreen-ui/tokens': minor +--- + +deprecated clickable styling and functionality, updated styles (removed shadows and added border). Added Tertiary Border color token diff --git a/packages/card/README.md b/packages/card/README.md index adf7f6801a..ee77c4a059 100644 --- a/packages/card/README.md +++ b/packages/card/README.md @@ -38,11 +38,28 @@ import Card from '@leafygreen-ui/card'; Card is a styled wrapper for the Box component. Any properties you would pass to Box can also be passed to Card. -| Prop | Type | Description | Default | -| -------------- | ----------------------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------- | -| `children` | `React.ReactNode` | Content rendered inside of the `` component | | -| `className` | `string` | Adds a className to the class attribute | | -| `contentStyle` | `'none'`, `'clickable'` | Whether the card should display as a visually clickable element. | `'clickable'` when a valid `onClick` handler or `href` link is provided | -| `darkMode` | `boolean` | Determines whether or not the component will appear in dark mode. | `false` | +| Prop | Type | Description | Default | +| ----------- | ----------------- | ----------------------------------------------------------------- | ------- | +| `children` | `React.ReactNode` | Content rendered inside of the `` component | | +| `className` | `string` | Adds a className to the class attribute | | +| `darkMode` | `boolean` | Determines whether or not the component will appear in dark mode. | `false` | _Any other properties will be spread on the Box element._ + +## Usage and Interactivity + +This component is designed to be a container for other elements and content. Adding `onClick` or `href` directly to the component is discouraged. Instead, we recommend adding interactive elements inside the component. + +### DON'T + +```js +This is my card component +``` + +### DO + +```js + + + +``` diff --git a/packages/card/src/Card.stories.tsx b/packages/card/src/Card.stories.tsx index 9ea6962227..0d322e6949 100644 --- a/packages/card/src/Card.stories.tsx +++ b/packages/card/src/Card.stories.tsx @@ -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.`; @@ -14,7 +14,6 @@ const meta: StoryMetaType = { generate: { combineArgs: { darkMode: [false, true], - contentStyle: ['none', 'clickable'], }, }, }, @@ -27,11 +26,6 @@ const meta: StoryMetaType = { as: storybookArgTypes.as, darkMode: storybookArgTypes.darkMode, children: storybookArgTypes.children, - contentStyle: { - options: Object.values(ContentStyle), - control: { type: 'radio' }, - defaultValue: ContentStyle.None, - }, }, }; export default meta; diff --git a/packages/card/src/Card/Card.tsx b/packages/card/src/Card/Card.tsx index 1ba03a3b05..b41922e5ee 100644 --- a/packages/card/src/Card/Card.tsx +++ b/packages/card/src/Card/Card.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { cx } from '@leafygreen-ui/emotion'; import { useDarkMode } from '@leafygreen-ui/leafygreen-provider'; import { InferredPolymorphic, @@ -8,7 +7,7 @@ import { useInferredPolymorphic, } from '@leafygreen-ui/polymorphic'; -import { colorSet, containerStyle } from './styles'; +import { getCardStyles } from './styles'; import { ContentStyle, InternalCardProps } from './types'; /** @@ -40,15 +39,7 @@ export const Card = InferredPolymorphic( return ( ); diff --git a/packages/card/src/Card/styles.ts b/packages/card/src/Card/styles.ts index 369207deb0..5b7349db7e 100644 --- a/packages/card/src/Card/styles.ts +++ b/packages/card/src/Card/styles.ts @@ -3,6 +3,7 @@ import { Theme } from '@leafygreen-ui/lib'; import { palette } from '@leafygreen-ui/palette'; import { boxShadows, + color, focusRing, fontFamilies, transitionDuration, @@ -24,11 +25,10 @@ const darkHoverBoxShadow = boxShadows[Theme.Dark][2]; const lightFocusBoxShadow = focusRing.light.default; const darkFocusBoxShadow = focusRing.dark.default; -export const colorSet: Record = { +const colorSet: Record = { [Theme.Light]: { containerStyle: css` - border: 1px solid ${palette.gray.light2}; - box-shadow: ${lightBaseBoxShadow}; + border: 1px solid ${color[Theme.Light].border.tertiary.default}; background-color: ${palette.white}; color: ${palette.gray.dark3}; `, @@ -53,8 +53,7 @@ export const colorSet: Record = { }, [Theme.Dark]: { containerStyle: css` - border: 1px solid ${palette.gray.dark2}; - box-shadow: ${darkBaseBoxShadow}; + border: 1px solid ${color[Theme.Dark].border.tertiary.default}; background-color: ${palette.black}; color: ${palette.white}; `, @@ -77,7 +76,7 @@ export const colorSet: Record = { }, }; -export const containerStyle = css` +const containerStyle = css` position: relative; transition: ${transitionDuration.default}ms ease-in-out; transition-property: border, box-shadow; @@ -95,13 +94,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, diff --git a/packages/card/src/Card/types.ts b/packages/card/src/Card/types.ts index f3432b2092..897be9610b 100644 --- a/packages/card/src/Card/types.ts +++ b/packages/card/src/Card/types.ts @@ -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. + */ 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 { @@ -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. Use interactive elements inside the card instead. */ contentStyle?: ContentStyle; @@ -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. Use interactive elements inside the card instead. + */ + onClick?: React.MouseEventHandler; + + /** + * Link for the Card component. + * + * @deprecated No longer supported. We don't want card to be clickable from a root level. Use interactive elements inside the card instead. + */ + href?: string; } // External only diff --git a/packages/tokens/src/color/color.types.ts b/packages/tokens/src/color/color.types.ts index a467cb824c..953cd91ebd 100644 --- a/packages/tokens/src/color/color.types.ts +++ b/packages/tokens/src/color/color.types.ts @@ -17,6 +17,7 @@ const Variant = { Placeholder: 'placeholder', Primary: 'primary', Secondary: 'secondary', + Tertiary: 'tertiary', InversePrimary: 'inversePrimary', InverseSecondary: 'inverseSecondary', Info: 'info', diff --git a/packages/tokens/src/color/darkModeColors.ts b/packages/tokens/src/color/darkModeColors.ts index 5e19231cca..9c43a8d2b3 100644 --- a/packages/tokens/src/color/darkModeColors.ts +++ b/packages/tokens/src/color/darkModeColors.ts @@ -63,6 +63,11 @@ const darkModeBorderColors = { [InteractionState.Hover]: gray.dark2, [InteractionState.Focus]: blue.light1, }, + [Variant.Tertiary]: { + [InteractionState.Default]: gray.dark1, + [InteractionState.Hover]: gray.dark1, + [InteractionState.Focus]: blue.light1, + }, [Variant.Success]: { [InteractionState.Default]: green.dark1, [InteractionState.Hover]: green.dark1, diff --git a/packages/tokens/src/color/lightModeColors.ts b/packages/tokens/src/color/lightModeColors.ts index 3cfc0d48c7..c2fd2c3209 100644 --- a/packages/tokens/src/color/lightModeColors.ts +++ b/packages/tokens/src/color/lightModeColors.ts @@ -63,6 +63,11 @@ const lightModeBorderColors = { [InteractionState.Hover]: gray.light2, [InteractionState.Focus]: blue.light1, }, + [Variant.Tertiary]: { + [InteractionState.Default]: gray.light1, + [InteractionState.Hover]: gray.light1, + [InteractionState.Focus]: blue.light1, + }, [Variant.Success]: { [InteractionState.Default]: green.dark1, [InteractionState.Hover]: green.dark1,