Added position prop making MobileStepper not fixed by default.

mui · Jun 4, 2017 · 65c70e3 · 65c70e3
1 parent c9b9011
commit 65c70e3
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 20 deletions.
diff --git a/docs/src/pages/component-api/MobileStepper/MobileStepper.md b/docs/src/pages/component-api/MobileStepper/MobileStepper.md
@@ -13,6 +13,7 @@
 | nextButtonText | string | Next | Set the text that will appear within the next button. |
 | onBack | function |  | Supplied to the onClick attribute of the back button. |
 | onNext | function |  | Supplied to the onClick attribute of the next button. |
+| position | `bottom` or `top` |  | Set to fix to either the bottom or the top of the viewport. |
 | steps | number |  | The total amount of steps. |
 | buttonClassName | string |  | Specify an extra class to be put on back/next buttons |
 | className | string |  | Specify an extra class to be put on the root element |

diff --git a/docs/src/pages/component-demos/mobile-stepper/DotsMobileStepper.js b/docs/src/pages/component-demos/mobile-stepper/DotsMobileStepper.js
@@ -11,9 +11,6 @@ const styleSheet = createStyleSheet('DotsMobileStepper', {
     marginTop: 30,
     width: '100%',
   },
-  mobileStepper: {
-    position: 'relative',
-  },
 });
 
 class DotsMobileStepper extends Component {

diff --git a/docs/src/pages/component-demos/mobile-stepper/ProgressMobileStepper.js b/docs/src/pages/component-demos/mobile-stepper/ProgressMobileStepper.js
@@ -11,9 +11,6 @@ const styleSheet = createStyleSheet('ProgressMobileStepper', {
     marginTop: 30,
     width: '100%',
   },
-  mobileStepper: {
-    position: 'relative',
-  },
 });
 
 class ProgressMobileStepper extends Component {

diff --git a/docs/src/pages/component-demos/mobile-stepper/TextMobileStepper.js b/docs/src/pages/component-demos/mobile-stepper/TextMobileStepper.js
@@ -12,9 +12,6 @@ const styleSheet = createStyleSheet('TextMobileStepper', {
     marginTop: 30,
     width: '100%',
   },
-  mobileStepper: {
-    position: 'relative',
-  },
   textualDescription: {
     display: 'flex',
     flexDirection: 'row',

diff --git a/src/MobileStepper/MobileStepper.js b/src/MobileStepper/MobileStepper.js
@@ -18,12 +18,20 @@ export const styleSheet = createStyleSheet('MuiMobileStepper', theme => ({
     justifyContent: 'space-between',
     alignItems: 'center',
     width: '100%',
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing.unit,
+  },
+  fixedBottom: {
     position: 'fixed',
     bottom: 0,
     left: 0,
     zIndex: theme.zIndex.mobileStepper,
-    backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing.unit,
+  },
+  fixedTop: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    zIndex: theme.zIndex.mobileStepper,
   },
   button: {},
   dots: {
@@ -56,6 +64,7 @@ function MobileStepper(props) {
     disableNext,
     dotClassName: dotClassNameProp,
     dotsClassName: dotsClassNameProp,
+    position,
     kind,
     nextButtonText,
     onBack,
@@ -65,7 +74,14 @@ function MobileStepper(props) {
     ...other
   } = props;
 
-  const className = classNames(classes.root, classNameProp);
+  const className = classNames(
+    {
+      [classes.fixedBottom]: position === 'bottom',
+      [classes.fixedTop]: position === 'top',
+    },
+    classes.root,
+    classNameProp,
+  );
   const dotsClassName = classNames(classes.dots, dotsClassNameProp);
   const buttonClassName = classNames(classes.button, buttonClassNameProp);
   const progressClassName = classNames(classes.progress, progressClassNameProp);
@@ -155,6 +171,10 @@ MobileStepper.propTypes = {
    * Passed into the onTouchTap prop of the Next button.
    */
   onNext: PropTypes.func.isRequired,
+  /**
+   * Set the text that appears for the next button.
+   */
+  position: PropTypes.oneOf(['bottom', 'top']),
   /**
    * @ignore
    */

diff --git a/src/MobileStepper/MobileStepper.spec.js b/src/MobileStepper/MobileStepper.spec.js
@@ -30,19 +30,27 @@ describe('<MobileStepper />', () => {
   });
   it('should render with the root class', () => {
     const wrapper = shallow(<MobileStepper {...defaultProps} />);
-    assert.strictEqual(
-      wrapper.hasClass(classes.root),
-      true,
-      'should have the root class',
-    );
+    assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the root class');
   });
   it('should render the custom className and the root class', () => {
     const wrapper = shallow(<MobileStepper className="test-class-name" {...defaultProps} />);
     assert.strictEqual(wrapper.is('.test-class-name'), true, 'should pass the test className');
+    assert.strictEqual(wrapper.hasClass(classes.root), true, 'should have the mobileStepper class');
+  });
+  it('should render with the fixedBottom class if position prop is set to bottom', () => {
+    const wrapper = shallow(<MobileStepper position="bottom" {...defaultProps} />);
+    assert.strictEqual(
+      wrapper.hasClass(classes.fixedBottom),
+      true,
+      'should have the fixedBottom class',
+    );
+  });
+  it('should render with the fixedTop class if position prop is set to top', () => {
+    const wrapper = shallow(<MobileStepper position="top" {...defaultProps} />);
     assert.strictEqual(
-      wrapper.hasClass(classes.root),
+      wrapper.hasClass(classes.fixedTop),
       true,
-      'should have the mobileStepper class',
+      'should have the fixedTop class',
     );
   });
   it('should render two buttons', () => {

diff --git a/src/styles/zIndex.js b/src/styles/zIndex.js
@@ -2,6 +2,7 @@
 
 // Needed as the zIndex works with absolute values.
 export default {
+  mobileStepper: 900,
   menu: 1000,
   appBar: 1100,
   drawerOverlay: 1200,
@@ -12,5 +13,4 @@ export default {
   popover: 2100,
   snackbar: 2900,
   tooltip: 3000,
-  mobileStepper: 1100,
 };