Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Joy][docs] Add documentation for Input component #35482

Merged
merged 22 commits into from
Dec 28, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs/data/joy/components/input/BasicInput.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import * as React from 'react';
import Input from '@mui/joy/Input';

export default function BasicInput() {
return <Input placeholder="Type in here…" />;
}
6 changes: 6 additions & 0 deletions docs/data/joy/components/input/BasicInput.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import * as React from 'react';
import Input from '@mui/joy/Input';

export default function BasicInput() {
return <Input placeholder="Type in here…" />;
}
1 change: 1 addition & 0 deletions docs/data/joy/components/input/BasicInput.tsx.preview
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<Input placeholder="Type in here…" />
22 changes: 22 additions & 0 deletions docs/data/joy/components/input/InputColors.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import * as React from 'react';
import Box from '@mui/joy/Box';
import Input from '@mui/joy/Input';

export default function InputColors() {
return (
<Box
sx={{
py: 2,
display: 'grid',
gap: 2,
alignItems: 'center',
flexWrap: 'wrap',
}}
>
<Input placeholder="Type in here…" variant="outlined" color="primary" />
<Input placeholder="Type in here…" variant="outlined" color="neutral" />
<Input placeholder="Type in here…" variant="outlined" color="danger" />
<Input placeholder="Type in here…" variant="outlined" color="warning" />
</Box>
);
}
22 changes: 22 additions & 0 deletions docs/data/joy/components/input/InputColors.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import * as React from 'react';
import Box from '@mui/joy/Box';
import Input from '@mui/joy/Input';

export default function InputColors() {
return (
<Box
sx={{
py: 2,
display: 'grid',
gap: 2,
alignItems: 'center',
flexWrap: 'wrap',
}}
>
<Input placeholder="Type in here…" variant="outlined" color="primary" />
<Input placeholder="Type in here…" variant="outlined" color="neutral" />
<Input placeholder="Type in here…" variant="outlined" color="danger" />
<Input placeholder="Type in here…" variant="outlined" color="warning" />
</Box>
);
}
4 changes: 4 additions & 0 deletions docs/data/joy/components/input/InputColors.tsx.preview
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<Input placeholder="Type in here…" variant="outlined" color="primary" />
<Input placeholder="Type in here…" variant="outlined" color="neutral" />
<Input placeholder="Type in here…" variant="outlined" color="danger" />
<Input placeholder="Type in here…" variant="outlined" color="warning" />
31 changes: 31 additions & 0 deletions docs/data/joy/components/input/InputDecorators.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import * as React from 'react';
import Divider from '@mui/joy/Divider';
import Input from '@mui/joy/Input';
import Select from '@mui/joy/Select';
import Option from '@mui/joy/Option';

export default function InputDecorators() {
const [currency, setCurrency] = React.useState('dollar');
return (
<Input
placeholder="Amount"
startDecorator={{ dollar: '$', baht: '฿', yen: '¥' }[currency]}
endDecorator={
<React.Fragment>
<Divider orientation="vertical" />
<Select
variant="plain"
value={currency}
onChange={(_, value) => setCurrency(value)}
sx={{ mr: -1.5, '&:hover': { bgcolor: 'transparent' } }}
>
<Option value="dollar">US dollar</Option>
<Option value="baht">Thai baht</Option>
<Option value="yen">Japanese yen</Option>
</Select>
</React.Fragment>
}
sx={{ width: 300 }}
/>
);
}
31 changes: 31 additions & 0 deletions docs/data/joy/components/input/InputDecorators.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import * as React from 'react';
import Divider from '@mui/joy/Divider';
import Input from '@mui/joy/Input';
import Select from '@mui/joy/Select';
import Option from '@mui/joy/Option';

export default function InputDecorators() {
const [currency, setCurrency] = React.useState('dollar');
return (
<Input
placeholder="Amount"
startDecorator={{ dollar: '$', baht: '฿', yen: '¥' }[currency]}
endDecorator={
<React.Fragment>
<Divider orientation="vertical" />
<Select
variant="plain"
value={currency}
onChange={(_, value) => setCurrency(value!)}
sx={{ mr: -1.5, '&:hover': { bgcolor: 'transparent' } }}
>
<Option value="dollar">US dollar</Option>
<Option value="baht">Thai baht</Option>
<Option value="yen">Japanese yen</Option>
</Select>
</React.Fragment>
}
sx={{ width: 300 }}
/>
);
}
15 changes: 15 additions & 0 deletions docs/data/joy/components/input/InputField.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import * as React from 'react';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import FormHelperText from '@mui/joy/FormHelperText';
import Input from '@mui/joy/Input';

