Skip to content

Commit

Permalink
button demos renamed
Browse files Browse the repository at this point in the history
  • Loading branch information
christophermorin committed Sep 22, 2023
1 parent b3f41d1 commit e9552ba
Showing 24 changed files with 128 additions and 130 deletions.
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import * as React from 'react';
import { Button, buttonClasses } from '@mui/base/Button';
import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
import { styled } from '@mui/system';
import Stack from '@mui/material/Stack';

export default function UnstyledButtonsIntroduction() {
return (
<Stack spacing={2} direction="row">
<CustomButton>Button</CustomButton>
<CustomButton disabled>Disabled</CustomButton>
<Button>Button</Button>
<Button disabled>Disabled</Button>
</Stack>
);
}
@@ -24,7 +24,7 @@ const grey = {
900: '#24292f',
};

const CustomButton = styled(Button)(
const Button = styled(BaseButton)(
({ theme }) => `
font-family: IBM Plex Sans, sans-serif;
font-weight: 600;
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import * as React from 'react';
import { Button, buttonClasses } from '@mui/base/Button';
import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
import { styled } from '@mui/system';
import Stack from '@mui/material/Stack';

export default function UnstyledButtonsIntroduction() {
return (
<Stack spacing={2} direction="row">
<CustomButton>Button</CustomButton>
<CustomButton disabled>Disabled</CustomButton>
<Button>Button</Button>
<Button disabled>Disabled</Button>
</Stack>
);
}
@@ -24,7 +24,7 @@ const grey = {
900: '#24292f',
};

const CustomButton = styled(Button)(
const Button = styled(BaseButton)(
({ theme }) => `
font-family: IBM Plex Sans, sans-serif;
font-weight: 600;
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
<CustomButton>Button</CustomButton>
<CustomButton disabled>Disabled</CustomButton>
<Button>Button</Button>
<Button disabled>Disabled</Button>
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { Button } from '@mui/base/Button';
import { Button as BaseButton } from '@mui/base/Button';
import Stack from '@mui/material/Stack';
import clsx from 'clsx';

export default function UnstyledButtonsIntroduction() {
return (
<Stack spacing={2} direction="row">
<CustomButton>Button</CustomButton>
<CustomButton disabled>Disabled</CustomButton>
<Button>Button</Button>
<Button disabled>Disabled</Button>
</Stack>
);
}

const CustomButton = React.forwardRef((props, ref) => {
const Button = React.forwardRef((props, ref) => {
const { className, ...other } = props;
return (
<Button
<BaseButton
ref={ref}
className={clsx(
'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
@@ -27,6 +27,6 @@ const CustomButton = React.forwardRef((props, ref) => {
);
});

CustomButton.propTypes = {
Button.propTypes = {
className: PropTypes.string,
};
Original file line number Diff line number Diff line change
@@ -1,29 +1,27 @@
import * as React from 'react';
import { Button, ButtonProps } from '@mui/base/Button';
import { Button as BaseButton, ButtonProps } from '@mui/base/Button';
import Stack from '@mui/material/Stack';
import clsx from 'clsx';

export default function UnstyledButtonsIntroduction() {
return (
<Stack spacing={2} direction="row">
<CustomButton>Button</CustomButton>
<CustomButton disabled>Disabled</CustomButton>
<Button>Button</Button>
<Button disabled>Disabled</Button>
</Stack>
);
}

const CustomButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
(props, ref) => {
const { className, ...other } = props;
return (
<Button
ref={ref}
className={clsx(
'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
className,
)}
{...other}
/>
);
},
);
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
const { className, ...other } = props;
return (
<BaseButton
ref={ref}
className={clsx(
'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 hover:bg-violet-600 active:bg-violet-700 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
className,
)}
{...other}
/>
);
});
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
<CustomButton>Button</CustomButton>
<CustomButton disabled>Disabled</CustomButton>
<Button>Button</Button>
<Button disabled>Disabled</Button>
10 changes: 5 additions & 5 deletions docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import * as React from 'react';
import { Button, buttonClasses } from '@mui/base/Button';
import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
import { styled } from '@mui/system';
import Stack from '@mui/material/Stack';

export default function UnstyledButtonsDisabledFocus() {
return (
<Stack spacing={2}>
<CustomButton disabled>focusableWhenDisabled = false</CustomButton>
<CustomButton disabled focusableWhenDisabled>
<Button disabled>focusableWhenDisabled = false</Button>
<Button disabled focusableWhenDisabled>
focusableWhenDisabled = true
</CustomButton>
</Button>
</Stack>
);
}
@@ -20,7 +20,7 @@ const blue = {
700: '#0059B2',
};

const CustomButton = styled(Button)`
const Button = styled(BaseButton)`
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.875rem;
line-height: 1.5;
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import * as React from 'react';
import { Button, buttonClasses } from '@mui/base/Button';
import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
import { styled } from '@mui/system';
import Stack from '@mui/material/Stack';

export default function UnstyledButtonsDisabledFocus() {
return (
<Stack spacing={2}>
<CustomButton disabled>focusableWhenDisabled = false</CustomButton>
<CustomButton disabled focusableWhenDisabled>
<Button disabled>focusableWhenDisabled = false</Button>
<Button disabled focusableWhenDisabled>
focusableWhenDisabled = true
</CustomButton>
</Button>
</Stack>
);
}
@@ -20,7 +20,7 @@ const blue = {
700: '#0059B2',
};

const CustomButton = styled(Button)`
const Button = styled(BaseButton)`
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.875rem;
line-height: 1.5;
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<CustomButton disabled>focusableWhenDisabled = false</CustomButton>
<CustomButton disabled focusableWhenDisabled>
<Button disabled>focusableWhenDisabled = false</Button>
<Button disabled focusableWhenDisabled>
focusableWhenDisabled = true
</CustomButton>
</Button>
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
import * as React from 'react';
import { Button, buttonClasses } from '@mui/base/Button';
import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
import { styled } from '@mui/system';
import Stack from '@mui/material/Stack';

export default function UnstyledButtonsDisabledFocusCustom() {
return (
<Stack spacing={2}>
<CustomButton slots={{ root: 'span' }} disabled>
<Button slots={{ root: 'span' }} disabled>
focusableWhenDisabled = false
</CustomButton>
<CustomButton slots={{ root: 'span' }} disabled focusableWhenDisabled>
</Button>
<Button slots={{ root: 'span' }} disabled focusableWhenDisabled>
focusableWhenDisabled = true
</CustomButton>
</Button>
</Stack>
);
}
@@ -22,7 +22,7 @@ const blue = {
700: '#0059B2',
};

const CustomButton = styled(Button)`
const Button = styled(BaseButton)`
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.875rem;
line-height: 1.5;
Original file line number Diff line number Diff line change
@@ -1,18 +1,22 @@
import * as React from 'react';
import { Button, buttonClasses, ButtonTypeMap } from '@mui/base/Button';
import {
Button as BaseButton,
buttonClasses,
ButtonTypeMap,
} from '@mui/base/Button';
import { styled } from '@mui/system';
import Stack from '@mui/material/Stack';
import { PolymorphicComponent } from '@mui/base/utils';

export default function UnstyledButtonsDisabledFocusCustom() {
return (
<Stack spacing={2}>
<CustomButton slots={{ root: 'span' }} disabled>
<Button slots={{ root: 'span' }} disabled>
focusableWhenDisabled = false
</CustomButton>
<CustomButton slots={{ root: 'span' }} disabled focusableWhenDisabled>
</Button>
<Button slots={{ root: 'span' }} disabled focusableWhenDisabled>
focusableWhenDisabled = true
</CustomButton>
</Button>
</Stack>
);
}
@@ -23,7 +27,7 @@ const blue = {
700: '#0059B2',
};

const CustomButton = styled(Button)`
const Button = styled(BaseButton)`
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.875rem;
line-height: 1.5;
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<CustomButton slots={{ root: 'span' }} disabled>
<Button slots={{ root: 'span' }} disabled>
focusableWhenDisabled = false
</CustomButton>
<CustomButton slots={{ root: 'span' }} disabled focusableWhenDisabled>
</Button>
<Button slots={{ root: 'span' }} disabled focusableWhenDisabled>
focusableWhenDisabled = true
</CustomButton>
</Button>
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import * as React from 'react';
import { Button, buttonClasses } from '@mui/base/Button';
import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
import { styled } from '@mui/system';
import Stack from '@mui/material/Stack';

export default function UnstyledButtonsSimple() {
return (
<Stack spacing={2} direction="row">
<CustomButton>Button</CustomButton>
<CustomButton disabled>Disabled</CustomButton>
<Button>Button</Button>
<Button disabled>Disabled</Button>
</Stack>
);
}
@@ -18,7 +18,7 @@ const blue = {
700: '#0059B2',
};

const CustomButton = styled(Button)`
const Button = styled(BaseButton)`
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.875rem;
line-height: 1.5;
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import * as React from 'react';
import { Button, buttonClasses } from '@mui/base/Button';
import { Button as BaseButton, buttonClasses } from '@mui/base/Button';
import { styled } from '@mui/system';
import Stack from '@mui/material/Stack';

export default function UnstyledButtonsSimple() {
return (
<Stack spacing={2} direction="row">
<CustomButton>Button</CustomButton>
<CustomButton disabled>Disabled</CustomButton>
<Button>Button</Button>
<Button disabled>Disabled</Button>
</Stack>
);
}
@@ -18,7 +18,7 @@ const blue = {
700: '#0059B2',
};

const CustomButton = styled(Button)`
const Button = styled(BaseButton)`
font-family: 'IBM Plex Sans', sans-serif;
font-size: 0.875rem;
line-height: 1.5;
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
<CustomButton>Button</CustomButton>
<CustomButton disabled>Disabled</CustomButton>
<Button>Button</Button>
<Button disabled>Disabled</Button>
Original file line number Diff line number Diff line change
@@ -1,24 +1,22 @@
import * as React from 'react';
import PropTypes from 'prop-types';
import { Button } from '@mui/base/Button';
import { Button as BaseButton } from '@mui/base/Button';
import Stack from '@mui/material/Stack';
import clsx from 'clsx';

export default function UnstyledButtonsSimple() {
return (
<Stack spacing={2} direction="row">
<CustomButton className="hover:bg-violet-600 active:bg-violet-700">
Button
</CustomButton>
<CustomButton disabled>Disabled</CustomButton>
<Button className="hover:bg-violet-600 active:bg-violet-700">Button</Button>
<Button disabled>Disabled</Button>
</Stack>
);
}

const CustomButton = React.forwardRef((props, ref) => {
const Button = React.forwardRef((props, ref) => {
const { className, ...other } = props;
return (
<Button
<BaseButton
ref={ref}
className={clsx(
'cursor-pointer disabled:cursor-not-allowed text-sm font-sans bg-violet-500 text-white rounded-lg font-semibold px-4 py-2 border-none disabled:opacity-50',
@@ -29,6 +27,6 @@ const CustomButton = React.forwardRef((props, ref) => {
);
});

CustomButton.propTypes = {
Button.propTypes = {
className: PropTypes.string,
};
Loading

0 comments on commit e9552ba

Please sign in to comment.