Material-ui: [Stepper] Expand all steps

[johannwagner]

Hey Guys,

I ran into an issue, that I am not able to display all steps at once.
I would like to introduce a flag at Stepper, which expands all steps at once.

• [ x ] This is not a v0.x issue.
• [ x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

There should be a flag, which can expand steps.

Current Behavior

There is no flag, which extends all steps.

Examples

I think, it should be clear, even without pictures.

Context

I try to accomplish displaying all steps for an overview. Someone else done the steps and entered data into forms. Afterwards, I want to display all steps at once to give an overview.

I would work on this issue by myself and will contribute this to upstream, if wanted.

[eps1lon]

I think, it should be clear, even without pictures.

Not everyone has an immediate picture in his head about how Stepper look and why they should be expanded all at once. At least I don't have.

The purpose of steppers is to limit the scope of some process so that users don't get overwhelmed. Displaying all at once goes against the very purpose of steppers. While one might think "this is just a flag" it does increase the API surface and doubles our test cases effectively.

As I understand it you want some sort of summary and I don't think just merging all steps into on view and calling it summary is a good idea.

[johannwagner]

You are entirely correct for the described case. It is quite hard to abstract a business use case for such an issue.

We will rethink this with our customer. Until then, I will provide a PR, which can be merged, if nessesary. Otherwise I have to maintain my fork.

[oliviertassinari]

I would like to introduce a flag at Stepper, which expands all steps at once.

@johannwagner I had such requirement at work two years ago. So I understand the need. Any current step depends on its predecessor steps in the following demo:

[eps1lon]

I wasn't thinking about the actual StepContent but about the associated view for a step so that's why this didn't sound that useful. The example convinced me that this might be indeed useful. Thanks for the clarification @oliviertassinari

[bluepeter]

Pre-3.2 we used to accomplish this with <Step key={id} active={true}> on each step. As of 3.2, this is no longer possible. In our case, we use the Stepper component perhaps in a somewhat unorthodox fashion. That is, we use it as a means to display a series of steps that the user can re-organize:

To no longer have the ability for all Steps to be active (and therefore visible) is a significant reduction in use case flexibility for this component.

[nthgol]

+1 downgrading package for now

[oliviertassinari]

@bluepeter @nthgol It was fixed in #13188.

[oliviertassinari]

The solution shared by @bluepeter in https://github.com/mui-org/material-ui/issues/12948#issuecomment-428772078 is the preferred approach to solve the initial request.

However, I believe that we could add a new expanded prop to cover more use cases. If somebody is interested, a pull request could look something like this:

diff --git a/packages/material-ui/src/Step/Step.js b/packages/material-ui/src/Step/Step.js
index 5b362a2a4..b7324e300 100644
--- 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
index e86db9c7b..1f814d95a 100644
--- 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
index 15777411d..e8d06f5cd 100644
--- 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
index 80abc493c..d16ec5a80 100644
--- 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,
   /**

[kevinvugts]

@oliviertassinari is it also possible to add a property that disables the unmounting of components inside the stepper like tabs does. Right now I am loosing state of the component in the steps after changing from step.