[Joy] Remove transition from all components (#35952)

mui · Feb 16, 2023 · f7b5286 · f7b5286
1 parent b3ec42c
commit f7b5286
Show file tree

Hide file tree

Showing 18 changed files with 5 additions and 76 deletions.
diff --git a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx
@@ -29,9 +29,6 @@ const useUtilityClasses = (ownerState: AutocompleteOptionOwnerState) => {
 export const StyledAutocompleteOption = styled(StyledListItemButton as unknown as 'li')<{
   ownerState: AutocompleteOptionOwnerState;
 }>(({ theme, ownerState }) => ({
-  '&:not(:hover)': {
-    transition: 'none', // prevent flicker when using keyboard arrows to move between options
-  },
   '&[aria-disabled="true"]': theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
   '&[aria-selected="true"]': {
     color: theme.variants.soft?.[ownerState.color === 'context' ? 'context' : 'primary']?.color,

diff --git a/packages/mui-joy/src/Badge/Badge.tsx b/packages/mui-joy/src/Badge/Badge.tsx
@@ -122,7 +122,6 @@ const BadgeBadge = styled('span', {
     minWidth: 'var(--Badge-minHeight)',
     borderRadius: 'var(--Badge-radius, var(--Badge-minHeight))',
     zIndex: 1,
-    transition: 'transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
     backgroundColor: theme.vars.palette.background.surface,
     [ownerState.anchorOrigin!.vertical]: inset[ownerState.anchorOrigin!.vertical],
     [ownerState.anchorOrigin!.horizontal]: inset[ownerState.anchorOrigin!.horizontal],
@@ -131,9 +130,6 @@ const BadgeBadge = styled('span', {
     [`&.${badgeClasses.invisible}`]: {
       transform: `scale(0) ${translateX} ${translateY}`,
     },
-    ...(ownerState.invisible && {
-      transition: 'transform 195ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
-    }),
     ...theme.variants[ownerState.variant!]?.[ownerState.color!],
   };
 });

diff --git a/packages/mui-joy/src/Button/Button.tsx b/packages/mui-joy/src/Button/Button.tsx
@@ -128,9 +128,6 @@ export const ButtonRoot = styled('button', {
       justifyContent: 'center',
       position: 'relative',
       textDecoration: 'none', // prevent user agent underline when used as anchor
-      // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
-      transition:
-        'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
       fontFamily: theme.vars.fontFamily.body,
       fontWeight: theme.vars.fontWeight.lg,
       lineHeight: 1,
@@ -147,8 +144,6 @@ export const ButtonRoot = styled('button', {
         theme.variants[`${ownerState.variant!}Disabled`]?.[ownerState.color!],
       ...(ownerState.loadingPosition === 'center' && {
         [`&.${buttonClasses.loading}`]: {
-          transition:
-            'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
           color: 'transparent',
         },
       }),

diff --git a/packages/mui-joy/src/Card/Card.tsx b/packages/mui-joy/src/Card/Card.tsx
@@ -75,9 +75,6 @@ const CardRoot = styled('div', {
     boxShadow: theme.shadow.sm,
     backgroundColor: theme.vars.palette.background.surface,
     fontFamily: theme.vars.fontFamily.body,
-    // TODO: discuss the theme transition.
-    // This value is copied from mui-material Sheet.
-    transition: 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
     position: 'relative',
     display: 'flex',
     flexDirection: ownerState.orientation === 'horizontal' ? 'row' : 'column',

diff --git a/packages/mui-joy/src/Checkbox/Checkbox.tsx b/packages/mui-joy/src/Checkbox/Checkbox.tsx
@@ -97,9 +97,6 @@ const CheckboxCheckbox = styled('span', {
       justifyContent: 'center',
       alignItems: 'center',
       flexShrink: 0,
-      // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
-      transition:
-        'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
       ...(ownerState.disableIcon && {
         display: 'contents',
       }),
@@ -137,9 +134,6 @@ const CheckboxAction = styled('span', {
     bottom: 'calc(-1 * var(--variant-borderWidth, 0px))',
     right: 'calc(-1 * var(--variant-borderWidth, 0px))',
     zIndex: 1, // The action element usually cover the area of nearest positioned parent
-    // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
-    transition:
-      'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
     [theme.focus.selector]: theme.focus.default,
   },
   ...(ownerState.disableIcon

diff --git a/packages/mui-joy/src/Chip/Chip.tsx b/packages/mui-joy/src/Chip/Chip.tsx
@@ -89,8 +89,6 @@ const ChipRoot = styled('div', {
       alignItems: 'center',
       justifyContent: 'center',
       whiteSpace: 'nowrap',
-      transition:
-        'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
       textDecoration: 'none',
       verticalAlign: 'middle',
       boxSizing: 'border-box',
@@ -151,8 +149,6 @@ const ChipAction = styled('button', {
     backgroundColor: 'initial',
     textDecoration: 'none',
     borderRadius: 'inherit',
-    transition:
-      'background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
     [theme.focus.selector]: theme.focus.default,
   },
   theme.variants[ownerState.variant!]?.[ownerState.color!],

diff --git a/packages/mui-joy/src/CircularProgress/CircularProgress.tsx b/packages/mui-joy/src/CircularProgress/CircularProgress.tsx
@@ -179,17 +179,11 @@ const CircularProgressProgress = styled('circle', {
     transform: 'rotate(-90deg)', // to initially appear at the top-center of the circle.
   },
   ({ ownerState }) =>
-    ownerState.determinate
-      ? {
-          transition: 'stroke-dashoffset 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms', // copy from Material UI CircularProgress
-        }
-      : css`
-          animation: var(
-              --CircularProgress-circulation,
-              0.8s linear 0s infinite normal none running
-            )
-            ${circulate};
-        `,
+    !ownerState.determinate &&
+    css`
+      animation: var(--CircularProgress-circulation, 0.8s linear 0s infinite normal none running)
+        ${circulate};
+    `,
 );
 
 /**

diff --git a/packages/mui-joy/src/IconButton/IconButton.tsx b/packages/mui-joy/src/IconButton/IconButton.tsx
@@ -72,9 +72,6 @@ export const StyledIconButton = styled('button')<{ ownerState: IconButtonOwnerSt
       alignItems: 'center',
       justifyContent: 'center',
       position: 'relative',
-      // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
-      transition:
-        'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
       [theme.focus.selector]: theme.focus.default,
     },
     theme.variants[ownerState.variant!]?.[ownerState.color!],

diff --git a/packages/mui-joy/src/Input/Input.tsx b/packages/mui-joy/src/Input/Input.tsx
@@ -97,9 +97,6 @@ export const StyledInputRoot = styled('div')<{ ownerState: InputOwnerState }>(
         ...(ownerState.size === 'sm' && {
           fontSize: theme.vars.fontSize.sm,
         }),
-        // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
-        transition:
-          'border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
         '&:before': {
           boxSizing: 'border-box',
           content: '""',

diff --git a/packages/mui-joy/src/LinearProgress/LinearProgress.tsx b/packages/mui-joy/src/LinearProgress/LinearProgress.tsx
@@ -117,7 +117,6 @@ const LinearProgressRoot = styled('div', {
       ? {
           '&::before': {
             left: 'var(--_LinearProgress-padding)',
-            transition: 'inline-size 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
             inlineSize:
               'calc(var(--LinearProgress-percent) * 1% - 2 * var(--_LinearProgress-padding))',
           },

diff --git a/packages/mui-joy/src/ListItemButton/ListItemButton.tsx b/packages/mui-joy/src/ListItemButton/ListItemButton.tsx
@@ -79,9 +79,6 @@ export const StyledListItemButton = styled('div')<{ ownerState: ListItemButtonOw
       flexBasis: ownerState.row ? 'auto' : '0%', // for long text (in vertical), displays in multiple lines.
       flexShrink: 0,
       minInlineSize: 0,
-      // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
-      transition:
-        'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
       fontSize: 'var(--List-item-fontSize)',
       fontFamily: theme.vars.fontFamily.body,
       ...(ownerState.selected && {

diff --git a/packages/mui-joy/src/Radio/Radio.tsx b/packages/mui-joy/src/Radio/Radio.tsx
@@ -120,9 +120,6 @@ const RadioRadio = styled('span', {
       justifyContent: 'center',
       alignItems: 'center',
       flexShrink: 0,
-      // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
-      transition:
-        'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
       ...(ownerState.disableIcon && {
         display: 'contents',
       }),
@@ -161,9 +158,6 @@ const RadioAction = styled('span', {
     bottom: 'calc(-1 * var(--variant-borderWidth, 0px))',
     right: 'calc(-1 * var(--variant-borderWidth, 0px))',
     zIndex: 1, // The action element usually cover the area of nearest positioned parent
-    // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
-    transition:
-      'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
     [theme.focus.selector]: theme.focus.default,
   },
   ...(ownerState.disableIcon
@@ -222,8 +216,6 @@ const RadioIcon = styled('span', {
   borderRadius: 'inherit',
   color: 'inherit',
   backgroundColor: 'currentColor',
-  // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
-  transition: 'transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
   transform: ownerState.checked ? 'scale(1)' : 'scale(0)',
 }));
 

diff --git a/packages/mui-joy/src/Select/Select.tsx b/packages/mui-joy/src/Select/Select.tsx
@@ -162,9 +162,6 @@ const SelectRoot = styled('div', {
       ...(ownerState.size === 'sm' && {
         fontSize: theme.vars.fontSize.sm,
       }),
-      // TODO: discuss the transition approach in a separate PR.
-      transition:
-        'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
       '&::before': {
         boxSizing: 'border-box',
         content: '""',

diff --git a/packages/mui-joy/src/Sheet/Sheet.tsx b/packages/mui-joy/src/Sheet/Sheet.tsx
@@ -54,9 +54,6 @@ export const SheetRoot = styled('div', {
         '--List-radius': `calc(${childRadius} - var(--variant-borderWidth, 0px))`,
         '--internal-action-radius': `calc(${childRadius} - var(--variant-borderWidth, 0px))`,
       }),
-      // TODO: discuss the theme transition.
-      // This value is copied from mui-material Sheet.
-      transition: 'box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
       backgroundColor: theme.vars.palette.background.surface,
       position: 'relative',
     },

diff --git a/packages/mui-joy/src/Slider/Slider.tsx b/packages/mui-joy/src/Slider/Slider.tsx
@@ -118,11 +118,6 @@ const SliderRoot = styled('span', {
         color: theme.vars.palette.text.tertiary,
         ...getColorVariables({ state: 'Disabled' }),
       },
-      [`&.${sliderClasses.dragging}`]: {
-        [`& .${sliderClasses.track}, & .${sliderClasses.thumb}`]: {
-          transition: 'none',
-        },
-      },
       boxSizing: 'border-box',
       display: 'inline-block',
       position: 'relative',
@@ -199,9 +194,6 @@ const SliderTrack = styled('span', {
         ownerState.track === 'inverted'
           ? 'var(--Slider-rail-background)'
           : 'var(--Slider-track-background)',
-      // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Slider.
-      transition:
-        'left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, width 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, height 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
       ...(ownerState.orientation === 'horizontal' && {
         height: 'var(--Slider-track-size)',
         top: '50%',
@@ -239,9 +231,6 @@ const SliderThumb = styled('span', {
   boxShadow: 'var(--Slider-thumb-shadow)',
   color: 'var(--Slider-thumb-color)',
   backgroundColor: 'var(--Slider-thumb-background)',
-  // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Slider.
-  transition:
-    'left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
   [theme.focus.selector]: theme.focus.default,
   ...(ownerState.orientation === 'horizontal' && {
     top: '50%',

diff --git a/packages/mui-joy/src/SvgIcon/SvgIcon.tsx b/packages/mui-joy/src/SvgIcon/SvgIcon.tsx
@@ -40,7 +40,6 @@ const SvgIconRoot = styled('svg', {
   display: 'inline-block',
   fill: 'currentColor',
   flexShrink: 0,
-  transition: 'fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
   ...(ownerState.fontSize &&
     ownerState.fontSize !== 'inherit' && {
       fontSize: `var(--Icon-fontSize, ${theme.fontSize[ownerState.fontSize]})`,

diff --git a/packages/mui-joy/src/Switch/Switch.tsx b/packages/mui-joy/src/Switch/Switch.tsx
@@ -176,7 +176,6 @@ const SwitchThumb = styled('span', {
   overridesResolver: (props, styles) => styles.thumb,
 })<{ ownerState: SwitchOwnerState }>({
   '--Icon-fontSize': 'calc(var(--Switch-thumb-size) * 0.75)',
-  transition: 'left 0.2s',
   display: 'inline-flex',
   justifyContent: 'center',
   alignItems: 'center',

diff --git a/packages/mui-joy/src/Textarea/Textarea.tsx b/packages/mui-joy/src/Textarea/Textarea.tsx
@@ -101,9 +101,6 @@ const TextareaRoot = styled('div', {
         fontSize: theme.vars.fontSize.sm,
         lineHeight: theme.vars.lineHeight.sm,
       }),
-      // TODO: discuss the transition approach in a separate PR. This value is copied from mui-material Button.
-      transition:
-        'border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
       '&:before': {
         boxSizing: 'border-box',
         content: '""',