[Stepper]:Expand all steps

Resolves #12948
mui · Jan 12, 2020 · a6da14f · a6da14f
1 parent e14286a
commit a6da14f
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 5 deletions.
diff --git a/docs/pages/api/step.md b/docs/pages/api/step.md
@@ -29,6 +29,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">completed</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Mark the step as completed. Is passed to child components. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Mark the step as disabled, will also disable the button if `StepButton` is a child of `Step`. Is passed to child components. |
+| <span class="prop-name">expanded</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Expand the step. |
 
 The `ref` is forwarded to the root element.
 

diff --git a/docs/pages/api/stepper.md b/docs/pages/api/stepper.md
@@ -24,7 +24,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
-| <span class="prop-name">activeStep</span> | <span class="prop-type">number</span> | <span class="prop-default">0</span> | Set the active step (zero based index). |
+| <span class="prop-name">activeStep</span> | <span class="prop-type">number</span> | <span class="prop-default">0</span> | Set the active step (zero based index). Set to -1 to disable all the steps. |
 | <span class="prop-name">alternativeLabel</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If set to 'true' and orientation is horizontal, then the step label will be positioned under the icon. |
 | <span class="prop-name required">children&nbsp;*</span> | <span class="prop-type">node</span> |  | Two or more `<Step />` components. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |

diff --git a/packages/material-ui/src/Step/Step.js b/packages/material-ui/src/Step/Step.js
@@ -33,6 +33,7 @@ const Step = React.forwardRef(function Step(props, ref) {
     completed = false,
     connector,
     disabled = false,
+    expanded = false,
     index,
     last,
     orientation,
@@ -85,6 +86,7 @@ const Step = React.forwardRef(function Step(props, ref) {
           alternativeLabel,
           completed,
           disabled,
+          expanded,
           last,
           icon: index + 1,
           orientation,
@@ -132,6 +134,10 @@ Step.propTypes = {
    * `StepButton` is a child of `Step`. Is passed to child components.
    */
   disabled: PropTypes.bool,
+  /**
+   * Expand the step.
+   */
+  expanded: PropTypes.bool,
   /**
    * @ignore
    * Used internally for numbering.

diff --git a/packages/material-ui/src/StepContent/StepContent.js b/packages/material-ui/src/StepContent/StepContent.js
@@ -31,6 +31,7 @@ const StepContent = React.forwardRef(function StepContent(props, ref) {
     classes,
     className,
     completed,
+    expanded,
     last,
     optional,
     orientation,
@@ -57,7 +58,7 @@ const StepContent = React.forwardRef(function StepContent(props, ref) {
   return (
     <div className={clsx(classes.root, { [classes.last]: last }, className)} ref={ref} {...other}>
       <TransitionComponent
-        in={active}
+        in={active || expanded}
         className={classes.transition}
         timeout={transitionDuration}
         unmountOnExit
@@ -97,6 +98,10 @@ StepContent.propTypes = {
    * @ignore
    */
   completed: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  expanded: PropTypes.bool,
   /**
    * @ignore
    */

diff --git a/packages/material-ui/src/StepLabel/StepLabel.js b/packages/material-ui/src/StepLabel/StepLabel.js
@@ -75,6 +75,7 @@ const StepLabel = React.forwardRef(function StepLabel(props, ref) {
     completed = false,
     disabled = false,
     error = false,
+    expanded,
     icon,
     last,
     optional,
@@ -143,12 +144,10 @@ const StepLabel = React.forwardRef(function StepLabel(props, ref) {
 StepLabel.propTypes = {
   /**
    * @ignore
-   * Sets the step as active. Is passed to child components.
    */
   active: PropTypes.bool,
   /**
    * @ignore
-   * Set internally by Stepper when it's supplied with the alternativeLabel prop.
    */
   alternativeLabel: PropTypes.bool,
   /**
@@ -166,7 +165,6 @@ StepLabel.propTypes = {
   className: PropTypes.string,
   /**
    * @ignore
-   * Mark the step as completed. Is passed to child components.
    */
   completed: PropTypes.bool,
   /**
@@ -178,6 +176,10 @@ StepLabel.propTypes = {
    * Mark the step as failed.
    */
   error: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  expanded: PropTypes.bool,
   /**
    * Override the default label of the step icon.
    */

diff --git a/packages/material-ui/src/Stepper/Stepper.js b/packages/material-ui/src/Stepper/Stepper.js
@@ -103,6 +103,7 @@ const Stepper = React.forwardRef(function Stepper(props, ref) {
 Stepper.propTypes = {
   /**
    * Set the active step (zero based index).
+   * Set to -1 to disable all the steps.
    */
   activeStep: PropTypes.number,
   /**