Improve styles for MaterialUI - Chip component

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Improve styles for for MaterialUI CircularProgress component [#270](https://github.com/CartoDB/carto-react/pull/270)
 - Improve styles for MaterialUI Slider component [#274](https://github.com/CartoDB/carto-react/pull/274)
+- Improve styles for MaterialUI Chip component [#275](https://github.com/CartoDB/carto-react/pull/275)
 
 ## 1.2
 

packages/react-ui/src/theme/carto-theme.js

@@ -1173,6 +1173,82 @@ export const cartoThemeOptions = {
         width: spacing(7),
         height: spacing(7)
       }
+    },
+
+    MuiChip: {
+      root: {
+        backgroundColor: variables.palette.grey[100],
+        '&:hover': {
+          backgroundColor: variables.palette.grey[200]
+        },
+        '& .MuiAvatar-root': {
+          backgroundColor: '#7f3c8d',
+          color: variables.palette.common.white
+        }
+      },
+      colorPrimary: {
+        '&$disabled': {
+          backgroundColor: variables.palette.grey[100],
+          color: variables.palette.text.primary
+        },
+        '&:hover': {
+          backgroundColor: variables.palette.primary.dark
+        }
+      },
+      colorSecondary: {
+        '&$disabled': {
+          backgroundColor: variables.palette.grey[100]
+        },
+        '&:hover': {
+          backgroundColor: variables.palette.secondary.light
+        }
+      },
+      label: {
+        fontFamily: '"Open Sans", sans-serif',
+        letterSpacing: 0.25
+      },
+      labelSmall: {
+        fontSize: variables.typography.caption.fontSize,
+        fontWeight: variables.typography.fontWeightLight
+      },
+      outlined: {
+        transition: `border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1)`,
+        '&$disabled': {
+          backgroundColor: 'transparent'
+        },
+        '&:hover': {
+          backgroundColor: 'transparent',
+          borderColor: variables.palette.grey[200],
+          '&$clickable': {
+            backgroundColor: 'transparent'
+          }
+        }
+      },
+      outlinedPrimary: {
+        '&:hover': {
+          backgroundColor: 'transparent',
+          borderColor: variables.palette.primary.dark,
+          color: variables.palette.primary.dark,
+          '&$clickable': {
+            backgroundColor: 'transparent'
+          }
+        }
+      },
+      outlinedSecondary: {
+        '&:hover': {
+          backgroundColor: 'transparent',
+          borderColor: variables.palette.secondary.dark,
+          color: variables.palette.secondary.dark,
+          '&$clickable': {
+            backgroundColor: 'transparent'
+          }
+        }
+      },
+      clickable: {
+        '&:focus': {
+          webkitTapHighlightColor: 'none'
+        }
+      }
     }
   },
 

packages/react-ui/storybook/stories/common/Chip.stories.js

@@ -0,0 +1,123 @@
+import React from 'react';
+import { Avatar, Chip, Grid } from '@material-ui/core';
+
+const options = {
+  title: 'Common/Chip',
+  component: Chip,
+  argTypes: {
+    avatar: {
+      description: 'Avatar element. Type: `element`.'
+    },
+    clickable: {
+      defaultValue: false,
+      description:
+        'If `true`, the chip will appear clickable, and will raise when pressed, even if the onClick prop is not defined. If false, the chip will not be clickable, even if onClick prop is defined. This can be used, for example, along with the component prop to indicate an anchor Chip is clickable.',
+      control: {
+        type: 'boolean'
+      }
+    },
+    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']
+      }
+    },
+    deleteIcon: {
+      description:
+        'Override the default delete icon element. Shown only if `onDelete` is set. Type: `element`.'
+    },
+    disabled: {
+      defaultValue: false,
+      description: 'If `true`, the chip should be displayed in a disabled state.',
+      control: {
+        type: 'boolean'
+      }
+    },
+    icon: {
+      description: 'Icon element. Type: `element`.'
+    },
+    label: {
+      defaultValue: 'Chip content',
+      description: 'The content of the label.',
+      control: {
+        type: 'text'
+      }
+    },
+    onDelete: {
+      description:
+        'Callback function fired when the delete icon is clicked. If set, the delete icon will be shown.',
+      defaultValue: null
+    },
+    size: {
+      defaultValue: 'medium',
+      description: 'The size of the chip.',
+      control: {
+        type: 'select',
+        options: ['small', 'medium']
+      }
+    },
+    variant: {
+      defaultValue: 'default',
+      description: 'The variant to use.',
+      control: {
+        type: 'select',
+        options: ['default', 'outlined']
+      }
+    }
+  }
+};
+export default options;
+
+// const Template = ({ ...args }) => {
+//   return <Chip { ...args } />
+// };
+const Template = ({ ...args }) => {
+  return (
+    <Grid container direction='row' alignItems='center'>
+      <Grid item xs={3}>
+        <Chip {...args} color='primary' />
+      </Grid>
+      <Grid item xs={3}>
+        <Chip {...args} color='secondary' />
+      </Grid>
+      <Grid item xs={3}>
+        <Chip {...args} color='default' />
+      </Grid>
+
+      <Grid item xs={3}>
+        <Chip {...args} variant='outlined' />
+      </Grid>
+    </Grid>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Removable = Template.bind({});
+Removable.args = { onDelete: () => {} };
+
+export const Thumbnail = Template.bind({});
+Thumbnail.args = { avatar: <Avatar>M</Avatar> };
+
+export const ThumbnailRemovable = Template.bind({});
+ThumbnailRemovable.args = { avatar: <Avatar>M</Avatar>, onDelete: () => {} };
+
+export const SizeSmall = Template.bind({});
+SizeSmall.args = { size: 'small' };
+
+export const SizeSmallRemovable = Template.bind({});
+SizeSmallRemovable.args = { size: 'small', onDelete: () => {} };
+
+export const SizeSmallThumbnail = Template.bind({});
+SizeSmallThumbnail.args = { size: 'small', avatar: <Avatar>M</Avatar> };
+
+export const SizeSmallThumbnailRemovable = Template.bind({});
+SizeSmallThumbnailRemovable.args = {
+  size: 'small',
+  avatar: <Avatar>M</Avatar>,
+  onDelete: () => {}
+};