From 2f092e82d692a28c30603df66e31d22f2370c024 Mon Sep 17 00:00:00 2001
From: Praveen Murali <itspraveenmurali@gmail.com>
Date: Wed, 6 Mar 2024 16:12:54 +0530
Subject: [PATCH 1/3] Added support for resize, suffix, prefix and sizing

---
 src/components/Textarea.jsx             | 28 ++++++++-
 src/styles/components/_input.scss       | 17 +++++-
 stories/Components/Textarea.stories.jsx | 79 ++++++++++++++++++++++++-
 3 files changed, 117 insertions(+), 7 deletions(-)

diff --git a/src/components/Textarea.jsx b/src/components/Textarea.jsx
index a7579c66a..5a3879e4d 100644
--- a/src/components/Textarea.jsx
+++ b/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,
@@ -85,19 +91,23 @@ const Textarea = forwardRef(
             "neeto-ui-input--small": size === "small",
             "neeto-ui-input--medium": size === "medium",
             "neeto-ui-input--large": size === "large",
+            "neeto-ui-input--resize--vertical": resize === "vertical",
+            "neeto-ui-input--resize--none": 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;
diff --git a/src/styles/components/_input.scss b/src/styles/components/_input.scss
index 3bbd93e9c..5679ef412 100644
--- a/src/styles/components/_input.scss
+++ b/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 {
diff --git a/stories/Components/Textarea.stories.jsx b/stories/Components/Textarea.stories.jsx
index 2d0005370..f4a9e58ad 100644
--- a/stories/Components/Textarea.stories.jsx
+++ b/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,6 +66,55 @@ 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",
@@ -71,6 +122,24 @@ NakedInput.args = {
   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,14 +153,14 @@ 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}
@@ -99,7 +168,7 @@ const TextareaWithMaxLength = args => (
       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,
 };
 

From 2ba84041c61f5e5caf3c9e3761a57bfde9b1d222 Mon Sep 17 00:00:00 2001
From: Ajmal Noushad <ajufhn@gmail.com>
Date: Wed, 6 Mar 2024 18:23:04 +0530
Subject: [PATCH 2/3] Update src/components/Textarea.jsx

---
 src/components/Textarea.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Textarea.jsx b/src/components/Textarea.jsx
index 5a3879e4d..7302cc80c 100644
--- a/src/components/Textarea.jsx
+++ b/src/components/Textarea.jsx
@@ -91,8 +91,8 @@ const Textarea = forwardRef(
             "neeto-ui-input--small": size === "small",
             "neeto-ui-input--medium": size === "medium",
             "neeto-ui-input--large": size === "large",
-            "neeto-ui-input--resize--vertical": resize === "vertical",
-            "neeto-ui-input--resize--none": resize === "none",
+            "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>}

From 08fd8d67a6a5a11f5fdd75b3cf0a5df8a61bd8c1 Mon Sep 17 00:00:00 2001
From: Ajmal Noushad <ajufhn@gmail.com>
Date: Wed, 6 Mar 2024 18:23:12 +0530
Subject: [PATCH 3/3] Update src/components/Textarea.jsx

---
 src/components/Textarea.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Textarea.jsx b/src/components/Textarea.jsx
index 7302cc80c..3185e568e 100644
--- a/src/components/Textarea.jsx
+++ b/src/components/Textarea.jsx
@@ -88,9 +88,9 @@ 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,
           })}