[Tabs] Initial migration of component

docs/api/BottomNavigation/BottomNavigation.md

@@ -9,10 +9,10 @@ Props
 
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
-| <span style="color: #31a148">children *</span> | node |  |  The content of the BottomNavigation. |
+| <span style="color: #31a148">children *</span> | node |  |  The content of the `BottomNavigation`. |
 | className | string |  |  The CSS class name of the root element. |
-| onChangeIndex | function |  |  Function called when index change. |
-| selectedIndex | number |  |  The index of the currently selected navigation item. |
-| <span style="color: #31a148">showLabel *</span> | bool |  |  If true, all the selected BottomNavigationButton will show his label. If false, only the selected BottomNavigationButton will show his label. |
+| index | number |  |  The index of the currently selected `BottomNavigation`. |
+| onChange | function |  |  Function called when the index change. |
+| <span style="color: #31a148">showLabel *</span> | bool |  |  If `true`, all the selected `BottomNavigationButton` will show his label. If false, only the selected `BottomNavigationButton` will show his label. |
 
 Other properties (no documented) are applied to the root element.

docs/api/BottomNavigation/BottomNavigationButton.md

@@ -12,6 +12,6 @@ Props
 | className | string |  |  The CSS class name of the root element. |
 | icon | node |  |  The icon element. If a string is passed, it will be used as a material icon font ligature. |
 | label | node |  |  The label element. |
-| showLabel | bool |  |  If true, the BottomNavigationButton will show his label. |
+| showLabel | bool |  |  If `true`, the BottomNavigationButton will show his label. |
 
 Other properties (no documented) are applied to the root element.

docs/api/Button/Button.md

@@ -14,17 +14,17 @@ Props
 
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
-| accent | bool | false |  If true, the button will use the theme's accent color. |
+| accent | bool | false |  If `true`, the button will use the theme's accent color. |
 | children | node |  |  The content of the button. |
 | className | string |  |  The CSS class name of the root element. |
 | compact | bool | false |  Uses a smaller minWidth, ideal for things like card actions. |
 | component | union | 'button' |  The element or component used for the root node. |
-| disabled | bool | false |  If true, the button will be disabled. |
-| fab | bool | false |  If true, well use floating action button styling. |
-| focusRipple | bool | true |  If true, the button will have a keyboard focus ripple. Ripple must also be true. |
+| disabled | bool | false |  If `true`, the button will be disabled. |
+| fab | bool | false |  If `true`, well use floating action button styling. |
+| focusRipple | bool | true |  If `true`, the button will have a keyboard focus ripple. Ripple must also be true. |
 | href | string |  |  The URL to link to when the button is clicked. If set, an `a` element will be used as the root node. |
-| primary | bool | false |  If true, the button will use the theme's primary color. |
-| raised | bool | false |  If true, the button will use raised styling. |
-| ripple | bool | true |  If true, the button will have a ripple. |
+| primary | bool | false |  If `true`, the button will use the theme's primary color. |
+| raised | bool | false |  If `true`, the button will use raised styling. |
+| ripple | bool | true |  If `true`, the button will have a ripple. |
 
 Other properties (no documented) are applied to the root element.

docs/api/Dialog/Dialog.md

@@ -18,8 +18,8 @@ Props
 |:-----|:-----|:-----|:-----|
 | children | node |  |  Dialog children, usually the included sub-components. |
 | className | string |  |  The CSS class name of the root element. |
-| hideOnBackdropClick | bool | true |  If true, clicking the backdrop will fire the `onRequestClose` callback. |
-| hideOnEscapeKeyUp | bool | true |  If true, hitting escape will fire the `onRequestClose` callback. |
+| hideOnBackdropClick | bool | true |  If `true`, clicking the backdrop will fire the `onRequestClose` callback. |
+| hideOnEscapeKeyUp | bool | true |  If `true`, hitting escape will fire the `onRequestClose` callback. |
 | onBackdropClick | function |  |  Callback fires when the backdrop is clicked on. |
 | onEnter | function |  |  Callback fired before the dialog is entering. |
 | onEntering | function |  |  Callback fired when the dialog is entering. |

