From b47694aa2749f0b4c4b97321e7e6c03e812388f7 Mon Sep 17 00:00:00 2001
From: lubega-deriv <lubega@deriv.com>
Date: Mon, 1 Jul 2024 13:30:22 +0800
Subject: [PATCH 1/5] chore: fix dropdown ui discrepancies

---
 src/components/Dropdown/Dropdown.scss |  1 +
 src/components/Dropdown/index.tsx     |  3 ++-
 src/components/Input/Input.scss       |  6 ++++++
 src/components/Input/index.tsx        | 12 ++++++++----
 stories/Dropdown.stories.ts           |  8 ++++----
 5 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
index 0167b34b..3f143823 100644
--- a/src/components/Dropdown/Dropdown.scss
+++ b/src/components/Dropdown/Dropdown.scss
@@ -99,6 +99,7 @@
         box-shadow: 0 32px 64px 0 rgba(14, 14, 14, 0.14);
         overflow-y: auto;
         width: 328px;
+        margin-top: 8px;
 
         &--full {
             width: 100%;
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index f481f01a..a38640e6 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -103,7 +103,7 @@ export const Dropdown = ({
         },
         onIsOpenChange({ isOpen }) {
             if (!isOpen && !emptyResultMessage) {
-                clearFilter();  
+                clearFilter();
             }
         },
         onSelectedItemChange({ selectedItem }) {
@@ -159,6 +159,7 @@ export const Dropdown = ({
             <div className="deriv-dropdown__content">
                 <Input
                     disabled={disabled}
+                    hideMessage={isOpen}
                     label={reactNodeToString(label)}
                     leftPlaceholder={icon || undefined}
                     message={errorMessage}
diff --git a/src/components/Input/Input.scss b/src/components/Input/Input.scss
index 08ab6842..2875a1ee 100644
--- a/src/components/Input/Input.scss
+++ b/src/components/Input/Input.scss
@@ -125,6 +125,10 @@ $input-placement: 16px;
         }
     }
 
+    &__left-content {
+        margin-right: 8px;
+    }
+
     &__right-content {
         margin-left: $input-placement;
     }
@@ -152,4 +156,6 @@ $input-placement: 16px;
     padding: 2px 0 0 16px;
     height: 20px;
     width: 100%;
+    display: flex;
+    align-items: center;
 }
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index f3a33c56..865f17a1 100644
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@@ -88,7 +88,7 @@ export const Input = forwardRef(
             hideMessage,
             id,
             isFullWidth = false,
-            islabelAnimationDisabled=false,
+            islabelAnimationDisabled = false,
             label,
             leftPlaceholder,
             message,
@@ -126,7 +126,11 @@ export const Input = forwardRef(
                     )}
                     <input
                         placeholder={label}
-                        className={islabelAnimationDisabled? "deriv-input--label-animation-disabled" : "deriv-input__field" }
+                        className={
+                            islabelAnimationDisabled
+                                ? "deriv-input--label-animation-disabled"
+                                : "deriv-input__field"
+                        }
                         id={id}
                         disabled={disabled}
                         ref={ref}
@@ -150,16 +154,16 @@ export const Input = forwardRef(
                         </div>
                     )}
                 </div>
+                <div className="deriv-input__helper-message">
                     {!hideMessage && message && (
-                         <div className="deriv-input__helper-message">
                         <HelperMessage
                             message={message}
                             variant={variant}
                             error={error}
                             disabled={disabled}
                         />
-                        </div>
                     )}
+                </div>
             </div>
         );
     },
diff --git a/stories/Dropdown.stories.ts b/stories/Dropdown.stories.ts
index 233b433e..366741e4 100644
--- a/stories/Dropdown.stories.ts
+++ b/stories/Dropdown.stories.ts
@@ -4,6 +4,7 @@ import { Dropdown } from "../src/components/Dropdown";
 const meta = {
     title: "Components/Dropdown",
     component: Dropdown,
+    tags: ["autodocs"],
     args: {
         disabled: false,
         dropdownIcon: "",
@@ -63,7 +64,6 @@ export const PromptNoResults: Story = {
             { text: "Option C", value: "optionC" },
         ],
         label: "Choose an option",
-        emptyResultMessage: "No search results"
-    }
-
-}
+        emptyResultMessage: "No search results",
+    },
+};

