[MobileStepper] Add nextButton and backButton property

[wieseljonas]

I needed this to pass props to the MobileStepper component

Breaking change

+import KeyboardArrowLeft from 'material-ui-icons/KeyboardArrowLeft';
+import KeyboardArrowRight from 'material-ui-icons/KeyboardArrowRight';

     <MobileStepper
-        onBack={this.handleBack}
-        onNext={this.handleNext}
-        disableBack={this.state.activeStep === 0}
-        disableNext={this.state.activeStep === 5}
+        nextButton={
+          <Button dense onClick={this.handleNext} disabled={this.state.activeStep === 5}>
+            Next
+            <KeyboardArrowRight />
+          </Button>
+        }
+        backButton={
+          <Button dense onClick={this.handleBack} disabled={this.state.activeStep === 0}>
+            <KeyboardArrowLeft />
+            Back
+          </Button>
+        }
      />

[oliviertassinari]

Why not using PropTypes.object?

[oliviertassinari]

Wrong wording

[wieseljonas]

@oliviertassinari thanks for the feedback

[stunaz]

Looking at this change and at the MobileSteppper Api itself, maybe instead of passing props (backButtonText, backButtonProps, disableBack, onBack ....) of button. Maybe it would be better if the MobileSteppper would accept 2 components (i.e. backButton and nextButton) as props: thinking about somehting like this ;

<MobileStepper
          type="text"
          steps={6}
          position="static"
          activeStep={this.state.activeStep}
          className={classes.mobileStepper}
          backComponent={<Button .../>}
          nextComponent={<Button .../>}
        />

[wieseljonas]

@stunaz not a bad idea especially that now its not possible to remove the buttons at the first or last step

[oliviertassinari]

@stunaz I like this proposition. Following it we could make the MobileStepper API simpler. We could remove like 6 properties 👍.

[oliviertassinari]

The following properties list

• backButtonProps
• backButtonText
• disableBack
• disableNext
• nextButtonProps
• nextButtonText
• onBack
• onNext

Could become:

• backButton
• nextButton

[wieseljonas]

@oliviertassinari @stunaz Shall default buttons be implemented or like FormControlLabel should the prop is required?

[stunaz]

I thinkrequired. As the user need to apply himself the disabled state

[wieseljonas]

Should be good now

[oliviertassinari]

Warning: Unknown props disableBack, disableNext on

tag. Remove these props from the element. For details, see

Some warnings in the docs

We might have to handle the size of the button. This doesn't look as in the specs.
(We need to apply the dense property on the button)

[oliviertassinari]

Don't forget to remove the old props.

[oliviertassinari]

It would be good to have a back related comment.

[oliviertassinari]

It would be good to have a next related comment.

ok

[oliviertassinari]

Thanks