[docs] Fix small issues I have noticed (#7591)

mui · Jul 29, 2017 · b7d15bd · b7d15bd
1 parent c60566b
commit b7d15bd
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 55 deletions.
diff --git a/docs/src/components/MarkdownElement.js b/docs/src/components/MarkdownElement.js
@@ -112,6 +112,8 @@ const styleSheet = createStyleSheet('MarkdownElement', theme => ({
     },
     '& table': {
       width: '100%',
+      display: 'block',
+      overflowX: 'auto',
       borderCollapse: 'collapse',
       borderSpacing: 0,
       overflow: 'hidden',
@@ -128,7 +130,7 @@ const styleSheet = createStyleSheet('MarkdownElement', theme => ({
     },
     '& td': {
       borderBottom: `1px solid ${theme.palette.text.lightDivider}`,
-      padding: `${theme.spacing.unit}px ${theme.spacing.unit * 8}px ${theme.spacing.unit}px ${theme
+      padding: `${theme.spacing.unit}px ${theme.spacing.unit * 5}px ${theme.spacing.unit}px ${theme
         .spacing.unit * 3}px`,
       textAlign: 'left',
     },
@@ -145,7 +147,7 @@ const styleSheet = createStyleSheet('MarkdownElement', theme => ({
     '& th': {
       whiteSpace: 'pre',
       borderBottom: `1px solid ${theme.palette.text.lightDivider}`,
-      padding: '0 56px 0 24px',
+      padding: `0 ${theme.spacing.unit * 5}px 0 ${theme.spacing.unit * 3}px`,
       textAlign: 'left',
     },
     '& th:last-child': {

diff --git a/docs/src/pages/Home.js b/docs/src/pages/Home.js
@@ -8,38 +8,43 @@ import Typography from 'material-ui/Typography';
 import Button from 'material-ui/Button';
 import muiLogo from 'docs/src/assets/images/material-ui-logo.svg';
 
-const styleSheet = createStyleSheet('Home', theme => {
-  return {
-    root: {
-      flex: '1 0 100%',
+const styleSheet = createStyleSheet(theme => ({
+  root: {
+    flex: '1 0 100%',
+  },
+  hero: {
+    minHeight: '100vh', // Makes the hero full height until we get some more content.
+    flex: '0 0 auto',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor:
+      theme.palette.type === 'light' ? theme.palette.primary[500] : theme.palette.primary[800],
+    color: theme.palette.getContrastText(theme.palette.primary[500]),
+  },
+  content: {
+    paddingTop: theme.spacing.unit * 8,
+    paddingBottom: theme.spacing.unit * 8,
+    textAlign: 'center',
+    [theme.breakpoints.up('sm')]: {
+      paddingTop: theme.spacing.unit * 16,
+      paddingBottom: theme.spacing.unit * 16,
     },
-    hero: {
-      minHeight: '100vh', // Makes the hero full height until we get some more content.
-      flex: '0 0 auto',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      backgroundColor: theme.palette.primary[500],
-      color: theme.palette.getContrastText(theme.palette.primary[500]),
-    },
-    content: {
-      padding: '60px 30px',
-      textAlign: 'center',
-      [theme.breakpoints.up('sm')]: {
-        padding: '120px 30px',
-      },
-    },
-    button: {
-      marginTop: 20,
-    },
-    logo: {
-      margin: '20px -40%',
-      width: '100%',
-      height: '40vw',
-      maxHeight: 230,
-    },
-  };
-});
+  },
+  text: {
+    paddingLeft: theme.spacing.unit * 4,
+    paddingRight: theme.spacing.unit * 4,
+  },
+  button: {
+    marginTop: 20,
+  },
+  logo: {
+    margin: '20px 0',
+    width: '100%',
+    height: '40vw',
+    maxHeight: 230,
+  },
+}));
 
 function Home(props) {
   const classes = props.classes;
@@ -49,20 +54,22 @@ function Home(props) {
       <div className={classes.hero}>
         <div className={classes.content}>
           <img src={muiLogo} alt="Material-UI Logo" className={classes.logo} />
-          <Typography type="display2" component="h1" color="inherit">
-            {'Material-UI'}
-          </Typography>
-          <Typography type="subheading" component="h2" color="inherit">
-            {"A React component library implementing Google's Material Design"}
-          </Typography>
-          <Button
-            component={Link}
-            className={classes.button}
-            raised
-            to="/getting-started/installation"
-          >
-            {'Get Started'}
-          </Button>
+          <div className={classes.text}>
+            <Typography type="display2" component="h1" color="inherit">
+              {'Material-UI'}
+            </Typography>
+            <Typography type="subheading" component="h2" color="inherit">
+              {"A React component library implementing Google's Material Design"}
+            </Typography>
+            <Button
+              component={Link}
+              className={classes.button}
+              raised
+              to="/getting-started/installation"
+            >
+              {'Get Started'}
+            </Button>
+          </div>
         </div>
       </div>
     </div>

diff --git a/docs/src/pages/component-api/Avatar/Avatar.md b/docs/src/pages/component-api/Avatar/Avatar.md
@@ -7,7 +7,7 @@
 ## Props
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| alt | string | '' | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. |
+| alt | string |  | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. |
 | children | Element |  | Used to render icon or text elements inside the Avatar. `src` and `alt` props will not be used and no `img` will be rendered by default.<br>This can be an element, or just a string. |
 | classes | Object |  | Useful to extend the style applied to components. |
 | component | union:&nbsp;string<br>&nbsp;Function<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |

diff --git a/docs/src/pages/component-api/Progress/LinearProgress.md b/docs/src/pages/component-api/Progress/LinearProgress.md
@@ -21,13 +21,14 @@ You can overrides all the class names injected by Material-UI thanks to the `cla
 This property accepts the following keys:
 - `root`
 - `primaryColor`
-- `accentColor`
-- `primaryBar`
+- `primaryColorBar`
 - `primaryDashed`
-- `primaryBufferBar2`
-- `accentBar`
+- `accentColor`
+- `accentColorBar`
 - `accentDashed`
-- `accentBufferBar2`
+- `bar`
+- `dashed`
+- `bufferBar2`
 - `rootBuffer`
 - `rootQuery`
 - `indeterminateBar1`

diff --git a/docs/src/pages/component-api/styles/MuiThemeProvider.md b/docs/src/pages/component-api/styles/MuiThemeProvider.md
@@ -8,6 +8,7 @@
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span style="color: #31a148">children *</span> | element |  | You can only provide a single element. |
+| sheetsManager | object |  | The sheetsManager is used in order to only inject once a style sheet in a page for a given theme object. You should provide on the server. |
 | <span style="color: #31a148">theme *</span> | union:&nbsp;object<br>&nbsp;func<br> |  | A theme object. |
 
 Any other properties supplied will be spread to the root element.

diff --git a/src/Avatar/Avatar.js b/src/Avatar/Avatar.js
@@ -34,7 +34,6 @@ export const styleSheet = createStyleSheet('MuiAvatar', theme => ({
 }));
 
 type DefaultProps = {
-  alt: string,
   component: string,
 };
 
@@ -142,7 +141,6 @@ function Avatar(props: Props) {
 }
 
 Avatar.defaultProps = {
-  alt: '',
   component: 'div',
 };