[Stepper] Remove Paper and built-in padding

[mbrookes]

Breaking changes

• [Stepper] The root component (Paper) was replaced with a <div>. Stepper no longer has elevation, nor inherits Paper's props.

-<Stepper elevation={2}>
-  <Step>
-    <StepLabel>Hello world</StepLabel>
-  </Step>
-</Stepper>
+<Paper square elevation={2}>
+  <Stepper>
+    <Step>
+      <StepLabel>Hello world</StepLabel>
+    </Step>
+  </Stepper>
+<Paper>

• [Stepper] Remove the built-in 24px padding.

-<Stepper>
-  <Step>
-    <StepLabel>Hello world</StepLabel>
-  </Step>
-</Stepper>
+<Stepper style={{ padding: 24 }}>
+  <Step>
+    <StepLabel>Hello world</StepLabel>
+  </Step>
+</Stepper>

---

Closes #18423

[oliviertassinari]

I think that with the change, we can use the default outlined container for the demos, instead of the grey background.

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 09a3cf2

[oliviertassinari]

The mobile stepper still has a white background, it's easier to spot with:

[mbrookes]

@oliviertassinari I've tweaked the Button layout and variant for the first demo to better match the original component:

Spec:
https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steppers

Before:

After:

Once it's good, I'll do the rest of the demos.

[oliviertassinari]

@mbrookes Looks better 👍

[mbrookes]

Option 2 – add a white background so you can distinguish the component boundaries from the demo container padding, add a divider:

[oliviertassinari]

@mbrookes I think that option 1 is better. It will make the source of the demo simpler. Also, I don't think that the stepper should have any padding.

[oliviertassinari]

I had to override the padding in the store:

And if you are ShutterStock (yes the store is inspired by shutterstock.com & themes.getbootstrap.com), you would need too:

---

What about we removing this padding?

[mbrookes]

I don't think that the stepper should have any padding.

I agree. I just didn't want to be too radical!

Mk 3:

[oliviertassinari]

I agree. I just didn't want to be too radical!

Oh right, one breaking change at the time, removal of padding could be the very next one 👼.

Mk 3:

A couple of thoughts:

1. Having the buttons closer to each other makes it easier to use the playground. Otherwise, you need the mouse to make more movement to go back.
2. Maybe we should have one static demos of the Stepper at the top of the page with an inline preview that showcase the composition API. The demos are quite long and can be hard to navigate.
3. For the customized stepper, I think that we can drop the buttons, make is static, and have step 2 as active: https://deploy-preview-22564--material-ui.netlify.app/components/steppers/#customized-stepper. It would cover all the use cases and simplify the demo.
4. Do we need the labels like "This is the bit I really care about!", What if we already displayed the active step? e.g. "Step 2" => simpler demos.
5. Removing the built-in padding of the Stepper would allow to simply the demos, as would allow to remove the padding we add on the controls.

[mbrookes]

We had a power cut this afternoon, but have been working offline on simplifying the demos. It seems I've already hit on several of the things you suggested. Take a look.

Having the buttons closer to each other makes it easier to use the playground. Otherwise, you need the mouse to make more movement to go back.

That's down to the demo not having a container. You can't have it both ways. 😄
You don't really need to use the back button to navigate the demos.

Maybe we should have one static demos of the Stepper at the top of the page with an inline preview that showcase the composition API.

I think we need to show a functioning Stepper first.

The demos are quite long and can be hard to navigate.

Most of the demos are now simplified.

For the customized stepper, I think that we can drop the buttons

Already done.

What if we already displayed the active step? "Step 2" => simpler demos

Already simpler, but I'll take another look.

Removing the built-in padding of the Stepper

Already done in "Mk 3".

would allow to remove the padding we add on the controls.

Already done.