[AppBar] Add a position property

docs/src/components/AppFrame.js

@@ -65,8 +65,6 @@ const styleSheet = createStyleSheet('AppFrame', theme => ({
     flex: '0 1 auto',
   },
   appBar: {
-    left: 'auto',
-    right: 0,
     transition: theme.transitions.create('width'),
   },
   appBarHome: {

docs/src/pages/component-api/AppBar/AppBar.md

@@ -8,13 +8,17 @@
 | accent | bool | false | If `true`, the AppBar will use the theme's accent color. |
 | children | node |  | The content of the component. |
 | classes | object |  | Useful to extend the style applied to components. |
+| position | enum:&nbsp;'static'<br>&nbsp;'fixed'<br>&nbsp;'absolute'<br> | 'fixed' | The positioning type. |
 
 Any other properties supplied will be spread to the root element.
 ## Classes
 
 You can overrides all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
-- `appBar`
+- `root`
+- `position-fixed`
+- `position-absolute`
+- `position-static`
 - `primary`
 - `accent`
 

docs/src/pages/component-demos/app-bar/ButtonAppBar.js

@@ -12,13 +12,9 @@ import MenuIcon from 'material-ui-icons/Menu';
 
 const styleSheet = createStyleSheet('ButtonAppBar', {
   root: {
-    position: 'relative',
     marginTop: 30,
     width: '100%',
   },
-  appBar: {
-    position: 'relative',
-  },
   flex: {
     flex: 1,
   },
@@ -28,7 +24,7 @@ function ButtonAppBar(props) {
   const classes = props.classes;
   return (
     <div className={classes.root}>
-      <AppBar className={classes.appBar}>
+      <AppBar position="static">
         <Toolbar>
           <IconButton contrast aria-label="Menu">
             <MenuIcon />

docs/src/pages/component-demos/app-bar/SimpleAppBar.js

@@ -9,20 +9,16 @@ import Typography from 'material-ui/Typography';
 
 const styleSheet = createStyleSheet('SimpleAppBar', {
   root: {
-    position: 'relative',
     marginTop: 30,
     width: '100%',
   },
-  appBar: {
-    position: 'relative',
-  },
 });
 
 function SimpleAppBar(props) {
   const classes = props.classes;
   return (
     <div className={classes.root}>
-      <AppBar className={classes.appBar}>
+      <AppBar position="static">
         <Toolbar>
           <Typography type="title" colorInherit>Title</Typography>
         </Toolbar>

src/AppBar/AppBar.js

@@ -8,14 +8,27 @@ import withStyles from '../styles/withStyles';
 import Paper from '../Paper';
 
 export const styleSheet = createStyleSheet('MuiAppBar', theme => ({
-  appBar: {
+  root: {
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
+    zIndex: theme.zIndex.appBar,
+  },
+  'position-fixed': {
     position: 'fixed',
     top: 0,
-    left: 0,
-    zIndex: theme.zIndex.appBar,
+    left: 'auto',
+    right: 0,
+  },
+  'position-absolute': {
+    position: 'absolute',
+    top: 0,
+    left: 'auto',
+    right: 0,
+  },
+  'position-static': {
+    position: 'static',
+    flexShrink: 0,
   },
   primary: {
     backgroundColor: theme.palette.primary[500],
@@ -28,11 +41,19 @@ export const styleSheet = createStyleSheet('MuiAppBar', theme => ({
 }));
 
 function AppBar(props) {
-  const { accent, children, classes, className: classNameProp, ...other } = props;
+  const {
+    accent,
+    children,
+    classes,
+    className: classNameProp,
+    position, // eslint-disable-line no-unsed-vars
+    ...other
+  } = props;
 
   const className = classNames(
+    classes.root,
+    classes[`position-${position}`],
     {
-      [classes.appBar]: true,
       [classes.primary]: !accent,
       [classes.accent]: accent,
     },
@@ -63,10 +84,15 @@ AppBar.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The positioning type.
+   */
+  position: PropTypes.oneOf(['static', 'fixed', 'absolute']),
 };
 
 AppBar.defaultProps = {
   accent: false,
+  position: 'fixed',
 };
 
 export default withStyles(styleSheet)(AppBar);

src/AppBar/AppBar.spec.js

@@ -20,9 +20,9 @@ describe('<AppBar />', () => {
     assert.strictEqual(wrapper.props().elevation, 4, 'should render with a 4dp shadow');
   });
 
-  it('should render with the appBar class and primary', () => {
+  it('should render with the root class and primary', () => {
     const wrapper = shallow(<AppBar>Hello World</AppBar>);
-    assert.strictEqual(wrapper.hasClass(classes.appBar), true, 'should have the appBar class');
+    assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
     assert.strictEqual(
       wrapper.hasClass(classes.primary),
       true,
@@ -34,7 +34,7 @@ describe('<AppBar />', () => {
   it('should render the custom className and the appBar class', () => {
     const wrapper = shallow(<AppBar className="test-class-name" />);
     assert.strictEqual(wrapper.is('.test-class-name'), true, 'should pass the test className');
-    assert.strictEqual(wrapper.hasClass(classes.appBar), true, 'should have the appBar class');
+    assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
     assert.strictEqual(
       wrapper.hasClass(classes.primary),
       true,
@@ -44,7 +44,7 @@ describe('<AppBar />', () => {
 
   it('should render a primary app bar', () => {
     const wrapper = shallow(<AppBar primary>Hello World</AppBar>);
-    assert.strictEqual(wrapper.hasClass(classes.appBar), true, 'should have the appBar class');
+    assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
     assert.strictEqual(
       wrapper.hasClass(classes.primary),
       true,
@@ -55,7 +55,7 @@ describe('<AppBar />', () => {
 
   it('should render an accent app bar', () => {
     const wrapper = shallow(<AppBar accent>Hello World</AppBar>);
-    assert.strictEqual(wrapper.hasClass(classes.appBar), true, 'should have the appBar class');
+    assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
     assert.strictEqual(
       wrapper.hasClass(classes.primary),
       false,