[StepButton] Support vertical stepper (#10698)

* [StepButton] justify content left

This will render the children/StepLabel correct in a vertical Stepper

* fix visual diff

pages/api/step-button.md

@@ -23,6 +23,7 @@ Any other properties supplied will be [spread to the root element](/guides/api#s
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 - `root`
+- `vertical`
 - `touchRipple`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section

src/Stepper/StepButton.js

@@ -15,6 +15,9 @@ export const styles = theme => ({
     margin: `${-theme.spacing.unit * 3}px ${-theme.spacing.unit * 2}px`,
     boxSizing: 'content-box',
   },
+  vertical: {
+    justifyContent: 'left',
+  },
   touchRipple: {
     color: 'rgba(0, 0, 0, 0.3)',
   },
@@ -55,7 +58,13 @@ function StepButton(props) {
     <ButtonBase
       disabled={disabled}
       TouchRippleProps={{ className: classes.touchRipple }}
-      className={classNames(classes.root, classNameProp)}
+      className={classNames(
+        classes.root,
+        {
+          [classes.vertical]: orientation === 'vertical',
+        },
+        classNameProp,
+      )}
       {...other}
     >
       {child}