[docs] Improve readability

docs/src/modules/components/AppDrawer.js

@@ -3,7 +3,6 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
 import List from 'material-ui/List';
-import Toolbar from 'material-ui/Toolbar';
 import Drawer from 'material-ui/Drawer';
 import Typography from 'material-ui/Typography';
 import Divider from 'material-ui/Divider';
@@ -29,6 +28,9 @@ const styles = theme => ({
     display: 'flex',
   },
   toolbar: {
+    ...theme.mixins.toolbar,
+    paddingLeft: theme.spacing.unit * 3,
+    display: 'flex',
     flexGrow: 1,
     flexDirection: 'column',
     alignItems: 'flex-start',
@@ -88,7 +90,7 @@ function AppDrawer(props, context) {
   const drawer = (
     <div className={classes.nav}>
       <div className={classes.toolbarIe11}>
-        <Toolbar className={classes.toolbar}>
+        <div className={classes.toolbar}>
           <Link className={classes.title} href="/" onClick={onClose}>
             <Typography variant="title" color="inherit">
               Material-UI
@@ -102,9 +104,9 @@ function AppDrawer(props, context) {
               <Typography variant="caption">{`v${process.env.MATERIAL_UI_VERSION}`}</Typography>
             </Link>
           ) : null}
-          <Divider absolute />
-        </Toolbar>
+        </div>
       </div>
+      <Divider />
       {renderNavItems({ props, pages: context.pages, activePage: context.activePage, depth: 0 })}
     </div>
   );

docs/src/modules/components/AppDrawerNavItem.js

@@ -1,40 +1,32 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Link from 'docs/src/modules/components/Link';
-import classNames from 'classnames';
 import { withStyles } from 'material-ui/styles';
 import { ListItem } from 'material-ui/List';
 import Button from 'material-ui/Button';
 import Collapse from 'material-ui/transitions/Collapse';
 
 const styles = theme => ({
-  button: theme.mixins.gutters({
-    borderRadius: 0,
-    justifyContent: 'flex-start',
-    textTransform: 'none',
-    width: '100%',
-    transition: theme.transitions.create('background-color', {
-      duration: theme.transitions.duration.shortest,
-    }),
-    '&:hover': {
-      textDecoration: 'none',
-    },
-  }),
   item: {
-    ...theme.typography.body2,
     display: 'block',
     paddingTop: 0,
     paddingBottom: 0,
   },
-  leaf: {
-    fontWeight: theme.typography.fontWeightRegular,
+  itemLeaf: {
     display: 'flex',
     paddingTop: 0,
     paddingBottom: 0,
   },
-  leafButton: {
+  button: {
+    justifyContent: 'flex-start',
+    textTransform: 'none',
+    width: '100%',
+  },
+  buttonLeaf: {
+    justifyContent: 'flex-start',
+    textTransform: 'none',
+    width: '100%',
     color: theme.palette.text.secondary,
-    fontSize: theme.typography.pxToRem(13),
   },
   active: {
     color: theme.palette.text.primary,
@@ -74,12 +66,12 @@ class AppDrawerNavItem extends React.Component {
 
     if (href) {
       return (
-        <ListItem className={classes.leaf} disableGutters {...other}>
+        <ListItem className={classes.itemLeaf} disableGutters {...other}>
           <Button
             component={props => (
               <Link variant="button" activeClassName={classes.active} href={href} {...props} />
             )}
-            className={classNames(classes.button, classes.leafButton)}
+            className={classes.buttonLeaf}
             disableRipple
             onClick={onClick}
             style={style}

docs/src/modules/components/MarkdownElement.js

@@ -163,14 +163,31 @@ const styles = theme => ({
       borderCollapse: 'collapse',
       borderSpacing: 0,
       overflow: 'hidden',
+      '& .prop-name': {
+        fontSize: 13,
+        fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace',
+      },
+      '& .required': {
+        color: theme.palette.type === 'light' ? '#008900' : '#65a665',
+      },
+      '& .prop-type': {
+        fontSize: 13,
+        fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace',
+        color: theme.palette.type === 'light' ? '#a65e97' : '#bd86b0',
+      },
+      '& .prop-default': {
+        fontSize: 13,
+        fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace',
+        borderBottom: `1px dotted ${theme.palette.text.hint}`,
+      },
     },
     '& thead': {
-      fontSize: 13,
+      fontSize: 14,
       fontWeight: theme.typography.fontWeightMedium,
       color: theme.palette.text.secondary,
     },
     '& tbody': {
-      fontSize: 13,
+      fontSize: 14,
       lineHeight: 1.5,
       color: theme.palette.text.primary,
     },

docs/src/modules/utils/generateMarkdown.js

@@ -170,11 +170,15 @@ function generateProps(reactAPI) {
     let defaultValue = '';
 
     if (prop.defaultValue) {
-      defaultValue = escapeCell(prop.defaultValue.value.replace(/\n/g, ''));
+      defaultValue = `<span class="prop-default">${escapeCell(
+        prop.defaultValue.value.replace(/\n/g, ''),
+      )}</span>`;
     }
 
     if (prop.required) {
-      propRaw = `<span style="color: #31a148">${propRaw}\u00a0*</span>`;
+      propRaw = `<span class="prop-name required">${propRaw}\u00a0*</span>`;
+    } else {
+      propRaw = `<span class="prop-name">${propRaw}</span>`;
     }
 
     if (prop.type.name === 'custom') {
@@ -183,7 +187,7 @@ function generateProps(reactAPI) {
       }
     }
 
-    textProps += `| ${propRaw} | ${generatePropType(
+    textProps += `| ${propRaw} | <span class="prop-type">${generatePropType(
       prop.type,
     )} | ${defaultValue} | ${description} |\n`;
 

pages/api/app-bar.md

@@ -12,10 +12,10 @@ filename: /src/AppBar/AppBar.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| color | enum:&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'default'<br> | 'primary' | The color of the component. It supports those theme colors that make sense for this component. |
-| position | enum:&nbsp;'fixed'&nbsp;&#124;<br>&nbsp;'absolute'&nbsp;&#124;<br>&nbsp;'sticky'&nbsp;&#124;<br>&nbsp;'static'<br> | 'fixed' | The positioning type. The behavior of the different options is described [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). Note: `sticky` is not universally supported and will fall back to `static` when unavailable. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'inherit'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'default'<br> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">position</span> | <span class="prop-type">enum:&nbsp;'fixed'&nbsp;&#124;<br>&nbsp;'absolute'&nbsp;&#124;<br>&nbsp;'sticky'&nbsp;&#124;<br>&nbsp;'static'<br> | <span class="prop-default">'fixed'</span> | The positioning type. The behavior of the different options is described [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). Note: `sticky` is not universally supported and will fall back to `static` when unavailable. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/avatar.md

@@ -12,14 +12,14 @@ filename: /src/Avatar/Avatar.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| alt | string |  | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. |
-| children | node |  | 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&nbsp;&#124;<br>&nbsp;func<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
-| imgProps | object |  | Properties applied to the `img` element when the component is used to display an image. |
-| sizes | string |  | The `sizes` attribute for the `img` element. |
-| src | string |  | The `src` attribute for the `img` element. |
-| srcSet | string |  | The `srcSet` attribute for the `img` element. |
+| <span class="prop-name">alt</span> | <span class="prop-type">string |  | Used in combination with `src` or `srcSet` to provide an alt attribute for the rendered `img` element. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | 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. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'div'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name">imgProps</span> | <span class="prop-type">object |  | Properties applied to the `img` element when the component is used to display an image. |
+| <span class="prop-name">sizes</span> | <span class="prop-type">string |  | The `sizes` attribute for the `img` element. |
+| <span class="prop-name">src</span> | <span class="prop-type">string |  | The `src` attribute for the `img` element. |
+| <span class="prop-name">srcSet</span> | <span class="prop-type">string |  | The `srcSet` attribute for the `img` element. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/backdrop.md

@@ -12,10 +12,10 @@ filename: /src/Modal/Backdrop.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| classes | object |  | Useful to extend the style applied to components. |
-| invisible | bool | false | If `true`, the backdrop is invisible. It can be used when rendering a popover or a custom select component. |
-| <span style="color: #31a148">open *</span> | bool |  | If `true`, the backdrop is open. |
-| transitionDuration | union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> |  | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">invisible</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the backdrop is invisible. It can be used when rendering a popover or a custom select component. |
+| <span class="prop-name required">open *</span> | <span class="prop-type">bool |  | If `true`, the backdrop is open. |
+| <span class="prop-name">transitionDuration</span> | <span class="prop-type">union:&nbsp;number&nbsp;&#124;<br>&nbsp;{enter?: number, exit?: number}<br> |  | The duration for the transition, in milliseconds. You may specify a single timeout for all transitions, or individually with an object. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/badge.md

@@ -12,11 +12,11 @@ filename: /src/Badge/Badge.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">badgeContent *</span> | node |  | The content rendered within the badge. |
-| <span style="color: #31a148">children *</span> | node |  | The badge will be added relative to this node. |
-| classes | object |  | Useful to extend the style applied to components. |
-| color | enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'error'<br> | 'default' | The color of the component. It supports those theme colors that make sense for this component. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | 'span' | The component used for the root node. Either a string to use a DOM element or a component. |
+| <span class="prop-name required">badgeContent *</span> | <span class="prop-type">node |  | The content rendered within the badge. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The badge will be added relative to this node. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">color</span> | <span class="prop-type">enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'primary'&nbsp;&#124;<br>&nbsp;'secondary'&nbsp;&#124;<br>&nbsp;'error'<br> | <span class="prop-default">'default'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> | <span class="prop-default">'span'</span> | The component used for the root node. Either a string to use a DOM element or a component. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/bottom-navigation-action.md

@@ -12,11 +12,11 @@ filename: /src/BottomNavigation/BottomNavigationAction.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| classes | object |  | Useful to extend the style applied to components. |
-| icon | node |  | The icon element. |
-| label | node |  | The label element. |
-| showLabel | bool |  | If `true`, the BottomNavigationAction will show its label. |
-| value | any |  | You can provide your own value. Otherwise, we fallback to the child position index. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">icon</span> | <span class="prop-type">node |  | The icon element. |
+| <span class="prop-name">label</span> | <span class="prop-type">node |  | The label element. |
+| <span class="prop-name">showLabel</span> | <span class="prop-type">bool |  | If `true`, the BottomNavigationAction will show its label. |
+| <span class="prop-name">value</span> | <span class="prop-type">any |  | You can provide your own value. Otherwise, we fallback to the child position index. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/bottom-navigation.md

@@ -12,11 +12,11 @@ filename: /src/BottomNavigation/BottomNavigation.js
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span style="color: #31a148">children *</span> | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| onChange | func |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback<br>*value:* We default to the index of the child |
-| showLabels | bool | false | If `true`, all `BottomNavigationAction`s will show their labels. By default, only the selected `BottomNavigationAction` will show its label. |
-| value | any |  | The value of the currently selected `BottomNavigationAction`. |
+| <span class="prop-name required">children *</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">onChange</span> | <span class="prop-type">func |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback<br>*value:* We default to the index of the child |
+| <span class="prop-name">showLabels</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, all `BottomNavigationAction`s will show their labels. By default, only the selected `BottomNavigationAction` will show its label. |
+| <span class="prop-name">value</span> | <span class="prop-type">any |  | The value of the currently selected `BottomNavigationAction`. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).
 

pages/api/button-base.md

@@ -14,16 +14,16 @@ It contains a load of style reset and some focus/ripple logic.
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| buttonRef | func |  | Use that property to pass a ref callback to the native button component. |
-| centerRipple | bool | false | If `true`, the ripples will be centered. They won't start at the cursor interaction position. |
-| children | node |  | The content of the component. |
-| classes | object |  | Useful to extend the style applied to components. |
-| component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. |
-| disabled | bool |  | If `true`, the base button will be disabled. |
-| disableRipple | bool | false | If `true`, the ripple effect will be disabled. |
-| focusRipple | bool | false | If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`. |
-| keyboardFocusedClassName | string |  | The CSS class applied while the component is keyboard focused. |
-| onKeyboardFocus | func |  | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. |
+| <span class="prop-name">buttonRef</span> | <span class="prop-type">func |  | Use that property to pass a ref callback to the native button component. |
+| <span class="prop-name">centerRipple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the ripples will be centered. They won't start at the cursor interaction position. |
+| <span class="prop-name">children</span> | <span class="prop-type">node |  | The content of the component. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object |  | Useful to extend the style applied to components. |
+| <span class="prop-name">component</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. The default value is a `button`. |
+| <span class="prop-name">disabled</span> | <span class="prop-type">bool |  | If `true`, the base button will be disabled. |
+| <span class="prop-name">disableRipple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the ripple effect will be disabled. |
+| <span class="prop-name">focusRipple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`. |
+| <span class="prop-name">keyboardFocusedClassName</span> | <span class="prop-type">string |  | The CSS class applied while the component is keyboard focused. |
+| <span class="prop-name">onKeyboardFocus</span> | <span class="prop-type">func |  | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).