[ButtonBase][material-next] Add ButtonBase component

[DiegoAndai]

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

Summary

This PR adds the ButtonBase component to material-next and refactors the existing Button accordingly.

Why bring back ButtonBase

Base UI’s useButton extracts most of the logic for which ButtonBase was used in v5, but some things are material-specific or style-specific that it doesn't:

• Adding the ripple (reference)
• Adding the focusVisible imperative handle (reference)
• Resetting the button's element default styles (reference)
• Changing to the anchor element when href (or to) is provided (reference)

These four things will be shared by the “button-like” components: Button, FAB, IconButton, Tabs, and clickable Chip. This is why I propose bringing back the ButtonBase component.

Keeping ButtonBase has two additional beneficial effects:

• It will reduce breaking changes and help keep the API stable from v5 to v6. This is important as v6 is expected to carry significant changes like using Base UI, Zero-runtime CSS, and Material You styles.
• It will simplify migrating the “button-like” components, as the Base UI adoption is encapsulated in ButtonBase.

It’s essential to keep in mind that it shouldn’t be overused. For example, if a component only needs the ripple, it should use the ripple hooks and components directly, not ButtonBase. This way, we will keep ButtonBase's scope controlled.

Changes

• Add the ButtonBase component, based on Base UI’s useButton:
  • Types are the same as ButtonBase v5
  • Tests have a couple of changes:
    • Removed focusRipple and ripple’s pulsate tests as Material You no longer used a ripple for the focused state (benchmark).
    • In v5, a disabled ButtonBase would have a tabIndex = -1 by default. This is not maintained in the useButton hook (test change)
    • For preventing onKeyUp default, muiPreventDefault is used (change here)
• Refactor the Button component to use ButtonBase
• Move ripple code from the Button folder to the ButtonBase folder.

Important note for reviewers

The first commit copies files from v5, so if you want to review actual changes, exclude that commit when looking at the files. For some reason, the only file this isn't working for is ButtonBase.tsx; sorry for that.

Questions for reviewers

• The touchRippleRef prop was deleted when the Button was added to material-next. When adding ButtonBase, I kept it. Do you think we should remove it?
• Should the change regarding tabIndex = -1 not added when the button is disabled be a breaking change? I don’t think it is, but maybe I’m missing something.
• Is the muiPreventDefault breaking change explanation correct?

[mui-bot]

Netlify deploy preview

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

@mui/material-next: parsed: +0.24% , gzip: +0.15%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against ed2632d

[mnajdova]

Looks good, left few comments for consideration before merging

[mnajdova]

❤️

[mnajdova]

Should the change regarding tabIndex = -1 not added when the button is disabled be a breaking change? I don’t think it is, but maybe I’m missing something.

Considering we are now using Base UI, we have support for whether the button should be focusable when disabled which should allow developers to setup the button anyway that works for them.