export default function InputField() {
return (
<FormControl>
<FormLabel>Label</FormLabel>
<Input placeholder="Placeholder" />
<FormHelperText>This is a helper text.</FormHelperText>
</FormControl>
);
}
15 changes: 15 additions & 0 deletions docs/data/joy/components/input/InputField.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import * as React from 'react';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import FormHelperText from '@mui/joy/FormHelperText';
import Input from '@mui/joy/Input';

export default function InputField() {
return (
<FormControl>
<FormLabel>Label</FormLabel>
<Input placeholder="Placeholder" />
<FormHelperText>This is a helper text.</FormHelperText>
</FormControl>
);
}
5 changes: 5 additions & 0 deletions docs/data/joy/components/input/InputField.tsx.preview
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<FormControl>
<FormLabel>Label</FormLabel>
<Input placeholder="Placeholder" />
<FormHelperText>This is a helper text.</FormHelperText>
</FormControl>
33 changes: 33 additions & 0 deletions docs/data/joy/components/input/InputFormProps.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import * as React from 'react';
import Box from '@mui/joy/Box';
import Button from '@mui/joy/Button';
import Input from '@mui/joy/Input';

export default function InputFormProps() {
return (
<Box
sx={{
py: 2,
display: 'flex',
flexDirection: 'column',
gap: 2,
alignItems: 'center',
flexWrap: 'wrap',
}}
>
<form
onSubmit={(event) => {
event.preventDefault();
}}
>
<Input
placeholder="Try to submit with no text!"
required
sx={{ mb: 1, fontSize: 'var(--joy-fontSize-sm)' }}
/>
<Input placeholder="It is disabled" disabled sx={{ mb: 1 }} />
<Button type="submit">Submit</Button>
</form>
</Box>
);
}
33 changes: 33 additions & 0 deletions docs/data/joy/components/input/InputFormProps.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import * as React from 'react';
import Box from '@mui/joy/Box';
import Button from '@mui/joy/Button';
import Input from '@mui/joy/Input';

export default function InputFormProps() {
return (
<Box
sx={{
py: 2,
display: 'flex',
flexDirection: 'column',
gap: 2,
alignItems: 'center',
flexWrap: 'wrap',
}}
>
<form
onSubmit={(event) => {
event.preventDefault();
}}
>
<Input
placeholder="Try to submit with no text!"
required
sx={{ mb: 1, fontSize: 'var(--joy-fontSize-sm)' }}
/>
<Input placeholder="It is disabled" disabled sx={{ mb: 1 }} />
<Button type="submit">Submit</Button>
</form>
</Box>
);
}
13 changes: 13 additions & 0 deletions docs/data/joy/components/input/InputFormProps.tsx.preview
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<form
onSubmit={(event) => {
event.preventDefault();
}}
>
<Input
placeholder="Try to submit with no text!"
required
sx={{ mb: 1, fontSize: 'var(--joy-fontSize-sm)' }}
/>
<Input placeholder="It is disabled" disabled sx={{ mb: 1 }} />
<Button type="submit">Submit</Button>
</form>
13 changes: 13 additions & 0 deletions docs/data/joy/components/input/InputSizes.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import * as React from 'react';
import Input from '@mui/joy/Input';
import Stack from '@mui/joy/Stack';

export default function InputSizes() {
return (
<Stack spacing={2}>
<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />
</Stack>
);
}
13 changes: 13 additions & 0 deletions docs/data/joy/components/input/InputSizes.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import * as React from 'react';
import Input from '@mui/joy/Input';
import Stack from '@mui/joy/Stack';

export default function InputSizes() {
return (
<Stack spacing={2}>
<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />
</Stack>
);
}
3 changes: 3 additions & 0 deletions docs/data/joy/components/input/InputSizes.tsx.preview
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />
18 changes: 18 additions & 0 deletions docs/data/joy/components/input/InputSlotProps.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import * as React from 'react';
import Input from '@mui/joy/Input';

export default function InputSlotProps() {
return (
<Input
type="number"
defaultValue={2.5}
slotProps={{
input: {
min: 1,
max: 5,
step: 0.1,
},
}}
/>
);
}
18 changes: 18 additions & 0 deletions docs/data/joy/components/input/InputSlotProps.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import * as React from 'react';
import Input from '@mui/joy/Input';

export default function InputSlotProps() {
return (
<Input
type="number"
defaultValue={2.5}
slotProps={{
input: {
min: 1,
max: 5,
step: 0.1,
},
}}
/>
);
}
11 changes: 11 additions & 0 deletions docs/data/joy/components/input/InputSlotProps.tsx.preview
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<Input
type="number"
defaultValue={2.5}
slotProps={{
input: {
min: 1,
max: 5,
step: 0.1,
},
}}
/>
Loading