[base] Remove unstyled suffix from Base components + Codemod script

[hbjORbj]

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

Preview: e.g., https://deploy-preview-36873--material-ui.netlify.app/base/react-button/

[mui-bot]

Netlify deploy preview

• docs/data/base/components/badge/badge.md
• docs/data/base/components/button/button.md
• docs/data/base/components/click-away-listener/click-away-listener.md
• docs/data/base/components/focus-trap/focus-trap.md
• docs/data/base/components/form-control/form-control.md

@material-ui/core: parsed: +0.10% , gzip: +0.06%
@material-ui/lab: parsed: +0.16% , gzip: +0.08%
@material-ui/unstyled: parsed: -0.37% 😍, gzip: -0.04% 😍

Bundle size report

Details of bundle changes

Generated by 🚫 dangerJS against 1d1b84a

[mnajdova]

Without renaming the folders in the packages/mui-base/src everything is broken, as the imports are not updated from '@mui/base/ButtonUnstyledto@mui/base/Button, while the folder would still be named ButtonUnstyled`.

[mnajdova]

The failing test is related to #36936 (it's one of the problems that is solved).

[mnajdova]

On the codemod, I would expect that interface and other exported modules, like classes etc. that are renamed would be aliased as the old ones, or we should replace them in the whole file, for e.g.

 import ButtonUnstyled, {
-  ButtonUnstyledProps,
+  ButtonProps as ButtonUnstyledProps,
-  ButtonUnstyledRootSlotProps,
+  ButtonRootSlotProps as as ButtonUnstyledRootSlotProps,,
-  buttonUnstyledClasses,
+  buttonClasses as buttonUnstyledClasses,
-} from '@mui/base/ButtonUnstyled';
+} from '@mui/base/Button';

We should also add test if some of these is already aliased before the codemod.

[mnajdova]

The logic in

material-ui/packages/docs-utilities/index.js

Line 31 in 7b1ad34

function getUnstyledFilename(filename, definitionFile = false) {

is broken. We should check where it is used and find alternative implementation

Update: This was used when the Material UI components were inheriting from the unstyled components, however they are now moved to use the hooks, we can drop this logic altogether. Probably would be better if we isolate this change in a new PR.

[mnajdova]

The codmod updates look great 👌

[mnajdova]

@siriwatknp or @Janpot maybe you can help. We are removing the Unstyled suffix from the Base UI's components in this PR. Previously the API links looked like: https://mui.com/base/react-button/components-api/#button-unstyled, but now as the unstyled suffix is gone, the anchor is different: https://mui.com/base/react-button/components-api/#button. I pushed 35325a7 in order to fix this, however if you open https://deploy-preview-36873--material-ui.netlify.app/base/react-button/components-api/#button-unstyled you will notice that the replacement of the url is happening twice. Do you know what may be the reason for this and how can we avoid it?

It is not that big a deal, as these old URLs were there for only two weeks, we can likely drop this logic after some time, but it bugs me a lot.

cc @oliviertassinari it was only two weeks and we had to become creative to fix a redirects with the anchors :)

[Janpot]

@mnajdova Maybe try

if (router.isReady && anchor && anchor.endsWith('-unstyled')) {

From https://nextjs.org/docs/advanced-features/automatic-static-optimization#caveats

Avoid using the asPath value on next/router in the rendering tree until the router's isReady field is true.

---

To add a small nit that I noticed I'd also do

hash: `${anchor.slice(0, -'-unstyled'.length)}`,

To avoid replacing the string "-unstyled" should it appear in the middle of the url for some reason. (Probably won't happen in practice?)

[mnajdova]

@mnajdova Maybe try

if (router.isReady && anchor && anchor.endsWith('-unstyled')) {

From https://nextjs.org/docs/advanced-features/automatic-static-optimization#caveats

Avoid using the asPath value on next/router in the rendering tree until the router's isReady field is true.

Aaaah yes, this was it, thanks Jan!

To add a small nit that I noticed I'd also do

hash: `${anchor.slice(0, -'-unstyled'.length)}`,

To avoid replacing the string "-unstyled" should it appear in the middle of the url for some reason. (Probably won't happen in practice?)

Applied the change just to safe, however it shouldn't happen.

Actually I needed to keep the replacement of the -unstyled suffix anywhere in the anchor and updated the condition to just check if the -unstyled string is present, because we have anchors like #button-unstyled-props => #button-props

[mnajdova]

I can't spot anything else, we should be ready for merge 👍

[oliviertassinari]

I have found a regression.

1. Open https://deploy-preview-36873--material-ui.netlify.app/material-ui/react-slider/#api
2. The API link points to Base UI but it should point to Material UI

Can we solve this as a high priority? There are 20 links like this that point developers to the wrong place. Source. Thanks

To be fair, I doubt that this PR is the root of the problem, but just a change that makes is more obvious. While this link wasn't broken before, the first that I can find broken starts from #35938.

[tisonkun]

This is a breaking change, while it may be acceptable as @mui/base is in alpha, but other @mui components depend on it.

See apache/pulsar-site#566.

[oliviertassinari]

@tisonkun

1. Do you have an example where this change has an impact beyond @mui/base? It wasn't intended to be a breaking change to any stable npm package.
2. What your thoughts on the change. Does the new names improve your DX?