Update deprecated material-ui method (#146)

* Bump material-ui and replace deprecated method * Bump minor dependencies and cleanup * Use void function to onMouseLeave as we don't need the return value * Set v0.8.0 * Remove classnames direct dependency
5afe · Aug 19, 2021 · bf42522 · bf42522
1 parent 6fcdf7a
commit bf42522
Show file tree

Hide file tree

Showing 11 changed files with 1,188 additions and 1,068 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gnosis.pm/safe-react-components",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Gnosis UI components",
   "main": "dist/index.min.js",
   "typings": "dist/index.d.ts",
@@ -24,15 +24,14 @@
   "author": "Gnosis (https://gnosis.pm)",
   "license": "MIT",
   "dependencies": {
-    "classnames": "^2.2.6",
     "react-media": "^1.10.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.0",
     "@babel/preset-env": "^7.14.0",
     "@babel/preset-react": "^7.14.0",
     "@babel/preset-typescript": "^7.14.0",
-    "@material-ui/core": "^4.11.2",
+    "@material-ui/core": "^4.12.3",
     "@storybook/addon-actions": "^6.3.0",
     "@storybook/addon-docs": "^6.3.0",
     "@storybook/addon-links": "^6.3.0",
@@ -42,18 +41,17 @@
     "@testing-library/jest-dom": "^5.11.5",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.2.0",
-    "@types/classnames": "^2.2.11",
     "@types/jest": "^26.0.0",
     "@types/material-ui": "^0.21.9",
-    "@types/node": "^14.14.0",
+    "@types/node": "^16.6.1",
     "@types/react": "^16.9.55",
     "@types/react-dom": "^16.9.0",
-    "@types/styled-components": "^5.1.11",
-    "@typescript-eslint/eslint-plugin": "^4.28.4",
-    "@typescript-eslint/parser": "^4.28.4",
+    "@types/styled-components": "^5.1.12",
+    "@typescript-eslint/eslint-plugin": "^4.29.2",
+    "@typescript-eslint/parser": "^4.29.2",
     "awesome-typescript-loader": "^5.2.1",
     "copy-webpack-plugin": "^6.3.0",
-    "eslint": "^7.31.0",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
@@ -68,7 +66,7 @@
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.2.1",
+    "styled-components": "^5.3.0",
     "typescript": "^4.0.5",
     "url-loader": "^4.1.1",
     "webpack": "4.43.0",

diff --git a/src/dataDisplay/Card/index.tsx b/src/dataDisplay/Card/index.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles';
 
 const StyledCard = styled.div`
   box-shadow: 1px 2px 10px 0
-    ${({ theme }) => fade(theme.colors.shadow.color, 0.18)};
+    ${({ theme }) => alpha(theme.colors.shadow.color, 0.18)};
   border-radius: 8px;
   padding: 24px;
   background-color: ${({ theme }) => theme.colors.white};

diff --git a/src/dataDisplay/FixedDialog/index.tsx b/src/dataDisplay/FixedDialog/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles';
 
 import { Title, ModalFooterConfirmation } from '../../index';
 
@@ -16,7 +16,7 @@ const Wrapper = styled.div`
   background-color: ${({ theme }) => theme.colors.white};
   border-radius: 8px;
   box-shadow: 1px 2px 10px 0
-    ${({ theme }) => fade(theme.colors.shadow.color, 0.18)};
+    ${({ theme }) => alpha(theme.colors.shadow.color, 0.18)};
 
   '&:focus': {
     outline: 'none';

diff --git a/src/dataDisplay/Text/index.tsx b/src/dataDisplay/Text/index.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import Tooltip from '@material-ui/core/Tooltip';
-import { withStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { withStyles, alpha } from '@material-ui/core/styles';
 
 import theme, { ThemeTextSize, ThemeColors } from '../../theme';
 
@@ -32,7 +31,7 @@ const StyledTooltip = withStyles(() => ({
   tooltip: {
     backgroundColor: theme.colors.white,
     color: theme.colors.text,
-    boxShadow: `0px 0px 10px ${fade(theme.colors.shadow.color, 0.2)}`,
+    boxShadow: `0px 0px 10px ${alpha(theme.colors.shadow.color, 0.2)}`,
   },
   arrow: {
     color: theme.colors.white,

diff --git a/src/dataDisplay/Tooltip/index.tsx b/src/dataDisplay/Tooltip/index.tsx
@@ -2,8 +2,7 @@ import React, { ReactElement } from 'react';
 import MUITooltip, {
   TooltipProps as TooltipPropsMui,
 } from '@material-ui/core/Tooltip';
-import { withStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { withStyles, alpha } from '@material-ui/core/styles';
 
 import theme, { ThemeColors, ThemeTooltipSize } from '../../theme';
 
@@ -60,7 +59,7 @@ const customTooltip = ({
       backgroundColor: backgroundColor
         ? (theme.colors[backgroundColor] as string)
         : theme.colors.overlay.color,
-      boxShadow: `1px 2px 10px ${fade(theme.colors.shadow.color, 0.18)}`,
+      boxShadow: `1px 2px 10px ${alpha(theme.colors.shadow.color, 0.18)}`,
       border: getBorderBySize(size),
       color: textColor
         ? (theme.colors[textColor] as string)
@@ -78,7 +77,7 @@ const customTooltip = ({
       border: 'none',
 
       '&::before': {
-        boxShadow: `1px 2px 10px ${fade(theme.colors.shadow.color, 0.18)}`,
+        boxShadow: `1px 2px 10px ${alpha(theme.colors.shadow.color, 0.18)}`,
       },
     },
   }))(MUITooltip);

diff --git a/src/inputs/Button/index.tsx b/src/inputs/Button/index.tsx
@@ -2,7 +2,7 @@ import React, { ReactElement, ReactNode, HTMLAttributes } from 'react';
 import ButtonMUI, {
   ButtonProps as ButtonMUIProps,
 } from '@material-ui/core/Button';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles';
 
 import styled, {
   css,
@@ -55,7 +55,7 @@ const customStyles: {
     contained: css`
       color: ${({ theme }) => theme.colors.white};
       background-color: ${({ theme }) => theme.colors.primary};
-      box-shadow: 1px 2px 10px ${fade(theme.colors.shadow.color, 0.18)};
+      box-shadow: 1px 2px 10px ${alpha(theme.colors.shadow.color, 0.18)};
 
       &:hover {
         background-color: ${({ theme }) => theme.colors.primaryHover};
@@ -106,7 +106,7 @@ const customStyles: {
     contained: css`
       color: ${({ theme }) => theme.colors.white};
       background-color: ${({ theme }) => theme.colors.secondary};
-      box-shadow: 1px 2px 10px ${fade(theme.colors.shadow.color, 0.18)};
+      box-shadow: 1px 2px 10px ${alpha(theme.colors.shadow.color, 0.18)};
 
       path.icon-color {
         color: ${({ theme }) => theme.colors.white};
@@ -164,7 +164,7 @@ const customStyles: {
     contained: css`
       color: ${({ theme }) => theme.colors.white};
       background-color: ${({ theme }) => theme.colors.error};
-      box-shadow: 1px 2px 10px ${fade(theme.colors.shadow.color, 0.18)};
+      box-shadow: 1px 2px 10px ${alpha(theme.colors.shadow.color, 0.18)};
 
       &:hover {
         background-color: ${({ theme }) => theme.colors.errorHover};

diff --git a/src/inputs/Switch/index.tsx b/src/inputs/Switch/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import SwitchMui from '@material-ui/core/Switch';
 import styled from 'styled-components';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles';
 
 const StyledSwitch = styled(({ ...rest }) => <SwitchMui {...rest} />)`
   && {
@@ -12,7 +12,7 @@ const StyledSwitch = styled(({ ...rest }) => <SwitchMui {...rest} />)`
     }
 
     .MuiSwitch-colorSecondary.Mui-checked:hover {
-      background-color: ${({ theme }) => fade(theme.colors.primary, 0.08)};
+      background-color: ${({ theme }) => alpha(theme.colors.primary, 0.08)};
     }
 
     .Mui-checked + .MuiSwitch-track {

diff --git a/src/utils/CopyToClipboardBtn/index.tsx b/src/utils/CopyToClipboardBtn/index.tsx
@@ -53,8 +53,9 @@ const CopyToClipboardBtn = ({
     copy();
   };
 
-  const onButtonBlur = (): number =>
+  const onButtonBlur = (): void => {
     setTimeout((): void => setClicked(false), 300);
+  };
 
   return (
     <StyledButton

diff --git a/src/utils/modals/GenericModal/index.tsx b/src/utils/modals/GenericModal/index.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import Modal from '@material-ui/core/Modal';
 import { makeStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles';
 import styled from 'styled-components';
-import cn from 'classnames';
 import Media from 'react-media';
 
 import theme from '../../../theme';
@@ -66,7 +65,7 @@ const useStyles = makeStyles({
     alignItems: 'center',
     justifyContent: 'center',
     overflowY: 'scroll',
-    background: fade(theme.colors.overlay.color, theme.colors.overlay.opacity),
+    background: alpha(theme.colors.overlay.color, theme.colors.overlay.opacity),
   },
 
   paper: {
@@ -99,7 +98,7 @@ const GenericModal = ({
 
   return (
     <Modal open className={classes.modal}>
-      <div className={cn(classes.paper)}>
+      <div className={classes.paper}>
         <TitleSection>
           <Title size="xs" withoutMargin>
             {title}

diff --git a/tests/__snapshots__/storybook.test.js.snap b/tests/__snapshots__/storybook.test.js.snap
@@ -200,7 +200,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = `
       </div>
     </div>
     <div
-      className="MuiCollapse-container MuiCollapse-hidden"
+      className="MuiCollapse-root MuiCollapse-hidden"
       style={
         Object {
           "minHeight": "0px",
@@ -330,7 +330,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = `
       </div>
     </div>
     <div
-      className="MuiCollapse-container MuiCollapse-hidden"
+      className="MuiCollapse-root MuiCollapse-hidden"
       style={
         Object {
           "minHeight": "0px",
@@ -460,7 +460,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = `
       </div>
     </div>
     <div
-      className="MuiCollapse-container MuiCollapse-hidden"
+      className="MuiCollapse-root MuiCollapse-hidden"
       style={
         Object {
           "minHeight": "0px",
@@ -694,7 +694,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `
       </div>
     </div>
     <div
-      className="MuiCollapse-container MuiCollapse-hidden"
+      className="MuiCollapse-root MuiCollapse-hidden"
       style={
         Object {
           "minHeight": "0px",
@@ -824,7 +824,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `
       </div>
     </div>
     <div
-      className="MuiCollapse-container MuiCollapse-hidden"
+      className="MuiCollapse-root MuiCollapse-hidden"
       style={
         Object {
           "minHeight": "0px",
@@ -954,7 +954,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `
       </div>
     </div>
     <div
-      className="MuiCollapse-container MuiCollapse-hidden"
+      className="MuiCollapse-root MuiCollapse-hidden"
       style={
         Object {
           "minHeight": "0px",
@@ -11934,7 +11934,7 @@ exports[`Storyshots Inputs/TextField End Adornment 1`] = `
         value=""
       />
       <div
-        className="MuiInputAdornment-root MuiInputAdornment-filled MuiInputAdornment-positionEnd"
+        className="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-filled"
       >
         <span
           className="c1"
@@ -12268,7 +12268,7 @@ exports[`Storyshots Inputs/TextField Start Adornment 1`] = `
       onClick={[Function]}
     >
       <div
-        className="MuiInputAdornment-root MuiInputAdornment-filled MuiInputAdornment-positionStart"
+        className="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-filled"
       >
         <span
           className="c1"