[Button] Improve loading transition

mui · Oct 4, 2020 · fda0c7b · fda0c7b
1 parent 4824c9e
commit fda0c7b
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/docs/src/pages/components/switches/CustomizedSwitches.js b/docs/src/pages/components/switches/CustomizedSwitches.js
@@ -56,7 +56,7 @@ const IOSSwitch = withStyles((theme) => ({
     border: `1px solid ${theme.palette.grey[400]}`,
     backgroundColor: theme.palette.grey[50],
     opacity: 1,
-    transition: theme.transitions.create(['background-color', 'border']),
+    transition: theme.transitions.create(['background-color', 'border-color']),
   },
   checked: {},
   focusVisible: {},

diff --git a/docs/src/pages/components/switches/CustomizedSwitches.tsx b/docs/src/pages/components/switches/CustomizedSwitches.tsx
@@ -72,7 +72,10 @@ const IOSSwitch = withStyles((theme: Theme) =>
       border: `1px solid ${theme.palette.grey[400]}`,
       backgroundColor: theme.palette.grey[50],
       opacity: 1,
-      transition: theme.transitions.create(['background-color', 'border']),
+      transition: theme.transitions.create([
+        'background-color',
+        'border-color',
+      ]),
     },
     checked: {},
     focusVisible: {},

diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
@@ -14,9 +14,12 @@ export const styles = (theme) => ({
     minWidth: 64,
     padding: '6px 16px',
     borderRadius: theme.shape.borderRadius,
-    transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
-      duration: theme.transitions.duration.short,
-    }),
+    transition: theme.transitions.create(
+      ['background-color', 'box-shadow', 'border-color', 'color'],
+      {
+        duration: theme.transitions.duration.short,
+      },
+    ),
     '&:hover': {
       textDecoration: 'none',
       backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity),

diff --git a/packages/material-ui/src/Fab/Fab.js b/packages/material-ui/src/Fab/Fab.js
@@ -11,7 +11,7 @@ export const styles = (theme) => ({
   root: {
     ...theme.typography.button,
     minHeight: 36,
-    transition: theme.transitions.create(['background-color', 'box-shadow', 'border'], {
+    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
       duration: theme.transitions.duration.short,
     }),
     borderRadius: '50%',