[material-ui][Progress] Add Circular progress gradient demo from Github comment

[DiegoAndai]

Add gradient circular progress from #9496 (comment) to customization examples: https://deploy-preview-40559--material-ui.netlify.app/material-ui/react-progress/#customization. Thanks, @antokhio, for this one.

Suggestion from docs-feedback

[mui-bot]

Netlify deploy preview

https://deploy-preview-40559--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against a0aab75

[DiegoAndai]

@samuelsycamore I think we might want to think of a place to put these kinds of examples so they don't bloat the docs. Maybe use @siriwatknp's treasury as a base, move it to the MUI organization, revamp it, and start linking it in the docs 👀.

[mapache-salvaje]

@samuelsycamore I think we might want to think of a place to put these kinds of examples so they don't bloat the docs.

I think it would be helpful if these kinds of "Customization" demos were more specific. What exactly are we trying to demonstrate in these demos? If it's just "here's how to customize some stuff" broadly, then I think it's less helpful than if it was "here's how to customize to achieve a specific end goal."

In the Joy UI docs, we've established a nice pattern with Customization and Common Example demos:

• Customization: here's how to go beyond the built-in props to achieve some specific use case - less complex, more for demo purposes
• Common examples: here's how to (re)create well-known UI designs and patterns - more complex, closer to real-world UI that you could copy+paste directly into your app

I'd love to see this pattern ported over to the Material UI docs! It's something we've only just begun with a few docs in #35158, and it'll definitely take a lot of time.

In other words, I'd love to see this as ## Customization —> ### Gradients or something like that.

[DiegoAndai]

I think it would be helpful if these kinds of "Customization" demos were more specific. What exactly are we trying to demonstrate in these demos? If it's just "here's how to customize some stuff" broadly, then I think it's less helpful than if it was "here's how to customize to achieve a specific end goal."

I agree this could be better organized.

In the Joy UI docs, we've established a nice pattern with Customization and Common Example demos:

I like it! I'll implement the sections you proposed and let you know when it's ready for re-review 😊

For the long term, I wondered if the Common Example ones should live elsewhere to avoid docs bloat. That would enable us to have a lot of common examples, and the community could contribute without worrying about the docs getting too big and scary.

[antokhio]

5 cents, here:
Why not add some accordions to the bottom? Something like Cases or 'FAQ'

Bit off topic, but: Would be really nice to have proper styled example. It was kinda nightmare to figure it out:

const MyStyledBox = styled(Box, { 
  shouldForwardProp: (props) => 
    ['myCustomProp'].every(key => key !== prop)
})<BoxProps & { myCustomProp?: boolean  }>(({ theme, myCustomProp }) => theme.unstable_sx({
   background: myCustomProp ? 'red' : 'green',
}))

const Component = () => {
   return <MyStyledBox myCustomProp>TEST<MyStyledBox/>
}

[DiegoAndai]

Hey @samuelsycamore! I haven't had time to work on this (as you can see 😅).

I updated the colors as @siriwatknp suggested, but I don't have time to get the structure right. I tried reorganizing, but the changes kept growing; at this point, we can either merge this PR as is or close the PR and revisit it later. I'm happy with both alternatives.

And then, address this page's structure in a later PR. I agree with you that it needs a good restructuring.

[siriwatknp]

In my opinion, we can merge this and revisit the structure later (we need to restructure other components anyway).