From 32f150f8cf00f1127780bfd16b964a2c59e2dff1 Mon Sep 17 00:00:00 2001 From: Matt <github@nospam.33m.co> Date: Fri, 11 Sep 2020 22:35:51 +0100 Subject: [PATCH] Improve the demo layout Follow 'Stepper Feedback' example at https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steppers --- .../steppers/HorizontalLinearStepper.js | 44 ++++++++++++------- .../steppers/HorizontalLinearStepper.tsx | 44 ++++++++++++------- 2 files changed, 58 insertions(+), 30 deletions(-) diff --git a/docs/src/pages/components/steppers/HorizontalLinearStepper.js b/docs/src/pages/components/steppers/HorizontalLinearStepper.js index d1f0ba3f08f042..cad7c69fd8c34b 100644 --- a/docs/src/pages/components/steppers/HorizontalLinearStepper.js +++ b/docs/src/pages/components/steppers/HorizontalLinearStepper.js @@ -10,9 +10,20 @@ const useStyles = makeStyles((theme) => ({ root: { width: '100%', }, + buttonWrapper: { + display: 'flex', + flexDirection: 'row', + padding: '24px 0 0', + }, button: { marginRight: theme.spacing(1), }, + spacer: { + flex: '1 1 auto', + }, + content: { + padding: '0 24px', + }, instructions: { marginTop: theme.spacing(1), marginBottom: theme.spacing(1), @@ -105,32 +116,39 @@ export default function HorizontalLinearStepper() { ); })} </Stepper> - <div> + <div className={classes.content}> {activeStep === steps.length ? ( - <div> + <React.Fragment> <Typography className={classes.instructions}> All steps completed - you're finished </Typography> - <Button onClick={handleReset} className={classes.button}> - Reset - </Button> - </div> + <div className={classes.buttonWrapper}> + <div className={classes.spacer} /> + <Button variant="text" onClick={handleReset}> + Reset + </Button> + </div> + </React.Fragment> ) : ( - <div> + <React.Fragment> <Typography className={classes.instructions}> {getStepContent(activeStep)} </Typography> - <div> + <div className={classes.buttonWrapper}> <Button + variant="text" + color="inherit" disabled={activeStep === 0} onClick={handleBack} className={classes.button} > Back </Button> + <div className={classes.spacer} /> {isStepOptional(activeStep) && ( <Button - variant="contained" + variant="text" + color="inherit" onClick={handleSkip} className={classes.button} > @@ -138,15 +156,11 @@ export default function HorizontalLinearStepper() { </Button> )} - <Button - variant="contained" - onClick={handleNext} - className={classes.button} - > + <Button variant="text" onClick={handleNext}> {activeStep === steps.length - 1 ? 'Finish' : 'Next'} </Button> </div> - </div> + </React.Fragment> )} </div> </div> diff --git a/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx b/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx index 7f51fc72dcc209..5b080f61fdfb7a 100644 --- a/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx +++ b/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx @@ -11,9 +11,20 @@ const useStyles = makeStyles((theme: Theme) => root: { width: '100%', }, + buttonWrapper: { + display: 'flex', + flexDirection: 'row', + padding: '24px 0 0', + }, button: { marginRight: theme.spacing(1), }, + spacer: { + flex: '1 1 auto', + }, + content: { + padding: '0 24px', + }, instructions: { marginTop: theme.spacing(1), marginBottom: theme.spacing(1), @@ -109,47 +120,50 @@ export default function HorizontalLinearStepper() { ); })} </Stepper> - <div> + <div className={classes.content}> {activeStep === steps.length ? ( - <div> + <React.Fragment> <Typography className={classes.instructions}> All steps completed - you're finished </Typography> - <Button onClick={handleReset} className={classes.button}> - Reset - </Button> - </div> + <div className={classes.buttonWrapper}> + <div className={classes.spacer} /> + <Button variant="text" onClick={handleReset}> + Reset + </Button> + </div> + </React.Fragment> ) : ( - <div> + <React.Fragment> <Typography className={classes.instructions}> {getStepContent(activeStep)} </Typography> - <div> + <div className={classes.buttonWrapper}> <Button + variant="text" + color="inherit" disabled={activeStep === 0} onClick={handleBack} className={classes.button} > Back </Button> + <div className={classes.spacer} /> {isStepOptional(activeStep) && ( <Button - variant="contained" + variant="text" + color="inherit" onClick={handleSkip} className={classes.button} > Skip </Button> )} - <Button - variant="contained" - onClick={handleNext} - className={classes.button} - > + <Button variant="text" onClick={handleNext}> {activeStep === steps.length - 1 ? 'Finish' : 'Next'} </Button> </div> - </div> + </React.Fragment> )} </div> </div>