[theme] `theme.transition.create` defaults to non theme easing value

If you try to modify the theme.transition.easing object in the theme, it does not seem to apply to the components.

Here’s a reproduction: https://codesandbox.io/s/youthful-noether-rex8r?file=/src/App.js

If you inspect the <ListItem button />, you’ll see that it has a transition with a cubic-bezier that does not match with the theme I provide, even though the transition duration is updated properly.

Version: v4.11.3

[pandeymangg]

Hey, can I work on this?

[mnajdova]

That’s a good point. We can create createTransitions factory. It could look something like this:

import { easing, duration, getAutoHeightDuration } from './transitions';

function formatMs(milliseconds) {
  return `${Math.round(milliseconds)}ms`;
}

export default function createTransitions(inputTransitions) {
  const mergedEasing = {
    ...easing,
    ...inputTransitions.easing,
  };

  const mergedDuration = {
    ...duration,
    ...inputTransitions.duration,
  };

  const create = (props = ['all'], options = {}) => {
    const {
      duration: durationOption = mergedDuration.standard,
      easing: easingOption = mergedEasing.easeInOut,
      delay = 0,
      ...other
    } = options;
  
    if (process.env.NODE_ENV !== 'production') {
      const isString = (value) => typeof value === 'string';
      // IE11 support, replace with Number.isNaN
      // eslint-disable-next-line no-restricted-globals
      const isNumber = (value) => !isNaN(parseFloat(value));
      if (!isString(props) && !Array.isArray(props)) {
        console.error('Material-UI: Argument "props" must be a string or Array.');
      }
  
      if (!isNumber(durationOption) && !isString(durationOption)) {
        console.error(
          `Material-UI: Argument "duration" must be a number or a string but found ${durationOption}.`,
        );
      }
  
      if (!isString(easingOption)) {
        console.error('Material-UI: Argument "easing" must be a string.');
      }
  
      if (!isNumber(delay) && !isString(delay)) {
        console.error('Material-UI: Argument "delay" must be a number or a string.');
      }
  
      if (Object.keys(other).length !== 0) {
        console.error(`Material-UI: Unrecognized argument(s) [${Object.keys(other).join(',')}].`);
      }
    }
  
    return (Array.isArray(props) ? props : [props])
      .map(
        (animatedProp) =>
          `${animatedProp} ${
            typeof durationOption === 'string' ? durationOption : formatMs(durationOption)
          } ${easingOption} ${typeof delay === 'string' ? delay : formatMs(delay)}`,
      )
      .join(',');
  }

  return {
    easing: mergedEasing,
    duration: mergedDuration,
    getAutoHeightDuration,
    create,
  };
}

I’ve copied the create function from transitions.js and changed the default duration and easing to be from the merged values. We can remove the create function defined in transition.js after this change.