[Skeleton][material-ui] Add new props to the Skeleton component

[gitstart]

Description

Added new props to the Skeleton component. The props added are

• shape: determines the shape of the skeleton, whether circular, rectangular or rounded.
• size: set the adaptation of the skeleton component.

Also deprecated variant in favor of the two new props.

Closes #38190

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

---

This code was written and reviewed by GitStart Community. Growing great engineers, one PR at a time.

[mui-bot]

Netlify deploy preview

• docs/data/material/components/skeleton/skeleton-pt.md
• docs/data/material/components/skeleton/skeleton-zh.md
• docs/data/material/components/skeleton/skeleton.md

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 602ef10

[gitstart]

@DiegoAndai this PR is ready for review

[DiegoAndai]

Hey @gitstart, thanks for working on this!

I left some comments for review. Also, we need to add tests:

• Tests for the current variant behavior, so we're sure we're not breaking current behavior
• Test for the new size and shape props

[gitstart]

@DiegoAndai your feedback has been implemented.

[DiegoAndai]

@gitstart the code looks ready to me 🎉

Can you update the Skeleton documentation page? It should reflect that users should use size and shape instead of variant:

• Replace the Variants sections with separate Size and Shape sections
• Replace any use of variant in the examples, as well as the explanations related to it, with the size or shape props

We also need to merge the master branch into this branch to remove the merge conflict 😊

[DiegoAndai]

Hey @gitstart, here's a couple fixes that I found reviewing the new documentation

[DiegoAndai]

Suggested change

	styles[ownerState.shape],
	styles[ownerState.size],
	ownerState.shape && styles[ownerState.shape],
	ownerState.size && styles[ownerState.size],

[DiegoAndai]

We should remove the borderRadius style on line 92, as the shape, not the size, should control it.

[gitstart]

@DiegoAndai your feedback has been implemented, thanks for the review.

[DiegoAndai]

Hey @gitstart, so sorry for the delayed review

Here's one last fix (I think) we should do. Let me know if it makes sense to you.

[DiegoAndai]

The "text" variant was the default, and it had rounded borders. We removed that style from the "text" styles above, which is correct, but we should keep the being rounded as before.

To achieve this, we should take borderRadius: (theme.vars || theme).shape.borderRadius out of this conditional, and add it to the base styles. We should add a ownerState.shape === 'rectangular' conditional style that would set borderRadius: 0

[gitstart]

@DiegoAndai your feedback has been implemented.

[DiegoAndai]

Great work @gitstart 👏🏼
I'm very happy to be merging this one 🎉

[oliviertassinari]

In terms of behavior, I think it would be great to update the docs to still encourage the use of the variant.

This seems to be the same case as in https://mui.com/material-ui/react-alert/ with the severity = color + icon. In the large majority of the cases, the variant should be enough but here might be cases where developers want to unbundle the prop variant = shape + size.

Personally, it would be more intuitive for me to use the sx prop over the shape prop, but I can also understand why some people would use it.

However, I also think that we should drop the variant=rounded prop. This is a purely stylistics prop, it's not about describing the app structure. It's what Joy UI is doing https://mui.com/joy-ui/react-skeleton/#geometry, it makes more sense IMHO. Which I think illustrate why we should move Joy UI and Material UI at the same time, it helps either pick the best option, or to be mindful about going with a different tradeoff to cater for different personas.

In any cases, #38190 feels like an issue that is for the <10% of the users, so I think we should only slightly change the product for it.