From 23843ba84cbab43f22a66d96f9b9efc26d7f7c8e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ver=C3=B3nica=20Mil=C3=A1n?= Date: Thu, 15 Dec 2022 09:27:14 +0100 Subject: [PATCH] Chip component adapted to the new design system (#551) --- CHANGELOG.md | 1 + .../theme/sections/components/dataDisplay.js | 190 ++++-- .../react-ui/storybook/.storybook/main.js | 3 +- .../react-ui/storybook/assets/avatar.jpeg | Bin 0 -> 3909 bytes .../stories/molecules/Avatar.stories.js | 364 +++++++++++ .../stories/molecules/Chip.stories.js | 595 ++++++++++++++++-- .../stories/molecules/UploadField.stories.js | 2 +- 7 files changed, 1060 insertions(+), 95 deletions(-) create mode 100644 packages/react-ui/storybook/assets/avatar.jpeg create mode 100644 packages/react-ui/storybook/stories/molecules/Avatar.stories.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 6864a9b73..1994c8ee6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## Not released +- Chip component adapted to the new design system [#551](https://github.com/CartoDB/carto-react/pull/551/) - Design changes in UploadField component [#548](https://github.com/CartoDB/carto-react/pull/548/) - Divider component adapted to the new design system [#546](https://github.com/CartoDB/carto-react/pull/546/) - UploadField component created for the new design system [#545](https://github.com/CartoDB/carto-react/pull/545/) diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js index 9006ea580..22355ccf9 100644 --- a/packages/react-ui/src/theme/sections/components/dataDisplay.js +++ b/packages/react-ui/src/theme/sections/components/dataDisplay.js @@ -222,83 +222,173 @@ export const dataDisplayOverrides = { // Chip MuiChip: { + defaultProps: { + color: 'primary' + }, + styleOverrides: { root: { - backgroundColor: commonPalette.grey[100], - '&:hover': { - backgroundColor: commonPalette.grey[200] - }, + maxWidth: '192px', + padding: getSpacing(0, 0.5), + '& .MuiAvatar-root': { - backgroundColor: '#7f3c8d', - color: commonPalette.common.white - } - }, - colorPrimary: { - '&.Mui-disabled': { - backgroundColor: commonPalette.grey[100], - color: commonPalette.text.primary + width: ICON_SIZE_M, + height: ICON_SIZE_M, + margin: 0, + color: commonPalette.secondary.contrastText, + backgroundColor: commonPalette.background.paper }, - '&:hover': { - backgroundColor: commonPalette.primary.dark + '& .MuiChip-icon': { + margin: 0, + marginLeft: getSpacing(0.5) + }, + '& img': { + width: ICON_SIZE_M, + height: ICON_SIZE_M + }, + '&.Mui-disabled': { + color: commonPalette.text.disabled, + backgroundColor: commonPalette.action.disabledBackground, + + '& .MuiChip-deleteIcon, & .MuiChip-icon': { + color: commonPalette.action.disabled + } } }, - colorSecondary: { - '&.Mui-disabled': { - backgroundColor: commonPalette.grey[100] - }, - '&:hover': { - backgroundColor: commonPalette.secondary.light + + // Variants + filled: { + border: 0, + backgroundColor: commonPalette.default.main, + + '& .MuiChip-iconColorPrimary': { + color: commonPalette.primary.contrastText } }, - label: { - fontFamily: '"Open Sans", sans-serif', - letterSpacing: 0.25 + filledPrimary: { + backgroundColor: commonPalette.primary.main }, - labelSmall: { - fontSize: themeTypography.caption.fontSize, - fontWeight: themeTypography.fontWeightLight + filledSecondary: { + backgroundColor: commonPalette.secondary.main }, outlined: { - transition: `border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1)`, + borderColor: commonPalette.default.outlinedBorder, + '&.Mui-disabled': { + borderColor: commonPalette.default.outlinedBorder, backgroundColor: 'transparent' - }, - '&:hover': { - backgroundColor: 'transparent', - borderColor: commonPalette.grey[200], - '&.MuiChip-clickable': { - backgroundColor: 'transparent' - } } }, outlinedPrimary: { - '&:hover': { - backgroundColor: 'transparent', - borderColor: commonPalette.primary.dark, - color: commonPalette.primary.dark, - '&.MuiChip-clickable': { - backgroundColor: 'transparent' - } - } + borderColor: commonPalette.primary.main }, outlinedSecondary: { - '&:hover': { - backgroundColor: 'transparent', - borderColor: commonPalette.secondary.dark, - color: commonPalette.secondary.dark, - '&.MuiChip-clickable': { - backgroundColor: 'transparent' + borderColor: commonPalette.secondary.main + }, + + // Sizes + sizeSmall: { + '& img': { + width: ICON_SIZE, + height: ICON_SIZE + }, + '& .MuiAvatar-root': { + width: ICON_SIZE, + height: ICON_SIZE + }, + '& .MuiChip-icon': { + marginLeft: getSpacing(0.25) + } + }, + + // Inner elements + label: { + ...themeTypography.button, + padding: getSpacing(0, 0.75) + }, + labelSmall: { + ...themeTypography.caption, + fontWeight: 500, + padding: getSpacing(0, 0.5) + }, + deleteIcon: { + width: ICON_SIZE, + height: ICON_SIZE, + margin: 0, + marginLeft: '2px', // Forced to a non-standard value to meet with design + marginRight: '3px', // Forced to a non-standard value to meet with design + transition: 'color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', + + '&.MuiChip-deleteIconColorDefault': { + color: commonPalette.text.secondary, + + '&:hover': { + color: commonPalette.text.primary } } }, + deleteIconSmall: { + width: getSpacing(2), + height: getSpacing(2), + marginRight: 0 + }, + clickable: { - '&:focus': { - webkitTapHighlightColor: 'none' + '&:active': { + boxShadow: 'none' + }, + '&:hover': { + '& .MuiChip-deleteIconColorDefault': { + color: commonPalette.text.primary + } + }, + + '&.MuiChip-outlined': { + transitionProperty: 'background, color, border-color', + transitionDuration: '300ms', + transitionTimingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)', + + '&:hover': { + backgroundColor: 'transparent', + + '&.MuiChip-colorPrimary': { + color: commonPalette.primary.dark, + borderColor: commonPalette.primary.dark + }, + '&.MuiChip-colorSecondary': { + color: commonPalette.secondary.dark, + borderColor: commonPalette.secondary.dark + }, + '&.MuiChip-colorDefault': { + borderColor: commonPalette.default.dark + } + } + }, + '&.MuiChip-filled': { + '&:hover': { + '&.MuiChip-colorSecondary': { + backgroundColor: commonPalette.secondary.light + }, + '&.MuiChip-colorDefault': { + backgroundColor: commonPalette.default.dark + } + } } } } }, + // Avatar + MuiAvatar: { + styleOverrides: { + root: { + color: commonPalette.secondary.contrastText, + backgroundColor: commonPalette.secondary.main, + border: `1px solid ${commonPalette.action.hover}` + } + } + }, + // Skeleton MuiSkeleton: { defaultProps: { diff --git a/packages/react-ui/storybook/.storybook/main.js b/packages/react-ui/storybook/.storybook/main.js index bdb261c15..20bfdc493 100644 --- a/packages/react-ui/storybook/.storybook/main.js +++ b/packages/react-ui/storybook/.storybook/main.js @@ -6,5 +6,6 @@ module.exports = { 'storybook-addon-designs', '@storybook/addon-viewport', '@etchteam/storybook-addon-status' - ] + ], + staticDirs: ['../assets'] }; diff --git a/packages/react-ui/storybook/assets/avatar.jpeg b/packages/react-ui/storybook/assets/avatar.jpeg new file mode 100644 index 0000000000000000000000000000000000000000..00e8755c8e03c1ea600e78b72df8c98ef4055bf0 GIT binary patch literal 3909 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 l#fIs7jG^9L9}IByaSHX?gq=u=r{ ({ + container: { + display: 'flex', + alignItems: 'center', + marginTop: theme.spacing(4) + }, + standalone: { + display: 'flex', + justifyContent: 'center' + }, + label: { + minWidth: '200px' + } +})); + +const Template = ({ ...args }) => { + return ; +}; + +const ShapeTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Circular'} + + + + + + + + + + + + + {'Square'} + + + + + + + + + + + + + {'Rounded'} + + + + + + + + + + ); +}; + +const ContentTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Default'} + + + + + + + + + + + + + {'Image'} + + + + + + + + + + + + {'Initial'} + + + + M + + + + + + + + {'Icon'} + + + + + + + + + + + + ); +}; + +const ShapeSizeTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Large'} + + + + + + + + + + + + + + + + + + + {'Medium'} + + + + + + + + + + + + + + + + + + + {'Small'} + + + + + + + + + + + + + + + + + + + {'Extra Small'} + + + + + + + + + + + + + + + + ); +}; + +const ContentSizeTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Large'} + + + + + + + + + + + M + + + + + + + + + + + + + + + {'Medium'} + + + + + + + + + + M + + + + + + + + + + + + + + {'Small'} + + + + + + + + + + + M + + + + + + + + + + + + + + + {'Extra Small'} + + + + + + + + + + + M + + + + + + + + + + + + ); +}; + +export const Playground = Template.bind({}); + +export const Shape = ShapeTemplate.bind({}); + +export const Content = ContentTemplate.bind({}); + +export const ShapeSizes = ShapeSizeTemplate.bind({}); + +export const ContentSize = ContentSizeTemplate.bind({}); diff --git a/packages/react-ui/storybook/stories/molecules/Chip.stories.js b/packages/react-ui/storybook/stories/molecules/Chip.stories.js index d13dbd082..2c8f5ac5b 100644 --- a/packages/react-ui/storybook/stories/molecules/Chip.stories.js +++ b/packages/react-ui/storybook/stories/molecules/Chip.stories.js @@ -1,5 +1,8 @@ import React from 'react'; -import { Avatar, Chip, Grid } from '@mui/material'; +import { Avatar, Chip, Grid, Box, Tooltip } from '@mui/material'; +import makeStyles from '@mui/styles/makeStyles'; +import { FileUploadOutlined } from '@mui/icons-material'; +import Typography from '../../../src/components/atoms/Typography'; const options = { title: 'Molecules/Chip', @@ -17,12 +20,9 @@ const options = { } }, color: { - defaultValue: 'default', - description: - 'The color of the component. It supports those theme colors that make sense for this component.', control: { type: 'select', - options: ['default', 'primary', 'secondary'] + options: ['primary', 'secondary', 'default'] } }, deleteIcon: { @@ -31,7 +31,6 @@ const options = { }, disabled: { defaultValue: false, - description: 'If `true`, the chip should be displayed in a disabled state.', control: { type: 'boolean' } @@ -41,7 +40,6 @@ const options = { }, label: { defaultValue: 'Chip content', - description: 'The content of the label.', control: { type: 'text' } @@ -52,16 +50,12 @@ const options = { defaultValue: null }, size: { - defaultValue: 'medium', - description: 'The size of the chip.', control: { type: 'select', options: ['small', 'medium'] } }, variant: { - defaultValue: 'filled', - description: 'The variant to use.', control: { type: 'select', options: ['filled', 'outlined'] @@ -74,59 +68,574 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A28895' }, status: { - type: 'needUpdate' + type: 'readyToReview' } } }; export default options; -// const Template = ({ ...args }) => { -// return -// }; +const useStyles = makeStyles((theme) => ({ + container: { + display: 'flex', + alignItems: 'center', + marginTop: theme.spacing(4) + }, + standalone: { + display: 'flex', + justifyContent: 'center' + }, + label: { + minWidth: '200px' + }, + header: { + minWidth: '200px', + marginTop: theme.spacing(4) + } +})); + const Template = ({ ...args }) => { + return ; +}; + +const VariantsTemplate = ({ ...args }) => { + const classes = useStyles(); + return ( - - - + + + + + {'Filled'} + + + - - + + + + + {'Outlined'} + + + - - + + ); +}; + +const PrefixTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Primary'} + + + + M} /> + + + M} /> + + + } /> + + + } + /> + + + } /> + + + } /> + + + - - + + + + {'Secondary'} + + + + M} /> + + + M} + /> + + + } + /> + + + } + /> + + + } /> + + + } + /> + + + + + + + + + {'Default'} + + + + M} /> + + + M} + /> + + + } + /> + + + } + /> + + + } /> + + + } + /> + + + ); }; -export const Default = Template.bind({}); -Default.args = {}; +const RemovableTemplate = ({ ...args }) => { + const classes = useStyles(); -export const Removable = Template.bind({}); -Removable.args = { onDelete: () => {} }; + return ( + + + + + {'Primary'} + + + + + + + + + + + + + + + + {'Secondary'} + + + + + + + + + + + + + + + + {'Default'} + + + + + + + + + + + + + ); +}; + +const ColorsTemplate = ({ ...args }) => { + const classes = useStyles(); + + return ( + + + + + {'Primary'} + + + + + + + + + + + + + + + {'Secondary'} + + + + + + + + + + + + + + + {'Default'} + + + + + + + + + + + + + ); +}; -export const Thumbnail = Template.bind({}); -Thumbnail.args = { avatar: M }; +const SizeTemplate = ({ ...args }) => { + const classes = useStyles(); -export const ThumbnailRemovable = Template.bind({}); -ThumbnailRemovable.args = { avatar: M, onDelete: () => {} }; + return ( + + + + {'Primary'} + + + + {'Default'} + + + + + + + + + + + + + {'Clickable (hover)'} + + + + + + + + + + + + + {'Disabled'} + + + + + + + + + + + -export const SizeSmall = Template.bind({}); -SizeSmall.args = { size: 'small' }; + + + {'Secondary'} + + + + {'Default'} + + + + + + + + + + + + + {'Clickable (hover)'} + + + + + + + + + + + + + {'Disabled'} + + + + + + + + + + + -export const SizeSmallRemovable = Template.bind({}); -SizeSmallRemovable.args = { size: 'small', onDelete: () => {} }; + + + {'Default'} + + + + {'Default'} + + + + + + + + + + + + + {'Clickable (hover)'} + + + + + + + + + + + + + {'Disabled'} + + + + + + + + + + + + + ); +}; + +const BehaviorTemplate = ({ ...args }) => { + const classes = useStyles(); + const longLabel = 'felipegomezcases@cartodb.com'; + + return ( + + + + + {'Overflow'} + + + + M} + onDelete={() => {}} + /> + + + M} /> + + + + + + + -export const SizeSmallThumbnail = Template.bind({}); -SizeSmallThumbnail.args = { size: 'small', avatar: M }; + + + + {'Hover with Tooltip'} + + + + + M} + onDelete={() => {}} + clickable + /> + + + + + -export const SizeSmallThumbnailRemovable = Template.bind({}); -SizeSmallThumbnailRemovable.args = { - size: 'small', - avatar: M, - onDelete: () => {} + + + + {'Pairing (Grid 8px)'} + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const commonArgs = { + label: 'Chip content' }; +const SizeArgs = { + onDelete: () => {}, + avatar: M +}; +const disabledControlsCommonArgTypes = { + avatar: { table: { disable: true } }, + deleteIcon: { table: { disable: true } }, + icon: { table: { disable: true } }, + onDelete: { table: { disable: true } } +}; +const disabledControlsSizeArgTypes = { + ...disabledControlsCommonArgTypes, + variant: { table: { disable: true } } +}; + +export const Playground = Template.bind({}); +Playground.args = { ...commonArgs }; + +export const Variants = VariantsTemplate.bind({}); +Variants.argTypes = disabledControlsCommonArgTypes; + +export const Colors = ColorsTemplate.bind({}); +Colors.args = { ...commonArgs }; +Colors.argTypes = disabledControlsCommonArgTypes; + +export const Prefix = PrefixTemplate.bind({}); +Prefix.args = { ...commonArgs }; +Prefix.argTypes = disabledControlsCommonArgTypes; + +export const Removable = RemovableTemplate.bind({}); +Removable.args = { onDelete: () => {} }; +Removable.argTypes = disabledControlsCommonArgTypes; + +export const Medium = SizeTemplate.bind({}); +Medium.args = { ...commonArgs, ...SizeArgs }; +Medium.argTypes = disabledControlsSizeArgTypes; + +export const Small = SizeTemplate.bind({}); +Small.args = { ...commonArgs, ...SizeArgs, size: 'small' }; +Small.argTypes = disabledControlsSizeArgTypes; + +export const Behavior = BehaviorTemplate.bind({}); +Behavior.args = { ...commonArgs }; +Behavior.argTypes = disabledControlsCommonArgTypes; diff --git a/packages/react-ui/storybook/stories/molecules/UploadField.stories.js b/packages/react-ui/storybook/stories/molecules/UploadField.stories.js index 4de33d7f0..3b020f67d 100644 --- a/packages/react-ui/storybook/stories/molecules/UploadField.stories.js +++ b/packages/react-ui/storybook/stories/molecules/UploadField.stories.js @@ -79,7 +79,7 @@ const options = { url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1534%3A36997' }, status: { - type: 'readyToReview' + type: 'validated' } } };