feat: update material-ui to latest 4.x.x (#3016)

toptal · Jul 27, 2022 · 2082a95 · 2082a95
1 parent 94b38b9
commit 2082a95
Show file tree

Hide file tree

Showing 14 changed files with 127 additions and 115 deletions.
diff --git a/.changeset/brave-eyes-smell.md b/.changeset/brave-eyes-smell.md
@@ -0,0 +1,11 @@
+---
+'@toptal/picasso': minor
+'@toptal/picasso-charts': minor
+'@toptal/picasso-provider': minor
+---
+
+---
+
+### Dependencies
+
+- update material-ui to latest 4.x.x version
diff --git a/packages/picasso-charts/package.json b/packages/picasso-charts/package.json
@@ -24,7 +24,7 @@
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-charts#readme",
   "peerDependencies": {
     "typescript": "4.6.x",
-    "@material-ui/core": "4.11.0",
+    "@material-ui/core": "4.12.4",
     "@toptal/picasso": "^26.0.0",
     "@toptal/picasso-shared": "^9.0.0",
     "react": ">=16.12.0 < 19.0.0"

diff --git a/packages/picasso-provider/package.json b/packages/picasso-provider/package.json
@@ -26,8 +26,8 @@
     "react": ">=16.12.0 < 19.0.0"
   },
   "dependencies": {
-    "@material-ui/core": "4.11.0",
-    "@material-ui/utils": "4.10.2",
+    "@material-ui/core": "4.12.4",
+    "@material-ui/utils": "4.11.3",
     "classnames": "^2.3.1",
     "notistack": "1.0.10",
     "react-helmet": "6.1.0"

diff --git a/packages/picasso-provider/src/Picasso/config/theme.ts b/packages/picasso-provider/src/Picasso/config/theme.ts
@@ -1,7 +1,7 @@
 import { Layout } from './layout'
 import { Sizes } from './sizes'
 
-declare module '@material-ui/core/styles/createMuiTheme' {
+declare module '@material-ui/core/styles' {
   interface Theme {
     layout: Layout
     sizes: Sizes

diff --git a/packages/picasso/package.json b/packages/picasso/package.json
@@ -23,7 +23,7 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "peerDependencies": {
-    "@material-ui/core": "4.11.0",
+    "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "^1.2.0",
     "notistack": "1.0.10",
     "react": ">=16.12.0 < 19.0.0",

diff --git a/packages/picasso/src/Accordion/__snapshots__/test.tsx.snap b/packages/picasso/src/Accordion/__snapshots__/test.tsx.snap
@@ -51,7 +51,7 @@ exports[`Accordion renders collapsed by default 1`] = `
         </div>
       </div>
       <div
-        class="MuiCollapse-container MuiCollapse-hidden"
+        class="MuiCollapse-root MuiCollapse-hidden"
         style="min-height: 0px;"
       >
         <div
@@ -113,7 +113,7 @@ exports[`Accordion renders custom icon when passed 1`] = `
         </div>
       </div>
       <div
-        class="MuiCollapse-container MuiCollapse-hidden"
+        class="MuiCollapse-root MuiCollapse-hidden"
         style="min-height: 0px;"
       >
         <div
@@ -195,7 +195,7 @@ exports[`Accordion renders disabled 1`] = `
         </div>
       </div>
       <div
-        class="MuiCollapse-container MuiCollapse-hidden"
+        class="MuiCollapse-root MuiCollapse-hidden"
         style="min-height: 0px;"
       >
         <div

diff --git a/packages/picasso/src/Autocomplete/__snapshots__/test.tsx.snap b/packages/picasso/src/Autocomplete/__snapshots__/test.tsx.snap
@@ -274,7 +274,7 @@ exports[`Autocomplete static behavior renders 1`] = `
 
 exports[`Autocomplete static behavior renders a loading indicator 1`] = `
 <div
-  class="MuiInputAdornment-root PicassoInputAdornment-root MuiInputAdornment-disablePointerEvents MuiInputAdornment-positionEnd"
+  class="MuiInputAdornment-root PicassoInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-disablePointerEvents"
   data-testid="loading-adornment"
 >
   <div

diff --git a/packages/picasso/src/DatePicker/__snapshots__/test.tsx.snap b/packages/picasso/src/DatePicker/__snapshots__/test.tsx.snap
@@ -12,7 +12,7 @@ exports[`DatePicker renders 1`] = `
         class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
       >
         <div
-          class="MuiInputAdornment-root PicassoInputAdornment-root MuiInputAdornment-disablePointerEvents MuiInputAdornment-positionStart"
+          class="MuiInputAdornment-root PicassoInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-disablePointerEvents"
         >
           <svg
             class="PicassoSvgCalendar16-root"

diff --git a/packages/picasso/src/Input/__snapshots__/test.tsx.snap b/packages/picasso/src/Input/__snapshots__/test.tsx.snap
@@ -9,7 +9,7 @@ exports[`Input renders icon in the beginning 1`] = `
       class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
     >
       <div
-        class="MuiInputAdornment-root PicassoInputAdornment-root MuiInputAdornment-disablePointerEvents MuiInputAdornment-positionStart"
+        class="MuiInputAdornment-root PicassoInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-disablePointerEvents"
       >
         <svg
           class="PicassoSvgSearch16-root PicassoInputIconAdornment-icon"
@@ -56,7 +56,7 @@ exports[`Input renders icon in the end 1`] = `
       class="MuiInputBase-root MuiOutlinedInput-root PicassoOutlinedInput-root PicassoInput-root PicassoOutlinedInput-rootAuto PicassoOutlinedInput-rootMedium MuiInputBase-adornedStart MuiOutlinedInput-adornedStart MuiInputBase-adornedEnd MuiOutlinedInput-adornedEnd"
     >
       <div
-        class="MuiInputAdornment-root PicassoInputAdornment-root MuiInputAdornment-disablePointerEvents MuiInputAdornment-positionStart"
+        class="MuiInputAdornment-root PicassoInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-disablePointerEvents"
       >
         <svg
           class="PicassoSvgSearch16-root PicassoInputIconAdornment-icon"
@@ -204,7 +204,7 @@ exports[`Input shows counter for multiline input 1`] = `
         rows="4"
       />
       <div
-        class="MuiInputAdornment-root PicassoInputAdornment-root PicassoInputMultilineAdornment-multilineAdornment MuiInputAdornment-disablePointerEvents MuiInputAdornment-positionEnd"
+        class="MuiInputAdornment-root PicassoInputAdornment-root PicassoInputMultilineAdornment-multilineAdornment MuiInputAdornment-positionEnd MuiInputAdornment-disablePointerEvents"
       />
       <fieldset
         aria-hidden="true"
@@ -261,11 +261,11 @@ exports[`Input shows counter for regular input 1`] = `
 
 exports[`Input shows excess chars for multiline input with exceeded limit 1`] = `
 <div
-  class="MuiInputAdornment-root PicassoInputAdornment-root PicassoInputMultilineAdornment-multilineAdornment MuiInputAdornment-disablePointerEvents MuiInputAdornment-positionEnd"
+  class="MuiInputAdornment-root PicassoInputAdornment-root PicassoInputMultilineAdornment-multilineAdornment MuiInputAdornment-positionEnd MuiInputAdornment-disablePointerEvents"
   data-testid="limit-adornment-multiline-label"
 >
   <div
-    class="MuiInputAdornment-root PicassoInputAdornment-root PicassoInputLimitAdornment-limiterMultiline MuiInputAdornment-disablePointerEvents MuiInputAdornment-positionEnd"
+    class="MuiInputAdornment-root PicassoInputAdornment-root PicassoInputLimitAdornment-limiterMultiline MuiInputAdornment-positionEnd MuiInputAdornment-disablePointerEvents"
   >
     <span
       class="PicassoInputLimitAdornment-limiterLabel PicassoInputLimitAdornment-limiterLabelError"
@@ -280,11 +280,11 @@ exports[`Input shows excess chars for multiline input with exceeded limit 1`] =
 
 exports[`Input shows remaining chars for for multiline input with limit 1`] = `
 <div
-  class="MuiInputAdornment-root PicassoInputAdornment-root PicassoInputMultilineAdornment-multilineAdornment MuiInputAdornment-disablePointerEvents MuiInputAdornment-positionEnd"
+  class="MuiInputAdornment-root PicassoInputAdornment-root PicassoInputMultilineAdornment-multilineAdornment MuiInputAdornment-positionEnd MuiInputAdornment-disablePointerEvents"
   data-testid="limit-adornment-multiline-label"
 >
   <div
-    class="MuiInputAdornment-root PicassoInputAdornment-root PicassoInputLimitAdornment-limiterMultiline MuiInputAdornment-disablePointerEvents MuiInputAdornment-positionEnd"
+    class="MuiInputAdornment-root PicassoInputAdornment-root PicassoInputLimitAdornment-limiterMultiline MuiInputAdornment-positionEnd MuiInputAdornment-disablePointerEvents"
   >
     <span
       class="PicassoInputLimitAdornment-limiterLabel PicassoInputLimitAdornment-limiterLabelError"

diff --git a/packages/picasso/src/Section/__snapshots__/test.tsx.snap b/packages/picasso/src/Section/__snapshots__/test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Section renders collapsible initially expanded 1`] = `
         </div>
       </div>
       <div
-        class="MuiCollapse-container MuiCollapse-entered"
+        class="MuiCollapse-root MuiCollapse-entered"
         style="min-height: 0px;"
       >
         <div
@@ -140,7 +140,7 @@ exports[`Section renders with title, subtitle, actions and content 1`] = `
         </div>
       </div>
       <div
-        class="MuiCollapse-container MuiCollapse-entered"
+        class="MuiCollapse-root MuiCollapse-entered"
         style="min-height: 0px;"
       >
         <div
@@ -173,7 +173,7 @@ exports[`Section renders without header 1`] = `
       class="PicassoSection-default PicassoSection-root"
     >
       <div
-        class="MuiCollapse-container MuiCollapse-entered"
+        class="MuiCollapse-root MuiCollapse-entered"
         style="min-height: 0px;"
       >
         <div

diff --git a/packages/picasso/src/SidebarItem/__snapshots__/test.tsx.snap b/packages/picasso/src/SidebarItem/__snapshots__/test.tsx.snap
@@ -69,7 +69,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
             </div>
           </div>
           <div
-            class="MuiCollapse-container"
+            class="MuiCollapse-root"
             style="min-height: 0px; height: 0px; transition-duration: 0ms;"
           >
             <div
@@ -199,7 +199,7 @@ exports[`SidebarItem collapsible menu is expanded when one of the children is se
             </div>
           </div>
           <div
-            class="MuiCollapse-container"
+            class="MuiCollapse-root"
             style="min-height: 0px; height: 0px; transition-duration: 0ms;"
           >
             <div
@@ -492,7 +492,7 @@ exports[`SidebarItem use accordion for collapsible with menu 1`] = `
         </div>
       </div>
       <div
-        class="MuiCollapse-container MuiCollapse-hidden"
+        class="MuiCollapse-root MuiCollapse-hidden"
         style="min-height: 0px;"
       >
         <div

diff --git a/packages/picasso/src/TimePicker/__snapshots__/test.tsx.snap b/packages/picasso/src/TimePicker/__snapshots__/test.tsx.snap
@@ -17,7 +17,7 @@ exports[`TimePicker renders 1`] = `
         value="21:00"
       />
       <div
-        class="MuiInputAdornment-root PicassoInputAdornment-root MuiInputAdornment-disablePointerEvents MuiInputAdornment-positionEnd"
+        class="MuiInputAdornment-root PicassoInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-disablePointerEvents"
       >
         <svg
           class="PicassoSvgTime16-root PicassoTimePicker-icon PicassoInputIconAdornment-icon"

diff --git a/packages/picasso/src/utils/Notifications/__snapshots__/test.tsx.snap b/packages/picasso/src/utils/Notifications/__snapshots__/test.tsx.snap
@@ -45,7 +45,7 @@ exports[`useNotifications error notification render 1`] = `
       class="makeStyles-top makeStyles-right makeStyles-root PicassoNotificationsProvider-root"
     >
       <div
-        class="MuiCollapse-container MuiCollapse-entered"
+        class="MuiCollapse-root MuiCollapse-entered"
         style="min-height: 0px;"
       >
         <div
@@ -163,7 +163,7 @@ exports[`useNotifications info notification render 1`] = `
       class="makeStyles-top makeStyles-right makeStyles-root PicassoNotificationsProvider-root"
     >
       <div
-        class="MuiCollapse-container MuiCollapse-entered"
+        class="MuiCollapse-root MuiCollapse-entered"
         style="min-height: 0px;"
       >
         <div
@@ -284,7 +284,7 @@ exports[`useNotifications success notification render 1`] = `
       class="makeStyles-top makeStyles-right makeStyles-root PicassoNotificationsProvider-root"
     >
       <div
-        class="MuiCollapse-container MuiCollapse-entered"
+        class="MuiCollapse-root MuiCollapse-entered"
         style="min-height: 0px;"
       >
         <div