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

[emlai]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] 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.

[DinhBaoTran]

Hi guys, I have similar issue with FormHelperText -> https://github.com/mui/material-ui/issues/33564

[mnajdova]

Adding here some of the conversations we had on the open pull request. These are some open questions that would arise if we decide to support this in all components:

• the component initially didn't supported the prop - this would mean that the component does not handle in anyway the prop, which would mean that it would be spreader on the inner DOM element. Should we always not propagate the prop in all components?
• the component handles the prop, but the tree rendered depends on the variant prop - this means that we can't simply change it as we would break the internal logic of the component
• what if this discussions gets created for a different prop next, like the size should we then handle this prop in all components too?

[CoennW]

Hi @mnajdova,

Wondering if there is any progress on this? We assumed variants to be supported in all component as mentioned in the docs. Our designer put time and effort in creating variants, now this does not seem to be supported. I would at least expect something like a notice in the docs, then we could have been aware of this months ago.

[matthew-h-wang]

Hi @mnajdova,

Wondering if there is any progress on this? We assumed variants to be supported in all component as mentioned in the docs. Our designer put time and effort in creating variants, now this does not seem to be supported. I would at least expect something like a notice in the docs, then we could have been aware of this months ago.

Similar situation here, without the variant prop in List/ListItem/ListButtonItem, I am not able to implement my designer's variants the way we we implement new variants to other components like Button or Typography.

[matthew-h-wang]

Hi @mnajdova, Wondering if there is any progress on this? We assumed variants to be supported in all component as mentioned in the docs. Our designer put time and effort in creating variants, now this does not seem to be supported. I would at least expect something like a notice in the docs, then we could have been aware of this months ago.

Similar situation here, without the variant prop in List/ListItem/ListButtonItem, I am not able to implement my designer's variants the way we we implement new variants to other components like Button or Typography.

Actually, I learned that you can add your own variant prop (or any other custom prop) via the OwnProps interfaces. For example:

/* eslint-disable @typescript-eslint/no-empty-interface */

export type CustomListItemButtonOwnProps = {
  variant?: "standard" | "condensed" | "comfort";
  otherCustomProp?: boolean;
};

declare module "@mui/material/ListItemButton" {
  interface ListItemButtonOwnProps extends CustomListItemButtonOwnProps {}
}

or just

declare module "@mui/material/ListItemButton" {
  interface ListItemButtonOwnProps {
    variant?: "standard" | "condensed" | "comfort";
    otherCustomProp?: boolean;
  }
}

[CoennW]

Hi @mnajdova, Wondering if there is any progress on this? We assumed variants to be supported in all component as mentioned in the docs. Our designer put time and effort in creating variants, now this does not seem to be supported. I would at least expect something like a notice in the docs, then we could have been aware of this months ago.

Similar situation here, without the variant prop in List/ListItem/ListButtonItem, I am not able to implement my designer's variants the way we we implement new variants to other components like Button or Typography.

Actually, I learned that you can add your own variant prop (or any other custom prop) via the OwnProps interfaces. For example:

/* eslint-disable @typescript-eslint/no-empty-interface */

export type CustomListItemButtonOwnProps = {
  variant?: "standard" | "condensed" | "comfort";
  otherCustomProp?: boolean;
};

declare module "@mui/material/ListItemButton" {
  interface ListItemButtonOwnProps extends CustomListItemButtonOwnProps {}
}

or just

declare module "@mui/material/ListItemButton" {
  interface ListItemButtonOwnProps {
    variant?: "standard" | "condensed" | "comfort";
    otherCustomProp?: boolean;
  }
}

Yes you can extend the props or find other ways to create variants. But the variant functionality, so using variant in the theme, that is described in the docs of MUI, will not work. This means we have different ways of adding variants, which is not really desirable.