Added support for resize, suffix, prefix and sizing for textarea

src/components/Textarea.jsx

@@ -10,11 +10,17 @@ import Label from "./Label";
 
 const SIZES = { small: "small", medium: "medium", large: "large" };
 
+const ROWS = { small: 1, medium: 3, large: 4 };
+
+const RESIZE = { vertical: "vertical", none: "none" };
+
 const Textarea = forwardRef(
   (
     {
       size = SIZES.medium,
-      rows = 3,
+      resize = RESIZE.vertical,
+      suffix = null,
+      prefix = null,
       disabled = false,
       required = false,
       nakedTextarea = false,
@@ -82,22 +88,26 @@ const Textarea = forwardRef(
             "neeto-ui-input--error": !!error,
             "neeto-ui-input--disabled": !!disabled,
             "neeto-ui-input--naked": !!nakedTextarea,
-            "neeto-ui-input--small": size === "small",
-            "neeto-ui-input--medium": size === "medium",
-            "neeto-ui-input--large": size === "large",
+            "neeto-ui-input--small": size === SIZES.small,
+            "neeto-ui-input--medium": size === SIZES.medium,
+            "neeto-ui-input--large": size === SIZES.large,
+            "neeto-ui-input--resize--vertical": resize === RESIZE.vertical,
+            "neeto-ui-input--resize--none": resize === RESIZE.none,
           })}
         >
+          {prefix && <div className="neeto-ui-input__prefix">{prefix}</div>}
           <textarea
             ref={textareaRef}
+            rows={ROWS[size]}
             {...{
               disabled,
-              rows,
               ...(isMaxLengthPresent && !unlimitedChars && { maxLength }),
               ...otherProps,
               onChange,
               value,
             }}
           />
+          {suffix && <div className="neeto-ui-input__suffix">{suffix}</div>}
         </div>
         {!!error && (
           <p
@@ -158,9 +168,13 @@ Textarea.propTypes = {
    */
   disabled: PropTypes.bool,
   /**
-   * To provide additional classnames to the Textarea.
+   * To provide additional classnames to the Textarea container.
    */
   className: PropTypes.string,
+  /**
+   * The resize property sets whether the Textarea is resizable.
+   */
+  resize: PropTypes.oneOf(Object.values(RESIZE)),
   /**
    * To specify the text that appears below the Textarea.
    */
@@ -177,6 +191,14 @@ Textarea.propTypes = {
    * To be used along with maxLength prop. When set to true the character limit will not be enforced and character count will be shown in error state if the character limit is exceeded.
    */
   unlimitedChars: PropTypes.bool,
+  /**
+   * To specify the content to be added at the end of the Textarea.
+   */
+  suffix: PropTypes.node,
+  /**
+   * To specify the content to be added at the beginning of the Textarea.
+   */
+  prefix: PropTypes.node,
 };
 
 export default Textarea;

src/styles/components/_input.scss

@@ -148,10 +148,25 @@
       max-height: var(--neeto-ui-textarea-max-height);
       overflow-y: auto;
       line-height: var(--neeto-ui-input-line-height);
+      resize: vertical;
     }
 
     &.neeto-ui-input--textarea {
+      &.neeto-ui-input--resize--none{
+        textarea {
+          resize: none;
+        }
+      }
+
       padding: var(--neeto-ui-textarea-padding-y) var(--neeto-ui-textarea-padding-x);
+      align-items: flex-start;
+
+      .neeto-ui-input__prefix,
+      .neeto-ui-input__suffix {
+        margin: 0;
+        padding: 0;
+        min-height: 0;
+      }
     }
 
     &:hover:not(.neeto-ui-input--naked, .neeto-ui-input--error, .neeto-ui-input--disabled) {
@@ -199,7 +214,7 @@
       --neeto-ui-input-prefix-suffix-margin: 8px;
 
       --neeto-ui-textarea-padding-x: 8px;
-      --neeto-ui-textarea-padding-y: 8px;
+      --neeto-ui-textarea-padding-y: 4px;
     }
 
     &.neeto-ui-input--medium {

stories/Components/Textarea.stories.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 
+import { Check, Message } from "neetoicons";
+
 import Textarea from "components/Textarea";
 
 import TextareaCSSCustomization from "!raw-loader!./TextareaStoriesDocs/TextareaCSSCustomization.mdx";
@@ -64,13 +66,80 @@ HelpText.args = {
   helpText: "This is help text props to the component",
 };
 
+const Sizes = args => (
+  <div className="flex w-full flex-col gap-3">
+    <Textarea
+      {...args}
+      label="Small"
+      placeholder="Input placeholder"
+      size="small"
+    />
+    <Textarea
+      {...args}
+      label="Medium"
+      placeholder="Input placeholder"
+      size="medium"
+    />
+    <Textarea
+      {...args}
+      label="Large"
+      placeholder="Input placeholder"
+      size="large"
+    />
+  </div>
+);
+
+const ResizeDisabled = args => (
+  <div className="flex w-full flex-col gap-3">
+    <Textarea
+      {...args}
+      label="Small"
+      placeholder="Input placeholder"
+      resize="none"
+      size="small"
+    />
+    <Textarea
+      {...args}
+      label="Medium"
+      placeholder="Input placeholder"
+      resize="none"
+      size="medium"
+    />
+    <Textarea
+      {...args}
+      label="Large"
+      placeholder="Input placeholder"
+      resize="none"
+      size="large"
+    />
+  </div>
+);
+
 const NakedInput = Template.bind({});
 NakedInput.args = {
   label: "Naked Textarea field",
   placeholder: "Enter text",
   nakedTextarea: true,
 };
 
+const WithPrefix = Template.bind({});
+WithPrefix.storyName = "Prefix";
+WithPrefix.args = {
+  label: "Name",
+  placeholder: "Enter text",
+  prefix: <Message />,
+  textareaClassName: "resize-none",
+};
+
+const WithSuffix = Template.bind({});
+WithSuffix.storyName = "Suffix";
+WithSuffix.args = {
+  label: "Name",
+  placeholder: "Enter text",
+  suffix: <Check />,
+  textareaClassName: "resize-none",
+};
+
 const TextareaWithMaxLength = args => (
   <div className="flex flex-col space-y-6">
     <Textarea
@@ -84,22 +153,22 @@ const TextareaWithMaxLength = args => (
       label="Textarea with max length"
       maxLength={10}
       placeholder="Enter text"
-      value="Sample i"
+      value="Sample input"
     />
     <Textarea
       {...args}
       label="Textarea with max length"
       maxLength={10}
       placeholder="Enter text"
-      value="Sample in"
+      value="Sample input"
     />
     <Textarea
       {...args}
       unlimitedChars
       label="Textarea with max length and unlimited characters"
       maxLength={10}
       placeholder="Enter text"
-      value="Sample Input"
+      value="Sample input"
     />
   </div>
 );
@@ -128,6 +197,10 @@ export {
   HelpText,
   NakedInput,
   TextareaWithMaxLength,
+  WithPrefix,
+  WithSuffix,
+  Sizes,
+  ResizeDisabled,
   CSSCustomization,
 };