diff --git a/.changeset/lucky-ducks-hide.md b/.changeset/lucky-ducks-hide.md new file mode 100644 index 0000000000..2311786e29 --- /dev/null +++ b/.changeset/lucky-ducks-hide.md @@ -0,0 +1,5 @@ +--- +'@leafygreen-ui/card': major +--- + +Wraps component in `React.forwardRef` diff --git a/packages/card/src/Card/Card.tsx b/packages/card/src/Card/Card.tsx index 4c6b4eada7..6c6f355e59 100644 --- a/packages/card/src/Card/Card.tsx +++ b/packages/card/src/Card/Card.tsx @@ -11,38 +11,44 @@ import { CardProps, ContentStyle } from './types'; /** * Cards are used to organize information into consumable chunks. */ -export const Card = ({ - className, - contentStyle, - darkMode: darkModeProp, - ...rest -}: BoxProps<'div', CardProps>) => { - if ( - contentStyle === undefined && - (('onClick' in rest && rest.onClick !== undefined) || - ('href' in rest && !!rest.href)) - ) { - contentStyle = ContentStyle.Clickable; - } +export const Card = React.forwardRef( + ( + { + className, + contentStyle, + darkMode: darkModeProp, + ...rest + }: BoxProps<'div', CardProps>, + forwardRef, + ) => { + if ( + contentStyle === undefined && + (('onClick' in rest && rest.onClick !== undefined) || + ('href' in rest && !!rest.href)) + ) { + contentStyle = ContentStyle.Clickable; + } - const { theme } = useDarkMode(darkModeProp); + const { theme } = useDarkMode(darkModeProp); - return ( - - ); -}; + return ( + + ); + }, +); Card.displayName = 'Card';