feat(20263): added coverage for extra placeholders combination

konturio · Dec 11, 2024 · 6eb4609 · 6eb4609
1 parent 5bae7d8
commit 6eb4609
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git 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
@@ -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)}>