polishing

mui · Jan 10, 2020 · 313505b · 313505b
1 parent 467807c
commit 313505b
Show file tree

Hide file tree

Showing 10 changed files with 75 additions and 368 deletions.
diff --git a/docs/src/pages/customization/default-theme/DefaultTheme.js b/docs/src/pages/customization/default-theme/DefaultTheme.js
@@ -135,7 +135,7 @@ ObjectEntry.propTypes = {
 };
 
 function Inspector(props) {
-  const { data, expandPaths } = props;
+  const { data, expandPaths, ...other } = props;
 
   const keyPrefix = '$ROOT';
   const defaultExpanded = React.useMemo(() => {
@@ -153,6 +153,7 @@ function Inspector(props) {
       defaultEndIcon={<div style={{ width: 24 }} />}
       defaultExpanded={defaultExpanded}
       defaultExpandIcon={<CollapseIcon />}
+      {...other}
     >
       {Object.keys(data).map(objectKey => {
         return (
@@ -175,14 +176,13 @@ Inspector.propTypes = {
 
 const styles = theme => ({
   root: {
+    width: '100%',
+  },
+  inspector: {
     backgroundColor: '#333',
-    borderRadius: 4,
     color: '#fff',
-    display: 'block',
-    padding: theme.spacing(2),
-    paddingTop: 0,
-    minHeight: theme.spacing(40),
-    width: '100%',
+    borderRadius: theme.shape.borderRadius,
+    padding: theme.spacing(1),
   },
   switch: {
     paddingBottom: theme.spacing(1),
@@ -281,7 +281,7 @@ function DefaultTheme(props) {
         }
         label={t('useDarkTheme')}
       />
-      <Inspector data={data} expandPaths={expandPaths} expandLevel={checked ? 100 : 1} />
+      <Inspector className={classes.inspector} data={data} expandPaths={expandPaths} />
     </div>
   );
 }

diff --git a/docs/src/pages/customization/default-theme/default-theme.md b/docs/src/pages/customization/default-theme/default-theme.md
@@ -6,7 +6,7 @@
 
 Explore the default theme object:
 
-{{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideHeader": true}}
+{{"demo": "pages/customization/default-theme/DefaultTheme.js", "hideHeader": true, "bg": "inline"}}
 
 > Tip: you can play with the documentation theme object in your browser console,
 > as the `theme` variable is exposed on all the documentation pages.

diff --git a/docs/src/pages/customization/palette/DarkTheme.js b/docs/src/pages/customization/palette/DarkTheme.js
@@ -1,42 +1,39 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
-import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 import { makeStyles, ThemeProvider, useTheme, createMuiTheme } from '@material-ui/core/styles';
 
 const useStyles = makeStyles(theme => ({
   root: {
     backgroundColor: theme.palette.background.default,
     color: theme.palette.text.primary,
-    overflow: 'auto',
+    padding: theme.spacing(2),
     [theme.breakpoints.up('md')]: {
       padding: theme.spacing(3),
     },
   },
-  paper: {
-    padding: theme.spacing(3),
+  group: {
+    marginTop: theme.spacing(3),
   },
   color: {
     display: 'flex',
     alignItems: 'center',
     '& div:first-of-type': {
       width: theme.spacing(6),
       height: theme.spacing(6),
+      flexShrink: 0,
       marginRight: theme.spacing(1),
       borderRadius: theme.shape.borderRadius,
     },
   },
-  group: {
-    marginTop: theme.spacing(3),
-  },
 }));
 
 function Demo() {
   const classes = useStyles();
   const theme = useTheme();
 
   const item = (color, name, expanded = false, border = false) => (
-    <Grid item xs={12} md={expanded ? 8 : 4} className={classes.color}>
+    <Grid item xs={12} sm={6} md={expanded ? 8 : 4} className={classes.color}>
       <div
         style={{
           backgroundColor: color,
@@ -54,50 +51,40 @@ function Demo() {
 
   return (
     <div className={classes.root}>
-      <Paper className={classes.paper}>
-        <Typography gutterBottom>Typography</Typography>
-        <Grid container spacing={2}>
-          {item(theme.palette.text.primary, 'palette.text.primary')}
-          {item(theme.palette.text.secondary, 'palette.text.secondary')}
-          {item(theme.palette.text.disabled, 'palette.text.disabled')}
-        </Grid>
-        <Typography gutterBottom className={classes.group}>
-          Buttons
-        </Typography>
-        <Grid container spacing={2}>
-          {item(theme.palette.action.active, 'palette.action.active')}
-          {item(theme.palette.action.hover, 'palette.action.hover')}
-          {item(theme.palette.action.selected, 'palette.action.selected')}
-        </Grid>
-        <Grid container spacing={2}>
-          {item(theme.palette.action.disabled, 'palette.action.disabled')}
-          {item(theme.palette.action.disabledBackground, 'palette.action.disabledBackground', true)}
-        </Grid>
-        <Typography gutterBottom className={classes.group}>
-          Background
-        </Typography>
-        <Grid container spacing={2}>
-          {item(theme.palette.background.default, 'palette.background.default', false)}
-          {item(theme.palette.background.paper, 'palette.background.paper', false, true)}
-        </Grid>
-        <Typography gutterBottom className={classes.group}>
-          Divider
-        </Typography>
-        <Grid container spacing={2}>
-          {item(theme.palette.divider, 'palette.divider')}
-        </Grid>
-      </Paper>
+      <Typography gutterBottom>Typography</Typography>
+      <Grid container spacing={1}>
+        {item(theme.palette.text.primary, 'palette.text.primary')}
+        {item(theme.palette.text.secondary, 'palette.text.secondary')}
+        {item(theme.palette.text.disabled, 'palette.text.disabled')}
+      </Grid>
+      <Typography gutterBottom className={classes.group}>
+        Buttons
+      </Typography>
+      <Grid container spacing={1}>
+        {item(theme.palette.action.active, 'palette.action.active')}
+        {item(theme.palette.action.hover, 'palette.action.hover')}
+        {item(theme.palette.action.selected, 'palette.action.selected')}
+        {item(theme.palette.action.disabled, 'palette.action.disabled')}
+        {item(theme.palette.action.disabledBackground, 'palette.action.disabledBackground', true)}
+      </Grid>
+      <Typography gutterBottom className={classes.group}>
+        Background
+      </Typography>
+      <Grid container spacing={1}>
+        {item(theme.palette.background.default, 'palette.background.default', false, true)}
+        {item(theme.palette.background.paper, 'palette.background.paper')}
+      </Grid>
+      <Typography gutterBottom className={classes.group}>
+        Divider
+      </Typography>
+      <Grid container spacing={1}>
+        {item(theme.palette.divider, 'palette.divider')}
+      </Grid>
     </div>
   );
 }
 
-const lightTheme = createMuiTheme({
-  palette: {
-    // This is the default, so only included for comparison.
-    type: 'light',
-  },
-});
-
+const lightTheme = createMuiTheme();
 const darkTheme = createMuiTheme({
   palette: {
     // Switching the dark mode on is a single property value change.

diff --git a/docs/src/pages/customization/palette/DarkTheme.tsx b/docs/src/pages/customization/palette/DarkTheme.tsx