[BottomSheet] Add BottomSheet component and refactor Drawer to also u…

…se internal SlidingSheet component.

docs/src/app/AppRoutes.js

@@ -23,6 +23,7 @@ import AppBarPage from './components/pages/components/AppBar/Page';
 import AutoCompletePage from './components/pages/components/AutoComplete/Page';
 import AvatarPage from './components/pages/components/Avatar/Page';
 import BadgePage from './components/pages/components/Badge/Page';
+import BottomSheetPage from './components/pages/components/BottomSheet/Page';
 import CardPage from './components/pages/components/Card/Page';
 import ChipPage from './components/pages/components/Chip/Page';
 import CircularProgressPage from './components/pages/components/CircularProgress/Page';
@@ -98,6 +99,7 @@ const AppRoutes = (
       <Route path="auto-complete" component={AutoCompletePage} />
       <Route path="avatar" component={AvatarPage} />
       <Route path="badge" component={BadgePage} />
+      <Route path="bottom-sheet" component={BottomSheetPage} />
       <Route path="card" component={CardPage} />
       <Route path="chip" component={ChipPage} />
       <Route path="circular-progress" component={CircularProgressPage} />

docs/src/app/components/AppNavDrawer.js

@@ -186,6 +186,11 @@ class AppNavDrawer extends Component {
                 value="/components/badge"
                 href="/#/components/badge"
               />,
+              <ListItem
+                primaryText="Bottom Sheet"
+                value="/components/bottom-sheet"
+                href="/#/components/bottom-sheet"
+              />,
               <ListItem
                 primaryText="Buttons"
                 primaryTogglesNestedList={true}

docs/src/app/components/pages/components/BottomSheet/ExampleCloseable.js

@@ -0,0 +1,35 @@
+import React, {Component} from 'react';
+import BottomSheet from 'material-ui/BottomSheet';
+import MenuItem from 'material-ui/MenuItem';
+import RaisedButton from 'material-ui/RaisedButton';
+
+/**
+ * A `BottomSheet` that can be dismissed by swiping down from the top of the sheet.
+ */
+
+export default class BottomSheetExampleCloseable extends Component {
+
+  constructor() {
+    super();
+    this.state = {open: false};
+  }
+
+  handleToggle = () => this.setState({open: !this.state.open});
+
+  handleClose = () => this.setState({open: false});
+
+  render() {
+    return (
+      <div>
+        <RaisedButton
+          label="Toggle BottomSheet"
+          onTouchTap={this.handleToggle}
+        />
+        <BottomSheet open={this.state.open} onRequestClose={this.handleClose}>
+          <MenuItem>Menu item 1</MenuItem>
+          <MenuItem>Menu item 2</MenuItem>
+        </BottomSheet>
+      </div>
+    );
+  }
+}

docs/src/app/components/pages/components/BottomSheet/ExampleInset.js

@@ -0,0 +1,35 @@
+import React, {Component} from 'react';
+import BottomSheet from 'material-ui/BottomSheet';
+import MenuItem from 'material-ui/MenuItem';
+import RaisedButton from 'material-ui/RaisedButton';
+
+/**
+ * An inset `BottomSheet` with a custom width.
+ */
+
+export default class BottomSheetExampleInset extends Component {
+
+  constructor() {
+    super();
+    this.state = {open: false};
+  }
+
+  handleToggle = () => this.setState({open: !this.state.open});
+
+  handleClose = () => this.setState({open: false});
+
+  render() {
+    return (
+      <div>
+        <RaisedButton
+          label="Toggle BottomSheet"
+          onTouchTap={this.handleToggle}
+        />
+        <BottomSheet open={this.state.open} width="80%" onRequestClose={this.handleClose}>
+          <MenuItem>Menu item 1</MenuItem>
+          <MenuItem>Menu item 2</MenuItem>
+        </BottomSheet>
+      </div>
+    );
+  }
+}

docs/src/app/components/pages/components/BottomSheet/ExampleModal.js

@@ -0,0 +1,39 @@
+import React, {Component} from 'react';
+import BottomSheet from 'material-ui/BottomSheet';
+import MenuItem from 'material-ui/MenuItem';
+import RaisedButton from 'material-ui/RaisedButton';
+
+/**
+ * A modal `BottomSheet`. When opened, the page is covered with an overlay. Touching
+ * the overlay or swiping down will dismiss the `BottomSheet`.
+ */
+
+export default class BottomSheetExampleModal extends Component {
+
+  constructor() {
+    super();
+    this.state = {open: false};
+  }
+
+  handleToggle = () => this.setState({open: !this.state.open});
+
+  handleClose = () => this.setState({open: false});
+
+  render() {
+    return (
+      <div>
+        <RaisedButton
+          label="Toggle BottomSheet"
+          onTouchTap={this.handleToggle}
+        />
+        <BottomSheet open={this.state.open} modal={true} onRequestClose={this.handleClose}>
+          <MenuItem>Menu item 1</MenuItem>
+          <MenuItem>Menu item 2</MenuItem>
+          <MenuItem>Menu item 3</MenuItem>
+          <MenuItem>Menu item 4</MenuItem>
+          <MenuItem>Menu item 5</MenuItem>
+        </BottomSheet>
+      </div>
+    );
+  }
+}

docs/src/app/components/pages/components/BottomSheet/ExampleSimple.js

@@ -0,0 +1,33 @@
+import React, {Component} from 'react';
+import BottomSheet from 'material-ui/BottomSheet';
+import MenuItem from 'material-ui/MenuItem';
+import RaisedButton from 'material-ui/RaisedButton';
+
+/**
+ * A simple persistent `BottomSheet`, controlled through the `open` prop.
+ */
+
+export default class BottomSheetExampleSimple extends Component {
+
+  constructor() {
+    super();
+    this.state = {open: false};
+  }
+
+  handleToggle = () => this.setState({open: !this.state.open});
+
+  render() {
+    return (
+      <div>
+        <RaisedButton
+          label="Toggle BottomSheet"
+          onTouchTap={this.handleToggle}
+        />
+        <BottomSheet open={this.state.open}>
+          <MenuItem>Menu item 1</MenuItem>
+          <MenuItem>Menu item 2</MenuItem>
+        </BottomSheet>
+      </div>
+    );
+  }
+}

docs/src/app/components/pages/components/BottomSheet/Page.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import Title from 'react-title-component';
+
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import bottomSheetReadmeText from './README';
+import BottomSheetExampleSimple from './ExampleSimple';
+import bottomSheetExampleSimpleCode from '!raw!./ExampleSimple';
+import BottomSheetExampleCloseable from './ExampleCloseable';
+import bottomSheetExampleCloseableCode from '!raw!./ExampleCloseable';
+import BottomSheetExampleInset from './ExampleInset';
+import bottomSheetExampleInsetCode from '!raw!./ExampleInset';
+import BottomSheetExampleModal from './ExampleModal';
+import bottomSheetExampleModalCode from '!raw!./ExampleModal';
+import bottomSheetCode from '!raw!material-ui/BottomSheet/BottomSheet';
+
+const BottomSheetPage = () => (
+  <div>
+    <Title render={(previousTitle) => `Bottom Sheet - ${previousTitle}`} />
+    <MarkdownElement text={bottomSheetReadmeText} />
+    <CodeExample
+      title="Simple example"
+      code={bottomSheetExampleSimpleCode}
+    >
+      <BottomSheetExampleSimple />
+    </CodeExample>
+    <CodeExample
+      title="Closeable example"
+      code={bottomSheetExampleCloseableCode}
+    >
+      <BottomSheetExampleCloseable />
+    </CodeExample>
+    <CodeExample
+      title="Inset example"
+      code={bottomSheetExampleInsetCode}
+    >
+      <BottomSheetExampleInset />
+    </CodeExample>
+    <CodeExample
+      title="Modal example"
+      code={bottomSheetExampleModalCode}
+    >
+      <BottomSheetExampleModal />
+    </CodeExample>
+    <PropTypeDescription code={bottomSheetCode} />
+  </div>
+);
+
+export default BottomSheetPage;

docs/src/app/components/pages/components/BottomSheet/README.md

@@ -0,0 +1,6 @@
+## BottomSheet
+
+The [BottomSheet](https://www.google.com/design/spec/components/bottom-sheets.html) slides up from the bottom.
+It is most commonly used on mobile.
+
+### Examples

docs/src/app/components/pages/components/Drawer/ExampleOpenSecondary.js

@@ -1,12 +1,16 @@
-import React from 'react';
+import React, {Component} from 'react';
 import Drawer from 'material-ui/Drawer';
 import AppBar from 'material-ui/AppBar';
 import RaisedButton from 'material-ui/RaisedButton';
 
-export default class DrawerOpenRightExample extends React.Component {
+/**
+ * The `openSecondary` prop allows the Drawer to open on the opposite side.
+ */
 
-  constructor(props) {
-    super(props);
+export default class DrawerExampleOpenSecondary extends Component {
+
+  constructor() {
+    super();
     this.state = {open: false};
   }
 

docs/src/app/components/pages/components/Drawer/ExampleSimple.js

@@ -1,12 +1,17 @@
-import React from 'react';
+import React, {Component} from 'react';
 import Drawer from 'material-ui/Drawer';
 import MenuItem from 'material-ui/MenuItem';
 import RaisedButton from 'material-ui/RaisedButton';
 
-export default class DrawerSimpleExample extends React.Component {
+/**
+ * A simple controlled `Drawer`. The Drawer is `docked` by default, remaining open
+ * unless closed through the `open` prop.
+ */
 
-  constructor(props) {
-    super(props);
+export default class DrawerExampleSimple extends Component {
+
+  constructor() {
+    super();
     this.state = {open: false};
   }
 

docs/src/app/components/pages/components/Drawer/ExampleUndocked.js

@@ -1,12 +1,18 @@
-import React from 'react';
+import React, {Component} from 'react';
 import Drawer from 'material-ui/Drawer';
 import MenuItem from 'material-ui/MenuItem';
 import RaisedButton from 'material-ui/RaisedButton';
 
-export default class DrawerUndockedExample extends React.Component {
+/**
+ * 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.
+ */
 
-  constructor(props) {
-    super(props);
+export default class DrawerExampleUndocked extends Component {
+
+  constructor() {
+    super();
     this.state = {open: false};
   }
 

docs/src/app/components/pages/components/Drawer/Page.js

@@ -6,47 +6,35 @@ 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 DrawerExampleSimple from './ExampleSimple';
+import drawerExampleSimpleCode from '!raw!./ExampleSimple';
+import DrawerExampleUndocked from './ExampleUndocked';
+import drawerExampleUndockedCode from '!raw!./ExampleUndocked';
+import DrawerExampleOpenSecondary from './ExampleOpenSecondary';
+import drawerExampleOpenSecondaryCode from '!raw!./ExampleOpenSecondary';
 import drawerCode from '!raw!material-ui/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}
+      code={drawerExampleSimpleCode}
     >
-      <DrawerSimpleExample />
+      <DrawerExampleSimple />
     </CodeExample>
     <CodeExample
       title="Undocked example"
-      description={descriptions.undocked}
-      code={drawerUndockedExampleCode}
+      code={drawerExampleUndockedCode}
     >
-      <DrawerUndockedExample />
+      <DrawerExampleUndocked />
     </CodeExample>
     <CodeExample
       title="Open secondary example"
-      description={descriptions.right}
-      code={drawerOpenSecondaryExampleCode}
+      code={drawerExampleOpenSecondaryCode}
     >
-      <DrawerOpenSecondaryExample />
+      <DrawerExampleOpenSecondary />
     </CodeExample>
     <PropTypeDescription code={drawerCode} />
   </div>