Decrease scope of change

mui · Oct 6, 2023 · a4016f1 · a4016f1
1 parent d8d70fb
commit a4016f1
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 80 deletions.
diff --git a/docs/pages/experiments/material/button-select.tsx b/docs/pages/experiments/material/button-select.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 import * as React from 'react';
 import {
+  CssBaseline,
   FormControlLabel,
   Button as MaterialUIButton,
   Experimental_CssVarsProvider as MaterialUICssVarsProvider,
@@ -19,71 +20,73 @@ export default function App() {
   const [disabled, setDisabled] = React.useState(false);
 
   return (
-    <MaterialUICssVarsProvider theme={materialUIExtendTheme({})}>
-      <Stack gap={12} alignItems="center" sx={{ my: 6 }}>
-        <Stack>
-          <FormControlLabel
-            control={<Switch checked={disabled} onChange={() => setDisabled((prev) => !prev)} />}
-            label="Toggle disabled"
-          />
-        </Stack>
-        <Stack direction="row" justifyContent="space-around" sx={{ width: '80vw' }}>
-          <Stack gap={3}>
-            <Stack alignItems="flex-start">
-              <span>Native button</span>
-              <button type="button" disabled={disabled} {...createHandlers('Native button')}>
-                Button
-              </button>
-            </Stack>
-            <Stack alignItems="flex-start">
-              <span>Native anchor</span>
-              {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-              <a href="#" {...createHandlers('Native anchor')}>
-                Anchor
-              </a>
-            </Stack>
-            <Stack alignItems="flex-start">
-              <span>Native div</span>
-              <div {...createHandlers('Div')}>Button</div>
-            </Stack>
+    <CssBaseline>
+      <MaterialUICssVarsProvider theme={materialUIExtendTheme({})}>
+        <Stack gap={12} alignItems="center" sx={{ my: 6 }}>
+          <Stack>
+            <FormControlLabel
+              control={<Switch checked={disabled} onChange={() => setDisabled((prev) => !prev)} />}
+              label="Toggle disabled"
+            />
           </Stack>
-
-          <Stack gap={3}>
-            <Stack alignItems="flex-start">
-              <span>Material UI button</span>
-              <MaterialUIButton
-                variant="contained"
-                disabled={disabled}
-                {...createHandlers('Material UI button')}
-              >
-                Button
-              </MaterialUIButton>
-            </Stack>
-            <Stack alignItems="flex-start">
-              <span>Material UI button link</span>
-              <MaterialUIButton
-                variant="contained"
-                disabled={disabled}
-                href="#"
-                {...createHandlers('Material UI button link')}
-              >
-                Button
-              </MaterialUIButton>
+          <Stack direction="row" justifyContent="space-around" sx={{ width: '80vw' }}>
+            <Stack gap={3}>
+              <Stack alignItems="flex-start">
+                <span>Native button</span>
+                <button type="button" disabled={disabled} {...createHandlers('Native button')}>
+                  Button
+                </button>
+              </Stack>
+              <Stack alignItems="flex-start">
+                <span>Native anchor</span>
+                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+                <a href="#" {...createHandlers('Native anchor')}>
+                  Anchor
+                </a>
+              </Stack>
+              <Stack alignItems="flex-start">
+                <span>Native div</span>
+                <div {...createHandlers('Div')}>Button</div>
+              </Stack>
             </Stack>
-            <Stack alignItems="flex-start">
-              <span>Material UI button as div</span>
-              <MaterialUIButton
-                variant="contained"
-                component="div"
-                disabled={disabled}
-                {...createHandlers('Material UI button as div')}
-              >
-                Button
-              </MaterialUIButton>
+
+            <Stack gap={3}>
+              <Stack alignItems="flex-start">
+                <span>Material UI button</span>
+                <MaterialUIButton
+                  variant="contained"
+                  disabled={disabled}
+                  {...createHandlers('Material UI button')}
+                >
+                  Button
+                </MaterialUIButton>
+              </Stack>
+              <Stack alignItems="flex-start">
+                <span>Material UI button link</span>
+                <MaterialUIButton
+                  variant="contained"
+                  disabled={disabled}
+                  href="#"
+                  {...createHandlers('Material UI button link')}
+                >
+                  Button
+                </MaterialUIButton>
+              </Stack>
+              <Stack alignItems="flex-start">
+                <span>Material UI button as div</span>
+                <MaterialUIButton
+                  variant="contained"
+                  component="div"
+                  disabled={disabled}
+                  {...createHandlers('Material UI button as div')}
+                >
+                  Button
+                </MaterialUIButton>
+              </Stack>
             </Stack>
           </Stack>
         </Stack>
-      </Stack>
-    </MaterialUICssVarsProvider>
+      </MaterialUICssVarsProvider>
+    </CssBaseline>
   );
 }
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,11 @@ export const ButtonBaseRoot = styled('button', {
   borderRadius: 0,
   padding: 0, // Remove the padding in Firefox
   cursor: 'pointer',
-  '&:active': {
+  // userSelect: 'text' to overcome Firefox's default behavior
+  userSelect: 'text',
+  // only apply userSelect: none when focused so
+  // selection from dragging from outside the element is possible
+  '&:focus': {
     userSelect: 'none',
   },
   verticalAlign: 'middle',
@@ -70,15 +74,13 @@ export const ButtonBaseRoot = styled('button', {
     borderStyle: 'none', // Remove Firefox dotted outline.
   },
   [`&.${buttonBaseClasses.disabled}`]: {
-    ...(!ownerState.isButton && {
-      pointerEvents: 'none', // Disable link interactions
-    }),
+    pointerEvents: 'none', // Disable interactions
     cursor: 'default',
   },
   '@media print': {
     colorAdjust: 'exact',
   },
-})) as React.ElementType<any>;
+}) as React.ElementType<any>;
 
 /**
  * `ButtonBase` contains as few styles as possible.
@@ -160,7 +162,6 @@ 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,10 +126,6 @@ export type ButtonBaseProps<
 };
 
 export interface ButtonBaseOwnerState extends ButtonBaseProps {
-  /**
-   * If `true`, the DOM element is button.
-   */
-  isButton: boolean;
   /**
    * If `true`, the button is active.
    */

diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js
@@ -32,7 +32,7 @@ export const ButtonBaseRoot = styled('button', {
   name: 'MuiButtonBase',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
-})(({ ownerState }) => ({
+})({
   display: 'inline-flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -53,22 +53,24 @@ export const ButtonBaseRoot = styled('button', {
   textDecoration: 'none',
   // So we take precedent over the style of a native <a /> element.
   color: 'inherit',
-  '&:active': {
+  // userSelect: 'text' to overcome Firefox's default behavior
+  userSelect: 'text',
+  // Only apply userSelect: none when focused so
+  // selection from dragging from outside the element is possible
+  '&:focus': {
     userSelect: 'none',
   },
   '&::-moz-focus-inner': {
     borderStyle: 'none', // Remove Firefox dotted outline.
   },
   [`&.${buttonBaseClasses.disabled}`]: {
+    pointerEvents: 'none', // Disable interactions
     cursor: 'default',
-    ...(!ownerState.isButton && {
-      pointerEvents: 'none', // Disable link interactions
-    }),
   },
   '@media print': {
     colorAdjust: 'exact',
   },
-}));
+});
 
 /**
  * `ButtonBase` contains as few styles as possible.
@@ -332,7 +334,6 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) {
     ...props,
     centerRipple,
     component,
-    isButton: ComponentProp === 'button',
     disabled,
     disableRipple,
     disableTouchRipple,

diff --git a/packages/mui-material/src/Link/Link.js b/packages/mui-material/src/Link/Link.js
@@ -60,7 +60,11 @@ const LinkRoot = styled(Typography, {
         textDecorationColor: 'inherit',
       },
     }),
-    '&:active': {
+    // userSelect: 'text' to overcome Firefox's default behavior
+    userSelect: 'text',
+    // Only apply userSelect: none when focused so
+    // selection from dragging from outside the element is possible
+    '&:focus': {
       userSelect: 'none',
     },
     // Same reset as ButtonBase.root