Mui5 migration: Breaking changes in v5: styles and theme (#514)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Not released
 
+- 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/)
 - New Typography component to extend Mui Typography [#506](https://github.com/CartoDB/carto-react/pull/506)

UPGRADE.md

@@ -1,5 +1,12 @@
 # Upgrade to the new design system
 
+## Breaking changes in Mui v5
+
+Please, follow the Mui guides related to breaking changes in components and styles:
+
+- [Styles](https://mui.com/material-ui/migration/v5-style-changes/)
+- [Components](https://mui.com/material-ui/migration/v5-component-changes/)
+
 ## MUI theme
 
 [carto-theme.js](https://github.com/CartoDB/carto-react/blob/master/packages/react-ui/src/theme/carto-theme.js) file splitted in sections:
@@ -14,6 +21,10 @@ Also added some files for shared constants (`themeConstants.js`) and useful func
 
 Removed unused custom `createTheme` function in `carto-theme.js`.
 
+We have a new custom spacing constant in carto-theme, `spacingValue`, which you should use instead of the common `theme.spacing()` function in cases where you need to do value calculations, because since Mui v5, theme.spacing is no longer a number, but a string in this format: `number + px`.
+
+Note that if you're using `calc()` in your styles, you can keep using `theme.spacing()` as usual.
+
 # Typography
 
 `responsiveFontSizes` simplified due we want to resize only a few variants through the theme.

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

@@ -1,4 +1,7 @@
-import { themeComponentsOverrides, themeComponentsProps } from './sections/components';
+import { dataDisplayOverrides } from './sections/components/dataDisplay';
+import { buttonsOverrides } from './sections/components/buttons';
+import { formsOverrides } from './sections/components/forms';
+import { navigationOverrides } from './sections/components/navigation';
 import { CssBaseline } from './sections/cssBaseline';
 import { commonPalette } from './sections/palette';
 import { themeShadows } from './sections/shadows';
@@ -99,13 +102,17 @@ export const cartoThemeOptions = {
     snackbar: 1400,
     tooltip: 1500
   },
-  overrides: {
+
+  // Styles and props overrides for components
+  components: {
     MuiCssBaseline: {
-      ...CssBaseline
+      styleOverrides: {
+        ...CssBaseline
+      }
     },
-    ...themeComponentsOverrides
-  },
-
-  // Props
-  props: { ...themeComponentsProps }
+    ...buttonsOverrides,
+    ...formsOverrides,
+    ...navigationOverrides,
+    ...dataDisplayOverrides
+  }
 };