[Box] Deprecate system props

[mnajdova]

Based on #23053 (comment)

So why do we need individual props? We're bloating the API so much which adds so much choice that any development speed you think you add is offset by the amount of choices and docs one has to read.

Why do we *need border if we already have sx?

I'd really suggest you take a look at the full styling API we're currently supporting. There's no comprehensive documentation for how to style our components. It's all over the place with almost a dozen of APIs that are at this point impossible to teach or learn.

@eps1lon agree I will create a follow up PR deprecate the existing Box props in favor of sx. I agree that it's confusing why we have more than one API for the same thing, plus once we bring the sx prop in all core components, it would be great that we will need to have documentation only for this prop.

The next related PRs will be for deprecating the props and improving the system documentation.

I am adding deprecation on the Box component when the system props are used directly on it. The deprecation is added in form of a warning, not sure how we can add it for the typescript props definition too.

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 874d781

[eps1lon]

What's the timeline of this deprecation?

[mnajdova]

What's the timeline of this deprecation?

I would say it should be deprecated in v5 and removed in v6, but we could hurry it up if we decide to drop it in v5. Once we remove it we have to prepare codemods for the changes, otherwise it will be non sense to just push it.

[mbrookes]

Should we remove reference to the system props in the box documentation, in oder to reduce potential for confusion with having two APIs?

[mnajdova]

Should we remove reference to the system props in the box documentation, in oder to reduce potential for confusion with having two APIs?

@mbrookes done, I also improved a bit the docs page for the Box and added the missing sx prop. Let me know if you have any feedback there.