From 3eb38c2f013a5616c7c4cacc94597e001a8bbb1c Mon Sep 17 00:00:00 2001
From: lubega-deriv <lubega@deriv.com>
Date: Mon, 1 Jul 2024 14:13:34 +0800
Subject: [PATCH 2/5] fix: applied comments

---
 src/components/Input/Input.scss | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/Input/Input.scss b/src/components/Input/Input.scss
index 2875a1ee..93a8b0c7 100644
--- a/src/components/Input/Input.scss
+++ b/src/components/Input/Input.scss
@@ -156,6 +156,4 @@ $input-placement: 16px;
     padding: 2px 0 0 16px;
     height: 20px;
     width: 100%;
-    display: flex;
-    align-items: center;
 }

From 6a863607ae4b41bd2857483f1f51d7ebd043db57 Mon Sep 17 00:00:00 2001
From: shayan khaleghparast <iman@regentmarkets.com>
Date: Mon, 1 Jul 2024 14:28:13 +0800
Subject: [PATCH 3/5] docs: added islabelAnimationDisabled to dropdown story
 props

---
 stories/Dropdown.stories.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/stories/Dropdown.stories.ts b/stories/Dropdown.stories.ts
index 366741e4..2a07007d 100644
--- a/stories/Dropdown.stories.ts
+++ b/stories/Dropdown.stories.ts
@@ -24,6 +24,7 @@ const meta = {
         onSelect: (value: string) => console.log(`Selected value: ${value}`),
         value: "option1",
         variant: "comboBox",
+        islabelAnimationDisabled: false,
     },
 } satisfies Meta<typeof Dropdown>;
 

From 63890e9f25c178aaf0ebf164b518c41b8cc01919 Mon Sep 17 00:00:00 2001
From: lubega-deriv <lubega@deriv.com>
Date: Mon, 1 Jul 2024 14:40:16 +0800
Subject: [PATCH 4/5] fix: applied comments

---
 src/components/Dropdown/index.tsx | 3 +--
 src/components/Input/index.tsx    | 8 ++++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index a38640e6..d0bad13e 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -159,10 +159,9 @@ export const Dropdown = ({
             <div className="deriv-dropdown__content">
                 <Input
                     disabled={disabled}
-                    hideMessage={isOpen}
                     label={reactNodeToString(label)}
                     leftPlaceholder={icon || undefined}
-                    message={errorMessage}
+                    message={isOpen ? " " : errorMessage}
                     name={name}
                     onClickCapture={handleInputClick}
                     onKeyUp={() => setShouldFilterList(true)}
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
index 865f17a1..0bb0e8a1 100644
--- a/src/components/Input/index.tsx
+++ b/src/components/Input/index.tsx
@@ -154,16 +154,16 @@ export const Input = forwardRef(
                         </div>
                     )}
                 </div>
-                <div className="deriv-input__helper-message">
-                    {!hideMessage && message && (
+                {!hideMessage && message && (
+                    <div className="deriv-input__helper-message">
                         <HelperMessage
                             message={message}
                             variant={variant}
                             error={error}
                             disabled={disabled}
                         />
-                    )}
-                </div>
+                    </div>
+                )}
             </div>
         );
     },

From a10dfadd66816fb41a0738de0034d86feeba75e1 Mon Sep 17 00:00:00 2001
From: lubega-deriv <lubega@deriv.com>
Date: Mon, 1 Jul 2024 15:10:48 +0800
Subject: [PATCH 5/5] fix: applied comments

---
 src/components/Dropdown/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index d0bad13e..8b6c5cc9 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -160,7 +160,7 @@ export const Dropdown = ({
                 <Input
                     disabled={disabled}
                     label={reactNodeToString(label)}
-                    leftPlaceholder={icon || undefined}
+                    leftPlaceholder={icon}
                     message={isOpen ? " " : errorMessage}
                     name={name}
                     onClickCapture={handleInputClick}