Material-ui: [StepButton] Text should be aligned left in vertical mode

[Floriferous]

When you use the StepButton in a vertically oriented Stepper, the text is set to text-align: center, as those are the default styles for buttons.

When you set orientation: "vertical", the text in the button should instead be aligned left: https://stackblitz.com/edit/bbqaek

[oliviertassinari]

@Floriferous Thanks for the report, I would also fix the color of the optional label:

diff --git a/packages/material-ui/src/StepLabel/StepLabel.js b/packages/material-ui/src/StepLabel/StepLabel.js
index 052e67628..88cce6d03 100644
--- a/packages/material-ui/src/StepLabel/StepLabel.js
+++ b/packages/material-ui/src/StepLabel/StepLabel.js
@@ -10,6 +10,7 @@ export const styles = (theme) => ({
   root: {
     display: 'flex',
     alignItems: 'center',
+    textAlign: 'left', // The parent might be a button.
     '&$alternativeLabel': {
       flexDirection: 'column',
     },
@@ -21,9 +22,13 @@ export const styles = (theme) => ({
   horizontal: {},
   /* Styles applied to the root element if `orientation="vertical"`. */
   vertical: {},
+  /* Styles applied to the container element which wraps `Typography` and `optional`. */
+  labelContainer: {
+    width: '100%',
+    color: theme.palette.text.secondary,
+  },
   /* Styles applied to the `Typography` component which wraps `children`. */
   label: {
-    color: theme.palette.text.secondary,
     '&$active': {
       color: theme.palette.text.primary,
       fontWeight: 500,
@@ -59,10 +64,6 @@ export const styles = (theme) => ({
   },
   /* Pseudo-class applied to the root and icon container and `Typography` if `alternativeLabel={true}`. */
   alternativeLabel: {},
-  /* Styles applied to the container element which wraps `Typography` and `optional`. */
-  labelContainer: {
-    width: '100%',
-  },
 });

 const StepLabel = React.forwardRef(function StepLabel(props, ref) {

[curtislin7]

Hi there @oliviertassinari! If no one is working on this issue yet, could I take a stab at a PR? Thank you.

[stunaz]

go ahead!

[curtislin7]

Alright after poking around a bit, it looks like the proposed solution offers slightly different behavior than the original request.

diff --git a/packages/material-ui/src/StepLabel/StepLabel.js b/packages/material-ui/src/StepLabel/StepLabel.js
index af2b4a9ff..0effb49a9 100644
--- a/packages/material-ui/src/StepLabel/StepLabel.js
+++ b/packages/material-ui/src/StepLabel/StepLabel.js
@@ -20,10 +20,11 @@ export const styles = (theme) => ({
   /* Styles applied to the root element if `orientation="horizontal"`. */
   horizontal: {},
   /* Styles applied to the root element if `orientation="vertical"`. */
-  vertical: {},
+  vertical: {
+    textAlign: 'left',
+  },
   /* Styles applied to the `Typography` component which wraps `children`. */
   label: {
-    color: theme.palette.text.secondary,
     '&$active': {
       color: theme.palette.text.primary,
       fontWeight: 500,
@@ -61,6 +62,7 @@ export const styles = (theme) => ({
   alternativeLabel: {},
   /* Styles applied to the container element which wraps `Typography` and `optional`. */
   labelContainer: {
+    color: theme.palette.text.secondary,
     width: '100%',
   },
 });

@oliviertassinari is this an acceptable solution, or was the intention for textAlign: 'left' to always be applied to the root element regardless of orientation?

[oliviertassinari]

I think that it can work either way. We tend to group styles when possible to make overrides simpler.

[curtislin7]

no problem, i'll keep it as it was then (applied to root). Would a change like this warrant a new unit test? The only reason I'm wondering is it is a relatively minor style change.

[oliviertassinari]

For the test, we could update an existing demo to include an optional label. The visual regression test infrastructure will take care of the rest.