Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Stepper] Remove Paper and built-in padding #22564

Merged
merged 12 commits into from
Sep 14, 2020
Merged

[Stepper] Remove Paper and built-in padding #22564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e5cfc52
[Stepper] Remove Paper
mbrookes Aug 19, 2020
7741415
alphabetize Skeleton in migration guide
mbrookes Sep 11, 2020
f9c31de
Update docs/src/pages/guides/migration-v4/migration-v4.md
mbrookes Sep 11, 2020
123916f
Update docs/src/pages/guides/migration-v4/migration-v4.md
mbrookes Sep 11, 2020
ceb732a
remove background from demos
mbrookes Sep 11, 2020
36e8d41
Apply suggestions from code review
mbrookes Sep 11, 2020
32f150f
Improve the demo layout
mbrookes Sep 11, 2020
36daf97
mk3
mbrookes Sep 11, 2020
86fb915
update demos
mbrookes Sep 12, 2020
e2d5c04
further simplify error demo
mbrookes Sep 12, 2020
9bd9c55
remove step descriptions from horizontal demos
mbrookes Sep 12, 2020
09a3cf2
fix stepper jump
oliviertassinari Sep 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions docs/pages/api-docs/stepper.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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/)
Expand Down
105 changes: 17 additions & 88 deletions docs/src/pages/components/steppers/CustomizedSteppers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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 (
<div className={classes.root}>
<Stepper alternativeLabel activeStep={activeStep}>
{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
<Stepper
alternativeLabel
activeStep={activeStep}
activeStep={1}
connector={<QontoConnector />}
className={classes.quontoStepper}
>
{steps.map((label) => (
<Step key={label}>
Expand All @@ -246,7 +209,7 @@ export default function CustomizedSteppers() {
</Stepper>
<Stepper
alternativeLabel
activeStep={activeStep}
activeStep={1}
connector={<ColorlibConnector />}
>
{steps.map((label) => (
Expand All @@ -255,40 +218,6 @@ export default function CustomizedSteppers() {
</Step>
))}
</Stepper>
<div>
{activeStep === steps.length ? (
<div>
<Typography className={classes.instructions}>
All steps completed - you&apos;re finished
</Typography>
<Button onClick={handleReset} className={classes.button}>
Reset
</Button>
</div>
) : (
<div>
<Typography className={classes.instructions}>
{getStepContent(activeStep)}
</Typography>
<div>
<Button
disabled={activeStep === 0}
onClick={handleBack}
className={classes.button}
>
Back
</Button>
<Button
variant="contained"
onClick={handleNext}
className={classes.button}
>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</div>
</div>
)}
</div>
</div>
);
}
114 changes: 18 additions & 96 deletions docs/src/pages/components/steppers/CustomizedSteppers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -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 (
<div className={classes.root}>
<Stepper alternativeLabel activeStep={activeStep}>
{steps.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
<Stepper
alternativeLabel
activeStep={activeStep}
activeStep={1}
connector={<QontoConnector />}
className={classes.quontoStepper}
>
{steps.map((label) => (
<Step key={label}>
Expand All @@ -223,7 +179,7 @@ export default function CustomizedSteppers() {
</Stepper>
<Stepper
alternativeLabel
activeStep={activeStep}
activeStep={1}
connector={<ColorlibConnector />}
>
{steps.map((label) => (
Expand All @@ -232,40 +188,6 @@ export default function CustomizedSteppers() {
</Step>
))}
</Stepper>
<div>
{activeStep === steps.length ? (
<div>
<Typography className={classes.instructions}>
All steps completed - you&apos;re finished
</Typography>
<Button onClick={handleReset} className={classes.button}>
Reset
</Button>
</div>
) : (
<div>
<Typography className={classes.instructions}>
{getStepContent(activeStep)}
</Typography>
<div>
<Button
disabled={activeStep === 0}
onClick={handleBack}
className={classes.button}
>
Back
</Button>
<Button
variant="contained"
onClick={handleNext}
className={classes.button}
>
{activeStep === steps.length - 1 ? 'Finish' : 'Next'}
</Button>
</div>
</div>
)}
</div>
</div>
);
}
Loading