[stepper] Instructions on demos now use Typography component. (mui#4799)

alexhayes · Oct 8, 2017 · 9fd3556 · 9fd3556
1 parent 8c64536
commit 9fd3556
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 10 deletions.
diff --git a/docs/src/pages/demos/stepper/HorizontalLinearAlternativeLabelStepper.js b/docs/src/pages/demos/stepper/HorizontalLinearAlternativeLabelStepper.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
 import { Step, Stepper, StepLabel } from 'material-ui/Stepper';
 import Button from 'material-ui/Button';
+import Typography from 'material-ui/Typography';
 
 const styles = theme => ({
   root: {
@@ -13,6 +14,10 @@ const styles = theme => ({
   backButton: {
     marginRight: theme.spacing.unit,
   },
+  instructions: {
+    marginTop: theme.spacing.unit,
+    marginBottom: theme.spacing.unit,
+  },
 });
 
 class HorizontalLabelPositionBelowStepper extends Component {
@@ -77,12 +82,12 @@ class HorizontalLabelPositionBelowStepper extends Component {
         <div>
           {this.state.activeStep === steps.length ? (
             <div>
-              <p>All steps completed - you&quot;re finished</p>
+              <Typography className={classes.instructions}>All steps completed - you&quot;re finished</Typography>
               <Button onClick={this.handleReset}>Reset</Button>
             </div>
           ) : (
             <div>
-              <p>{this.getStepContent(activeStep)}</p>
+              <Typography className={classes.instructions}>{this.getStepContent(activeStep)}</Typography>
               <div>
                 <Button
                   disabled={activeStep === 0}

diff --git a/docs/src/pages/demos/stepper/HorizontalLinearStepper.js b/docs/src/pages/demos/stepper/HorizontalLinearStepper.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
 import { Step, Stepper, StepLabel } from 'material-ui/Stepper';
 import Button from 'material-ui/Button';
+import Typography from 'material-ui/Typography';
 
 const styles = theme => ({
   root: {
@@ -13,6 +14,10 @@ const styles = theme => ({
   button: {
     marginRight: theme.spacing.unit,
   },
+  instructions: {
+    marginTop: theme.spacing.unit,
+    marginBottom: theme.spacing.unit,
+  },
 });
 
 class HorizontalLinearStepper extends Component {
@@ -119,14 +124,14 @@ class HorizontalLinearStepper extends Component {
         <div>
           {activeStep === steps.length ? (
             <div>
-              <p>All steps completed - you&quot;re finished</p>
+              <Typography className={classes.instructions}>All steps completed - you&quot;re finished</Typography>
               <Button onClick={this.handleReset} className={classes.button}>
                 Reset
               </Button>
             </div>
           ) : (
             <div>
-              <p>{this.getStepContent(activeStep)}</p>
+              <Typography className={classes.instructions}>{this.getStepContent(activeStep)}</Typography>
               <div>
                 <Button
                   disabled={activeStep === 0}

diff --git a/docs/src/pages/demos/stepper/HorizontalNonLinearAlternativeLabelStepper.js b/docs/src/pages/demos/stepper/HorizontalNonLinearAlternativeLabelStepper.js
@@ -20,6 +20,10 @@ const styles = theme => ({
   completed: {
     display: 'inline-block',
   },
+  instructions: {
+    marginTop: theme.spacing.unit,
+    marginBottom: theme.spacing.unit,
+  }
 });
 
 class HorizontalNonLinearAlternativeLabelStepper extends Component {
@@ -111,8 +115,8 @@ class HorizontalNonLinearAlternativeLabelStepper extends Component {
       completed,
     });
     /**
-     * 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, 
+     * 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 !== this.totalSteps() - this.skippedSteps()) {
@@ -176,12 +180,12 @@ class HorizontalNonLinearAlternativeLabelStepper extends Component {
         <div>
           {this.allStepsCompleted() ? (
             <div>
-              <p>All steps completed - you&quot;re finished</p>
+              <Typography className={classes.instructions}>All steps completed - you&quot;re finished</Typography>
               <Button onClick={this.handleReset}>Reset</Button>
             </div>
           ) : (
             <div>
-              <p>{this.getStepContent(activeStep)}</p>
+              <Typography className={classes.instructions}>{this.getStepContent(activeStep)}</Typography>
               <div>
                 <Button
                   disabled={activeStep === 0}

diff --git a/docs/src/pages/demos/stepper/HorizontalNonLinearStepper.js b/docs/src/pages/demos/stepper/HorizontalNonLinearStepper.js
@@ -17,6 +17,10 @@ const styles = theme => ({
   completed: {
     display: 'inline-block',
   },
+  instructions: {
+    marginTop: theme.spacing.unit,
+    marginBottom: theme.spacing.unit,
+  },
 });
 
 class HorizontalNonLinearStepper extends Component {
@@ -125,12 +129,12 @@ class HorizontalNonLinearStepper extends Component {
         <div>
           {this.allStepsCompleted() ? (
             <div>
-              <p>All steps completed - you&quot;re finished</p>
+              <Typography className={classes.instructions}>All steps completed - you&quot;re finished</Typography>
               <Button onClick={this.handleReset}>Reset</Button>
             </div>
           ) : (
             <div>
-              <p>{this.getStepContent(activeStep)}</p>
+              <Typography className={classes.instructions}>{this.getStepContent(activeStep)}</Typography>
               <div>
                 <Button
                   disabled={activeStep === 0}