CartoDB · vmilan · Nov 2, 2022 · Oct 19, 2022 · Oct 19, 2022 · Oct 19, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Not released
 
+- Breaking changes in Mui v5: components [#518](https://github.com/CartoDB/carto-react/pull/518)
 - Breaking changes in Mui v5: styles and theme [#514](https://github.com/CartoDB/carto-react/pull/514/)
 - Add final Figma links into Storybook [#515](https://github.com/CartoDB/carto-react/pull/515)
 - Breakpoints for the new design system [#513](https://github.com/CartoDB/carto-react/pull/513/)

diff --git a/UPGRADE.md b/UPGRADE.md
@@ -25,7 +25,7 @@ We have a new custom spacing constant in carto-theme, `spacingValue`, which you
 
 Note that if you're using `calc()` in your styles, you can keep using `theme.spacing()` as usual.
 
-# Typography
+## Typography
 
 `responsiveFontSizes` simplified due we want to resize only a few variants through the theme.
 

diff --git a/packages/react-ui/src/theme/sections/components/dataDisplay.js b/packages/react-ui/src/theme/sections/components/dataDisplay.js
@@ -7,10 +7,10 @@ export const dataDisplayOverrides = {
   MuiDivider: {
     styleOverrides: {
       root: {
-        backgroundColor: commonPalette.divider
+        borderColor: commonPalette.divider
       },
       light: {
-        backgroundColor: commonPalette.grey[50]
+        borderColor: commonPalette.grey[50]
       }
     }
   },

diff --git a/packages/react-ui/src/theme/sections/components/forms.js b/packages/react-ui/src/theme/sections/components/forms.js
@@ -193,7 +193,6 @@ export const formsOverrides = {
     defaultProps: {
       variant: 'outlined',
       MenuProps: {
-        getContentAnchorEl: null,
         anchorOrigin: {
           vertical: 'bottom',
           horizontal: 'left'
@@ -238,8 +237,7 @@ export const formsOverrides = {
   // Checkbox
   MuiCheckbox: {
     defaultProps: {
-      size: 'small',
-      color: 'primary'
+      size: 'small'
     },
     styleOverrides: {
       root: {
@@ -263,8 +261,7 @@ export const formsOverrides = {
   // Radio Button
   MuiRadio: {
     defaultProps: {
-      size: 'small',
-      color: 'primary'
+      size: 'small'
     },
     styleOverrides: {
       root: {
@@ -287,9 +284,6 @@ export const formsOverrides = {
 
   // Switch
   MuiSwitch: {
-    defaultProps: {
-      color: 'primary'
-    },
     styleOverrides: {
       root: {
         height: getSpacing(4.5),

diff --git a/packages/react-ui/src/theme/sections/components/navigation.js b/packages/react-ui/src/theme/sections/components/navigation.js
@@ -54,11 +54,11 @@ export const navigationOverrides = {
         padding: getSpacing(0, 1),
         marginRight: getSpacing(3),
         minWidth: '56px!important',
-        '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper': {
+        '&[class*="MuiTab-labelIcon"]': {
           flexFlow: 'row',
           alignItems: 'center'
         },
-        '&[class*="MuiTab-labelIcon"] .MuiTab-wrapper > .MuiSvgIcon-root': {
+        '&[class*="MuiTab-labelIcon"] .MuiSvgIcon-root': {
           marginRight: getSpacing(1),
           marginBottom: 0
         }

diff --git a/packages/react-ui/src/theme/sections/cssBaseline.js b/packages/react-ui/src/theme/sections/cssBaseline.js
@@ -3,86 +3,84 @@ import { commonPalette } from './palette';
 import { themeTypography } from './typography';
 
 export const CssBaseline = {
-  '@global': {
-    // Custom scrollbars
-    '*::-webkit-scrollbar': {
-      position: 'fixed',
-      width: '5px'
-    },
-    '*::-webkit-scrollbar-track': {
-      '-webkit-box-shadow': 'none',
-      background: 'transparent'
-    },
-    '*::-webkit-scrollbar-thumb': {
-      borderRadius: '3px',
-      background: commonPalette.action.focus,
-      outline: 'none'
-    },
+  // Custom scrollbars
+  '*::-webkit-scrollbar': {
+    position: 'fixed',
+    width: '5px'
+  },
+  '*::-webkit-scrollbar-track': {
+    '-webkit-box-shadow': 'none',
+    background: 'transparent'
+  },
+  '*::-webkit-scrollbar-thumb': {
+    borderRadius: '3px',
+    background: commonPalette.action.focus,
+    outline: 'none'
+  },
+
+  // iOS Search clear button
+  'input[type="search"]::-webkit-search-cancel-button': {
+    '-webkit-appearance': 'none',
+    height: getSpacing(2),
+    width: getSpacing(2),
+    display: 'block',
+    backgroundImage: `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC)`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: getSpacing(2)
+  },
+
+  // Mapbox controls
+  '.mapboxgl-ctrl.mapboxgl-ctrl-attrib': {
+    padding: getSpacing(0, 1),
+    borderRadius: getSpacing(0.5, 0, 0, 0),
 
-    // iOS Search clear button
-    'input[type="search"]::-webkit-search-cancel-button': {
-      '-webkit-appearance': 'none',
-      height: getSpacing(2),
-      width: getSpacing(2),
-      display: 'block',
-      backgroundImage: `url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAn0lEQVR42u3UMQrDMBBEUZ9WfQqDmm22EaTyjRMHAlM5K+Y7lb0wnUZPIKHlnutOa+25Z4D++MRBX98MD1V/trSppLKHqj9TTBWKcoUqffbUcbBBEhTjBOV4ja4l4OIAZThEOV6jHO8ARXD+gPPvKMABinGOrnu6gTNUawrcQKNCAQ7QeTxORzle3+sDfjJpPCqhJh7GixZq4rHcc9l5A9qZ+WeBhgEuAAAAAElFTkSuQmCC)`,
-      backgroundRepeat: 'no-repeat',
-      backgroundSize: getSpacing(2)
+    '& .mapboxgl-ctrl-attrib-inner': {
+      ...themeTypography.overline,
+      textTransform: 'none',
+      letterSpacing: '0.75px',
+
+      '& a': {
+        color: commonPalette.primary.main
+      }
     },
 
-    // Mapbox controls
-    '.mapboxgl-ctrl.mapboxgl-ctrl-attrib': {
-      padding: getSpacing(0, 1),
-      borderRadius: getSpacing(0.5, 0, 0, 0),
+    '&.mapboxgl-compact': {
+      backgroundColor: 'transparent',
+      right: getSpacing(0.5),
+      bottom: getSpacing(2.5),
 
-      '& .mapboxgl-ctrl-attrib-inner': {
-        ...themeTypography.overline,
-        textTransform: 'none',
-        letterSpacing: '0.75px',
+      // Mobile
+      '@media (max-width: 600px)': {
+        bottom: getSpacing(0.5)
+      },
 
-        '& a': {
-          color: commonPalette.primary.main
+      '& .mapboxgl-ctrl-attrib-button': {
+        backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3E%3Cg%3E%3Crect%20fill='none'%20height='24'%20width='24'%20x='0'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath%20d='M11.88,9.14c1.28,0.06,1.61,1.15,1.63,1.66h1.79c-0.08-1.98-1.49-3.19-3.45-3.19C9.64,7.61,8,9,8,12.14%20c0,1.94,0.93,4.24,3.84,4.24c2.22,0,3.41-1.65,3.44-2.95h-1.79c-0.03,0.59-0.45,1.38-1.63,1.44C10.55,14.83,10,13.81,10,12.14%20C10,9.25,11.28,9.16,11.88,9.14z%20M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z%20M12,20c-4.41,0-8-3.59-8-8%20s3.59-8,8-8s8,3.59,8,8S16.41,20,12,20z'%20fill='${commonPalette.text.secondary}'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
+        backgroundColor: 'rgba(255,255,255,.8)',
+        top: 'auto',
+        bottom: 0,
+        right: 0,
+
+        '&:not(:disabled):hover': {
+          backgroundColor: 'rgba(255,255,255,.8)'
         }
       },
 
-      '&.mapboxgl-compact': {
-        backgroundColor: 'transparent',
-        right: getSpacing(0.5),
-        bottom: getSpacing(2.5),
-
-        // Mobile
-        '@media (max-width: 600px)': {
-          bottom: getSpacing(0.5)
-        },
+      '& .mapboxgl-ctrl-attrib-inner': {
+        backgroundColor: 'rgba(255,255,255,.8)',
+        padding: getSpacing(0.5, 1),
+        borderRadius: getSpacing(1.5),
+        marginRight: getSpacing(2.5),
+        color: commonPalette.text.secondary
+      },
 
+      '&.mapboxgl-compact-show': {
         '& .mapboxgl-ctrl-attrib-button': {
-          backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3E%3Cg%3E%3Crect%20fill='none'%20height='24'%20width='24'%20x='0'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath%20d='M11.88,9.14c1.28,0.06,1.61,1.15,1.63,1.66h1.79c-0.08-1.98-1.49-3.19-3.45-3.19C9.64,7.61,8,9,8,12.14%20c0,1.94,0.93,4.24,3.84,4.24c2.22,0,3.41-1.65,3.44-2.95h-1.79c-0.03,0.59-0.45,1.38-1.63,1.44C10.55,14.83,10,13.81,10,12.14%20C10,9.25,11.28,9.16,11.88,9.14z%20M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z%20M12,20c-4.41,0-8-3.59-8-8%20s3.59-8,8-8s8,3.59,8,8S16.41,20,12,20z'%20fill='${commonPalette.text.secondary}'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
-          backgroundColor: 'rgba(255,255,255,.8)',
-          top: 'auto',
-          bottom: 0,
-          right: 0,
+          backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3E%3Cpath%20d='M0%200h24v24H0z'%20fill='none'/%3E%3Cpath%20d='M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'%20fill='white'/%3E%3C/svg%3E")`,
+          backgroundColor: commonPalette.common.black,
 
           '&:not(:disabled):hover': {
-            backgroundColor: 'rgba(255,255,255,.8)'
-          }
-        },
-
-        '& .mapboxgl-ctrl-attrib-inner': {
-          backgroundColor: 'rgba(255,255,255,.8)',
-          padding: getSpacing(0.5, 1),
-          borderRadius: getSpacing(1.5),
-          marginRight: getSpacing(2.5),
-          color: commonPalette.text.secondary
-        },
-
-        '&.mapboxgl-compact-show': {
-          '& .mapboxgl-ctrl-attrib-button': {
-            backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20height='24'%20viewBox='0%200%2024%2024'%20width='24'%3E%3Cpath%20d='M0%200h24v24H0z'%20fill='none'/%3E%3Cpath%20d='M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'%20fill='white'/%3E%3C/svg%3E")`,
-            backgroundColor: commonPalette.common.black,
-
-            '&:not(:disabled):hover': {
-              backgroundColor: commonPalette.common.black
-            }
+            backgroundColor: commonPalette.common.black
           }
         }
       }

diff --git a/packages/react-ui/src/widgets/BarWidgetUI.js b/packages/react-ui/src/widgets/BarWidgetUI.js
@@ -15,10 +15,6 @@ const useStyles = makeStyles((theme) => ({
 
     '& .MuiTypography-caption': {
       color: theme.palette.text.secondary
-    },
-
-    '& .MuiButton-label': {
-      ...theme.typography.caption
     }
   },
 

diff --git a/packages/react-ui/src/widgets/CategoryWidgetUI.js b/packages/react-ui/src/widgets/CategoryWidgetUI.js
@@ -32,7 +32,7 @@ const useStyles = makeStyles((theme) => ({
     cursor: 'pointer',
     flexWrap: 'nowrap',
 
-    '&:hover $progressbar div': {
+    '&:hover .progressbar div': {
       backgroundColor: theme.palette.secondary.dark
     }
   },
@@ -91,10 +91,6 @@ const useStyles = makeStyles((theme) => ({
 
     '& .MuiTypography-caption': {
       color: theme.palette.text.secondary
-    },
-
-    '& .MuiButton-label': {
-      ...theme.typography.caption
     }
   },
 

diff --git a/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js b/packages/react-ui/src/widgets/HistogramWidgetUI/HistogramWidgetUI.js
@@ -17,10 +17,6 @@ const useStyles = makeStyles((theme) => ({
 
     '& .MuiTypography-caption': {
       color: theme.palette.text.secondary
-    },
-
-    '& .MuiButton-label': {
-      ...theme.typography.caption
     }
   },
   clearButton: {

diff --git a/packages/react-ui/src/widgets/OpacityControl.js b/packages/react-ui/src/widgets/OpacityControl.js
@@ -58,7 +58,7 @@ export default function OpacityControl({ opacity, onChangeOpacity }) {
             <TextField
               className={classes.input}
               value={Math.round(opacity * 100)}
-              margin='dense'
+              size='small'
               onChange={handleTextFieldChange}
               InputProps={{
                 step: 1,

diff --git a/packages/react-ui/src/widgets/RangeWidgetUI.js b/packages/react-ui/src/widgets/RangeWidgetUI.js
@@ -194,7 +194,7 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) {
         <TextField
           className={classes.input}
           value={inputsValues[0]}
-          margin='dense'
+          size='small'
           onChange={(event) => handleInputChange(event, 0)}
           onBlur={() => handleInputBlur(0)}
           inputProps={{
@@ -207,7 +207,7 @@ function RangeWidgetUI({ data, min, max, limits, onSelectedRangeChange }) {
         <TextField
           className={classes.input}
           value={inputsValues[1]}
-          margin='dense'
+          size='small'
           onChange={(event) => handleInputChange(event, 1)}
           onBlur={() => handleInputBlur(1)}
           inputProps={{

diff --git a/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js b/packages/react-ui/src/widgets/TableWidgetUI/TableWidgetUI.js
@@ -56,7 +56,6 @@ function TableWidgetUI({
   height,
   dense
 }) {
-  const classes = useStyles();
   const paginationRef = useRef(null);
 
   const handleSort = (sortField) => {
@@ -97,7 +96,6 @@ function TableWidgetUI({
       {pagination && (
         <TablePagination
           ref={paginationRef}
-          className={classes.pagination}
           rowsPerPageOptions={rowsPerPageOptions}
           component='div'
           count={totalCount}

diff --git a/packages/react-ui/src/widgets/WrapperWidgetUI.js b/packages/react-ui/src/widgets/WrapperWidgetUI.js
@@ -63,12 +63,9 @@ const useStyles = makeStyles((theme) => ({
     alignItems: 'flex-start',
     justifyContent: 'flex-start',
     cursor: (props) => (props.expandable ? 'pointer' : 'default'),
-    '& .MuiButton-label': {
-      ...theme.typography.body1,
 
-      '& .MuiButton-startIcon': {
-        marginRight: theme.spacing(1)
-      }
+    '& .MuiButton-startIcon': {
+      marginRight: theme.spacing(1)
     },
     '&:hover': {
       background: 'none'

diff --git a/packages/react-ui/src/widgets/legend/LegendWidgetUI.js b/packages/react-ui/src/widgets/legend/LegendWidgetUI.js
@@ -109,10 +109,7 @@ const useStylesLegendContainer = makeStyles((theme) => ({
     padding: theme.spacing(0.75, 1.25, 0.75, 3),
     borderTop: ({ collapsed }) =>
       collapsed ? 'none' : `1px solid ${theme.palette.divider}`,
-    cursor: 'pointer',
-    '& .MuiButton-label': {
-      ...theme.typography.body1
-    }
+    cursor: 'pointer'
   },
   wrapperInner: {
     maxHeight: 'max(350px, 80vh)',

diff --git a/packages/react-ui/src/widgets/legend/LegendWrapper.js b/packages/react-ui/src/widgets/legend/LegendWrapper.js
@@ -122,12 +122,9 @@ const useHeaderStyles = makeStyles((theme) => ({
     flex: '1 1 auto',
     justifyContent: 'flex-start',
     cursor: ({ collapsible }) => (collapsible ? 'pointer' : 'default'),
-    '& .MuiButton-label': {
-      ...theme.typography.body1,
 
-      '& .MuiButton-startIcon': {
-        marginRight: theme.spacing(1)
-      }
+    '& .MuiButton-startIcon': {
+      marginRight: theme.spacing(1)
     },
     '&:hover': {
       background: 'none'

diff --git a/packages/react-ui/storybook/stories/common/Paper.stories.js b/packages/react-ui/storybook/stories/common/Paper.stories.js
@@ -14,6 +14,12 @@ const options = {
     square: {
       control: { type: 'boolean' }
     }
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/nmaoLeo69xBJCHm9nc6lEV/CARTO-Components-1.0?node-id=1447%3A38722'
+    }
   }
 };
 export default options;