Linear progress variant style override

[igortas]

Steps to reproduce

Steps:

1. Open this link to live example: (required)
2. Check this minimal demo reproduced, module augmentation doesn't affect the new variant option, and new variant it's not recognizable

Current behavior

module augmentation doesn't affect the new variant option for linear progress, and new variant it's not recognizable

error:

Type '"dashed"' is not assignable to type '"determinate" | "indeterminate" | "buffer" | "query" | undefined'.

Expected behavior

Linear progress new variant option can be set through module augmentation and theme.

Context

Simplify all linear progress instances where are used, thourgh theming and applying different variants, instead using extra props or styled

Your environment

 System:
    OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
  Binaries:
    Node: 22.6.0 - ~/.nvm/versions/node/v22.6.0/bin/node
    npm: 11.0.0 - ~/.local/share/pnpm/npm
    pnpm: 9.15.4 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/icons-material: ^6.4.1 => 6.4.1 
    @mui/lab: ^6.0.0-beta.24 => 6.0.0-beta.24 
    @mui/material: ^6.4.1 => 6.4.1 
    @mui/x-charts: ^7.24.1 => 7.23.2 
    @mui/x-data-grid-premium: ~7.24.1 => 7.23.3 
    @mui/x-license: ^7.24.1 => 7.23.2 
    @mui/x-tree-view: ~7.24.1 => 7.23.2 
    @types/react: ^19.0.8 => 18.3.18 
    react: ^19.0.0 => 18.3.1 
    react-dom: ^19.0.0 => 18.3.1 
    typescript: ^5.7.3 => 5.7.3 

Search keywords: linear progress override

[DiegoAndai]

Hey @igortas, thanks for reaching out.

The LinearProgressPropsVariantOverrides doesn't exist. We should add it. I added the ready to take label in case you or anyone wants to work on this before the team gets to it. Please let me know if you're interested. I'll gladly guide you.

[kingflamez]

hey @DiegoAndai I'd like to take this issue, please help with some guidance.

[DiegoAndai]

Hey @kingflamez! Sure 😊, go ahead.

What we need to do is add the LinearProgressPropsVariantOverrides type. It would be the same as LinearProgressPropsColorOverrides :

material-ui/packages/mui-material/src/LinearProgress/LinearProgress.d.ts

Line 7 in 4b74f87

export interface LinearProgressPropsColorOverrides {}

Which is used as such:

material-ui/packages/mui-material/src/LinearProgress/LinearProgress.d.ts

Lines 21 to 24 in 4b74f87

	color?: OverridableStringUnion<
	'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit',
	LinearProgressPropsColorOverrides
	>;

So we need to do the same for the variant prop here:

material-ui/packages/mui-material/src/LinearProgress/LinearProgress.d.ts

Line 44 in 4b74f87

variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query';

May I also ask you to do the same with the CircularProgress component (source)? The change should be the same.

Thanks in advance!

[kingflamez]

@DiegoAndai , Thanks, I have created a PR here: #45163

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@igortas How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.