Merge pull request #3799 from mbrookes/leftnav-rename-to-drawer

[LeftNav] Rename to Drawer
mui · Mar 25, 2016 · 35707f7 · 35707f7
2 parents 0c35504 + c36342e
commit 35707f7
Show file tree

Hide file tree

Showing 19 changed files with 159 additions and 165 deletions.
diff --git a/docs/src/app/AppRoutes.js b/docs/src/app/AppRoutes.js
@@ -29,14 +29,14 @@ import CheckboxPage from './components/pages/components/Checkbox/Page';
 import DatePicker from './components/pages/components/DatePicker/Page';
 import DialogPage from './components/pages/components/Dialog/Page';
 import DividerPage from './components/pages/components/Divider/Page';
+import DrawerPage from './components/pages/components/Drawer/Page';
 import DropDownMenuPage from './components/pages/components/DropDownMenu/Page';
 import FlatButtonPage from './components/pages/components/FlatButton/Page';
 import FloatingActionButtonPage from './components/pages/components/FloatingActionButton/Page';
 import FontIconPage from './components/pages/components/FontIcon/Page';
 import GridListPage from './components/pages/components/GridList/Page';
 import IconButtonPage from './components/pages/components/IconButton/Page';
 import IconMenuPage from './components/pages/components/IconMenu/Page';
-import LeftNavPage from './components/pages/components/LeftNav/Page';
 import ListPage from './components/pages/components/List/Page';
 import LinearProgressPage from './components/pages/components/LinearProgress/Page';
 import PaperPage from './components/pages/components/Paper/Page';
