Join GitHub today
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.
Sign up[Stepper] Add slight transition #22266
Open
Comments
|
Similarly, for the MobileStepper, the dot version could also use a slight bit of animation. |
|
@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, |
oliviertassinari
changed the title
|
If that's okay, could I add this as a PR? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
StepIconcomponent 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 simpletransition: 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: