[Textarea][Joy] Add Textarea component (#33975)

mui · Aug 24, 2022 · 41c97af · 41c97af
1 parent 2ca649d
commit 41c97af
Show file tree

Hide file tree

Showing 25 changed files with 1,228 additions and 221 deletions.
diff --git a/docs/data/joy/components/textarea/ExampleTextareaComment.js b/docs/data/joy/components/textarea/ExampleTextareaComment.js
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import FormLabel from '@mui/joy/FormLabel';
+import Textarea from '@mui/joy/Textarea';
+import IconButton from '@mui/joy/IconButton';
+import Menu from '@mui/joy/Menu';
+import MenuItem from '@mui/joy/MenuItem';
+import ListItemDecorator from '@mui/joy/ListItemDecorator';
+import FormatBold from '@mui/icons-material/FormatBold';
+import FormatItalic from '@mui/icons-material/FormatItalic';
+import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
+import Check from '@mui/icons-material/Check';
+
+export default function TextareaValidator() {
+  const [italic, setItalic] = React.useState(false);
+  const [fontWeight, setFontWeight] = React.useState('normal');
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  return (
+    <Box sx={{ p: 2 }}>
+      <FormLabel>Your comment</FormLabel>
+      <Textarea
+        placeholder="Type something here…"
+        minRows={3}
+        endDecorator={
+          <Box
+            sx={{
+              display: 'flex',
+              gap: 'var(--Textarea-paddingBlock)',
+              pt: 'var(--Textarea-paddingBlock)',
+              borderTop: '1px solid',
+              borderColor: 'divider',
+              flex: 'auto',
+            }}
+          >
+            <IconButton
+              variant="plain"
+              color="neutral"
+              onClick={(event) => setAnchorEl(event.currentTarget)}
+            >
+              <FormatBold />
+              <KeyboardArrowDown fontSize="md" />
+            </IconButton>
+            <Menu
+              anchorEl={anchorEl}
+              open={Boolean(anchorEl)}
+              onClose={() => setAnchorEl(null)}
+              size="sm"
+              placement="bottom-start"
+              sx={{ '--List-decorator-size': '24px' }}
+            >
+              {['200', 'normal', 'bold'].map((weight) => (
+                <MenuItem
+                  key={weight}
+                  selected={fontWeight === weight}
+                  onClick={() => {
+                    setFontWeight(weight);
+                    setAnchorEl(null);
+                  }}
+                  sx={{ fontWeight: weight }}
+                >
+                  <ListItemDecorator>
+                    {fontWeight === weight && <Check fontSize="sm" />}
+                  </ListItemDecorator>
+                  {weight === '200' ? 'lighter' : weight}
+                </MenuItem>
+              ))}
+            </Menu>
+            <IconButton
+              variant={italic ? 'soft' : 'plain'}
+              color={italic ? 'primary' : 'neutral'}
+              aria-pressed={italic}
+              onClick={() => setItalic((bool) => !bool)}
+            >
+              <FormatItalic />
+            </IconButton>
+            <Button sx={{ ml: 'auto' }}>Send</Button>
+          </Box>
+        }
+        sx={{
+          minWidth: 300,
+          fontWeight,
+          fontStyle: italic ? 'italic' : 'initial',
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/textarea/TextareaColors.js b/docs/data/joy/components/textarea/TextareaColors.js
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Textarea from '@mui/joy/Textarea';
+
+export default function TextareaColors() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'grid',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <Textarea
+        label="Primary"
+        placeholder="Type in here…"
+        variant="outlined"
+        color="primary"
+      />
+      <Textarea
+        label="Neutral"
+        placeholder="Type in here…"
+        variant="outlined"
+        color="neutral"
+      />
+      <Textarea
+        label="Danger"
+        placeholder="Type in here…"
+        variant="outlined"
+        color="danger"
+      />
+      <Textarea
+        label="Warning"
+        placeholder="Type in here…"
+        variant="outlined"
+        color="warning"
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/textarea/TextareaDecorators.js b/docs/data/joy/components/textarea/TextareaDecorators.js
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import IconButton from '@mui/joy/IconButton';
+import Textarea from '@mui/joy/Textarea';
+import Typography from '@mui/joy/Typography';
+
+export default function TextareaDecorators() {
+  const [text, setText] = React.useState('');
+  const addEmoji = (emoji) => () => setText(`${text}${emoji}`);
+  return (
+    <Textarea
+      placeholder="Type in here…"
+      value={text}
+      onChange={(event) => setText(event.target.value)}
+      minRows={2}
+      maxRows={4}
+      startDecorator={
+        <Box sx={{ display: 'flex', gap: 0.5 }}>
+          <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 }}
+    />
+  );
+}
diff --git a/docs/data/joy/components/textarea/TextareaFormProps.js b/docs/data/joy/components/textarea/TextareaFormProps.js
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Button from '@mui/joy/Button';
+import Textarea from '@mui/joy/Textarea';
+
+export default function TextareaFormProps() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+        }}
+      >
+        <Textarea
+          placeholder="Try to submit with empty text!"
+          required
+          sx={{ mb: 1 }}
+        />
+        <Textarea placeholder="It is disabled" disabled sx={{ mb: 1 }} />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/textarea/TextareaRows.js b/docs/data/joy/components/textarea/TextareaRows.js
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Textarea from '@mui/joy/Textarea';
+
+export default function TextareaValidator() {
+  return (
+    <Box sx={{ p: 2 }}>
+      <Textarea
+        placeholder="Type in here…"
+        defaultValue="Try to put the text more than 4 lines."
+        minRows={2}
+        maxRows={4}
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/textarea/TextareaSizes.js b/docs/data/joy/components/textarea/TextareaSizes.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Textarea from '@mui/joy/Textarea';
+
+export default function TextareaSizes() {
+  return (
+    <Box sx={{ display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }}>
+      <Textarea size="sm" label="Size" placeholder="Small" />
+      <Textarea size="md" label="Size" placeholder="Medium" />
+      <Textarea size="lg" label="Size" placeholder="Large" />
+    </Box>
+  );
+}
diff --git a/.../components/text-field/TextFieldUsage.tsx → .../joy/components/textarea/TextareaUsage.js b/.../components/text-field/TextFieldUsage.tsx → .../joy/components/textarea/TextareaUsage.js
@@ -1,12 +1,11 @@
 import * as React from 'react';
 import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
-import Box from '@mui/joy/Box';
-import TextField from '@mui/joy/TextField';
+import Textarea from '@mui/joy/Textarea';
 
-export default function TextFieldUsage() {
+export default function TextareaUsage() {
   return (
     <JoyUsageDemo
-      componentName="TextField"
+      componentName="Textarea"
       data={[
         {
           propName: 'variant',
@@ -20,27 +19,23 @@ export default function TextFieldUsage() {
           options: ['sm', 'md', 'lg'],
           defaultValue: 'md',
         },
-        {
-          propName: 'label',
-          knob: 'input',
-          defaultValue: 'Label',
-        },
         {
           propName: 'placeholder',
           knob: 'input',
-          defaultValue: 'placeholder',
+          defaultValue: 'Type something…',
         },
         {
           propName: 'disabled',
           knob: 'switch',
           defaultValue: false,
         },
+        {
+          propName: 'minRows',
+          defaultValue: 2,
+          codeBlockDisplay: true,
+        },
       ]}
-      renderDemo={(props) => (
-        <Box>
-          <TextField {...props} />
-        </Box>
-      )}
+      renderDemo={(props) => <Textarea {...props} />}
     />
   );
 }
diff --git a/docs/data/joy/components/textarea/TextareaValidation.js b/docs/data/joy/components/textarea/TextareaValidation.js
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Textarea from '@mui/joy/Textarea';
+
+export default function TextareaValidator() {
+  return (
+    <Box sx={{ p: 2 }}>
+      <Textarea
+        placeholder="Type in here…"
+        error
+        defaultValue="Oh no!, something is definitely wrong."
+      />
+    </Box>
+  );
+}
diff --git a/docs/data/joy/components/textarea/TextareaVariants.js b/docs/data/joy/components/textarea/TextareaVariants.js
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Box from '@mui/joy/Box';
+import Textarea from '@mui/joy/Textarea';
+
+export default function TextareaVariants() {
+  return (
+    <Box
+      sx={{
+        py: 2,
+        display: 'grid',
+        gap: 2,
+        alignItems: 'center',
+        flexWrap: 'wrap',
+      }}
+    >
+      <Textarea label="Solid" placeholder="Type in here…" variant="solid" />
+      <Textarea label="Soft" placeholder="Type in here…" variant="soft" />
+      <Textarea label="Outlined" placeholder="Type in here…" variant="outlined" />
+      <Textarea label="Plain" placeholder="Type in here…" variant="plain" />
+    </Box>
+  );
+}