Skip to content

Commit

Permalink
Experiment 2 (disabled non-button not working)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DiegoAndai
DiegoAndai committed Aug 23, 2023
1 parent f042c2f commit 763a4b5
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 88 deletions.
120 changes: 66 additions & 54 deletions docs/pages/experiments/material/button-select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ import {
extendTheme as joyExtendTheme,
} from '@mui/joy';
import {
FormControlLabel,
Button as MaterialUIButton,
Experimental_CssVarsProvider as MaterialUICssVarsProvider,
Switch,
experimental_extendTheme as materialUIExtendTheme,
} from '@mui/material';
import { Stack } from '@mui/system';
Expand All @@ -21,34 +23,38 @@ function createHandlers(name: string) {
}

export default function App() {
const [disabled, setDisabled] = React.useState(false);

return (
<Stack direction="row" justifyContent="space-around">
<Stack gap={3}>
<Stack alignItems="flex-start">
<span>Enabled native button</span>
<button type="button" {...createHandlers('Enabled native button')}>
Button
</button>
</Stack>
<Stack alignItems="flex-start">
<span>Disabled native button</span>
<button type="button" disabled {...createHandlers('Disabled native button')}>
Button
</button>
<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 alignItems="flex-start">
<span>Native anchor</span>
<a href="#" {...createHandlers('Enabled native anchor')}>
Anchor
</a>
</Stack>
<Stack alignItems="flex-start">
<span>Native div</span>
<div>Button</div>
</Stack>
</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>
<a href="#" {...createHandlers('Native anchor')}>
Anchor
</a>
</Stack>
<Stack alignItems="flex-start">
<span>Native div</span>
<div {...createHandlers('Div')}>Button</div>
</Stack>
</Stack>

{/* <Stack gap={3}>
{/* <Stack gap={3}>
<Stack alignItems="flex-start">
<span>Enabled Base UI button</span>
<BaseUIButton {...createHandlers('Enabled Base UI')}>Button</BaseUIButton>
Expand Down Expand Up @@ -104,36 +110,42 @@ export default function App() {
</JoyCssVarsProvider>
</Stack> */}

<Stack gap={3}>
<MaterialUICssVarsProvider theme={materialUIExtendTheme({})}>
<Stack alignItems="flex-start">
<span>Enabled Material UI button</span>
<MaterialUIButton {...createHandlers('Enabled Material UI')}>Button</MaterialUIButton>
</Stack>
<Stack alignItems="flex-start">
<span>Disabled Material UI button</span>
<MaterialUIButton disabled {...createHandlers('Disabled Material UI')}>
Button
</MaterialUIButton>
</Stack>
<Stack alignItems="flex-start">
<span>Enabled Material UI button as div</span>
<MaterialUIButton component="div" {...createHandlers('Enabled Material UI as div')}>
Button
</MaterialUIButton>
</Stack>
<Stack alignItems="flex-start">
<span>Disabled Material UI button as div</span>
<MaterialUIButton
component="div"
disabled
{...createHandlers('Disabled Material UI 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>
</MaterialUICssVarsProvider>
</Stack>
</Stack>
</Stack>
</MaterialUICssVarsProvider>
);
}
73 changes: 39 additions & 34 deletions packages/mui-material/src/ButtonBase/ButtonBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,42 +32,46 @@ export const ButtonBaseRoot = styled('button', {
name: 'MuiButtonBase',
slot: 'Root',
overridesResolver: (props, styles) => styles.root,
})({
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
boxSizing: 'border-box',
WebkitTapHighlightColor: 'transparent',
backgroundColor: 'transparent', // Reset default value
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0,
border: 0,
margin: 0, // Remove the margin in Safari
borderRadius: 0,
padding: 0, // Remove the padding in Firefox
cursor: 'pointer',
verticalAlign: 'middle',
MozAppearance: 'none', // Reset
WebkitAppearance: 'none', // Reset
textDecoration: 'none',
// So we take precedent over the style of a native <a /> element.
color: 'inherit',
'&:active': {
userSelect: 'none',
},
'&::-moz-focus-inner': {
borderStyle: 'none', // Remove Firefox dotted outline.
},
[`&.${buttonBaseClasses.disabled}`]: {
cursor: 'default',
})(({ ownerState }) => {
const { isButton } = ownerState;

return {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
position: 'relative',
boxSizing: 'border-box',
WebkitTapHighlightColor: 'transparent',
backgroundColor: 'transparent', // Reset default value
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0,
border: 0,
margin: 0, // Remove the margin in Safari
borderRadius: 0,
padding: 0, // Remove the padding in Firefox
cursor: 'pointer',
verticalAlign: 'middle',
MozAppearance: 'none', // Reset
WebkitAppearance: 'none', // Reset
textDecoration: 'none',
// So we take precedent over the style of a native <a /> element.
color: 'inherit',
'&:active': {
pointerEvents: 'none', // Disable link interactions
userSelect: 'none',
},
},
'@media print': {
colorAdjust: 'exact',
},
'&::-moz-focus-inner': {
borderStyle: 'none', // Remove Firefox dotted outline.
},
[`&.${buttonBaseClasses.disabled}`]: {
cursor: 'default',
...(!isButton && {
pointerEvents: 'none', // Disable link interactions
}),
},
'@media print': {
colorAdjust: 'exact',
},
};
});

/**
Expand Down Expand Up @@ -332,6 +336,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) {
...props,
centerRipple,
component,
isButton: ComponentProp === 'button',
disabled,
disableRipple,
disableTouchRipple,
Expand Down

0 comments on commit 763a4b5

Please sign in to comment.