From e5cfc52e3e2b288c01448daf16820552bc067973 Mon Sep 17 00:00:00 2001 From: Matt Date: Wed, 19 Aug 2020 17:25:08 +0100 Subject: [PATCH 01/12] [Stepper] Remove Paper --- docs/pages/api-docs/stepper.md | 7 +------ .../pages/guides/migration-v4/migration-v4.md | 19 +++++++++++++++++++ packages/material-ui/src/Stepper/Stepper.d.ts | 1 - packages/material-ui/src/Stepper/Stepper.js | 7 ++----- .../material-ui/src/Stepper/Stepper.test.js | 17 +---------------- 5 files changed, 23 insertions(+), 28 deletions(-) diff --git a/docs/pages/api-docs/stepper.md b/docs/pages/api-docs/stepper.md index 2355e8b356b10c..70d1aa1fd3b127 100644 --- a/docs/pages/api-docs/stepper.md +++ b/docs/pages/api-docs/stepper.md @@ -38,7 +38,7 @@ The `MuiStepper` name can be used for providing [default props](/customization/g The `ref` is forwarded to the root element. -Any other props supplied will be provided to the root element ([Paper](/api/paper/)). +Any other props supplied will be provided to the root element (native element). ## CSS @@ -57,11 +57,6 @@ You can override the style of the component thanks to one of these customization If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/Stepper/Stepper.js) for more detail. -## Inheritance - -The props of the [Paper](/api/paper/) component are also available. -You can take advantage of this behavior to [target nested components](/guides/api/#spread). - ## Demos - [Steppers](/components/steppers/) diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 98779490503cb9..31595724d8286a 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -524,6 +524,25 @@ const theme = createMuitheme({ + ``` + ### Stepper + +- The root component (Paper) was replaced with a div. Stepper no longer has elevation, nor inherits Paper's props. + +```diff +- +- +- Hello world +- +- ++ ++ ++ ++ Hello world ++ ++ ++ +``` + ### TablePagination - The customization of the table pagination's actions labels must be done with the `getItemAriaLabel` prop. This increases consistency with the `Pagination` component. diff --git a/packages/material-ui/src/Stepper/Stepper.d.ts b/packages/material-ui/src/Stepper/Stepper.d.ts index 57a80434bb70eb..05c9644b1c3af1 100644 --- a/packages/material-ui/src/Stepper/Stepper.d.ts +++ b/packages/material-ui/src/Stepper/Stepper.d.ts @@ -62,6 +62,5 @@ export type StepperClasskey = keyof NonNullable; * API: * * - [Stepper API](https://material-ui.com/api/stepper/) - * - inherits [Paper API](https://material-ui.com/api/paper/) */ export default function Stepper(props: StepperProps): JSX.Element; diff --git a/packages/material-ui/src/Stepper/Stepper.js b/packages/material-ui/src/Stepper/Stepper.js index 92f40690e9295e..bcb7ea5a0c289d 100644 --- a/packages/material-ui/src/Stepper/Stepper.js +++ b/packages/material-ui/src/Stepper/Stepper.js @@ -2,7 +2,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import withStyles from '../styles/withStyles'; -import Paper from '../Paper'; import StepConnector from '../StepConnector'; import StepperContext from './StepperContext'; @@ -57,9 +56,7 @@ const Stepper = React.forwardRef(function Stepper(props, ref) { return ( - {steps} - + ); }); diff --git a/packages/material-ui/src/Stepper/Stepper.test.js b/packages/material-ui/src/Stepper/Stepper.test.js index f903da2d0cb4e4..f114f52c835f47 100644 --- a/packages/material-ui/src/Stepper/Stepper.test.js +++ b/packages/material-ui/src/Stepper/Stepper.test.js @@ -1,7 +1,6 @@ import * as React from 'react'; import { expect } from 'chai'; import { getClasses, createMount, createClientRender, describeConformance } from 'test/utils'; -import Paper from '../Paper'; import Step from '../Step'; import StepLabel from '../StepLabel'; import StepConnector from '../StepConnector'; @@ -27,27 +26,13 @@ describe('', () => { , () => ({ classes, - inheritComponent: Paper, + inheritComponent: 'div', mount, refInstanceof: window.HTMLDivElement, skip: ['componentProp'], }), ); - it('has no elevation by default', () => { - const { container } = render( - - - , - ); - - const paperClasses = getClasses(); - - const paper = container.querySelector(`.${paperClasses.elevation0}`); - - expect(paper).not.equal(null); - }); - describe('rendering children', () => { it('renders 3 Step and 2 StepConnector components', () => { const { container } = render( From 7741415e5ef0709ebfa84d8f056cd70673d8eb07 Mon Sep 17 00:00:00 2001 From: Matt Date: Fri, 11 Sep 2020 21:23:08 +0100 Subject: [PATCH 02/12] alphabetize Skeleton in migration guide --- .../pages/guides/migration-v4/migration-v4.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index 31595724d8286a..7d8fbe39b12058 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -470,6 +470,19 @@ const theme = createMuitheme({ + - +
+
+ +
+ ) : ( -
+ {getStepContent(activeStep)} -
+
+
{isStepOptional(activeStep) && ( )} -
-
+ )}
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() { ); })} -
+
{activeStep === steps.length ? ( -
+ All steps completed - you're finished - -
+
+
+ +
+ ) : ( -
+ {getStepContent(activeStep)} -
+
+
{isStepOptional(activeStep) && ( )} -
-
+ )}
From 36daf97b395be5cb5e0771314f50eba14f514141 Mon Sep 17 00:00:00 2001 From: Matt Date: Sat, 12 Sep 2020 00:53:11 +0100 Subject: [PATCH 08/12] mk3 --- .../steppers/HorizontalLinearStepper.js | 85 +++++++++---------- .../steppers/HorizontalLinearStepper.tsx | 85 +++++++++---------- packages/material-ui/src/Stepper/Stepper.js | 1 - 3 files changed, 80 insertions(+), 91 deletions(-) diff --git a/docs/src/pages/components/steppers/HorizontalLinearStepper.js b/docs/src/pages/components/steppers/HorizontalLinearStepper.js index cad7c69fd8c34b..8fa40b22f57826 100644 --- a/docs/src/pages/components/steppers/HorizontalLinearStepper.js +++ b/docs/src/pages/components/steppers/HorizontalLinearStepper.js @@ -13,7 +13,7 @@ const useStyles = makeStyles((theme) => ({ buttonWrapper: { display: 'flex', flexDirection: 'row', - padding: '24px 0 0', + padding: '16px 0 0', }, button: { marginRight: theme.spacing(1), @@ -21,11 +21,8 @@ const useStyles = makeStyles((theme) => ({ spacer: { flex: '1 1 auto', }, - content: { - padding: '0 24px', - }, instructions: { - marginTop: theme.spacing(1), + marginTop: theme.spacing(2), marginBottom: theme.spacing(1), }, })); @@ -116,53 +113,51 @@ export default function HorizontalLinearStepper() { ); })} -
- {activeStep === steps.length ? ( - - - All steps completed - you're finished - -
-
- -
- - ) : ( - - - {getStepContent(activeStep)} - -
+ {activeStep === steps.length ? ( + + + All steps completed - you're finished + +
+
+ +
+ + ) : ( + + + {getStepContent(activeStep)} + +
+ +
+ {isStepOptional(activeStep) && ( -
- {isStepOptional(activeStep) && ( - - )} + )} - -
- - )} -
+ +
+ + )}
); } diff --git a/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx b/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx index 5b080f61fdfb7a..8ffb2bb1094757 100644 --- a/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx +++ b/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx @@ -14,7 +14,7 @@ const useStyles = makeStyles((theme: Theme) => buttonWrapper: { display: 'flex', flexDirection: 'row', - padding: '24px 0 0', + padding: '16px 0 0', }, button: { marginRight: theme.spacing(1), @@ -22,11 +22,8 @@ const useStyles = makeStyles((theme: Theme) => spacer: { flex: '1 1 auto', }, - content: { - padding: '0 24px', - }, instructions: { - marginTop: theme.spacing(1), + marginTop: theme.spacing(2), marginBottom: theme.spacing(1), }, }), @@ -120,52 +117,50 @@ export default function HorizontalLinearStepper() { ); })} -
- {activeStep === steps.length ? ( - - - All steps completed - you're finished - -
-
- -
- - ) : ( - - - {getStepContent(activeStep)} - -
+ {activeStep === steps.length ? ( + + + All steps completed - you're finished + +
+
+ +
+ + ) : ( + + + {getStepContent(activeStep)} + +
+ +
+ {isStepOptional(activeStep) && ( -
- {isStepOptional(activeStep) && ( - - )} - -
- - )} -
+ )} + +
+ + )}
); } diff --git a/packages/material-ui/src/Stepper/Stepper.js b/packages/material-ui/src/Stepper/Stepper.js index bcb7ea5a0c289d..dc61f365eb9429 100644 --- a/packages/material-ui/src/Stepper/Stepper.js +++ b/packages/material-ui/src/Stepper/Stepper.js @@ -9,7 +9,6 @@ export const styles = { /* Styles applied to the root element. */ root: { display: 'flex', - padding: 24, }, /* Styles applied to the root element if `orientation="horizontal"`. */ horizontal: { From 86fb9158d2132ee220de057254ff094aef3e41c0 Mon Sep 17 00:00:00 2001 From: Matt Date: Sat, 12 Sep 2020 01:18:22 +0100 Subject: [PATCH 09/12] update demos --- .../components/steppers/CustomizedSteppers.js | 105 ++------- .../steppers/CustomizedSteppers.tsx | 114 ++------- ...HorizontalLinearAlternativeLabelStepper.js | 82 +------ ...orizontalLinearAlternativeLabelStepper.tsx | 92 +------- .../steppers/HorizontalLinearStepper.js | 47 ++-- .../steppers/HorizontalLinearStepper.tsx | 47 ++-- ...izontalNonLinearAlternativeLabelStepper.js | 218 ----------------- ...zontalNonLinearAlternativeLabelStepper.tsx | 221 ------------------ .../steppers/HorizontalNonLinearStepper.js | 76 +++--- .../steppers/HorizontalNonLinearStepper.tsx | 76 +++--- .../HorizontalNonLinearStepperWithError.js | 163 ------------- .../HorizontalNonLinearStepperWithError.tsx | 167 ------------- .../steppers/HorizontalStepperWithError.js | 71 ++++++ .../steppers/HorizontalStepperWithError.tsx | 76 ++++++ .../steppers/SwipeableTextMobileStepper.js | 16 +- .../steppers/SwipeableTextMobileStepper.tsx | 16 +- .../components/steppers/TextMobileStepper.js | 67 +++--- .../components/steppers/TextMobileStepper.tsx | 67 +++--- .../steppers/VerticalLinearStepper.js | 58 +++-- .../steppers/VerticalLinearStepper.tsx | 58 +++-- .../src/pages/components/steppers/steppers.md | 59 ++--- 21 files changed, 477 insertions(+), 1419 deletions(-) delete mode 100644 docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js delete mode 100644 docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.tsx delete mode 100644 docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.js delete mode 100644 docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.tsx create mode 100644 docs/src/pages/components/steppers/HorizontalStepperWithError.js create mode 100644 docs/src/pages/components/steppers/HorizontalStepperWithError.tsx diff --git a/docs/src/pages/components/steppers/CustomizedSteppers.js b/docs/src/pages/components/steppers/CustomizedSteppers.js index 782482329d9435..960a58f8b861ad 100644 --- a/docs/src/pages/components/steppers/CustomizedSteppers.js +++ b/docs/src/pages/components/steppers/CustomizedSteppers.js @@ -10,8 +10,15 @@ import SettingsIcon from '@material-ui/icons/Settings'; import GroupAddIcon from '@material-ui/icons/GroupAdd'; import VideoLabelIcon from '@material-ui/icons/VideoLabel'; import StepConnector from '@material-ui/core/StepConnector'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; + +const useStyles = makeStyles({ + root: { + width: '100%', + }, + quontoStepper: { + marginBottom: 32, + }, +}); const QontoConnector = withStyles({ alternativeLabel: { @@ -177,66 +184,22 @@ ColorlibStepIcon.propTypes = { icon: PropTypes.node, }; -const useStyles = makeStyles((theme) => ({ - root: { - width: '100%', - }, - button: { - marginRight: theme.spacing(1), - }, - instructions: { - marginTop: theme.spacing(1), - marginBottom: theme.spacing(1), - }, -})); - -function getSteps() { - return ['Select campaign settings', 'Create an ad group', 'Create an ad']; -} - -function getStepContent(step) { - switch (step) { - case 0: - return 'Select campaign settings...'; - case 1: - return 'What is an ad group anyways?'; - case 2: - return 'This is the bit I really care about!'; - default: - return 'Unknown step'; - } -} +const steps = [ + 'Select campaign settings', + 'Create an ad group', + 'Create an ad', +]; export default function CustomizedSteppers() { const classes = useStyles(); - const [activeStep, setActiveStep] = React.useState(1); - const steps = getSteps(); - - const handleNext = () => { - setActiveStep((prevActiveStep) => prevActiveStep + 1); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const handleReset = () => { - setActiveStep(0); - }; return (
- - {steps.map((label) => ( - - {label} - - ))} - } + className={classes.quontoStepper} > {steps.map((label) => ( @@ -246,7 +209,7 @@ export default function CustomizedSteppers() { } > {steps.map((label) => ( @@ -255,40 +218,6 @@ export default function CustomizedSteppers() { ))} -
- {activeStep === steps.length ? ( -
- - All steps completed - you're finished - - -
- ) : ( -
- - {getStepContent(activeStep)} - -
- - -
-
- )} -
); } diff --git a/docs/src/pages/components/steppers/CustomizedSteppers.tsx b/docs/src/pages/components/steppers/CustomizedSteppers.tsx index afffc5d0ac654a..0394a4722a7c4d 100644 --- a/docs/src/pages/components/steppers/CustomizedSteppers.tsx +++ b/docs/src/pages/components/steppers/CustomizedSteppers.tsx @@ -1,10 +1,5 @@ import * as React from 'react'; -import { - makeStyles, - Theme, - createStyles, - withStyles, -} from '@material-ui/core/styles'; +import { makeStyles, withStyles } from '@material-ui/core/styles'; import clsx from 'clsx'; import Stepper from '@material-ui/core/Stepper'; import Step from '@material-ui/core/Step'; @@ -14,10 +9,17 @@ import SettingsIcon from '@material-ui/icons/Settings'; import GroupAddIcon from '@material-ui/icons/GroupAdd'; import VideoLabelIcon from '@material-ui/icons/VideoLabel'; import StepConnector from '@material-ui/core/StepConnector'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; import { StepIconProps } from '@material-ui/core/StepIcon'; +const useStyles = makeStyles({ + root: { + width: '100%', + }, + quontoStepper: { + marginBottom: 32, + }, +}); + const QontoConnector = withStyles({ alternativeLabel: { top: 10, @@ -152,68 +154,22 @@ function ColorlibStepIcon(props: StepIconProps) { ); } -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: '100%', - }, - button: { - marginRight: theme.spacing(1), - }, - instructions: { - marginTop: theme.spacing(1), - marginBottom: theme.spacing(1), - }, - }), -); - -function getSteps() { - return ['Select campaign settings', 'Create an ad group', 'Create an ad']; -} - -function getStepContent(step: number) { - switch (step) { - case 0: - return 'Select campaign settings...'; - case 1: - return 'What is an ad group anyways?'; - case 2: - return 'This is the bit I really care about!'; - default: - return 'Unknown step'; - } -} +const steps = [ + 'Select campaign settings', + 'Create an ad group', + 'Create an ad', +]; export default function CustomizedSteppers() { const classes = useStyles(); - const [activeStep, setActiveStep] = React.useState(1); - const steps = getSteps(); - - const handleNext = () => { - setActiveStep((prevActiveStep) => prevActiveStep + 1); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const handleReset = () => { - setActiveStep(0); - }; return (
- - {steps.map((label) => ( - - {label} - - ))} - } + className={classes.quontoStepper} > {steps.map((label) => ( @@ -223,7 +179,7 @@ export default function CustomizedSteppers() { } > {steps.map((label) => ( @@ -232,40 +188,6 @@ export default function CustomizedSteppers() { ))} -
- {activeStep === steps.length ? ( -
- - All steps completed - you're finished - - -
- ) : ( -
- - {getStepContent(activeStep)} - -
- - -
-
- )} -
); } diff --git a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js index 852c7a17fe8db6..3052f2182e7a53 100644 --- a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js +++ b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js @@ -3,97 +3,31 @@ import { makeStyles } from '@material-ui/core/styles'; import Stepper from '@material-ui/core/Stepper'; import Step from '@material-ui/core/Step'; import StepLabel from '@material-ui/core/StepLabel'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles({ root: { width: '100%', }, - backButton: { - marginRight: theme.spacing(1), - }, - instructions: { - marginTop: theme.spacing(1), - marginBottom: theme.spacing(1), - }, -})); - -function getSteps() { - return [ - 'Select master blaster campaign settings', - 'Create an ad group', - 'Create an ad', - ]; -} +}); -function getStepContent(stepIndex) { - switch (stepIndex) { - case 0: - return 'Select campaign settings...'; - case 1: - return 'What is an ad group anyways?'; - case 2: - return 'This is the bit I really care about!'; - default: - return 'Unknown stepIndex'; - } -} +const steps = [ + 'Select master blaster campaign settings', + 'Create an ad group', + 'Create an ad', +]; export default function HorizontalLabelPositionBelowStepper() { const classes = useStyles(); - const [activeStep, setActiveStep] = React.useState(0); - const steps = getSteps(); - - const handleNext = () => { - setActiveStep((prevActiveStep) => prevActiveStep + 1); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const handleReset = () => { - setActiveStep(0); - }; return (
- + {steps.map((label) => ( {label} ))} -
- {activeStep === steps.length ? ( -
- - All steps completed - - -
- ) : ( -
- - {getStepContent(activeStep)} - -
- - -
-
- )} -
); } diff --git a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx index ccf9d43974f160..3052f2182e7a53 100644 --- a/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx +++ b/docs/src/pages/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx @@ -1,101 +1,33 @@ import * as React from 'react'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import { makeStyles } from '@material-ui/core/styles'; import Stepper from '@material-ui/core/Stepper'; import Step from '@material-ui/core/Step'; import StepLabel from '@material-ui/core/StepLabel'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: '100%', - }, - backButton: { - marginRight: theme.spacing(1), - }, - instructions: { - marginTop: theme.spacing(1), - marginBottom: theme.spacing(1), - }, - }), -); +const useStyles = makeStyles({ + root: { + width: '100%', + }, +}); -function getSteps() { - return [ - 'Select master blaster campaign settings', - 'Create an ad group', - 'Create an ad', - ]; -} - -function getStepContent(stepIndex: number) { - switch (stepIndex) { - case 0: - return 'Select campaign settings...'; - case 1: - return 'What is an ad group anyways?'; - case 2: - return 'This is the bit I really care about!'; - default: - return 'Unknown stepIndex'; - } -} +const steps = [ + 'Select master blaster campaign settings', + 'Create an ad group', + 'Create an ad', +]; export default function HorizontalLabelPositionBelowStepper() { const classes = useStyles(); - const [activeStep, setActiveStep] = React.useState(0); - const steps = getSteps(); - - const handleNext = () => { - setActiveStep((prevActiveStep) => prevActiveStep + 1); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const handleReset = () => { - setActiveStep(0); - }; return (
- + {steps.map((label) => ( {label} ))} -
- {activeStep === steps.length ? ( -
- - All steps completed - - -
- ) : ( -
- - {getStepContent(activeStep)} - -
- - -
-
- )} -
); } diff --git a/docs/src/pages/components/steppers/HorizontalLinearStepper.js b/docs/src/pages/components/steppers/HorizontalLinearStepper.js index 8fa40b22f57826..7cb3710f1111cc 100644 --- a/docs/src/pages/components/steppers/HorizontalLinearStepper.js +++ b/docs/src/pages/components/steppers/HorizontalLinearStepper.js @@ -27,28 +27,25 @@ const useStyles = makeStyles((theme) => ({ }, })); -function getSteps() { - return ['Select campaign settings', 'Create an ad group', 'Create an ad']; -} - -function getStepContent(step) { - switch (step) { - case 0: - return 'Select campaign settings...'; - case 1: - return 'What is an ad group anyways?'; - case 2: - return 'This is the bit I really care about!'; - default: - return 'Unknown step'; - } -} +const steps = [ + { + label: 'Select campaign settings', + description: 'Select campaign settings...', + }, + { + tabel: 'Create an ad group', + description: 'What is an ad group anyway?', + }, + { + label: 'Create an ad', + description: 'This is the bit I really care about!', + }, +]; export default function HorizontalLinearStepper() { const classes = useStyles(); const [activeStep, setActiveStep] = React.useState(0); const [skipped, setSkipped] = React.useState(new Set()); - const steps = getSteps(); const isStepOptional = (step) => { return step === 1; @@ -95,7 +92,7 @@ export default function HorizontalLinearStepper() { return (
- {steps.map((label, index) => { + {steps.map((step, index) => { const stepProps = {}; const labelProps = {}; if (isStepOptional(index)) { @@ -107,8 +104,8 @@ export default function HorizontalLinearStepper() { stepProps.completed = false; } return ( - - {label} + + {step.label} ); })} @@ -120,19 +117,16 @@ export default function HorizontalLinearStepper() {
- +
) : ( - {getStepContent(activeStep)} + {steps[activeStep].description}
diff --git a/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx b/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx index 8ffb2bb1094757..ec07781c2a5368 100644 --- a/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx +++ b/docs/src/pages/components/steppers/HorizontalLinearStepper.tsx @@ -29,28 +29,25 @@ const useStyles = makeStyles((theme: Theme) => }), ); -function getSteps() { - return ['Select campaign settings', 'Create an ad group', 'Create an ad']; -} - -function getStepContent(step: number) { - switch (step) { - case 0: - return 'Select campaign settings...'; - case 1: - return 'What is an ad group anyways?'; - case 2: - return 'This is the bit I really care about!'; - default: - return 'Unknown step'; - } -} +const steps = [ + { + label: 'Select campaign settings', + description: 'Select campaign settings...', + }, + { + tabel: 'Create an ad group', + description: 'What is an ad group anyway?', + }, + { + label: 'Create an ad', + description: 'This is the bit I really care about!', + }, +]; export default function HorizontalLinearStepper() { const classes = useStyles(); const [activeStep, setActiveStep] = React.useState(0); const [skipped, setSkipped] = React.useState(new Set()); - const steps = getSteps(); const isStepOptional = (step: number) => { return step === 1; @@ -97,7 +94,7 @@ export default function HorizontalLinearStepper() { return (
- {steps.map((label, index) => { + {steps.map((step, index) => { const stepProps: { completed?: boolean } = {}; const labelProps: { optional?: React.ReactNode; @@ -111,8 +108,8 @@ export default function HorizontalLinearStepper() { stepProps.completed = false; } return ( - - {label} + + {step.label} ); })} @@ -124,19 +121,16 @@ export default function HorizontalLinearStepper() {
- +
) : ( - {getStepContent(activeStep)} + {steps[activeStep].description}
diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js b/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js deleted file mode 100644 index a0bfc346e69cfa..00000000000000 --- a/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js +++ /dev/null @@ -1,218 +0,0 @@ -import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import Stepper from '@material-ui/core/Stepper'; -import Step from '@material-ui/core/Step'; -import StepButton from '@material-ui/core/StepButton'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; - -const useStyles = makeStyles((theme) => ({ - root: { - width: '100%', - }, - button: { - marginRight: theme.spacing(1), - }, - backButton: { - marginRight: theme.spacing(1), - }, - completed: { - display: 'inline-block', - }, - instructions: { - marginTop: theme.spacing(1), - marginBottom: theme.spacing(1), - }, -})); - -function getSteps() { - return ['Select campaign settings', 'Create an ad group', 'Create an ad']; -} - -function getStepContent(step) { - switch (step) { - case 0: - return 'Step 1: Select campaign settings...'; - case 1: - return 'Step 2: What is an ad group anyways?'; - case 2: - return 'Step 3: This is the bit I really care about!'; - default: - return 'Unknown step'; - } -} - -export default function HorizontalNonLinearAlternativeLabelStepper() { - const classes = useStyles(); - const [activeStep, setActiveStep] = React.useState(0); - const [completed, setCompleted] = React.useState(new Set()); - const [skipped, setSkipped] = React.useState(new Set()); - const steps = getSteps(); - - const totalSteps = () => { - return getSteps().length; - }; - - const isStepOptional = (step) => { - return step === 1; - }; - - const handleSkip = () => { - if (!isStepOptional(activeStep)) { - // You probably want to guard against something like this - // it should never occur unless someone's actively trying to break something. - throw new Error("You can't skip a step that isn't optional."); - } - - setActiveStep((prevActiveStep) => prevActiveStep + 1); - setSkipped((prevSkipped) => { - const newSkipped = new Set(prevSkipped.values()); - newSkipped.add(activeStep); - return newSkipped; - }); - }; - - const skippedSteps = () => { - return skipped.size; - }; - - const completedSteps = () => { - return completed.size; - }; - - const allStepsCompleted = () => { - return completedSteps() === totalSteps() - skippedSteps(); - }; - - const isLastStep = () => { - return activeStep === totalSteps() - 1; - }; - - const handleNext = () => { - const newActiveStep = - isLastStep() && !allStepsCompleted() - ? // It's the last step, but not all steps have been completed - // find the first step that has been completed - steps.findIndex((step, i) => !completed.has(i)) - : activeStep + 1; - - setActiveStep(newActiveStep); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const handleStep = (step) => () => { - setActiveStep(step); - }; - - const handleComplete = () => { - const newCompleted = new Set(completed); - newCompleted.add(activeStep); - setCompleted(newCompleted); - - /** - * Sigh... it would be much nicer to replace the following if conditional with - * `if (!this.allStepsComplete())` however state is not set when we do this, - * thus we have to resort to not being very DRY. - */ - if (completed.size !== totalSteps() - skippedSteps()) { - handleNext(); - } - }; - - const handleReset = () => { - setActiveStep(0); - setCompleted(new Set()); - setSkipped(new Set()); - }; - - const isStepSkipped = (step) => { - return skipped.has(step); - }; - - function isStepComplete(step) { - return completed.has(step); - } - - return ( -
- - {steps.map((label, index) => { - const stepProps = {}; - const buttonProps = {}; - if (isStepOptional(index)) { - buttonProps.optional = ( - Optional - ); - } - if (isStepSkipped(index)) { - stepProps.completed = false; - } - return ( - - - {label} - - - ); - })} - -
- {allStepsCompleted() ? ( -
- - All steps completed - you're finished - - -
- ) : ( -
- - {getStepContent(activeStep)} - -
- - - {isStepOptional(activeStep) && !completed.has(activeStep) && ( - - )} - - {activeStep !== steps.length && - (completed.has(activeStep) ? ( - - Step {activeStep + 1} already completed - - ) : ( - - ))} -
-
- )} -
-
- ); -} diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.tsx b/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.tsx deleted file mode 100644 index 25ffb9c40ca99e..00000000000000 --- a/docs/src/pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.tsx +++ /dev/null @@ -1,221 +0,0 @@ -import * as React from 'react'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; -import Stepper from '@material-ui/core/Stepper'; -import Step from '@material-ui/core/Step'; -import StepButton from '@material-ui/core/StepButton'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: '100%', - }, - button: { - marginRight: theme.spacing(1), - }, - backButton: { - marginRight: theme.spacing(1), - }, - completed: { - display: 'inline-block', - }, - instructions: { - marginTop: theme.spacing(1), - marginBottom: theme.spacing(1), - }, - }), -); - -function getSteps() { - return ['Select campaign settings', 'Create an ad group', 'Create an ad']; -} - -function getStepContent(step: number) { - switch (step) { - case 0: - return 'Step 1: Select campaign settings...'; - case 1: - return 'Step 2: What is an ad group anyways?'; - case 2: - return 'Step 3: This is the bit I really care about!'; - default: - return 'Unknown step'; - } -} - -export default function HorizontalNonLinearAlternativeLabelStepper() { - const classes = useStyles(); - const [activeStep, setActiveStep] = React.useState(0); - const [completed, setCompleted] = React.useState(new Set()); - const [skipped, setSkipped] = React.useState(new Set()); - const steps = getSteps(); - - const totalSteps = () => { - return getSteps().length; - }; - - const isStepOptional = (step: number) => { - return step === 1; - }; - - const handleSkip = () => { - if (!isStepOptional(activeStep)) { - // You probably want to guard against something like this - // it should never occur unless someone's actively trying to break something. - throw new Error("You can't skip a step that isn't optional."); - } - - setActiveStep((prevActiveStep) => prevActiveStep + 1); - setSkipped((prevSkipped) => { - const newSkipped = new Set(prevSkipped.values()); - newSkipped.add(activeStep); - return newSkipped; - }); - }; - - const skippedSteps = () => { - return skipped.size; - }; - - const completedSteps = () => { - return completed.size; - }; - - const allStepsCompleted = () => { - return completedSteps() === totalSteps() - skippedSteps(); - }; - - const isLastStep = () => { - return activeStep === totalSteps() - 1; - }; - - const handleNext = () => { - const newActiveStep = - isLastStep() && !allStepsCompleted() - ? // It's the last step, but not all steps have been completed - // find the first step that has been completed - steps.findIndex((step, i) => !completed.has(i)) - : activeStep + 1; - - setActiveStep(newActiveStep); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const handleStep = (step: number) => () => { - setActiveStep(step); - }; - - const handleComplete = () => { - const newCompleted = new Set(completed); - newCompleted.add(activeStep); - setCompleted(newCompleted); - - /** - * Sigh... it would be much nicer to replace the following if conditional with - * `if (!this.allStepsComplete())` however state is not set when we do this, - * thus we have to resort to not being very DRY. - */ - if (completed.size !== totalSteps() - skippedSteps()) { - handleNext(); - } - }; - - const handleReset = () => { - setActiveStep(0); - setCompleted(new Set()); - setSkipped(new Set()); - }; - - const isStepSkipped = (step: number) => { - return skipped.has(step); - }; - - function isStepComplete(step: number) { - return completed.has(step); - } - - return ( -
- - {steps.map((label, index) => { - const stepProps: { completed?: boolean } = {}; - const buttonProps: { - optional?: React.ReactNode; - } = {}; - if (isStepOptional(index)) { - buttonProps.optional = ( - Optional - ); - } - if (isStepSkipped(index)) { - stepProps.completed = false; - } - return ( - - - {label} - - - ); - })} - -
- {allStepsCompleted() ? ( -
- - All steps completed - you're finished - - -
- ) : ( -
- - {getStepContent(activeStep)} - -
- - - {isStepOptional(activeStep) && !completed.has(activeStep) && ( - - )} - {activeStep !== steps.length && - (completed.has(activeStep) ? ( - - Step {activeStep + 1} already completed - - ) : ( - - ))} -
-
- )} -
-
- ); -} diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js index 233983f0362bc0..c0e6aa743ec279 100644 --- a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js +++ b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.js @@ -10,40 +10,45 @@ const useStyles = makeStyles((theme) => ({ root: { width: '100%', }, + buttonWrapper: { + display: 'flex', + flexDirection: 'row', + padding: '16px 0 0', + }, button: { marginRight: theme.spacing(1), }, + spacer: { + flex: '1 1 auto', + }, completed: { display: 'inline-block', }, instructions: { - marginTop: theme.spacing(1), + marginTop: theme.spacing(2), marginBottom: theme.spacing(1), }, })); -function getSteps() { - return ['Select campaign settings', 'Create an ad group', 'Create an ad']; -} - -function getStepContent(step) { - switch (step) { - case 0: - return 'Step 1: Select campaign settings...'; - case 1: - return 'Step 2: What is an ad group anyways?'; - case 2: - return 'Step 3: This is the bit I really care about!'; - default: - return 'Unknown step'; - } -} +const steps = [ + { + label: 'Select campaign settings', + description: 'Select campaign settings...', + }, + { + tabel: 'Create an ad group', + description: 'What is an ad group anyway?', + }, + { + label: 'Create an ad', + description: 'This is the bit I really care about!', + }, +]; export default function HorizontalNonLinearStepper() { const classes = useStyles(); const [activeStep, setActiveStep] = React.useState(0); const [completed, setCompleted] = React.useState({}); - const steps = getSteps(); const totalSteps = () => { return steps.length; @@ -94,38 +99,41 @@ export default function HorizontalNonLinearStepper() { return (
- {steps.map((label, index) => ( - - {label} + {steps.map((step, index) => ( + + + {step.label} + ))}
{allStepsCompleted() ? ( -
+ All steps completed - you're finished - -
+
+
+ +
+ ) : ( -
+ - {getStepContent(activeStep)} + {steps[activeStep].description} -
+
- {activeStep !== steps.length && @@ -134,14 +142,14 @@ export default function HorizontalNonLinearStepper() { Step {activeStep + 1} already completed ) : ( - ))}
-
+ )}
diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.tsx b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.tsx index 74a01fe653657f..59fd6a468a8d8d 100644 --- a/docs/src/pages/components/steppers/HorizontalNonLinearStepper.tsx +++ b/docs/src/pages/components/steppers/HorizontalNonLinearStepper.tsx @@ -11,35 +11,41 @@ const useStyles = makeStyles((theme: Theme) => root: { width: '100%', }, + buttonWrapper: { + display: 'flex', + flexDirection: 'row', + padding: '16px 0 0', + }, button: { marginRight: theme.spacing(1), }, + spacer: { + flex: '1 1 auto', + }, completed: { display: 'inline-block', }, instructions: { - marginTop: theme.spacing(1), + marginTop: theme.spacing(2), marginBottom: theme.spacing(1), }, }), ); -function getSteps() { - return ['Select campaign settings', 'Create an ad group', 'Create an ad']; -} - -function getStepContent(step: number) { - switch (step) { - case 0: - return 'Step 1: Select campaign settings...'; - case 1: - return 'Step 2: What is an ad group anyways?'; - case 2: - return 'Step 3: This is the bit I really care about!'; - default: - return 'Unknown step'; - } -} +const steps = [ + { + label: 'Select campaign settings', + description: 'Select campaign settings...', + }, + { + tabel: 'Create an ad group', + description: 'What is an ad group anyway?', + }, + { + label: 'Create an ad', + description: 'This is the bit I really care about!', + }, +]; export default function HorizontalNonLinearStepper() { const classes = useStyles(); @@ -47,7 +53,6 @@ export default function HorizontalNonLinearStepper() { const [completed, setCompleted] = React.useState<{ [k: number]: boolean; }>({}); - const steps = getSteps(); const totalSteps = () => { return steps.length; @@ -98,38 +103,41 @@ export default function HorizontalNonLinearStepper() { return (
- {steps.map((label, index) => ( - - {label} + {steps.map((step, index) => ( + + + {step.label} + ))}
{allStepsCompleted() ? ( -
+ All steps completed - you're finished - -
+
+
+ +
+ ) : ( -
+ - {getStepContent(activeStep)} + {steps[activeStep].description} -
+
- {activeStep !== steps.length && @@ -138,14 +146,14 @@ export default function HorizontalNonLinearStepper() { Step {activeStep + 1} already completed ) : ( - ))}
-
+ )}
diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.js b/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.js deleted file mode 100644 index d0b4018251dd8f..00000000000000 --- a/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.js +++ /dev/null @@ -1,163 +0,0 @@ -import * as React from 'react'; -import { makeStyles } from '@material-ui/core/styles'; -import Stepper from '@material-ui/core/Stepper'; -import Step from '@material-ui/core/Step'; -import StepLabel from '@material-ui/core/StepLabel'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; - -const useStyles = makeStyles((theme) => ({ - root: { - width: '100%', - }, - button: { - marginRight: theme.spacing(1), - }, - instructions: { - marginTop: theme.spacing(1), - marginBottom: theme.spacing(1), - }, -})); - -function getSteps() { - return ['Select campaign settings', 'Create an ad group', 'Create an ad']; -} - -function getStepContent(step) { - switch (step) { - case 0: - return 'Select campaign settings...'; - case 1: - return 'What is an ad group anyways?'; - case 2: - return 'This is the bit I really care about!'; - default: - return 'Unknown step'; - } -} - -export default function HorizontalNonLinearStepperWithError() { - const classes = useStyles(); - const [activeStep, setActiveStep] = React.useState(0); - const [skipped, setSkipped] = React.useState(new Set()); - const steps = getSteps(); - - const isStepOptional = (step) => { - return step === 1; - }; - - const isStepFailed = (step) => { - return step === 1; - }; - - const isStepSkipped = (step) => { - return skipped.has(step); - }; - - const handleNext = () => { - let newSkipped = skipped; - if (isStepSkipped(activeStep)) { - newSkipped = new Set(skipped.values()); - newSkipped.delete(activeStep); - } - - setActiveStep((prevActiveStep) => prevActiveStep + 1); - setSkipped(newSkipped); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const handleSkip = () => { - if (!isStepOptional(activeStep)) { - // You probably want to guard against something like this, - // it should never occur unless someone's actively trying to break something. - throw new Error("You can't skip a step that isn't optional."); - } - - setSkipped((prevSkipped) => { - const newSkipped = new Set(prevSkipped.values()); - newSkipped.add(activeStep); - return newSkipped; - }); - setActiveStep((prevActiveStep) => prevActiveStep + 1); - }; - - const handleReset = () => { - setActiveStep(0); - }; - - return ( -
- - {steps.map((label, index) => { - const stepProps = {}; - const labelProps = {}; - if (isStepOptional(index)) { - labelProps.optional = ( - - Alert message - - ); - } - if (isStepFailed(index)) { - labelProps.error = true; - } - if (isStepSkipped(index)) { - stepProps.completed = false; - } - return ( - - {label} - - ); - })} - -
- {activeStep === steps.length ? ( -
- - All steps completed - you're finished - - -
- ) : ( -
- - {getStepContent(activeStep)} - -
- - {isStepOptional(activeStep) && ( - - )} - - -
-
- )} -
-
- ); -} diff --git a/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.tsx b/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.tsx deleted file mode 100644 index 76a8a90c9b20cc..00000000000000 --- a/docs/src/pages/components/steppers/HorizontalNonLinearStepperWithError.tsx +++ /dev/null @@ -1,167 +0,0 @@ -import * as React from 'react'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; -import Stepper from '@material-ui/core/Stepper'; -import Step from '@material-ui/core/Step'; -import StepLabel from '@material-ui/core/StepLabel'; -import Button from '@material-ui/core/Button'; -import Typography from '@material-ui/core/Typography'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: '100%', - }, - button: { - marginRight: theme.spacing(1), - }, - instructions: { - marginTop: theme.spacing(1), - marginBottom: theme.spacing(1), - }, - }), -); - -function getSteps() { - return ['Select campaign settings', 'Create an ad group', 'Create an ad']; -} - -function getStepContent(step: number) { - switch (step) { - case 0: - return 'Select campaign settings...'; - case 1: - return 'What is an ad group anyways?'; - case 2: - return 'This is the bit I really care about!'; - default: - return 'Unknown step'; - } -} - -export default function HorizontalNonLinearStepperWithError() { - const classes = useStyles(); - const [activeStep, setActiveStep] = React.useState(0); - const [skipped, setSkipped] = React.useState(new Set()); - const steps = getSteps(); - - const isStepOptional = (step: number) => { - return step === 1; - }; - - const isStepFailed = (step: number) => { - return step === 1; - }; - - const isStepSkipped = (step: number) => { - return skipped.has(step); - }; - - const handleNext = () => { - let newSkipped = skipped; - if (isStepSkipped(activeStep)) { - newSkipped = new Set(skipped.values()); - newSkipped.delete(activeStep); - } - - setActiveStep((prevActiveStep) => prevActiveStep + 1); - setSkipped(newSkipped); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const handleSkip = () => { - if (!isStepOptional(activeStep)) { - // You probably want to guard against something like this, - // it should never occur unless someone's actively trying to break something. - throw new Error("You can't skip a step that isn't optional."); - } - - setSkipped((prevSkipped) => { - const newSkipped = new Set(prevSkipped.values()); - newSkipped.add(activeStep); - return newSkipped; - }); - setActiveStep((prevActiveStep) => prevActiveStep + 1); - }; - - const handleReset = () => { - setActiveStep(0); - }; - - return ( -
- - {steps.map((label, index) => { - const stepProps: { completed?: boolean } = {}; - const labelProps: { - optional?: React.ReactNode; - error?: boolean; - } = {}; - if (isStepOptional(index)) { - labelProps.optional = ( - - Alert message - - ); - } - if (isStepFailed(index)) { - labelProps.error = true; - } - if (isStepSkipped(index)) { - stepProps.completed = false; - } - return ( - - {label} - - ); - })} - -
- {activeStep === steps.length ? ( -
- - All steps completed - you're finished - - -
- ) : ( -
- - {getStepContent(activeStep)} - -
- - {isStepOptional(activeStep) && ( - - )} - -
-
- )} -
-
- ); -} diff --git a/docs/src/pages/components/steppers/HorizontalStepperWithError.js b/docs/src/pages/components/steppers/HorizontalStepperWithError.js new file mode 100644 index 00000000000000..2df16aa8edfbd2 --- /dev/null +++ b/docs/src/pages/components/steppers/HorizontalStepperWithError.js @@ -0,0 +1,71 @@ +import * as React from 'react'; +import { makeStyles } from '@material-ui/core/styles'; +import Stepper from '@material-ui/core/Stepper'; +import Step from '@material-ui/core/Step'; +import StepLabel from '@material-ui/core/StepLabel'; +import Typography from '@material-ui/core/Typography'; + +const useStyles = makeStyles((theme) => ({ + root: { + width: '100%', + }, + buttonWrapper: { + display: 'flex', + flexDirection: 'row', + padding: '16px 0 0', + }, + button: { + marginRight: theme.spacing(1), + }, + spacer: { + flex: '1 1 auto', + }, + instructions: { + marginTop: theme.spacing(2), + marginBottom: theme.spacing(1), + }, +})); + +const steps = [ + 'Select campaign settings', + 'Create an ad group', + 'Create an ad', +]; + +export default function HorizontalStepperWithError() { + const classes = useStyles(); + + const isStepOptional = (step) => { + return step === 1; + }; + + const isStepFailed = (step) => { + return step === 1; + }; + + return ( +
+ + {steps.map((label, index) => { + const labelProps = {}; + if (isStepOptional(index)) { + labelProps.optional = ( + + Alert message + + ); + } + if (isStepFailed(index)) { + labelProps.error = true; + } + + return ( + + {label} + + ); + })} + +
+ ); +} diff --git a/docs/src/pages/components/steppers/HorizontalStepperWithError.tsx b/docs/src/pages/components/steppers/HorizontalStepperWithError.tsx new file mode 100644 index 00000000000000..5034f7fe3c790d --- /dev/null +++ b/docs/src/pages/components/steppers/HorizontalStepperWithError.tsx @@ -0,0 +1,76 @@ +import * as React from 'react'; +import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; +import Stepper from '@material-ui/core/Stepper'; +import Step from '@material-ui/core/Step'; +import StepLabel from '@material-ui/core/StepLabel'; +import Typography from '@material-ui/core/Typography'; + +const useStyles = makeStyles((theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + buttonWrapper: { + display: 'flex', + flexDirection: 'row', + padding: '16px 0 0', + }, + button: { + marginRight: theme.spacing(1), + }, + spacer: { + flex: '1 1 auto', + }, + instructions: { + marginTop: theme.spacing(2), + marginBottom: theme.spacing(1), + }, + }), +); + +const steps = [ + 'Select campaign settings', + 'Create an ad group', + 'Create an ad', +]; + +export default function HorizontalStepperWithError() { + const classes = useStyles(); + + const isStepOptional = (step: number) => { + return step === 1; + }; + + const isStepFailed = (step: number) => { + return step === 1; + }; + + return ( +
+ + {steps.map((label, index) => { + const labelProps: { + optional?: React.ReactNode; + error?: boolean; + } = {}; + if (isStepOptional(index)) { + labelProps.optional = ( + + Alert message + + ); + } + if (isStepFailed(index)) { + labelProps.error = true; + } + + return ( + + {label} + + ); + })} + +
+ ); +} diff --git a/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js b/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js index a37a51f878bfb4..b20bf9ce0750ac 100644 --- a/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js +++ b/docs/src/pages/components/steppers/SwipeableTextMobileStepper.js @@ -11,7 +11,7 @@ import { autoPlay } from 'react-swipeable-views-utils'; const AutoPlaySwipeableViews = autoPlay(SwipeableViews); -const tutorialSteps = [ +const images = [ { label: 'San Francisco – Oakland Bay Bridge, United States', imgPath: @@ -27,11 +27,6 @@ const tutorialSteps = [ imgPath: 'https://images.unsplash.com/photo-1537996194471-e657df975ab4?auto=format&fit=crop&w=400&h=250&q=80', }, - { - label: 'NeONBRAND Digital Marketing, Las Vegas, United States', - imgPath: - 'https://images.unsplash.com/photo-1518732714860-b62714ce0c59?auto=format&fit=crop&w=400&h=250&q=60', - }, { label: 'Goč, Serbia', imgPath: @@ -48,7 +43,7 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', alignItems: 'center', height: 50, - paddingLeft: theme.spacing(4), + paddingLeft: theme.spacing(2), backgroundColor: theme.palette.background.default, }, img: { @@ -64,7 +59,7 @@ function SwipeableTextMobileStepper() { const classes = useStyles(); const theme = useTheme(); const [activeStep, setActiveStep] = React.useState(0); - const maxSteps = tutorialSteps.length; + const maxSteps = images.length; const handleNext = () => { setActiveStep((prevActiveStep) => prevActiveStep + 1); @@ -81,7 +76,7 @@ function SwipeableTextMobileStepper() { return (
- {tutorialSteps[activeStep].label} + {images[activeStep].label} - {tutorialSteps.map((step, index) => ( + {images.map((step, index) => (
{Math.abs(activeStep - index) <= 2 ? ( ({ display: 'flex', alignItems: 'center', height: 50, - paddingLeft: theme.spacing(4), + paddingLeft: theme.spacing(2), backgroundColor: theme.palette.background.default, }, img: { @@ -64,7 +59,7 @@ function SwipeableTextMobileStepper() { const classes = useStyles(); const theme = useTheme(); const [activeStep, setActiveStep] = React.useState(0); - const maxSteps = tutorialSteps.length; + const maxSteps = images.length; const handleNext = () => { setActiveStep((prevActiveStep) => prevActiveStep + 1); @@ -81,7 +76,7 @@ function SwipeableTextMobileStepper() { return (
- {tutorialSteps[activeStep].label} + {images[activeStep].label} - {tutorialSteps.map((step, index) => ( + {images.map((step, index) => (
{Math.abs(activeStep - index) <= 2 ? ( ({ root: { maxWidth: 400, @@ -44,23 +16,43 @@ const useStyles = makeStyles((theme) => ({ display: 'flex', alignItems: 'center', height: 50, - paddingLeft: theme.spacing(4), + paddingLeft: theme.spacing(2), backgroundColor: theme.palette.background.default, }, - img: { + stepContent: { height: 255, maxWidth: 400, - overflow: 'hidden', - display: 'block', width: '100%', + padding: theme.spacing(2), }, })); +const steps = [ + { + label: 'Select campaign settings', + description: `For each ad campaign that you create, you can control how much + you're willing to spend on clicks and conversions, which networks + and geographical locations you want your ads to show on, and more.`, + }, + { + tabel: 'Create an ad group', + description: + 'An ad group contains one or more ads which target a shared set of keywords.', + }, + { + label: 'Create an ad', + description: `Try out different ad text to see what brings in the most customers, + and learn how to enhance your ads using features like ad extensions. + If you run into any problems with your ads, find out how to tell if + they're running and how to resolve approval issues.`, + }, +]; + export default function TextMobileStepper() { const classes = useStyles(); const theme = useTheme(); const [activeStep, setActiveStep] = React.useState(0); - const maxSteps = tutorialSteps.length; + const maxSteps = steps.length; const handleNext = () => { setActiveStep((prevActiveStep) => prevActiveStep + 1); @@ -73,17 +65,12 @@ export default function TextMobileStepper() { return (
- {tutorialSteps[activeStep].label} + {steps[activeStep].label} - {tutorialSteps[activeStep].label} +
{steps[activeStep].description}
createStyles({ root: { @@ -50,24 +22,44 @@ const useStyles = makeStyles((theme: Theme) => display: 'flex', alignItems: 'center', height: 50, - paddingLeft: theme.spacing(4), + paddingLeft: theme.spacing(2), backgroundColor: theme.palette.background.default, }, - img: { + stepContent: { height: 255, maxWidth: 400, - overflow: 'hidden', - display: 'block', width: '100%', + padding: theme.spacing(2), }, }), ); +const steps = [ + { + label: 'Select campaign settings', + description: `For each ad campaign that you create, you can control how much + you're willing to spend on clicks and conversions, which networks + and geographical locations you want your ads to show on, and more.`, + }, + { + tabel: 'Create an ad group', + description: + 'An ad group contains one or more ads which target a shared set of keywords.', + }, + { + label: 'Create an ad', + description: `Try out different ad text to see what brings in the most customers, + and learn how to enhance your ads using features like ad extensions. + If you run into any problems with your ads, find out how to tell if + they're running and how to resolve approval issues.`, + }, +]; + export default function TextMobileStepper() { const classes = useStyles(); const theme = useTheme(); const [activeStep, setActiveStep] = React.useState(0); - const maxSteps = tutorialSteps.length; + const maxSteps = steps.length; const handleNext = () => { setActiveStep((prevActiveStep) => prevActiveStep + 1); @@ -80,17 +72,12 @@ export default function TextMobileStepper() { return (
- {tutorialSteps[activeStep].label} + {steps[activeStep].label} - {tutorialSteps[activeStep].label} +
{steps[activeStep].description}
({ root: { - width: '100%', + maxWidth: 400, }, button: { marginTop: theme.spacing(1), @@ -24,32 +24,30 @@ const useStyles = makeStyles((theme) => ({ }, })); -function getSteps() { - return ['Select campaign settings', 'Create an ad group', 'Create an ad']; -} - -function getStepContent(step) { - switch (step) { - case 0: - return `For each ad campaign that you create, you can control how much +const steps = [ + { + label: 'Select campaign settings', + description: `For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks - and geographical locations you want your ads to show on, and more.`; - case 1: - return 'An ad group contains one or more ads which target a shared set of keywords.'; - case 2: - return `Try out different ad text to see what brings in the most customers, + and geographical locations you want your ads to show on, and more.`, + }, + { + label: 'Create an ad group', + description: + 'An ad group contains one or more ads which target a shared set of keywords.', + }, + { + label: 'Create an ad', + description: `Try out different ad text to see what brings in the most customers, and learn how to enhance your ads using features like ad extensions. If you run into any problems with your ads, find out how to tell if - they're running and how to resolve approval issues.`; - default: - return 'Unknown step'; - } -} + they're running and how to resolve approval issues.`, + }, +]; export default function VerticalLinearStepper() { const classes = useStyles(); const [activeStep, setActiveStep] = React.useState(0); - const steps = getSteps(); const handleNext = () => { setActiveStep((prevActiveStep) => prevActiveStep + 1); @@ -66,8 +64,8 @@ export default function VerticalLinearStepper() { return (
- {steps.map((label, index) => ( - + {steps.map((step, index) => ( + - {label} + {step.label} - {getStepContent(index)} + {step.description}
diff --git a/docs/src/pages/components/steppers/VerticalLinearStepper.tsx b/docs/src/pages/components/steppers/VerticalLinearStepper.tsx index 897bf7c7b26845..7f3a391a778e7b 100644 --- a/docs/src/pages/components/steppers/VerticalLinearStepper.tsx +++ b/docs/src/pages/components/steppers/VerticalLinearStepper.tsx @@ -11,7 +11,7 @@ import Typography from '@material-ui/core/Typography'; const useStyles = makeStyles((theme: Theme) => createStyles({ root: { - width: '100%', + maxWidth: 400, }, button: { marginTop: theme.spacing(1), @@ -26,32 +26,30 @@ const useStyles = makeStyles((theme: Theme) => }), ); -function getSteps() { - return ['Select campaign settings', 'Create an ad group', 'Create an ad']; -} - -function getStepContent(step: number) { - switch (step) { - case 0: - return `For each ad campaign that you create, you can control how much +const steps = [ + { + label: 'Select campaign settings', + description: `For each ad campaign that you create, you can control how much you're willing to spend on clicks and conversions, which networks - and geographical locations you want your ads to show on, and more.`; - case 1: - return 'An ad group contains one or more ads which target a shared set of keywords.'; - case 2: - return `Try out different ad text to see what brings in the most customers, + and geographical locations you want your ads to show on, and more.`, + }, + { + label: 'Create an ad group', + description: + 'An ad group contains one or more ads which target a shared set of keywords.', + }, + { + label: 'Create an ad', + description: `Try out different ad text to see what brings in the most customers, and learn how to enhance your ads using features like ad extensions. If you run into any problems with your ads, find out how to tell if - they're running and how to resolve approval issues.`; - default: - return 'Unknown step'; - } -} + they're running and how to resolve approval issues.`, + }, +]; export default function VerticalLinearStepper() { const classes = useStyles(); const [activeStep, setActiveStep] = React.useState(0); - const steps = getSteps(); const handleNext = () => { setActiveStep((prevActiveStep) => prevActiveStep + 1); @@ -68,8 +66,8 @@ export default function VerticalLinearStepper() { return (
- {steps.map((label, index) => ( - + {steps.map((step, index) => ( + - {label} + {step.label} - {getStepContent(index)} + {step.description}
diff --git a/docs/src/pages/components/steppers/steppers.md b/docs/src/pages/components/steppers/steppers.md index a76df96774c9a1..54fea3edf91b5d 100644 --- a/docs/src/pages/components/steppers/steppers.md +++ b/docs/src/pages/components/steppers/steppers.md @@ -19,32 +19,25 @@ Steppers may display a transient feedback message after a step is saved. > **Note:** Steppers are no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support them. -## Horizontal Stepper +## Horizontal stepper + +Horizontal steppers are ideal when the contents of one step depend on an earlier step. + +Avoid using long step names in horizontal steppers. ### Linear +A linear stepper allows the user to complete the steps in sequence. + The `Stepper` can be controlled by passing the current step index (zero-based) as the `activeStep` prop. `Stepper` orientation is set using the `orientation` prop. This example also shows the use of an optional step by placing the `optional` prop on the second `Step` component. Note that it's up to you to manage when an optional step is skipped. Once you've determined this for a particular step you must set `completed={false}` to signify that even though the active step index has gone beyond the optional step, it's not actually complete. {{"demo": "pages/components/steppers/HorizontalLinearStepper.js"}} -### Linear - Alternative Label - -Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component. - -{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}} - -### Customized Stepper - -Here is an example of customizing the component. You can learn more about this in the -[overrides documentation page](/customization/components/). - -{{"demo": "pages/components/steppers/CustomizedSteppers.js"}} - ### Non-linear -Non-linear steppers allow users to enter a multi-step flow at any point. +Non-linear steppers allow the user to enter a multi-step flow at any point. This example is similar to the regular horizontal stepper, except steps are no longer automatically set to `disabled={true}` based on the `activeStep` prop. @@ -54,41 +47,51 @@ determine when all steps are completed (or even if they need to be completed). {{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}} -### Non-linear - Alternative Label +### Alternative Label Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component. -{{"demo": "pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js"}} +{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}} + +### Error step -### Non-linear - Error Step +{{"demo": "pages/components/steppers/HorizontalStepperWithError.js"}} -{{"demo": "pages/components/steppers/HorizontalNonLinearStepperWithError.js"}} +### Customized horizontal stepper -## Vertical Stepper +Here is an example of customizing the component. You can learn more about this in the +[overrides documentation page](/customization/components/). + +{{"demo": "pages/components/steppers/CustomizedSteppers.js"}} + +## Vertical stepper + +Vertical steppers are designed for narrow screen sizes. They are ideal for mobile. All the features of the horizontal stepper can be implemented. {{"demo": "pages/components/steppers/VerticalLinearStepper.js"}} -## Mobile Stepper +## Mobile stepper + +This component implements a compact stepper suitable for a mobile device. IT has more limited functionality than the vertical stepper. See [mobile steps](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) for its inspiration. -This component implements a compact stepper suitable for a mobile device. See [mobile steps](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) for its inspiration. +The mobile stepper supports three variants to display progress through the available steps: text, dots, and progress. ### Text -This is essentially a back/next button positioned correctly. -You must implement the textual description yourself, however, an example is provided below for reference. +The current step and total number of steps are displayed as text. {{"demo": "pages/components/steppers/TextMobileStepper.js", "bg": true}} -### Text with Carousel effect +### Text with carousel effect -This demo is very similar to the previous, the difference is the usage of -[react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) to make the transition of steps. +This demo uses +[react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) to create a carousel. {{"demo": "pages/components/steppers/SwipeableTextMobileStepper.js", "bg": true}} ### Dots -Use dots when the number of steps isn’t large. +Use dots when the number of steps is small. {{"demo": "pages/components/steppers/DotsMobileStepper.js", "bg": true}} From e2d5c041e0fe7082620e795776e9a4eacc479396 Mon Sep 17 00:00:00 2001 From: Matt Date: Sat, 12 Sep 2020 19:32:04 +0100 Subject: [PATCH 10/12] further simplify error demo --- .../steppers/HorizontalStepperWithError.js | 28 +++------------ .../steppers/HorizontalStepperWithError.tsx | 35 ++++--------------- 2 files changed, 10 insertions(+), 53 deletions(-) diff --git a/docs/src/pages/components/steppers/HorizontalStepperWithError.js b/docs/src/pages/components/steppers/HorizontalStepperWithError.js index 2df16aa8edfbd2..a53f592e9574e1 100644 --- a/docs/src/pages/components/steppers/HorizontalStepperWithError.js +++ b/docs/src/pages/components/steppers/HorizontalStepperWithError.js @@ -5,26 +5,11 @@ import Step from '@material-ui/core/Step'; import StepLabel from '@material-ui/core/StepLabel'; import Typography from '@material-ui/core/Typography'; -const useStyles = makeStyles((theme) => ({ +const useStyles = makeStyles({ root: { width: '100%', }, - buttonWrapper: { - display: 'flex', - flexDirection: 'row', - padding: '16px 0 0', - }, - button: { - marginRight: theme.spacing(1), - }, - spacer: { - flex: '1 1 auto', - }, - instructions: { - marginTop: theme.spacing(2), - marginBottom: theme.spacing(1), - }, -})); +}); const steps = [ 'Select campaign settings', @@ -35,10 +20,6 @@ const steps = [ export default function HorizontalStepperWithError() { const classes = useStyles(); - const isStepOptional = (step) => { - return step === 1; - }; - const isStepFailed = (step) => { return step === 1; }; @@ -48,14 +29,13 @@ export default function HorizontalStepperWithError() { {steps.map((label, index) => { const labelProps = {}; - if (isStepOptional(index)) { + if (isStepFailed(index)) { labelProps.optional = ( Alert message ); - } - if (isStepFailed(index)) { + labelProps.error = true; } diff --git a/docs/src/pages/components/steppers/HorizontalStepperWithError.tsx b/docs/src/pages/components/steppers/HorizontalStepperWithError.tsx index 5034f7fe3c790d..10d3f2eb47cf68 100644 --- a/docs/src/pages/components/steppers/HorizontalStepperWithError.tsx +++ b/docs/src/pages/components/steppers/HorizontalStepperWithError.tsx @@ -5,28 +5,11 @@ import Step from '@material-ui/core/Step'; import StepLabel from '@material-ui/core/StepLabel'; import Typography from '@material-ui/core/Typography'; -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: '100%', - }, - buttonWrapper: { - display: 'flex', - flexDirection: 'row', - padding: '16px 0 0', - }, - button: { - marginRight: theme.spacing(1), - }, - spacer: { - flex: '1 1 auto', - }, - instructions: { - marginTop: theme.spacing(2), - marginBottom: theme.spacing(1), - }, - }), -); +const useStyles = makeStyles({ + root: { + width: '100%', + }, +}); const steps = [ 'Select campaign settings', @@ -37,10 +20,6 @@ const steps = [ export default function HorizontalStepperWithError() { const classes = useStyles(); - const isStepOptional = (step: number) => { - return step === 1; - }; - const isStepFailed = (step: number) => { return step === 1; }; @@ -53,14 +32,12 @@ export default function HorizontalStepperWithError() { optional?: React.ReactNode; error?: boolean; } = {}; - if (isStepOptional(index)) { + if (isStepFailed(index)) { labelProps.optional = ( Alert message ); - } - if (isStepFailed(index)) { labelProps.error = true; } From 9bd9c552972462841e573970fcd65b8520c3ff21 Mon Sep 17 00:00:00 2001 From: Matt Date: Sat, 12 Sep 2020 19:51:39 +0100 Subject: [PATCH 11/12] remove step descriptions from horizontal demos --- .../steppers/HorizontalLinearStepper.js | 23 ++++++------------- .../steppers/HorizontalLinearStepper.tsx | 23 ++++++------------- .../steppers/HorizontalNonLinearStepper.js | 23 ++++++------------- .../steppers/HorizontalNonLinearStepper.tsx | 23 ++++++------------- .../steppers/HorizontalStepperWithError.tsx | 2 +- 5 files changed, 29 insertions(+), 65 deletions(-) diff --git a/docs/src/pages/components/steppers/HorizontalLinearStepper.js b/docs/src/pages/components/steppers/HorizontalLinearStepper.js index 7cb3710f1111cc..8238bc80fbec98 100644 --- a/docs/src/pages/components/steppers/HorizontalLinearStepper.js +++ b/docs/src/pages/components/steppers/HorizontalLinearStepper.js @@ -28,18 +28,9 @@ const useStyles = makeStyles((theme) => ({ })); const steps = [ - { - label: 'Select campaign settings', - description: 'Select campaign settings...', - }, - { - tabel: 'Create an ad group', - description: 'What is an ad group anyway?', - }, - { - label: 'Create an ad', - description: 'This is the bit I really care about!', - }, + 'Select campaign settings', + 'Create an ad group', + 'Create an ad', ]; export default function HorizontalLinearStepper() { @@ -92,7 +83,7 @@ export default function HorizontalLinearStepper() { return (
- {steps.map((step, index) => { + {steps.map((label, index) => { const stepProps = {}; const labelProps = {}; if (isStepOptional(index)) { @@ -104,8 +95,8 @@ export default function HorizontalLinearStepper() { stepProps.completed = false; } return ( - - {step.label} + + {label} ); })} @@ -123,7 +114,7 @@ export default function HorizontalLinearStepper() { ) : ( - {steps[activeStep].description} + Step {activeStep + 1}