Make component theme default props variant-aware

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

When passing component overrides to createTheme(), allow the variants objects for each component to define their own default props as a callback with theme as its argument (same as style on the same object). This would mean that given a minimum set of required props for the component to qualify as a 'variant', we can assign any other default props for that variant.

Examples 🌈

export const MuiAutocompleteOverrides: Components<Theme>['MuiAutocomplete'] = {
  defaultProps: { // THIS IS NOT VARIANT AWARE
    popupIcon: (
      <CaretDownOutlineIcon size={theme.iconScale['x-small']} color={theme.colors['neutral-75']} />
    )
  },
  variants: [
    {
      props: {
        size: 'medium'
      },
      style: (theme) => ({
        padding: 0
      }),
      defaultProps: (theme) => ({ // THIS IS VARIANT AWARE
        popupIcon: (
          <CaretDownOutlineIcon size={theme.iconScale['medium']} color={theme.colors['neutral-75']} />
        )
      })
    }
  ]
};

Motivation 🔦

I want to be able to define what the default props for a component should be given that it matches a specific variant which i have defined. Specifically, i want to define a default icon for the Autocomplete component whose size changes according to the size prop passed to the component. Without this ability, i am forced to use a default icon whose size won't intelligently match the Autocomplete depending on the size. Instead, i have to pass the icon as the appropriate size everywhere that i use the Autocomplete.

Start at createTheme's component override and variant handling, then compare how variant style callbacks receive the theme. Trace how matching variant props are applied and define the completion criteria around variant defaultProps callbacks receiving the theme and applying their returned props.