Port change to material-next ButtonBase

mui · Sep 13, 2023 · d8d70fb · d8d70fb
1 parent 2252e17
commit d8d70fb
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx b/packages/mui-material-next/src/ButtonBase/ButtonBase.tsx
@@ -42,7 +42,7 @@ export const ButtonBaseRoot = styled('button', {
   slot: 'Root',
   shouldForwardProp: (prop) => rootShouldForwardProp(prop) && prop !== 'touchRippleRef',
   overridesResolver: (props, styles) => styles.root,
-})({
+})<{ ownerState: ButtonBaseOwnerState }>(({ ownerState }) => ({
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -57,7 +57,9 @@ export const ButtonBaseRoot = styled('button', {
   borderRadius: 0,
   padding: 0, // Remove the padding in Firefox
   cursor: 'pointer',
-  userSelect: 'none',
+  '&:active': {
+    userSelect: 'none',
+  },
   verticalAlign: 'middle',
   MozAppearance: 'none', // Reset
   WebkitAppearance: 'none', // Reset
@@ -68,13 +70,15 @@ export const ButtonBaseRoot = styled('button', {
     borderStyle: 'none', // Remove Firefox dotted outline.
   },
   [`&.${buttonBaseClasses.disabled}`]: {
-    pointerEvents: 'none', // Disable link interactions
+    ...(!ownerState.isButton && {
+      pointerEvents: 'none', // Disable link interactions
+    }),
     cursor: 'default',
   },
   '@media print': {
     colorAdjust: 'exact',
   },
-}) as React.ElementType<any>;
+})) as React.ElementType<any>;
 
 /**
  * `ButtonBase` contains as few styles as possible.
@@ -156,6 +160,7 @@ const ButtonBase = React.forwardRef(function ButtonBase<
     disableTouchRipple,
     focusVisible,
     active,
+    isButton: ComponentProp === 'button',
   };
 
   const classes = useUtilityClasses(ownerState);

diff --git a/packages/mui-material-next/src/ButtonBase/ButtonBase.types.ts b/packages/mui-material-next/src/ButtonBase/ButtonBase.types.ts
@@ -126,6 +126,10 @@ export type ButtonBaseProps<
 };
 
 export interface ButtonBaseOwnerState extends ButtonBaseProps {
+  /**
+   * If `true`, the DOM element is button.
+   */
+  isButton: boolean;
   /**
    * If `true`, the button is active.
    */