[material-next][ProgressIndicator] Apply MD3 style to LinearProgress

[lhilgert9]

• I have followed (at least) the PR section of the contributing guide.

LinearProgress issue: #39778
Material You umbrella issue: #29345
Preview: https://deploy-preview-39807--material-ui.netlify.app/material-ui/react-progress/#material-you-version

Changes

• Change color props
• Apply MD3 style
• Add playground to docs

[mui-bot]

Netlify deploy preview

• docs/data/material/components/progress/progress.md

@mui/material-next: parsed: +1.71% , gzip: +1.31%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 89d6077

[lhilgert9]

Regarding the animations:
Other frameworks have completely restructured the LinearProgress for MD3 and added new elements to maintain the animation. The question is whether we should do the same or find another way to achieve the same visual result.

Example:

• Component: https://github.com/material-components/material-web/blob/main/progress/internal/linear-progress.ts
• Styles: https://github.com/material-components/material-web/blob/main/progress/internal/_linear-progress.scss

Does anyone have any ideas on this?

[DiegoAndai]

Hey @lhilgert9, thanks for working on these! Sorry for the delay in the review, I was OOO.

Left some questions. I also think we should add the playground in this PR, that way we can easily see the updated component.

[lhilgert9]

I also think we should add the playground in this PR, that way we can easily see the updated component.

@DiegoAndai You mean the playground in the docs?

[DiegoAndai]

@DiegoAndai You mean the playground in the docs?

Yes 👍🏼

[lhilgert9]

@DiegoAndai Playground is implemented👍🏼
Link is in the initial comment.

[DiegoAndai]

I'm bringing @zanivan into this as a design reviewer 😊

The specs default for the four-color option doesn't look good. I suggest choosing a better default on our side. If users want to use the specs, they can override the variables. What do you think @zanivan @lhilgert9?

[lhilgert9]

@DiegoAndai I agree with you that these don't look nice. Here we should also consider adding the additional inner-bar elements as already suggested (#39807 (comment))

[zanivan]

The specs default for the four-color option doesn't look good. I suggest choosing a better default on our side. If users want to use the specs, they can override the variables. What do you think @zanivan @lhilgert9?

I was digging further to understand why the material web looks different from our version, even though using the same colors: primary to primary-container, and then tertiary to tertiary-container.

What I think that might have happened to their version look darker is that instead of primary-container and tertiary-container, it could actually be on-primary-container and on-tertiary-container—and I believe we should use these too, anyway.

[lhilgert9]

@zanivan I tried it out and yes, it looks much better. What do you think about adding the inner-bar elements like in material-web to get the animation right, as I'm not really happy with the current one?

[zanivan]

@zanivan I tried it out and yes, it looks much better.

Good one! It looks much better indeed 🙌

What do you think about adding the inner-bar elements like in material-web to get the animation right, as I'm not really happy with the current one?

This will likely be better answered by @DiegoAndai, but IMO, if the structure with the inner-bar is better aligned with the new material design structure, maybe we should go for it? I mean, if it's not a huge breaking change.
The current one is not that bad, though!

[lhilgert9]

@DiegoAndai I would suggest that we merge this PR after review. Then we could open a new PR/draft and try the idea with the inner-bar elements in this one. I would leave this PR as it is, as @zanivan also said that the design is fine for now.

[DiegoAndai]

@DiegoAndai I would suggest that we merge this PR after review. Then we could open a new PR/draft and try the idea with the inner-bar elements in this one. I would leave this PR as it is, as @zanivan also said that the design is fine for now.

I agree ✅

Things missing to merge this PR are:

• Removing the added composed classes: dashedColorTertiary, barColorTertiary, bar1FourColor, bar2FourColor, (https://github.com/mui/material-ui/pull/39807/files#r1399236516)
• Making sure the inherit color is still working, I saw that code was removed here, here and here

What do you think about adding the inner-bar elements like in material-web to get the animation right, as I'm not really happy with the current one?

For this refactor:

• What breaking changes would you expect we would introduce?
• What's the difference in the animation we're looking to achieve?

Thanks @zanivan for the review and help with the four-color design 🎉

[lhilgert9]

@DiegoAndai

Things missing to merge this PR are:

• Removing the added composed classes: dashedColorTertiary, barColorTertiary, bar1FourColor, bar2FourColor, (https://github.com/mui/material-ui/pull/39807/files#r1399236516)
• Making sure the inherit color is still working, I saw that code was removed here, here and here

I have now fixed these things. So this PR should now ready to merge.

For this refactor:

• What breaking changes would you expect we would introduce?
• What's the difference in the animation we're looking to achieve?

I took another look at it and yes, it actually looks good the way it is right now. Let's just leave it as it is, then we won't have any more braking changes.

[DiegoAndai]

Great job @lhilgert9!