From 7e73cae474de0d4430d41ead59081b0f4c3c0f6c Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 15 Nov 2023 13:56:15 +0530 Subject: [PATCH 1/3] chore(react): update `Card` component hover styles --- .../src/components/Card/Card.stories.mdx | 49 ++++++++++++++++++- packages/react/src/components/Card/Card.tsx | 22 ++++++--- packages/react/src/components/Card/card.scss | 7 ++- 3 files changed, 68 insertions(+), 10 deletions(-) diff --git a/packages/react/src/components/Card/Card.stories.mdx b/packages/react/src/components/Card/Card.stories.mdx index 658f98fc..a81c71c4 100644 --- a/packages/react/src/components/Card/Card.stories.mdx +++ b/packages/react/src/components/Card/Card.stories.mdx @@ -3,6 +3,8 @@ import dedent from 'ts-dedent'; import StoryConfig from '../../../.storybook/story-config.ts'; import {withDesign} from '../../../.storybook/utils.ts'; import Card from './Card.tsx'; +import CardContent from '../CardContent/CardContent.tsx'; +import Typography from '../Typography/Typography.tsx'; export const meta = { component: Card, @@ -11,7 +13,7 @@ export const meta = { -export const Template = args => ; +export const Template = args => ; # Card @@ -24,7 +26,22 @@ export const Template = args => ; Use the Card component to display content and actions about a single subject. - + + + Lizard + + + Lizards are a widespread group of squamate reptiles, with over 6,000 + species, ranging across all continents except Antarctica + + + ) + }} + > {Template.bind({})} @@ -44,3 +61,31 @@ Import and use the `Card` component in your components as follows. code={dedent` import Card from '@oxygen-ui/react/Card';\n`} /> + +## Variants + +### With Hover + +Variation that provides a hover if the card has a `onClick` handler. + + + + + Lizard + + + Lizards are a widespread group of squamate reptiles, with over 6,000 + species, ranging across all continents except Antarctica + + + ), + onClick: () => alert('Clicked') + }} + > + {Template.bind({})} + + diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx index 7f595eb9..215ccf2e 100644 --- a/packages/react/src/components/Card/Card.tsx +++ b/packages/react/src/components/Card/Card.tsx @@ -18,24 +18,32 @@ import MuiCard, {CardProps as MuiCardProps} from '@mui/material/Card'; import clsx from 'clsx'; -import {FC, ReactElement} from 'react'; +import {ElementType, forwardRef, ForwardRefExoticComponent, MutableRefObject, ReactElement} from 'react'; import {WithWrapperProps} from '../../models'; import {composeComponentDisplayName} from '../../utils'; import './card.scss'; -export type CardProps = MuiCardProps; +export type CardProps = { + component?: C; +} & Omit, 'component'>; const COMPONENT_NAME: string = 'Card'; -const Card: FC & WithWrapperProps = (props: CardProps): ReactElement => { - const {className, ...rest} = props; +const Card: ForwardRefExoticComponent & WithWrapperProps = forwardRef( + (props: CardProps, ref: MutableRefObject): ReactElement => { + const {className, component, onClick, ...rest} = props; - const classes: string = clsx('oxygen-card', className); + const classes: string = clsx('oxygen-card', {'with-hover': onClick}, className); - return ; -}; + return ; + }, +) as ForwardRefExoticComponent & WithWrapperProps; Card.displayName = composeComponentDisplayName(COMPONENT_NAME); Card.muiName = COMPONENT_NAME; +Card.defaultProps = { + elevation: 0, + variant: 'outlined', +}; export default Card; diff --git a/packages/react/src/components/Card/card.scss b/packages/react/src/components/Card/card.scss index c380bbed..52c11695 100644 --- a/packages/react/src/components/Card/card.scss +++ b/packages/react/src/components/Card/card.scss @@ -17,5 +17,10 @@ */ .oxygen-card { - /** Add Styles */ + &.with-hover { + &:hover { + box-shadow: var(--oxygen-shadows-3); + cursor: pointer; + } + } } From a2be9a9dc41525800242a32d039d51b6c1464441 Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 15 Nov 2023 13:57:19 +0530 Subject: [PATCH 2/3] chore(react): update shadows --- packages/react/src/theme/default-theme.ts | 26 +++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/packages/react/src/theme/default-theme.ts b/packages/react/src/theme/default-theme.ts index 48d7e0b8..dc93827f 100644 --- a/packages/react/src/theme/default-theme.ts +++ b/packages/react/src/theme/default-theme.ts @@ -200,6 +200,32 @@ export const generateDefaultThemeOptions = (baseTheme: Theme): RecursivePartial< }, }, }, + shadows: [ + 'none', + '0px 2px 1px -1px rgba(21, 21, 21, 0.08), 0px 1px 1px 0px rgba(21, 21, 21, 0.06), 0px 1px 3px 0px rgba(21, 21, 21, 0.04)', + '0px 3px 1px -2px rgba(21, 21, 21, 0.08), 0px 2px 2px 0px rgba(21, 21, 21, 0.06), 0px 1px 5px 0px rgba(21, 21, 21, 0.04)', + '0px 3px 3px -2px rgba(21, 21, 21, 0.08), 0px 3px 4px 0px rgba(21, 21, 21, 0.06), 0px 1px 8px 0px rgba(21, 21, 21, 0.04)', + '0px 2px 4px -1px rgba(21, 21, 21, 0.08), 0px 4px 5px 0px rgba(21, 21, 21, 0.06), 0px 1px 10px 0px rgba(21, 21, 21, 0.04)', + '0px 3px 5px -1px rgba(21, 21, 21, 0.08), 0px 5px 8px 0px rgba(21, 21, 21, 0.06), 0px 1px 14px 0px rgba(21, 21, 21, 0.04)', + '0px 3px 5px -1px rgba(21, 21, 21, 0.08), 0px 6px 10px 0px rgba(21, 21, 21, 0.06), 0px 1px 18px 0px rgba(21, 21, 21, 0.04)', + '0px 4px 5px -2px rgba(21, 21, 21, 0.08), 0px 7px 10px 1px rgba(21, 21, 21, 0.06), 0px 2px 16px 1px rgba(21, 21, 21, 0.04)', + '0px 5px 5px -3px rgba(21, 21, 21, 0.08), 0px 8px 10px 1px rgba(21, 21, 21, 0.06), 0px 3px 14px 2px rgba(21, 21, 21, 0.04)', + '0px 5px 6px -3px rgba(21, 21, 21, 0.08), 0px 9px 12px 1px rgba(21, 21, 21, 0.06), 0px 3px 16px 2px rgba(21, 21, 21, 0.04)', + '0px 6px 6px -3px rgba(21, 21, 21, 0.08), 0px 10px 14px 1px rgba(21, 21, 21, 0.06), 0px 4px 18px 3px rgba(21, 21, 21, 0.04)', + '0px 6px 7px -4px rgba(21, 21, 21, 0.08), 0px 11px 15px 1px rgba(21, 21, 21, 0.06), 0px 4px 20px 3px rgba(21, 21, 21, 0.04)', + '0px 7px 8px -4px rgba(21, 21, 21, 0.08), 0px 12px 17px 2px rgba(21, 21, 21, 0.06), 0px 5px 22px 4px rgba(21, 21, 21, 0.04)', + '0px 7px 8px -4px rgba(21, 21, 21, 0.08), 0px 13px 19px 2px rgba(21, 21, 21, 0.06), 0px 5px 24px 4px rgba(21, 21, 21, 0.04)', + '0px 7px 9px -4px rgba(21, 21, 21, 0.08), 0px 14px 21px 2px rgba(21, 21, 21, 0.06), 0px 5px 26px 4px rgba(21, 21, 21, 0.04)', + '0px 8px 9px -5px rgba(21, 21, 21, 0.08), 0px 15px 22px 2px rgba(21, 21, 21, 0.06), 0px 6px 28px 5px rgba(21, 21, 21, 0.04)', + '0px 8px 10px -5px rgba(21, 21, 21, 0.08), 0px 16px 24px 2px rgba(21, 21, 21, 0.06), 0px 6px 30px 5px rgba(21, 21, 21, 0.04)', + '0px 8px 11px -5px rgba(21, 21, 21, 0.08), 0px 17px 26px 2px rgba(21, 21, 21, 0.06), 0px 6px 32px 5px rgba(21, 21, 21, 0.04)', + '0px 9px 11px -5px rgba(21, 21, 21, 0.08), 0px 18px 28px 2px rgba(21, 21, 21, 0.06), 0px 7px 34px 6px rgba(21, 21, 21, 0.04)', + '0px 9px 12px -6px rgba(21, 21, 21, 0.08), 0px 19px 29px 2px rgba(21, 21, 21, 0.06), 0px 7px 36px 6px rgba(21, 21, 21, 0.04)', + '0px 10px 13px -6px rgba(21, 21, 21, 0.08), 0px 20px 31px 3px rgba(21, 21, 21, 0.06), 0px 8px 38px 7px rgba(21, 21, 21, 0.04)', + '0px 10px 13px -6px rgba(21, 21, 21, 0.08), 0px 21px 33px 3px rgba(21, 21, 21, 0.06), 0px 8px 40px 7px rgba(21, 21, 21, 0.04)', + '0px 10px 14px -6px rgba(21, 21, 21, 0.08), 0px 22px 35px 3px rgba(21, 21, 21, 0.06), 0px 8px 42px 7px rgba(21, 21, 21, 0.04)', + '0px 11px 14px -7px rgba(21, 21, 21, 0.08), 0px 23px 36px 3px rgba(21, 21, 21, 0.06), 0px 9px 44px 8px rgba(21, 21, 21, 0.04)', + ], shape: { // TODO: Is `Lg` the default? borderRadius: lightTokens.OxygenOxygenBorderRadiusLg, From 16f66792de688b640942b3435361f4d2c8f3bfc8 Mon Sep 17 00:00:00 2001 From: Brion Date: Wed, 15 Nov 2023 14:31:43 +0530 Subject: [PATCH 3/3] chore(react): update snapshots --- .../ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap | 2 +- .../components/Card/__tests__/__snapshots__/Card.test.tsx.snap | 2 +- .../DataGrid/__tests__/__snapshots__/DataGrid.test.tsx.snap | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap b/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap index 7a9a12b7..5eeaa857 100644 --- a/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap +++ b/packages/react/src/components/ActionCard/__tests__/__snapshots__/ActionCard.test.tsx.snap @@ -4,7 +4,7 @@ exports[`ActionCard should match the snapshot 1`] = `
diff --git a/packages/react/src/components/DataGrid/__tests__/__snapshots__/DataGrid.test.tsx.snap b/packages/react/src/components/DataGrid/__tests__/__snapshots__/DataGrid.test.tsx.snap index cee244b5..10b68eae 100644 --- a/packages/react/src/components/DataGrid/__tests__/__snapshots__/DataGrid.test.tsx.snap +++ b/packages/react/src/components/DataGrid/__tests__/__snapshots__/DataGrid.test.tsx.snap @@ -7,7 +7,7 @@ exports[`DataGrid should match the snapshot 1`] = ` aria-colcount="0" aria-multiselectable="false" aria-rowcount="1" - class="oxygen-data-grid MuiDataGrid-root MuiDataGrid-root--densityStandard MuiDataGrid-withBorderColor css-q5txa1-MuiDataGrid-root" + class="oxygen-data-grid MuiDataGrid-root MuiDataGrid-root--densityStandard MuiDataGrid-withBorderColor css-if49jn-MuiDataGrid-root" role="grid" >