v5 Allow disabling components variants

[KASOGIT]

Summary 💡

I'm moving to the v5 and so far everything is great especially the possibility to add new variants to components.

The doc show an example on how to disable some variants for Typography and i thought it would work the same for every components since many design system use only a subsets of all components variants.

My need would be to disable for exemple the contained variant for Button and that ButtonProps would reflect that with Typescript

Examples 🌈

declare module '@material-ui/core/Button' {
  interface ButtonPropsVariantOverrides {
    outlined: false;
  }
}

<Button variant="outlined">Button</Button>
// Received illegal value for 'variant'. Supported options: 'text', 'contained'

Also implementing the design system with tools like storybook would be smother since controls display only the availables variants only display the available variants

Do you plan to implement this behaviour or is there already a way to achieve it ?

[mnajdova]

Yes, this is supported. Is there something not working? This actually reminds me that we should maybe add disabling variants in our typescript module augmentation tests.

Namely, we can do:

index cd3a8e09c8..1a09779cea 100644
--- a/packages/material-ui/test/typescript/moduleAugmentation/buttonCustomProps.spec.tsx
+++ b/packages/material-ui/test/typescript/moduleAugmentation/buttonCustomProps.spec.tsx
@@ -6,6 +6,7 @@ import { createTheme } from '@material-ui/core/styles';
 declare module '@material-ui/core/Button' {
   interface ButtonPropsVariantOverrides {
     dashed: true;
+    contained: false;
   }
   interface ButtonPropsColorOverrides {
     success: true;
@@ -40,3 +41,6 @@ const theme = createTheme({
 <Button variant="dashed" color="success" size="extraLarge">
   Custom
 </Button>;
+
+// @ts-expect-error The contained variant was disabled
+<Button variant="contained" color="primary">Invalid</Button>

[noviicee]

Can I take this? @mnajdova

[nachaos]

Hi @KASOGIT, where you able to solve this and display only the available variants? Thanks in advance :)

Also implementing the design system with tools like storybook would be smother since controls display only the availables variants only display the available variants

[Miaouchkinz]

Hi @mnajdova ,

Disabling the default variants doesn't seem to work with:

declare module '@mui/material/Button' {
    interface ButtonPropsVariantOverrides {
           customVariant: true,
           container: false
    }
 }

Note — The tests were done on module '@material-ui/core/Button' (https://github.com/mui-org/material-ui/pull/27376)

[mnajdova]

@Miaouchkinz the tests were updated - https://github.com/mui/material-ui/blob/master/packages/mui-material/test/typescript/moduleAugmentation/buttonCustomProps.spec.tsx it still works. If it doesn't work for you, please share a reproduction and open a new issue.

[henriqueholtz]

@mnajdova and @Miaouchkinz, for me it's ok. I'm using "@mui/material": "^5.8.0"

• [x] Enabled new custom variants
• [x] Disabled default variants

Repo of the screenshot: sharebookBR/sharebook-frontend-nex