diff --git a/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx b/packages/mui-joy/src/AutocompleteOption/AutocompleteOption.tsx index 7c8ad4f5b13397..5bf981a02e6126 100644 --- 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 index d7c4230dbe84c7..f01bc72a24dc9b 100644 --- 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 index af12b54e24d790..b57592181eeac3 100644 --- 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 index 028f80fc0e0eff..bef312a0305d41 100644 --- 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 index e1c1df81a0e1b1..a59e60607cb9e8 100644 --- 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 index 0a64e7f35f5710..e6fe56fa132dfb 100644 --- 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 index 48c6984e7077f7..990d47d1d6eccf 100644 --- 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 index 2afbe401ffd568..f6bb52d300b657 100644 --- 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 index 2b52cdbc8dfa67..81328bafc17ce5 100644 --- 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 index 66e897e7429416..e3d04cc0df3572 100644 --- 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 index 89ca4fd1fbd814..a464c0fb40955f 100644 --- 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 index acecc058afb441..4d725fcf4b0c53 100644 --- 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 index 9b627d3a1bd5ca..02c9a1273d0ca4 100644 --- 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 index 58dcfc607d58d0..4b5e3bfb414b25 100644 --- 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 index 0b4ef05bf277e3..338590c7645e30 100644 --- 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 index 29f67d705ce783..829bfe79250e73 100644 --- 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 index 5b3d1325379bbc..a072769b43bcb9 100644 --- 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 index eea78c01bfb43f..45072e51afdaf9 100644 --- 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: '""',