[Stepper] Add slight transition

[Floriferous]

I'm not sure what the policy on css transitions is in this repo, but here's a suggestion.

I noticed that color transitions on the StepIcon component are instantaneous, even though the entire component is quite animated and fluid. The StepIcon goes through several colors (default -> active -> completed), and I believe a simple transition: color 300ms ease; already adds quite a bit more style to it.

Transition variables to be determined by the theme of course. It could be the same as the transition of the Collapse?

Here's the change that would need to be made:

    MuiStepIcon: {
      root: {
        transition: 'color 300ms ease',
      },
    },

[Floriferous]

Similarly, for the MobileStepper, the dot version could also use a slight bit of animation.

[oliviertassinari]

@Floriferous This sounds like a great idea. I have seen Ant Design, Elastic UI behave similarly. Would this diff cover your use case?

diff --git a/packages/material-ui/src/MobileStepper/MobileStepper.js b/packages/material-ui/src/MobileStepper/MobileStepper.js
index b9a8f7a5b2..d1e62e31d9 100644
--- a/packages/material-ui/src/MobileStepper/MobileStepper.js
+++ b/packages/material-ui/src/MobileStepper/MobileStepper.js
@@ -41,6 +41,7 @@ export const styles = (theme) => ({
   },
   /* Styles applied to each dot if `variant="dots"`. */
   dot: {
+    transition: theme.transitions.create('background-color'),
     backgroundColor: theme.palette.action.disabled,
     borderRadius: '50%',
     width: 8,
diff --git a/packages/material-ui/src/StepIcon/StepIcon.js b/packages/material-ui/src/StepIcon/StepIcon.js
index 9e1aaeedac..0dcd3dc1d1 100644
--- a/packages/material-ui/src/StepIcon/StepIcon.js
+++ b/packages/material-ui/src/StepIcon/StepIcon.js
@@ -11,6 +11,7 @@ export const styles = (theme) => ({
   root: {
     display: 'block',
     color: theme.palette.text.disabled,
+    transition: theme.transitions.create('color'),
     '&$completed': {
       color: theme.palette.primary.main,
     },
diff --git a/packages/material-ui/src/StepLabel/StepLabel.js b/packages/material-ui/src/StepLabel/StepLabel.js
index 4a0a857af5..960c9efe68 100644
--- a/packages/material-ui/src/StepLabel/StepLabel.js
+++ b/packages/material-ui/src/StepLabel/StepLabel.js
@@ -28,6 +28,7 @@ export const styles = (theme) => ({
   },
   /* Styles applied to the `Typography` component which wraps `children`. */
   label: {
+    transition: theme.transitions.create('color'),
     '&$active': {
       color: theme.palette.text.primary,
       fontWeight: 500,

[lfp2]

Hi, I can give a try on this? :)

[oliviertassinari]

@lfp2 Sure :)

[xtrixia]

Hi 👋 If no one work on this, I'd love to help on this one :)