@@ -103,14 +103,14 @@ const AppRoutes = (
       <Route path="date-picker" component={DatePicker} />
       <Route path="dialog" component={DialogPage} />
       <Route path="divider" component={DividerPage} />
+      <Route path="drawer" component={DrawerPage} />
       <Route path="dropdown-menu" component={DropDownMenuPage} />
       <Route path="font-icon" component={FontIconPage} />
       <Route path="flat-button" component={FlatButtonPage} />
       <Route path="floating-action-button" component={FloatingActionButtonPage} />
       <Route path="grid-list" component={GridListPage} />
       <Route path="icon-button" component={IconButtonPage} />
       <Route path="icon-menu" component={IconMenuPage} />
-      <Route path="left-nav" component={LeftNavPage} />
       <Route path="list" component={ListPage} />
       <Route path="linear-progress" component={LinearProgressPage} />
       <Route path="paper" component={PaperPage} />

diff --git a/docs/src/app/components/AppLeftNav.js → docs/src/app/components/AppNavDrawer.js b/docs/src/app/components/AppLeftNav.js → docs/src/app/components/AppNavDrawer.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import LeftNav from 'material-ui/LeftNav';
+import Drawer from 'material-ui/Drawer';
 import {List, ListItem, MakeSelectable} from 'material-ui/List';
 import Divider from 'material-ui/Divider';
 import Subheader from 'material-ui/Subheader';
@@ -10,13 +10,13 @@ import {cyan500} from 'material-ui/styles/colors';
 
 const SelectableList = MakeSelectable(List);
 
-const AppLeftNav = React.createClass({
+const AppNavDrawer = React.createClass({
 
   propTypes: {
     docked: React.PropTypes.bool.isRequired,
     location: React.PropTypes.object.isRequired,
-    onRequestChangeLeftNav: React.PropTypes.func.isRequired,
     onRequestChangeList: React.PropTypes.func.isRequired,
+    onRequestChangeNavDrawer: React.PropTypes.func.isRequired,
     open: React.PropTypes.bool.isRequired,
     style: React.PropTypes.object,
   },
@@ -85,7 +85,7 @@ const AppLeftNav = React.createClass({
 
   handleTouchTapHeader() {
     this.context.router.push('/');
-    this.props.onRequestChangeLeftNav(false);
+    this.props.onRequestChangeNavDrawer(false);
   },
 
   styles: {
@@ -109,19 +109,19 @@ const AppLeftNav = React.createClass({
     const {
       location,
       docked,
-      onRequestChangeLeftNav,
+      onRequestChangeNavDrawer,
       onRequestChangeList,
       open,
       style,
     } = this.props;
 
     return (
-      <LeftNav
+      <Drawer
         style={style}
         docked={docked}
         open={open}
-        onRequestChange={onRequestChangeLeftNav}
-        containerStyle={{zIndex: zIndex.leftNav - 100}}
+        onRequestChange={onRequestChangeNavDrawer}
+        containerStyle={{zIndex: zIndex.navDrawer - 100}}
       >
         <div style={this.styles.logo} onTouchTap={this.handleTouchTapHeader}>
           Material-UI
@@ -188,6 +188,7 @@ const AppLeftNav = React.createClass({
               <ListItem primaryText="Date Picker" value="/components/date-picker" />,
               <ListItem primaryText="Dialog" value="/components/dialog" />,
               <ListItem primaryText="Divider" value="/components/divider" />,
+              <ListItem primaryText="Drawer" value="/components/drawer" />,
               <ListItem primaryText="Grid List" value="/components/grid-list" />,
               <ListItem
                 primaryText="Icons"
@@ -197,7 +198,6 @@ const AppLeftNav = React.createClass({
                   <ListItem primaryText="SVG Icon" value="/components/svg-icon" />,
                 ]}
               />,
-              <ListItem primaryText="Left Nav" value="/components/left-nav" />,
               <ListItem primaryText="List" value="/components/list" />,
               <ListItem
                 primaryText="Menus"
@@ -263,9 +263,9 @@ const AppLeftNav = React.createClass({
             value="https://www.google.com/design/spec/material-design/introduction.html"
           />
         </SelectableList>
-      </LeftNav>
+      </Drawer>
     );
   },
 });
 
-export default AppLeftNav;
+export default AppNavDrawer;
diff --git a/docs/src/app/components/Master.js b/docs/src/app/components/Master.js
@@ -6,7 +6,7 @@ import spacing from 'material-ui/styles/spacing';
 import styleResizable from 'material-ui/utils/styleResizable';
 import getMuiTheme from 'material-ui/styles/getMuiTheme';
 import {darkWhite, lightWhite, grey900} from 'material-ui/styles/colors';
-import AppLeftNav from './AppLeftNav';
+import AppNavDrawer from './AppNavDrawer';
 import FullWidthSection from './FullWidthSection';
 
 const githubButton = (
@@ -39,7 +39,7 @@ const Master = React.createClass({
   getInitialState() {
     return {
       muiTheme: getMuiTheme(),
-      leftNavOpen: false,
+      navDrawerOpen: false,
     };
   },
 
@@ -108,20 +108,20 @@ const Master = React.createClass({
 
   handleTouchTapLeftIconButton() {
     this.setState({
-      leftNavOpen: !this.state.leftNavOpen,
+      navDrawerOpen: !this.state.navDrawerOpen,
     });
   },
 
-  handleChangeRequestLeftNav(open) {
+  handleChangeRequestNavDrawer(open) {
     this.setState({
-      leftNavOpen: open,
+      navDrawerOpen: open,
     });
   },
 
   handleRequestChangeList(event, value) {
     this.context.router.push(value);
     this.setState({
-      leftNavOpen: false,
+      navDrawerOpen: false,
     });
   },
 
@@ -138,7 +138,7 @@ const Master = React.createClass({
     } = this.props;
 
     let {
-      leftNavOpen,
+      navDrawerOpen,
     } = this.state;
 
     const {
@@ -158,10 +158,10 @@ const Master = React.createClass({
 
     if (this.isDeviceSize(styleResizable.statics.Sizes.LARGE) && title !== '') {
       docked = true;
-      leftNavOpen = true;
+      navDrawerOpen = true;
       showMenuIconButton = false;
 
-      styles.leftNav = {
+      styles.navDrawer = {
         zIndex: styles.appBar.zIndex - 1,
       };
       styles.root.paddingLeft = 256;
@@ -189,13 +189,13 @@ const Master = React.createClass({
           </div> :
           children
         }
-        <AppLeftNav
-          style={styles.leftNav}
+        <AppNavDrawer
+          style={styles.navDrawer}
           location={location}
           docked={docked}
-          onRequestChangeLeftNav={this.handleChangeRequestLeftNav}
+          onRequestChangeNavDrawer={this.handleChangeRequestNavDrawer}
           onRequestChangeList={this.handleRequestChangeList}
-          open={leftNavOpen}
+          open={navDrawerOpen}
         />
         <FullWidthSection style={styles.footer}>
           <p style={prepareStyles(styles.p)}>

diff --git a/...es/components/LeftNav/ExampleOpenRight.js → ...components/Drawer/ExampleOpenSecondary.js b/...es/components/LeftNav/ExampleOpenRight.js → ...components/Drawer/ExampleOpenSecondary.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import LeftNav from 'material-ui/LeftNav';
+import Drawer from 'material-ui/Drawer';
 import AppBar from 'material-ui/AppBar';
 import RaisedButton from 'material-ui/RaisedButton';
 
-export default class LeftNavOpenRightExample extends React.Component {
+export default class DrawerOpenRightExample extends React.Component {
 
   constructor(props) {
     super(props);
@@ -16,12 +16,12 @@ export default class LeftNavOpenRightExample extends React.Component {
     return (
       <div>
         <RaisedButton
-          label="Toggle LeftNav"
+          label="Toggle Drawer"
           onTouchTap={this.handleToggle}
         />
-        <LeftNav width={200} openRight={true} open={this.state.open} >
+        <Drawer width={200} openSecondary={true} open={this.state.open} >
           <AppBar title="AppBar" />
-        </LeftNav>
+        </Drawer>
       </div>
     );
   }

diff --git a/...pages/components/LeftNav/ExampleSimple.js → .../pages/components/Drawer/ExampleSimple.js b/...pages/components/LeftNav/ExampleSimple.js → .../pages/components/Drawer/ExampleSimple.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import LeftNav from 'material-ui/LeftNav';
+import Drawer from 'material-ui/Drawer';
 import MenuItem from 'material-ui/MenuItem';
 import RaisedButton from 'material-ui/RaisedButton';
 
-export default class LeftNavSimpleExample extends React.Component {
+export default class DrawerSimpleExample extends React.Component {
 
   constructor(props) {
     super(props);
@@ -16,13 +16,13 @@ export default class LeftNavSimpleExample extends React.Component {
     return (
       <div>
         <RaisedButton
-          label="Toggle LeftNav"
+          label="Toggle Drawer"
           onTouchTap={this.handleToggle}
         />
-        <LeftNav open={this.state.open}>
+        <Drawer open={this.state.open}>
           <MenuItem>Menu Item</MenuItem>
           <MenuItem>Menu Item 2</MenuItem>
-        </LeftNav>
+        </Drawer>
       </div>
     );
   }

diff --git a/...ges/components/LeftNav/ExampleUndocked.js → ...ages/components/Drawer/ExampleUndocked.js b/...ges/components/LeftNav/ExampleUndocked.js → ...ages/components/Drawer/ExampleUndocked.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import LeftNav from 'material-ui/LeftNav';
+import Drawer from 'material-ui/Drawer';
 import MenuItem from 'material-ui/MenuItem';
 import RaisedButton from 'material-ui/RaisedButton';
 
-export default class LeftNavUndockedExample extends React.Component {
+export default class DrawerUndockedExample extends React.Component {
 
   constructor(props) {
     super(props);
@@ -18,18 +18,18 @@ export default class LeftNavUndockedExample extends React.Component {
     return (
       <div>
         <RaisedButton
-          label="Open LeftNav"
+          label="Open Drawer"
           onTouchTap={this.handleToggle}
         />
-        <LeftNav
+        <Drawer
           docked={false}
           width={200}
           open={this.state.open}
           onRequestChange={(open) => this.setState({open})}
         >
           <MenuItem onTouchTap={this.handleClose}>Menu Item</MenuItem>
           <MenuItem onTouchTap={this.handleClose}>Menu Item 2</MenuItem>
-        </LeftNav>
+        </Drawer>
       </div>
     );
   }

diff --git a/docs/src/app/components/pages/components/Drawer/Page.js b/docs/src/app/components/pages/components/Drawer/Page.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import Title from 'react-title-component';
+
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import drawerReadmeText from './README';
+import DrawerSimpleExample from './ExampleSimple';
+import drawerSimpleExampleCode from '!raw!./ExampleSimple';
+import DrawerUndockedExample from './ExampleUndocked';
+import drawerUndockedExampleCode from '!raw!./ExampleUndocked';
+import DrawerOpenSecondaryExample from './ExampleOpenSecondary';
+import drawerOpenSecondaryExampleCode from '!raw!./ExampleOpenSecondary';
+import drawerCode from '!raw!material-ui/lib/Drawer/Drawer';
+
+const descriptions = {
+  simple: 'A simple controlled `Drawer`. The Drawer is `docked` by default, ' +
+  'remaining open unless closed through the `open` prop.',
+  undocked: 'An undocked controlled `Drawer` with custom width. ' +
+  'The Drawer can be cancelled by clicking the overlay or pressing the Esc key. ' +
+  'It closes when an item is selected, handled by controlling the `open` prop.',
+  right: 'The `openSecondary` prop allows the Drawer to open on the opposite side.',
+};
+
+const DrawerPage = () => (
+  <div>
+    <Title render={(previousTitle) => `Drawer - ${previousTitle}`} />
+    <MarkdownElement text={drawerReadmeText} />
+    <CodeExample
+      title="Docked example"
+      description={descriptions.simple}
+      code={drawerSimpleExampleCode}
+    >
+      <DrawerSimpleExample />
+    </CodeExample>
+    <CodeExample
+      title="Undocked example"
+      description={descriptions.undocked}
+      code={drawerUndockedExampleCode}
+    >
+      <DrawerUndockedExample />
+    </CodeExample>
+    <CodeExample
+      title="Open secondary example"
+      description={descriptions.right}
+      code={drawerOpenSecondaryExampleCode}
+    >
+      <DrawerOpenSecondaryExample />
+    </CodeExample>
+    <PropTypeDescription code={drawerCode} />
+  </div>
+);
+
+export default DrawerPage;
diff --git a/docs/src/app/components/pages/components/Drawer/README.md b/docs/src/app/components/pages/components/Drawer/README.md
@@ -0,0 +1,9 @@
+## Drawer
+
+The [Drawer](https://www.google.com/design/spec/patterns/navigation-drawer.html) slides in from the side.
+It is a common pattern found in Google apps and follows the keylines and metrics for lists.
+
+There are no examples for uncontrolled mode because an uncontrolled `Drawer` can only be opened with a swipe.
+The doc site has an uncontrolled `Drawer`. Swipe from the left on a touch device to see it.
+
+### Examples