[material] Add `variant` prop type in all components

[emlai]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Creating a List component variant causes TypeScript errors when using the variant prop in the variants declaration or at the component usage site.

Suppressing the TypeScript errors allows the variant to be declared and used as expected.

Expected behavior 🤔

Creating a List component variant is supported in TypeScript.

ListProps should have a declaration for variant, like we have in ButtonProps:

    /**
     * The variant to use.
     * @default 'text'
     */
    variant?: OverridableStringUnion<
      'text' | 'outlined' | 'contained',
      ButtonPropsVariantOverrides
    >;

Steps to reproduce 🕹

Steps:

1. Create a component variant for List using TypeScript.

CodeSandbox

Context 🔦

We're maintaining a UI library built on top of MUI, and we want to provide a "bordered" List variant for our users. This is is blocking us from doing that.

Your environment 🌎

No response

[ZeeshanTamboli]

The List component does not have a variant prop in it's API.

[jussirantala]

The List component does not have a variant prop in it's API.

Isn't that because the API docs are generated from typings? So there would be an issue in API also because an existing prop is missing from the docs. Though it wouldn't be nice to have it in the API docs since there seems to be no ready-made variants for it by default 🤔 But now the typings are blocking everyone from using the prop...

[jussirantala]

I started to work on a PR for this.

[ZeeshanTamboli]

@jussirantala Can you provide a CodeSandbox showing a List component using a variant prop, and that the type is missing for it? The issue template maybe a good starting point. Thanks.

[jussirantala]

@jussirantala Can you provide a CodeSandbox showing a List component using a variant prop, and that the type is missing for it? The issue template maybe a good starting point. Thanks.

Here you go: https://codesandbox.io/s/list-variant-bug-5fqdfp?file=/src/App.tsx

[ZeeshanTamboli]

Thanks for the reproduction. Looks like a bug indeed.

Not sure how does the style (background: red) gets applied if there is no support of variant prop in the List component implementation.

Looks like this would be the case for many other components in general.

[jussirantala]

Seems it also complains about missing component prop if variant prop is used. I don't know the reason for that. Component prop should be optional.