Skip to content

Commit 6a6ef50

Browse files
oliviertassinarioliviertassinari
committed
[docs] Increase the contrast of the demos
1 parent f0bfa93 commit 6a6ef50

File tree

97 files changed

+848
-1015
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

97 files changed

+848
-1015
lines changed

‎docs/src/modules/components/Demo.js‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
44
import clsx from 'clsx';
55
import copy from 'clipboard-copy';
66
import { useSelector, useDispatch } from 'react-redux';
7-
import { withStyles } from '@material-ui/core/styles';
7+
import { withStyles, fade } from '@material-ui/core/styles';
88
import IconButton from '@material-ui/core/IconButton';
99
import useMediaQuery from '@material-ui/core/useMediaQuery';
1010
import Collapse from '@material-ui/core/Collapse';
@@ -54,14 +54,18 @@ const styles = theme => ({
5454
outline: 0,
5555
margin: 'auto',
5656
borderRadius: theme.shape.borderRadius,
57-
backgroundColor: theme.palette.background.level2,
5857
display: 'flex',
5958
justifyContent: 'center',
59+
border: `1px solid ${fade(theme.palette.action.active, 0.12)}`,
6060
padding: 20,
6161
[theme.breakpoints.up('sm')]: {
6262
padding: theme.spacing(3),
6363
},
6464
},
65+
demoBg: {
66+
border: 'none',
67+
backgroundColor: theme.palette.background.level2,
68+
},
6569
demoHiddenHeader: {
6670
paddingTop: theme.spacing(2),
6771
[theme.breakpoints.up('sm')]: {
@@ -133,7 +137,6 @@ function Demo(props) {
133137
const dispatch = useDispatch();
134138
const t = useSelector(state => state.options.t);
135139
const codeVariant = useSelector(state => state.options.codeVariant);
136-
137140
const demoData = getDemoData(codeVariant, demo, githubLocation);
138141

139142
const [sourceHintSeen, setSourceHintSeen] = React.useState(false);
@@ -241,6 +244,10 @@ function Demo(props) {
241244
[demoOptions.height, demoOptions.maxWidth],
242245
);
243246

247+
if (demoOptions.iframe) {
248+
demoOptions.bg = true;
249+
}
250+
244251
const createHandleCodeSourceLink = anchor => async () => {
245252
try {
246253
await copy(`${window.location.href.split('#')[0]}#${anchor}`);
@@ -266,9 +273,12 @@ function Demo(props) {
266273

267274
const match = useMediaQuery(theme => theme.breakpoints.up('sm'));
268275

269-
const jsx = getJsxPreview(demoData.raw || '', demoOptions.defaultCodeOpen);
276+
const jsx = getJsxPreview(demoData.raw || '');
270277
const showPreview =
271-
!demoOptions.hideHeader && jsx !== demoData.raw && jsx.split(/\n/).length <= 20;
278+
!demoOptions.hideHeader &&
279+
demoOptions.defaultCodeOpen !== false &&
280+
jsx !== demoData.raw &&
281+
jsx.split(/\n/).length <= 15;
272282

273283
let showCodeLabel;
274284
if (codeOpen) {
@@ -282,6 +292,7 @@ function Demo(props) {
282292
<div
283293
className={clsx(classes.demo, {
284294
[classes.demoHiddenHeader]: demoOptions.hideHeader,
295+
[classes.demoBg]: demoOptions.bg,
285296
})}
286297
tabIndex={-1}
287298
onMouseEnter={handleDemoHover}

‎docs/src/modules/utils/getJsxPreview.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default function getJsxPreview(code, defaultCodeOpen) {
1+
export default function getJsxPreview(code) {
22
/* The regex matches the content of the return statement in the default export,
33
* stripping any wrapper divs:
44
*
@@ -14,7 +14,7 @@ export default function getJsxPreview(code, defaultCodeOpen) {
1414
);
1515
// Just the match, otherwise the full source if either no match or preview disabled,
1616
// so as not to break the Collapse transition.
17-
jsx = jsx && defaultCodeOpen !== false ? jsx[1] : code;
17+
jsx = jsx ? jsx[1] : code;
1818

1919
// Remove leading spaces from each line
2020
return jsx.split(/\n/).reduce(

‎docs/src/modules/utils/getJsxPreview.test.js‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -72,23 +72,6 @@ export function UseWidth() {
7272
return ( <MyComponent />;
7373
}
7474
75-
`);
76-
});
77-
it('should return all if defaultCodeOpen is false', () => {
78-
expect(
79-
getJsxPreview(
80-
`
81-
export default function UseWidth() {
82-
return <MyComponent />;
83-
}
84-
`,
85-
false,
86-
),
87-
).to.equal(`
88-
export default function UseWidth() {
89-
return <MyComponent />;
90-
}
91-
9275
`);
9376
});
9477
});

‎docs/src/pages/components/avatars/IconAvatars.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,38 +5,38 @@ import Avatar from '@material-ui/core/Avatar';
55
import FolderIcon from '@material-ui/icons/Folder';
66
import PageviewIcon from '@material-ui/icons/Pageview';
77
import AssignmentIcon from '@material-ui/icons/Assignment';
8-
import Grid from '@material-ui/core/Grid';
98

10-
const useStyles = makeStyles({
11-
avatar: {
12-
margin: 10,
9+
const useStyles = makeStyles(theme => ({
10+
root: {
11+
display: 'flex',
12+
'& > *': {
13+
margin: theme.spacing(1),
14+
},
1315
},
14-
pinkAvatar: {
15-
margin: 10,
16+
pink: {
1617
color: '#fff',
1718
backgroundColor: pink[500],
1819
},
19-
greenAvatar: {
20-
margin: 10,
20+
green: {
2121
color: '#fff',
2222
backgroundColor: green[500],
2323
},
24-
});
24+
}));
2525

2626
export default function IconAvatars() {
2727
const classes = useStyles();
2828

2929
return (
30-
<Grid container justify="center" alignItems="center">
31-
<Avatar className={classes.avatar}>
30+
<div className={classes.root}>
31+
<Avatar>
3232
<FolderIcon />
3333
</Avatar>
34-
<Avatar className={classes.pinkAvatar}>
34+
<Avatar className={classes.pink}>
3535
<PageviewIcon />
3636
</Avatar>
37-
<Avatar className={classes.greenAvatar}>
37+
<Avatar className={classes.green}>
3838
<AssignmentIcon />
3939
</Avatar>
40-
</Grid>
40+
</div>
4141
);
4242
}

‎docs/src/pages/components/avatars/IconAvatars.tsx‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,44 @@
11
import React from 'react';
2-
import { makeStyles } from '@material-ui/core/styles';
2+
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
33
import { green, pink } from '@material-ui/core/colors';
44
import Avatar from '@material-ui/core/Avatar';
55
import FolderIcon from '@material-ui/icons/Folder';
66
import PageviewIcon from '@material-ui/icons/Pageview';
77
import AssignmentIcon from '@material-ui/icons/Assignment';
8-
import Grid from '@material-ui/core/Grid';
98

10-
const useStyles = makeStyles({
11-
avatar: {
12-
margin: 10,
13-
},
14-
pinkAvatar: {
15-
margin: 10,
16-
color: '#fff',
17-
backgroundColor: pink[500],
18-
},
19-
greenAvatar: {
20-
margin: 10,
21-
color: '#fff',
22-
backgroundColor: green[500],
23-
},
24-
});
9+
const useStyles = makeStyles((theme: Theme) =>
10+
createStyles({
11+
root: {
12+
display: 'flex',
13+
'& > *': {
14+
margin: theme.spacing(1),
15+
},
16+
},
17+
pink: {
18+
color: '#fff',
19+
backgroundColor: pink[500],
20+
},
21+
green: {
22+
color: '#fff',
23+
backgroundColor: green[500],
24+
},
25+
}),
26+
);
2527

2628
export default function IconAvatars() {
2729
const classes = useStyles();
2830

2931
return (
30-
<Grid container justify="center" alignItems="center">
31-
<Avatar className={classes.avatar}>
32+
<div className={classes.root}>
33+
<Avatar>
3234
<FolderIcon />
3335
</Avatar>
34-
<Avatar className={classes.pinkAvatar}>
36+
<Avatar className={classes.pink}>
3537
<PageviewIcon />
3638
</Avatar>
37-
<Avatar className={classes.greenAvatar}>
39+
<Avatar className={classes.green}>
3840
<AssignmentIcon />
3941
</Avatar>
40-
</Grid>
42+
</div>
4143
);
4244
}

‎docs/src/pages/components/avatars/ImageAvatars.js‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
import React from 'react';
22
import { makeStyles } from '@material-ui/core/styles';
33
import Avatar from '@material-ui/core/Avatar';
4-
import Grid from '@material-ui/core/Grid';
54

6-
const useStyles = makeStyles({
7-
avatar: {
8-
margin: 10,
5+
const useStyles = makeStyles(theme => ({
6+
root: {
7+
display: 'flex',
8+
'& > *': {
9+
margin: theme.spacing(1),
10+
},
911
},
1012
bigAvatar: {
11-
margin: 10,
1213
width: 60,
1314
height: 60,
1415
},
15-
});
16+
}));
1617

1718
export default function ImageAvatars() {
1819
const classes = useStyles();
1920

2021
return (
21-
<Grid container justify="center" alignItems="center">
22-
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.avatar} />
22+
<div className={classes.root}>
23+
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
2324
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.bigAvatar} />
24-
</Grid>
25+
</div>
2526
);
2627
}

‎docs/src/pages/components/avatars/ImageAvatars.tsx‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,29 @@
11
import React from 'react';
2-
import { makeStyles } from '@material-ui/core/styles';
2+
import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
33
import Avatar from '@material-ui/core/Avatar';
4-
import Grid from '@material-ui/core/Grid';
54

6-
const useStyles = makeStyles({
7-
avatar: {
8-
margin: 10,
9-
},
10-
bigAvatar: {
11-
margin: 10,
12-
width: 60,
13-
height: 60,
14-
},
15-
});
5+
const useStyles = makeStyles((theme: Theme) =>
6+
createStyles({
7+
root: {
8+
display: 'flex',
9+
'& > *': {
10+
margin: theme.spacing(1),
11+
},
12+
},
13+
bigAvatar: {
14+
width: 60,
15+
height: 60,
16+
},
17+
}),
18+
);
1619

1720
export default function ImageAvatars() {
1821
const classes = useStyles();
1922

2023
return (
21-
<Grid container justify="center" alignItems="center">
22-
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.avatar} />
24+
<div className={classes.root}>
25+
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
2326
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.bigAvatar} />
24-
</Grid>
27+
</div>
2528
);
2629
}

‎docs/src/pages/components/avatars/LetterAvatars.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,32 @@ import React from 'react';
22
import { makeStyles } from '@material-ui/core/styles';
33
import Avatar from '@material-ui/core/Avatar';
44
import { deepOrange, deepPurple } from '@material-ui/core/colors';
5-
import Grid from '@material-ui/core/Grid';
65

7-
const useStyles = makeStyles({
8-
avatar: {
9-
margin: 10,
6+
const useStyles = makeStyles(theme => ({
7+
root: {
8+
display: 'flex',
9+
'& > *': {
10+
margin: theme.spacing(1),
11+
},
1012
},
11-
orangeAvatar: {
12-
margin: 10,
13+
orange: {
1314
color: '#fff',
1415
backgroundColor: deepOrange[500],
1516
},
16-
purpleAvatar: {
17-
margin: 10,
17+
purple: {
1818
color: '#fff',
1919
backgroundColor: deepPurple[500],
2020
},
21-
});
21+
}));
2222

2323
export default function LetterAvatars() {
2424
const classes = useStyles();
2525

2626
return (
27-
<Grid container justify="center" alignItems="center">
28-
<Avatar className={classes.avatar}>H</Avatar>
29-
<Avatar className={classes.orangeAvatar}>N</Avatar>
30-
<Avatar className={classes.purpleAvatar}>OP</Avatar>
31-
</Grid>
27+
<div className={classes.root}>
28+
<Avatar>H</Avatar>
29+
<Avatar className={classes.orange}>N</Avatar>
30+
<Avatar className={classes.purple}>OP</Avatar>
31+
</div>
3232
);
3333
}

0 commit comments

Comments
 (0)