[ButtonBase][material-next] Add ButtonBase component

packages/mui-material-next/migration.md

@@ -92,6 +92,46 @@ The following example replaces the `MuiBadge-anchorOriginBottomLeftCircular` cla
 + .MuiBadge-anchorOriginBottomLeft.MuiBadge-overlapCircular
 ```
 
+## Button
+
+See the [ButtonBase](https://github.com/mui/material-ui/blob/master/packages/mui-material-next/migration.md#buttonbase) section for more breaking changes.
+
+## ButtonBase
+
+The breaking changes in this section apply to the following components:
+
+- `Button`
+- `ButtonBase`
+<!-- Add other ButtonBase-based components when those are migrated -->
+
+So the examples below are interchangeable for these components.
+
+### Removed focusRipple
+
+The `focusRipple` prop was removed as ripples are absent in Material You's focused states.
+
+### Prevent default on `key-up` and `key-down` events
+
+If you need to prevent default on a `key-up` and/or `key-down` event, then besides calling `preventDefault` you'll need to set `event.defaultMuiPrevented` to `true` as follows:
+
+```diff
+ const onKeyDown = (event) => {
+   event.preventDefault();
++  event.defaultMuiPrevented = true;
+ };
+
+ const onKeyUp = (event) => {
+   event.preventDefault();
++  event.defaultMuiPrevented = true;
+ };
+
+ <Button onKeyDown={onKeyDown} onKeyUp={onKeyUp}>
+   Button
+ </Button>
+```
+
+This is so the default is also prevented when the `ButtonBase` root is not a native button, for example, when the root element used is a `span`.
+
 ## Slider
 
 ### Thumb and Value Label slots must accept refs

packages/mui-material-next/src/Button/Button.test.js

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { spy, stub } from 'sinon';
+import { spy } from 'sinon';
 import { describeConformance, createRenderer, fireEvent, act } from 'test/utils';
 import { camelCase } from 'lodash';
 import Button, { buttonClasses as classes } from '@mui/material-next/Button';
-import * as useTouchRipple from '@mui/material-next/Button/useTouchRipple';
 import { CssVarsProvider, extendTheme } from '@mui/material-next/styles';
 
 describe('<Button />', () => {
@@ -174,13 +173,32 @@ describe('<Button />', () => {
     expect(container.querySelector('button')).to.have.class(disabledClassName);
   });
 
+  it('should render focused class', () => {
+    const focusedClassName = 'testFocusedClassName';
+    const { container } = render(<Button classes={{ focusVisible: focusedClassName }} />);
+
+    const button = container.querySelector('button');
+    expect(button).not.to.equal(null);
+    expect(button).not.to.have.class(focusedClassName);
+
+    act(() => {
+      button.focus();
+    });
+
+    expect(button).to.have.class(focusedClassName);
+  });
+
   it('should render active class', () => {
-    const { container } = render(<Button />);
+    const activeClassName = 'testActiveClassName';
+    const { container } = render(<Button classes={{ active: activeClassName }} />);
 
     const button = container.querySelector('button');
+    expect(button).not.to.equal(null);
+    expect(button).not.to.have.class(activeClassName);
+
     fireEvent.mouseDown(button);
 
-    expect(button).to.have.class(classes.active);
+    expect(button).to.have.class(activeClassName);
   });
 
   describe('Event handlers', () => {
@@ -217,23 +235,4 @@ describe('<Button />', () => {
       });
     });
   });
-
-  describe('Ripple', () => {
-    it('should call ripple mouse down handler', () => {
-      const mouseDownSpy = spy();
-      stub(useTouchRipple, 'default').returns({
-        enableTouchRipple: true,
-        getRippleHandlers: () => ({
-          onMouseDown: mouseDownSpy,
-        }),
-      });
-      const { getByRole } = render(<Button>Hello World</Button>);
-
-      expect(mouseDownSpy.callCount).to.equal(0);
-
-      fireEvent.mouseDown(getByRole('button'));
-
-      expect(mouseDownSpy.callCount).to.equal(1);
-    });
-  });
 });