docs/api/IconButton/IconButton.md

@@ -18,7 +18,7 @@ Props
 | children | node |  |  The icon element. If a string is passed, it will be used as a material icon font ligature. |
 | className | string |  |  The CSS class name of the root element. |
 | contrast | bool | false |   |
-| disabled | bool | false |  If true, the button will be disabled. |
+| disabled | bool | false |  If `true`, the button will be disabled. |
 | ripple | bool | true |  If false, the ripple effect will be disabled. |
 
 Other properties (no documented) are applied to the root element.

docs/api/List/ListSubheader.md

@@ -11,7 +11,7 @@ Props
 |:-----|:-----|:-----|:-----|
 | children | node |  |  The content of the ListSubheader. |
 | className | string |  |  The CSS class name of the root element. |
-| inset | bool | false |  If true, the ListSubheader will be indented. |
-| primary | bool | false |  If true, the ListSubheader will have the theme primary color. |
+| inset | bool | false |  If `true`, the ListSubheader will be indented. |
+| primary | bool | false |  If `true`, the ListSubheader will have the theme primary color. |
 
 Other properties (no documented) are applied to the root element.

docs/api/Menu/Menu.md

@@ -19,7 +19,7 @@ Props
 | onExiting | function |  |  Callback fired when the Menu is exiting. |
 | onExited | function |  |  Callback fired when the Menu has exited. |
 | onRequestClose | function |  |  Callback function fired when the menu is requested to be closed.<br><br>**Signature:**<br>`function(event: event) => void`<br>*event:* The event that triggered the close request |
-| open | bool | false |  If true, the menu is visible. |
+| open | bool | false |  If `true`, the menu is visible. |
 | transitionDuration | union | 'auto' |  The length of the transition in `ms`, or 'auto' |
 
 Other properties (no documented) are applied to the root element.

docs/api/Table/TableCell.md

@@ -15,7 +15,7 @@ Props
 
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
-| checkbox | bool | false |  If true, the cell padding will be adjusted to better accomodate a checkbox. |
+| checkbox | bool | false |  If `true`, the cell padding will be adjusted to better accomodate a checkbox. |
 | children | node |  |  The table cell contents. |
 | className | string |  |  The CSS class name of the root element. |
 | compact | bool | false |  If set to true, will use more compact cell padding to accomodate more content. |

docs/api/Tabs/Tab.md

@@ -0,0 +1,16 @@
+Tab
+===
+
+
+
+Props
+-----
+
+
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| className | string |  |  The CSS class name of the root element. |
+| icon | node |  |  The icon element. If a string is passed, it will be used as a material icon font ligature. |
+| label | node |  |  The label element. |
+
+Other properties (no documented) are applied to the root element.

docs/api/Tabs/TabIndicator.md

@@ -0,0 +1,16 @@
+TabIndicator
+============
+
+
+
+Props
+-----
+
+
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| className | string |  |  The CSS class name of the root element. |
+| <span style="color: #31a148">indicatorColor *</span> | union |  |   |
+| <span style="color: #31a148">style *</span> | object |  |  The style of the root element. |
+
+Other properties (no documented) are applied to the root element.

docs/api/Tabs/Tabs.md

@@ -0,0 +1,22 @@
+Tabs
+====
+
+
+
+Props
+-----
+
+
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| centered | bool | false |  If `true`, the tabs will be centered. This property is intended for large views. |
+| children | node |  |  The content of the `Tabs`. |
+| className | string |  |  The CSS class name of the root element. |
+| fullWidth | bool | false |  If `true`, the tabs will grow to use all the available space. This property is intended for small views. |
+| index | number |  |  The index of the currently selected `BottomNavigation`. |
+| indicatorClassName | string |  |  The CSS class name of the indicator element. |
+| indicatorColor | union | 'accent' |  Determines the color of the indicator. |
+| onChange | function |  |  Function called when the index change. |
+| textColor | union | 'inherit' |  Determines the color of the `Tab`. |
+
+Other properties (no documented) are applied to the root element.

