Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

Commit bf42522

Browse files
author
Daniel Sanchez
authored
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
1 parent 6fcdf7a commit bf42522

File tree

11 files changed

+1188
-1068
lines changed

11 files changed

+1188
-1068
lines changed

‎package.json‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gnosis.pm/safe-react-components",
3-
"version": "0.7.0",
3+
"version": "0.8.0",
44
"description": "Gnosis UI components",
55
"main": "dist/index.min.js",
66
"typings": "dist/index.d.ts",
@@ -24,15 +24,14 @@
2424
"author": "Gnosis (https://gnosis.pm)",
2525
"license": "MIT",
2626
"dependencies": {
27-
"classnames": "^2.2.6",
2827
"react-media": "^1.10.0"
2928
},
3029
"devDependencies": {
3130
"@babel/core": "^7.14.0",
3231
"@babel/preset-env": "^7.14.0",
3332
"@babel/preset-react": "^7.14.0",
3433
"@babel/preset-typescript": "^7.14.0",
35-
"@material-ui/core": "^4.11.2",
34+
"@material-ui/core": "^4.12.3",
3635
"@storybook/addon-actions": "^6.3.0",
3736
"@storybook/addon-docs": "^6.3.0",
3837
"@storybook/addon-links": "^6.3.0",
@@ -42,18 +41,17 @@
4241
"@testing-library/jest-dom": "^5.11.5",
4342
"@testing-library/react": "^11.2.7",
4443
"@testing-library/user-event": "^12.2.0",
45-
"@types/classnames": "^2.2.11",
4644
"@types/jest": "^26.0.0",
4745
"@types/material-ui": "^0.21.9",
48-
"@types/node": "^14.14.0",
46+
"@types/node": "^16.6.1",
4947
"@types/react": "^16.9.55",
5048
"@types/react-dom": "^16.9.0",
51-
"@types/styled-components": "^5.1.11",
52-
"@typescript-eslint/eslint-plugin": "^4.28.4",
53-
"@typescript-eslint/parser": "^4.28.4",
49+
"@types/styled-components": "^5.1.12",
50+
"@typescript-eslint/eslint-plugin": "^4.29.2",
51+
"@typescript-eslint/parser": "^4.29.2",
5452
"awesome-typescript-loader": "^5.2.1",
5553
"copy-webpack-plugin": "^6.3.0",
56-
"eslint": "^7.31.0",
54+
"eslint": "^7.32.0",
5755
"eslint-config-prettier": "^8.3.0",
5856
"eslint-plugin-prettier": "^3.4.0",
5957
"eslint-plugin-react": "^7.24.0",
@@ -68,7 +66,7 @@
6866
"react-docgen-typescript-loader": "^3.7.2",
6967
"react-dom": "^16.14.0",
7068
"rimraf": "^3.0.2",
71-
"styled-components": "^5.2.1",
69+
"styled-components": "^5.3.0",
7270
"typescript": "^4.0.5",
7371
"url-loader": "^4.1.1",
7472
"webpack": "4.43.0",

‎src/dataDisplay/Card/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22
import styled from 'styled-components';
3-
import { fade } from '@material-ui/core/styles/colorManipulator';
3+
import { alpha } from '@material-ui/core/styles';
44

55
const StyledCard = styled.div`
66
box-shadow: 1px 2px 10px 0
7-
${({ theme }) => fade(theme.colors.shadow.color, 0.18)};
7+
${({ theme }) => alpha(theme.colors.shadow.color, 0.18)};
88
border-radius: 8px;
99
padding: 24px;
1010
background-color: ${({ theme }) => theme.colors.white};

‎src/dataDisplay/FixedDialog/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import styled from 'styled-components';
3-
import { fade } from '@material-ui/core/styles/colorManipulator';
3+
import { alpha } from '@material-ui/core/styles';
44

55
import { Title, ModalFooterConfirmation } from '../../index';
66

@@ -16,7 +16,7 @@ const Wrapper = styled.div`
1616
background-color: ${({ theme }) => theme.colors.white};
1717
border-radius: 8px;
1818
box-shadow: 1px 2px 10px 0
19-
${({ theme }) => fade(theme.colors.shadow.color, 0.18)};
19+
${({ theme }) => alpha(theme.colors.shadow.color, 0.18)};
2020
2121
'&:focus': {
2222
outline: 'none';

‎src/dataDisplay/Text/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React from 'react';
22
import styled from 'styled-components';
33
import Tooltip from '@material-ui/core/Tooltip';
4-
import { withStyles } from '@material-ui/core/styles';
5-
import { fade } from '@material-ui/core/styles/colorManipulator';
4+
import { withStyles, alpha } from '@material-ui/core/styles';
65

76
import theme, { ThemeTextSize, ThemeColors } from '../../theme';
87

@@ -32,7 +31,7 @@ const StyledTooltip = withStyles(() => ({
3231
tooltip: {
3332
backgroundColor: theme.colors.white,
3433
color: theme.colors.text,
35-
boxShadow: `0px 0px 10px ${fade(theme.colors.shadow.color, 0.2)}`,
34+
boxShadow: `0px 0px 10px ${alpha(theme.colors.shadow.color, 0.2)}`,
3635
},
3736
arrow: {
3837
color: theme.colors.white,

‎src/dataDisplay/Tooltip/index.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import React, { ReactElement } from 'react';
22
import MUITooltip, {
33
TooltipProps as TooltipPropsMui,
44
} from '@material-ui/core/Tooltip';
5-
import { withStyles } from '@material-ui/core/styles';
6-
import { fade } from '@material-ui/core/styles/colorManipulator';
5+
import { withStyles, alpha } from '@material-ui/core/styles';
76

87
import theme, { ThemeColors, ThemeTooltipSize } from '../../theme';
98

@@ -60,7 +59,7 @@ const customTooltip = ({
6059
backgroundColor: backgroundColor
6160
? (theme.colors[backgroundColor] as string)
6261
: theme.colors.overlay.color,
63-
boxShadow: `1px 2px 10px ${fade(theme.colors.shadow.color, 0.18)}`,
62+
boxShadow: `1px 2px 10px ${alpha(theme.colors.shadow.color, 0.18)}`,
6463
border: getBorderBySize(size),
6564
color: textColor
6665
? (theme.colors[textColor] as string)
@@ -78,7 +77,7 @@ const customTooltip = ({
7877
border: 'none',
7978

8079
'&::before': {
81-
boxShadow: `1px 2px 10px ${fade(theme.colors.shadow.color, 0.18)}`,
80+
boxShadow: `1px 2px 10px ${alpha(theme.colors.shadow.color, 0.18)}`,
8281
},
8382
},
8483
}))(MUITooltip);

‎src/inputs/Button/index.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { ReactElement, ReactNode, HTMLAttributes } from 'react';
22
import ButtonMUI, {
33
ButtonProps as ButtonMUIProps,
44
} from '@material-ui/core/Button';
5-
import { fade } from '@material-ui/core/styles/colorManipulator';
5+
import { alpha } from '@material-ui/core/styles';
66

77
import styled, {
88
css,
@@ -55,7 +55,7 @@ const customStyles: {
5555
contained: css`
5656
color: ${({ theme }) => theme.colors.white};
5757
background-color: ${({ theme }) => theme.colors.primary};
58-
box-shadow: 1px 2px 10px ${fade(theme.colors.shadow.color, 0.18)};
58+
box-shadow: 1px 2px 10px ${alpha(theme.colors.shadow.color, 0.18)};
5959
6060
&:hover {
6161
background-color: ${({ theme }) => theme.colors.primaryHover};
@@ -106,7 +106,7 @@ const customStyles: {
106106
contained: css`
107107
color: ${({ theme }) => theme.colors.white};
108108
background-color: ${({ theme }) => theme.colors.secondary};
109-
box-shadow: 1px 2px 10px ${fade(theme.colors.shadow.color, 0.18)};
109+
box-shadow: 1px 2px 10px ${alpha(theme.colors.shadow.color, 0.18)};
110110
111111
path.icon-color {
112112
color: ${({ theme }) => theme.colors.white};
@@ -164,7 +164,7 @@ const customStyles: {
164164
contained: css`
165165
color: ${({ theme }) => theme.colors.white};
166166
background-color: ${({ theme }) => theme.colors.error};
167-
box-shadow: 1px 2px 10px ${fade(theme.colors.shadow.color, 0.18)};
167+
box-shadow: 1px 2px 10px ${alpha(theme.colors.shadow.color, 0.18)};
168168
169169
&:hover {
170170
background-color: ${({ theme }) => theme.colors.errorHover};

‎src/inputs/Switch/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import SwitchMui from '@material-ui/core/Switch';
33
import styled from 'styled-components';
4-
import { fade } from '@material-ui/core/styles/colorManipulator';
4+
import { alpha } from '@material-ui/core/styles';
55

66
const StyledSwitch = styled(({ ...rest }) => <SwitchMui {...rest} />)`
77
&& {
@@ -12,7 +12,7 @@ const StyledSwitch = styled(({ ...rest }) => <SwitchMui {...rest} />)`
1212
}
1313
1414
.MuiSwitch-colorSecondary.Mui-checked:hover {
15-
background-color: ${({ theme }) => fade(theme.colors.primary, 0.08)};
15+
background-color: ${({ theme }) => alpha(theme.colors.primary, 0.08)};
1616
}
1717
1818
.Mui-checked + .MuiSwitch-track {

‎src/utils/CopyToClipboardBtn/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,9 @@ const CopyToClipboardBtn = ({
5353
copy();
5454
};
5555

56-
const onButtonBlur = (): number =>
56+
const onButtonBlur = (): void => {
5757
setTimeout((): void => setClicked(false), 300);
58+
};
5859

5960
return (
6061
<StyledButton

‎src/utils/modals/GenericModal/index.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
import React from 'react';
22
import Modal from '@material-ui/core/Modal';
33
import { makeStyles } from '@material-ui/core/styles';
4-
import { fade } from '@material-ui/core/styles/colorManipulator';
4+
import { alpha } from '@material-ui/core/styles';
55
import styled from 'styled-components';
6-
import cn from 'classnames';
76
import Media from 'react-media';
87

98
import theme from '../../../theme';
@@ -66,7 +65,7 @@ const useStyles = makeStyles({
6665
alignItems: 'center',
6766
justifyContent: 'center',
6867
overflowY: 'scroll',
69-
background: fade(theme.colors.overlay.color, theme.colors.overlay.opacity),
68+
background: alpha(theme.colors.overlay.color, theme.colors.overlay.opacity),
7069
},
7170

7271
paper: {
@@ -99,7 +98,7 @@ const GenericModal = ({
9998

10099
return (
101100
<Modal open className={classes.modal}>
102-
<div className={cn(classes.paper)}>
101+
<div className={classes.paper}>
103102
<TitleSection>
104103
<Title size="xs" withoutMargin>
105104
{title}

‎tests/__snapshots__/storybook.test.js.snap‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = `
200200
</div>
201201
</div>
202202
<div
203-
className="MuiCollapse-container MuiCollapse-hidden"
203+
className="MuiCollapse-root MuiCollapse-hidden"
204204
style={
205205
Object {
206206
"minHeight": "0px",
@@ -330,7 +330,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = `
330330
</div>
331331
</div>
332332
<div
333-
className="MuiCollapse-container MuiCollapse-hidden"
333+
className="MuiCollapse-root MuiCollapse-hidden"
334334
style={
335335
Object {
336336
"minHeight": "0px",
@@ -460,7 +460,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = `
460460
</div>
461461
</div>
462462
<div
463-
className="MuiCollapse-container MuiCollapse-hidden"
463+
className="MuiCollapse-root MuiCollapse-hidden"
464464
style={
465465
Object {
466466
"minHeight": "0px",
@@ -694,7 +694,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `
694694
</div>
695695
</div>
696696
<div
697-
className="MuiCollapse-container MuiCollapse-hidden"
697+
className="MuiCollapse-root MuiCollapse-hidden"
698698
style={
699699
Object {
700700
"minHeight": "0px",
@@ -824,7 +824,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `
824824
</div>
825825
</div>
826826
<div
827-
className="MuiCollapse-container MuiCollapse-hidden"
827+
className="MuiCollapse-root MuiCollapse-hidden"
828828
style={
829829
Object {
830830
"minHeight": "0px",
@@ -954,7 +954,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `
954954
</div>
955955
</div>
956956
<div
957-
className="MuiCollapse-container MuiCollapse-hidden"
957+
className="MuiCollapse-root MuiCollapse-hidden"
958958
style={
959959
Object {
960960
"minHeight": "0px",
@@ -11934,7 +11934,7 @@ exports[`Storyshots Inputs/TextField End Adornment 1`] = `
1193411934
value=""
1193511935
/>
1193611936
<div
11937-
className="MuiInputAdornment-root MuiInputAdornment-filled MuiInputAdornment-positionEnd"
11937+
className="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-filled"
1193811938
>
1193911939
<span
1194011940
className="c1"
@@ -12268,7 +12268,7 @@ exports[`Storyshots Inputs/TextField Start Adornment 1`] = `
1226812268
onClick={[Function]}
1226912269
>
1227012270
<div
12271-
className="MuiInputAdornment-root MuiInputAdornment-filled MuiInputAdornment-positionStart"
12271+
className="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-filled"
1227212272
>
1227312273
<span
1227412274
className="c1"

0 commit comments

Comments
 (0)