From 6eb46096b731db679ec70eb087890169dc32b6d1 Mon Sep 17 00:00:00 2001
From: Natallia Harshunova <nattallius@gmail.com>
Date: Wed, 11 Dec 2024 14:08:56 +0100
Subject: [PATCH] feat(20263): added coverage for extra placeholders
 combination

---
 .../ui-kit/src/Textarea/Textarea.fixture.tsx  | 12 ++++++++----
 packages/ui-kit/src/Textarea/index.tsx        | 19 ++++++++++---------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/ui-kit/src/Textarea/Textarea.fixture.tsx b/packages/ui-kit/src/Textarea/Textarea.fixture.tsx
index 824d37d0..557eb368 100644
--- a/packages/ui-kit/src/Textarea/Textarea.fixture.tsx
+++ b/packages/ui-kit/src/Textarea/Textarea.fixture.tsx
@@ -20,7 +20,7 @@ const getInputStates = (props: {
 }) => (
   <div style={{ display: 'flex', flexFlow: 'column nowrap', gap: '1em' }}>
     <>
-      Empty: <WrappedTextarea value="" placeholder="" {...props} />
+      Empty: <WrappedTextarea value="" {...props} />
     </>
     <>
       Placeholder: <WrappedTextarea placeholder="Placeholder" value="" {...props} />
@@ -29,12 +29,16 @@ const getInputStates = (props: {
       Long placeholder: <WrappedTextarea placeholder="Looooong long long long long placeholder" value="" {...props} />
     </>
     <>
-      Placeholder on top: <WrappedTextarea value="test" placeholder="Placeholder" showTopPlaceholder {...props} />
+      Placeholder is animated to top placeholder:{' '}
+      <WrappedTextarea value="test" placeholder="Placeholder" showTopPlaceholder {...props} />
+    </>
+    <>
+      Only top placeholder
+      <WrappedTextarea value="test" topPlaceholder="bio" {...props} />
     </>
-
     <>
       Placeholder on top + textarea placeholder:
-      <WrappedTextarea value="test" placeholder="Placeholder" showTopPlaceholder topPlaceholder="bio" {...props} />
+      <WrappedTextarea value="test" placeholder="placeholder" topPlaceholder="bio" {...props} />
     </>
     <>
       Long placeholder on top:
diff --git a/packages/ui-kit/src/Textarea/index.tsx b/packages/ui-kit/src/Textarea/index.tsx
index 4e7ce452..3d7dbf04 100644
--- a/packages/ui-kit/src/Textarea/index.tsx
+++ b/packages/ui-kit/src/Textarea/index.tsx
@@ -116,23 +116,24 @@ function TextareaComponent(
   );
 
   const getPlaceholders = () => {
-    if (!placeholder) return;
+    if (!placeholder && !topPlaceholder) return;
 
-    if (!showTopPlaceholder) {
-      if (value) return;
-      return <div className={cn(s.placeholder, classes?.placeholder)}>{placeholder}</div>;
-    }
-
-    /* Case with both placeholders: on top and over textarea */
-    if (showTopPlaceholder && topPlaceholder) {
+    /* If topPlaceholder is defined always render it on top of textarea */
+    if (topPlaceholder) {
       return (
         <>
           <div className={cn(s.placeholder, classes?.topPlaceholder, s.topPlaceholder)}>{topPlaceholder}</div>
-          {!value && <div className={cn(s.placeholder, classes?.placeholder)}>{placeholder}</div>}
+          {placeholder && !value && <div className={cn(s.placeholder, classes?.placeholder)}>{placeholder}</div>}
         </>
       );
     }
 
+    /* Case with only teaxtarea placeholder */
+    if (!showTopPlaceholder) {
+      if (value) return;
+      return <div className={cn(s.placeholder, classes?.placeholder)}>{placeholder}</div>;
+    }
+
     /* Case where textarea placeholder is animated into top placeholder */
     return (
       <div className={cn(s.placeholder, classes?.topPlaceholder, value && showTopPlaceholder && s.topPlaceholder)}>