docs/api/styles/MuiThemeProvider.md

@@ -9,7 +9,7 @@ Props
 
 | Name | Type | Default | Description |
 |:-----|:-----|:-----|:-----|
-| <span style="color: #31a148">children *</span> | node |  |   |
+| <span style="color: #31a148">children *</span> | node |  |   |
 | styleManager | object |  |   |
 | theme | object |  |   |
 

docs/site/src/components/AppDrawerNavItem.js

@@ -26,7 +26,7 @@ export const styleSheet = createStyleSheet('AppDrawerNavItem', (theme) => {
       paddingBottom: 0,
     },
     navLink: {
-      fontWeight: 400,
+      fontWeight: theme.typography.fontWeightRegular,
       display: 'flex',
       paddingTop: 0,
       paddingBottom: 0,

docs/site/src/components/MarkdownElement.js

@@ -21,6 +21,11 @@ const styleSheet = createStyleSheet('MarkdownElement', (theme) => ({
       color: theme.palette.text.secondary,
       margin: '1em 0 0.7em',
     },
+    '& h3': {
+      ...theme.typography.headline,
+      color: theme.palette.text.secondary,
+      margin: '1em 0 0.7em',
+    },
     '& p, & ul': {
       lineHeight: '1.6',
     },
@@ -35,7 +40,7 @@ const styleSheet = createStyleSheet('MarkdownElement', (theme) => ({
     },
     '& thead': {
       fontSize: 12,
-      fontWeight: 500,
+      fontWeight: theme.typography.fontWeightMedium,
       color: theme.palette.text.secondary,
     },
     '& tbody': {
@@ -72,6 +77,9 @@ const styleSheet = createStyleSheet('MarkdownElement', (theme) => ({
     '& thead tr': {
       height: 64,
     },
+    '& strong': {
+      fontWeight: theme.typography.fontWeightMedium,
+    },
   },
 }));
 

docs/site/src/demos/bottom-navigation/LabelBottomNavigation.js

@@ -5,26 +5,29 @@ import { createStyleSheet } from 'jss-theme-reactor';
 import { BottomNavigation, BottomNavigationButton } from 'material-ui/BottomNavigation';
 
 const styleSheet = createStyleSheet('LabelBottomNavigation', () => ({
-  row: {
-    flexGrow: 1,
+  root: {
+    width: 500,
   },
 }));
 
 export default class LabelBottomNavigation extends Component {
   state = {
-    selectedIndex: 0,
+    index: 0,
   };
 
-  handleChangeIndex = (index) => this.setState({ selectedIndex: index });
+  handleChange = (event, index) => {
+    this.setState({ index });
+  };
 
   render() {
     const classes = this.context.styleManager.render(styleSheet);
-    const { selectedIndex } = this.state;
+    const { index } = this.state;
+
     return (
-      <div className={classes.row}>
+      <div className={classes.root}>
         <BottomNavigation
-          selectedIndex={selectedIndex}
-          onChangeIndex={this.handleChangeIndex}
+          index={index}
+          onChange={this.handleChange}
           showLabel={false}
         >
           <BottomNavigationButton

docs/site/src/demos/bottom-navigation/SimpleBottomNavigation.js

@@ -5,30 +5,30 @@ import { createStyleSheet } from 'jss-theme-reactor';
 import { BottomNavigation, BottomNavigationButton } from 'material-ui/BottomNavigation';
 
 const styleSheet = createStyleSheet('SimpleBottomNavigation', () => ({
-  row: {
-    flexGrow: 1,
+  root: {
+    width: 500,
   },
 }));
 
 export default class SimpleBottomNavigation extends Component {
   state = {
-    selectedIndex: 0,
+    index: 0,
   };
 
-  handleChangeIndex = (index) => {
-    this.setState({ selectedIndex: index });
-  }
+  handleChange = (event, index) => {
+    this.setState({ index });
+  };
 
   render() {
     const classes = this.context.styleManager.render(styleSheet);
-    const { selectedIndex } = this.state;
+    const { index } = this.state;
 
     return (
-      <div className={classes.row}>
+      <div className={classes.root}>
         <BottomNavigation
+          index={index}
+          onChange={this.handleChange}
           showLabel
-          selectedIndex={selectedIndex}
-          onChangeIndex={this.handleChangeIndex}
         >
           <BottomNavigationButton
             label="Recents"

docs/site/src/demos/bottom-navigation/bottom-navigation.md

@@ -3,12 +3,12 @@
 [Bottom navigation](https://material.google.com/components/bottom-navigation.html) bars make it easy to explore and switch between top-level views in a single tap.
 
 ## Simple Bottom Navigation
-When there are only **three actions**, display both icons and text labels at all times.
+When there are only **three** actions, display both icons and text labels at all times.
 
 {{demo='demos/bottom-navigation/SimpleBottomNavigation.js'}}
 
 ## Bottom Navigation with no label
 
-If there are four or **five actions**, display inactive views as icons only.
+If there are **four** or **five** actions, display inactive views as icons only.
 
 {{demo='demos/bottom-navigation/LabelBottomNavigation.js'}}

docs/site/src/demos/tabs/BasicTabs.js

@@ -0,0 +1,43 @@
+// @flow weak
+
+import React, { Component, PropTypes } from 'react';
+import { createStyleSheet } from 'jss-theme-reactor';
+import Paper from 'material-ui/Paper';
+import Tabs from 'material-ui/Tabs';
+import Tab from 'material-ui/Tabs/Tab';
+
+const styleSheet = createStyleSheet('BasicTabs', (theme) => ({
+  root: {
+    flexGrow: 1,
+    backgroundColor: theme.palette.primary[500],
+    color: theme.palette.getContrastText(theme.palette.primary[500]),
+  },
+}));
+
+export default class BasicTabs extends Component {
+  static contextTypes = {
+    styleManager: PropTypes.object.isRequired,
+  };
+
+  state = {
+    index: 0,
+  };
+
+  handleChange = (event, index) => {
+    this.setState({ index });
+  }
+
+  render() {
+    const classes = this.context.styleManager.render(styleSheet);
+
+    return (
+      <Paper className={classes.root}>
+        <Tabs index={this.state.index} onChange={this.handleChange}>
+          <Tab label="Item One" />
+          <Tab label="Item Two" />
+          <Tab label="Item Three" />
+        </Tabs>
+      </Paper>
+    );
+  }
+}

docs/site/src/demos/tabs/CenteredTabs.js

@@ -0,0 +1,46 @@
+// @flow weak
+
+import React, { Component, PropTypes } from 'react';
+import { createStyleSheet } from 'jss-theme-reactor';
+import Paper from 'material-ui/Paper';
+import Tabs from 'material-ui/Tabs';
+import Tab from 'material-ui/Tabs/Tab';
+
+const styleSheet = createStyleSheet('CenteredTabs', () => ({
+  root: {
+    flexGrow: 1,
+  },
+}));
+
+export default class CenteredTabs extends Component {
+  static contextTypes = {
+    styleManager: PropTypes.object.isRequired,
+  };
+
+  state = {
+    index: 0,
+  };
+
+  handleChange = (event, index) => {
+    this.setState({ index });
+  }
+
+  render() {
+    const classes = this.context.styleManager.render(styleSheet);
+
+    return (
+      <Paper className={classes.root}>
+        <Tabs
+          index={this.state.index}
+          onChange={this.handleChange}
+          textColor="accent"
+          centered
+        >
+          <Tab label="Item One" />
+          <Tab label="Item Two" />
+          <Tab label="Item Three" />
+        </Tabs>
+      </Paper>
+    );
+  }
+}