[Joy][docs] Add documentation for Input component

docs/data/joy/components/input/BasicInput.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function BasicInput() {
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Input placeholder="Type in here…" />
+    </Box>
+  );
+}

docs/data/joy/components/input/BasicInput.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function BasicInput() {
+  return (
+    <Box sx={{ width: '100%' }}>
+      <Input placeholder="Type in here…" />
+    </Box>
+  );
+}

docs/data/joy/components/input/BasicInput.tsx.preview

@@ -0,0 +1 @@
+<Input placeholder="Type in here…" />

docs/data/joy/components/input/InputColors.js

@@ -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>
+  );
+}

docs/data/joy/components/input/InputColors.tsx

@@ -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>
+  );
+}

docs/data/joy/components/input/InputColors.tsx.preview

@@ -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" />

docs/data/joy/components/input/InputDecorators.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import IconButton from '@mui/joy/IconButton';
+import Input from '@mui/joy/Input';
+import Typography from '@mui/joy/Typography';
+
+export default function InputDecorators() {
+  const [text, setText] = React.useState('');
+  const addEmoji = (emoji) => () => setText(`${text}${emoji}`);
+  return (
+    <Input
+      placeholder="Type in here…"
+      value={text}
+      onChange={(event) => setText(event.target.value)}
+      startDecorator={
+        <Box sx={{ display: 'flex', gap: 2 }}>
+          <IconButton variant="outlined" color="neutral" onClick={addEmoji('👍')}>
+            👍
+          </IconButton>
+          <IconButton variant="outlined" color="neutral" onClick={addEmoji('🏖')}>
+            🏖
+          </IconButton>
+          <IconButton variant="outlined" color="neutral" onClick={addEmoji('😍')}>
+            😍
+          </IconButton>
+        </Box>
+      }
+      endDecorator={
+        <Typography level="body3" sx={{ ml: 'auto' }}>
+          {text.length} character(s)
+        </Typography>
+      }
+      sx={{ minWidth: 300 }}
+    />
+  );
+}

docs/data/joy/components/input/InputDecorators.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import IconButton from '@mui/joy/IconButton';
+import Input from '@mui/joy/Input';
+import Typography from '@mui/joy/Typography';
+
+export default function InputDecorators() {
+  const [text, setText] = React.useState('');
+  const addEmoji = (emoji: string) => () => setText(`${text}${emoji}`);
+  return (
+    <Input
+      placeholder="Type in here…"
+      value={text}
+      onChange={(event) => setText(event.target.value)}
+      startDecorator={
+        <Box sx={{ display: 'flex', gap: 2 }}>
+          <IconButton variant="outlined" color="neutral" onClick={addEmoji('👍')}>
+            👍
+          </IconButton>
+          <IconButton variant="outlined" color="neutral" onClick={addEmoji('🏖')}>
+            🏖
+          </IconButton>
+          <IconButton variant="outlined" color="neutral" onClick={addEmoji('😍')}>
+            😍
+          </IconButton>
+        </Box>
+      }
+      endDecorator={
+        <Typography level="body3" sx={{ ml: 'auto' }}>
+          {text.length} character(s)
+        </Typography>
+      }
+      sx={{ minWidth: 300 }}
+    />
+  );
+}

docs/data/joy/components/input/InputField.js

@@ -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>
+  );
+}

docs/data/joy/components/input/InputField.tsx

@@ -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>
+  );
+}

docs/data/joy/components/input/InputField.tsx.preview

@@ -0,0 +1,5 @@
+<FormControl>
+  <FormLabel>Label</FormLabel>
+  <Input placeholder="Placeholder" />
+  <FormHelperText>This is a helper text.</FormHelperText>
+</FormControl>

docs/data/joy/components/input/InputFormProps.js

@@ -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>
+  );
+}

docs/data/joy/components/input/InputFormProps.tsx

@@ -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>
+  );
+}

docs/data/joy/components/input/InputFormProps.tsx.preview

@@ -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>

docs/data/joy/components/input/InputSizes.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function InputSizes() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <Input size="sm" placeholder="Small" />
+      <Input size="md" placeholder="Medium" />
+      <Input size="lg" placeholder="Large" />
+    </Box>
+  );
+}

docs/data/joy/components/input/InputSizes.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Input from '@mui/joy/Input';
+
+export default function InputSizes() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <Input size="sm" placeholder="Small" />
+      <Input size="md" placeholder="Medium" />
+      <Input size="lg" placeholder="Large" />
+    </Box>
+  );
+}

docs/data/joy/components/input/InputSizes.tsx.preview

@@ -0,0 +1,3 @@
+<Input size="sm" placeholder="Small" />
+<Input size="md" placeholder="Medium" />
+<Input size="lg" placeholder="Large" />

docs/data/joy/components/input/InputSubscription.js

@@ -0,0 +1,70 @@
+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';
+import Button from '@mui/joy/Button';
+
+export default function InputSubscription() {
+  const [form, setForm] = React.useState({
+    email: '',
+    status: 'initial',
+  });
+
+  const handleSubmit = () => {
+    setForm((current) => ({ ...current, status: 'loading' }));
+    try {
+      // Replace timeout with real backend operation
+      setTimeout(() => {
+        setForm({ email: '', status: 'sent' });
+      }, 1500);
+    } catch (error) {
+      setForm((current) => ({ ...current, status: 'failure' }));
+    }
+  };
+
+  return (
+    <FormControl>
+      <FormLabel
+        sx={(theme) => ({
+          '--FormLabel-color': theme.vars.palette.primary[400],
+        })}
+      >
+        MUI Newsletter
+      </FormLabel>
+      <Input
+        sx={{ pt: 0.5, pb: 0.5 }}
+        placeholder="mail@mui.com"
+        type="email"
+        value={form.email}
+        onChange={(event) =>
+          setForm({ email: event.target.value, status: 'initial' })
+        }
+        error={form.status === 'failure'}
+        endDecorator={
+          <Button
+            variant="solid"
+            color="primary"
+            sx={{ ml: 1, height: '45px' }}
+            disabled={form.email.length === 0 || form.status === 'failure'}
+            loading={form.status === 'loading'}
+            onClick={handleSubmit}
+          >
+            Subscribe
+          </Button>
+        }
+      />
+      {form.status === 'failure' && (
+        <FormHelperText sx={(theme) => ({ color: theme.vars.palette.danger[400] })}>
+          Oops! something went wrong, please try again later.
+        </FormHelperText>
+      )}
+
+      {form.status === 'sent' && (
+        <FormHelperText sx={(theme) => ({ color: theme.vars.palette.primary[400] })}>
+          You are all set!
+        </FormHelperText>
+      )}
+    </FormControl>
+  );
+}

docs/data/joy/components/input/InputSubscription.preview

@@ -0,0 +1,8 @@
+<Input
+  placeholder="mail@mui.com"
+  endDecorator={
+    <Button variant="solid" color="primary" sx={{ ml: 1 }}>
+      Subscribe
+    </Button>
+  }
+/>