Skip to content

Commit

Permalink
textarea demos and one missed button demo renamed
Browse files Browse the repository at this point in the history
  • Loading branch information
christophermorin committed Sep 22, 2023
1 parent eeb9d53 commit 0455396
Show file tree
Hide file tree
Showing 18 changed files with 72 additions and 88 deletions.
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 UnstyledButtonsSpan() {
return (
<Stack spacing={2} direction="row">
<CustomButton slots={{ root: 'span' }}>Button</CustomButton>
<CustomButton slots={{ root: 'span' }} disabled>
<Button slots={{ root: 'span' }}>Button</Button>
<Button slots={{ root: 'span' }} disabled>
Disabled
</CustomButton>
</Button>
</Stack>
);
}
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
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 UnstyledButtonsSpan() {
return (
<Stack spacing={2} direction="row">
<CustomButton slots={{ root: 'span' }}>Button</CustomButton>
<CustomButton slots={{ root: 'span' }} disabled>
<Button slots={{ root: 'span' }}>Button</Button>
<Button slots={{ root: 'span' }} disabled>
Disabled
</CustomButton>
</Button>
</Stack>
);
}
Expand All @@ -21,7 +25,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;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<CustomButton slots={{ root: 'span' }}>Button</CustomButton>
<CustomButton slots={{ root: 'span' }} disabled>
<Button slots={{ root: 'span' }}>Button</Button>
<Button slots={{ root: 'span' }} disabled>
Disabled
</CustomButton>
</Button>
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
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 slots={{ root: 'span' }}>
<Button className="hover:bg-violet-600 active:bg-violet-700">Button</Button>
<Button disabled slots={{ root: 'span' }}>
Disabled
</CustomButton>
</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',
Expand All @@ -31,6 +29,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,33 +1,29 @@
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 UnstyledButtonsSimple() {
return (
<Stack spacing={2} direction="row">
<CustomButton className="hover:bg-violet-600 active:bg-violet-700">
Button
</CustomButton>
<CustomButton disabled slots={{ root: 'span' }}>
<Button className="hover:bg-violet-600 active:bg-violet-700">Button</Button>
<Button disabled slots={{ root: 'span' }}>
Disabled
</CustomButton>
</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 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 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,6 +1,4 @@
<CustomButton className="hover:bg-violet-600 active:bg-violet-700">
Button
</CustomButton>
<CustomButton disabled slots={{ root: 'span' }}>
<Button className="hover:bg-violet-600 active:bg-violet-700">Button</Button>
<Button disabled slots={{ root: 'span' }}>
Disabled
</CustomButton>
</Button>
6 changes: 3 additions & 3 deletions docs/data/base/components/textarea-autosize/EmptyTextarea.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { TextareaAutosize } from '@mui/base/TextareaAutosize';
import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
import { styled } from '@mui/system';

export default function EmptyTextarea() {
Expand All @@ -25,7 +25,7 @@ export default function EmptyTextarea() {
900: '#24292f',
};

const StyledTextarea = styled(TextareaAutosize)(
const Textarea = styled(BaseTextareaAutosize)(
({ theme }) => `
width: 320px;
font-family: IBM Plex Sans, sans-serif;
Expand Down Expand Up @@ -55,5 +55,5 @@ export default function EmptyTextarea() {
`,
);

return <StyledTextarea aria-label="empty textarea" placeholder="Empty" />;
return <Textarea aria-label="empty textarea" placeholder="Empty" />;
}
6 changes: 3 additions & 3 deletions docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { TextareaAutosize } from '@mui/base/TextareaAutosize';
import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
import { styled } from '@mui/system';

export default function EmptyTextarea() {
Expand All @@ -25,7 +25,7 @@ export default function EmptyTextarea() {
900: '#24292f',
};

const StyledTextarea = styled(TextareaAutosize)(
const Textarea = styled(BaseTextareaAutosize)(
({ theme }) => `
width: 320px;
font-family: IBM Plex Sans, sans-serif;
Expand Down Expand Up @@ -55,5 +55,5 @@ export default function EmptyTextarea() {
`,
);

return <StyledTextarea aria-label="empty textarea" placeholder="Empty" />;
return <Textarea aria-label="empty textarea" placeholder="Empty" />;
}
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<StyledTextarea aria-label="empty textarea" placeholder="Empty" />
<Textarea aria-label="empty textarea" placeholder="Empty" />
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { TextareaAutosize } from '@mui/base/TextareaAutosize';
import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
import { styled } from '@mui/system';

export default function MaxHeightTextarea() {
Expand All @@ -25,7 +25,7 @@ export default function MaxHeightTextarea() {
900: '#24292f',
};

const StyledTextarea = styled(TextareaAutosize)(
const Textarea = styled(BaseTextareaAutosize)(
({ theme }) => `
width: 320px;
font-family: IBM Plex Sans, sans-serif;
Expand Down Expand Up @@ -56,7 +56,7 @@ export default function MaxHeightTextarea() {
);

return (
<StyledTextarea
<Textarea
maxRows={4}
aria-label="maximum height"
placeholder="Maximum 4 rows"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { TextareaAutosize } from '@mui/base/TextareaAutosize';
import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
import { styled } from '@mui/system';

export default function MaxHeightTextarea() {
Expand All @@ -25,7 +25,7 @@ export default function MaxHeightTextarea() {
900: '#24292f',
};

const StyledTextarea = styled(TextareaAutosize)(
const Textarea = styled(BaseTextareaAutosize)(
({ theme }) => `
width: 320px;
font-family: IBM Plex Sans, sans-serif;
Expand Down Expand Up @@ -56,7 +56,7 @@ export default function MaxHeightTextarea() {
);

return (
<StyledTextarea
<Textarea
maxRows={4}
aria-label="maximum height"
placeholder="Maximum 4 rows"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<StyledTextarea
<Textarea
maxRows={4}
aria-label="maximum height"
placeholder="Maximum 4 rows"
Expand Down
10 changes: 3 additions & 7 deletions docs/data/base/components/textarea-autosize/MinHeightTextarea.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { TextareaAutosize } from '@mui/base/TextareaAutosize';
import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
import { styled } from '@mui/system';

export default function MinHeightTextarea() {
Expand All @@ -25,7 +25,7 @@ export default function MinHeightTextarea() {
900: '#24292f',
};

const StyledTextarea = styled(TextareaAutosize)(
const Textarea = styled(BaseTextareaAutosize)(
({ theme }) => `
width: 320px;
font-family: IBM Plex Sans, sans-serif;
Expand Down Expand Up @@ -56,10 +56,6 @@ export default function MinHeightTextarea() {
);

return (
<StyledTextarea
aria-label="minimum height"
minRows={3}
placeholder="Minimum 3 rows"
/>
<Textarea aria-label="minimum height" minRows={3} placeholder="Minimum 3 rows" />
);
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { TextareaAutosize } from '@mui/base/TextareaAutosize';
import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
import { styled } from '@mui/system';

export default function MinHeightTextarea() {
Expand All @@ -25,7 +25,7 @@ export default function MinHeightTextarea() {
900: '#24292f',
};

const StyledTextarea = styled(TextareaAutosize)(
const Textarea = styled(BaseTextareaAutosize)(
({ theme }) => `
width: 320px;
font-family: IBM Plex Sans, sans-serif;
Expand Down Expand Up @@ -56,10 +56,6 @@ export default function MinHeightTextarea() {
);

return (
<StyledTextarea
aria-label="minimum height"
minRows={3}
placeholder="Minimum 3 rows"
/>
<Textarea aria-label="minimum height" minRows={3} placeholder="Minimum 3 rows" />
);
}
Original file line number Diff line number Diff line change
@@ -1,5 +1 @@
<StyledTextarea
aria-label="minimum height"
minRows={3}
placeholder="Minimum 3 rows"
/>
<Textarea aria-label="minimum height" minRows={3} placeholder="Minimum 3 rows" />
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { TextareaAutosize } from '@mui/base/TextareaAutosize';
import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
import { styled } from '@mui/system';

export default function EmptyTextarea() {
Expand All @@ -25,7 +25,7 @@ export default function EmptyTextarea() {
900: '#24292f',
};

const StyledTextarea = styled(TextareaAutosize)(
const Textarea = styled(BaseTextareaAutosize)(
({ theme }) => `
width: 320px;
font-family: IBM Plex Sans, sans-serif;
Expand Down Expand Up @@ -55,5 +55,5 @@ export default function EmptyTextarea() {
`,
);

return <StyledTextarea aria-label="empty textarea" placeholder="Empty" />;
return <Textarea aria-label="empty textarea" placeholder="Empty" />;
}
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { TextareaAutosize } from '@mui/base/TextareaAutosize';
import { TextareaAutosize as BaseTextareaAutosize } from '@mui/base/TextareaAutosize';
import { styled } from '@mui/system';

export default function EmptyTextarea() {
Expand All @@ -25,7 +25,7 @@ export default function EmptyTextarea() {
900: '#24292f',
};

const StyledTextarea = styled(TextareaAutosize)(
const Textarea = styled(BaseTextareaAutosize)(
({ theme }) => `
width: 320px;
font-family: IBM Plex Sans, sans-serif;
Expand Down Expand Up @@ -55,5 +55,5 @@ export default function EmptyTextarea() {
`,
);

return <StyledTextarea aria-label="empty textarea" placeholder="Empty" />;
return <Textarea aria-label="empty textarea" placeholder="Empty" />;
}
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<StyledTextarea aria-label="empty textarea" placeholder="Empty" />
<Textarea aria-label="empty textarea" placeholder="Empty" />

0 comments on commit 0455396

Please sign in to comment.