Lubega / Fix dropdown UI discrepancies

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%;

src/components/Dropdown/index.tsx

@@ -103,7 +103,7 @@ export const Dropdown = ({
         },
         onIsOpenChange({ isOpen }) {
             if (!isOpen && !emptyResultMessage) {
-                clearFilter();  
+                clearFilter();
             }
         },
         onSelectedItemChange({ selectedItem }) {
@@ -160,8 +160,8 @@ export const Dropdown = ({
                 <Input
                     disabled={disabled}
                     label={reactNodeToString(label)}
-                    leftPlaceholder={icon || undefined}
-                    message={errorMessage}
+                    leftPlaceholder={icon}
+                    message={isOpen ? " " : errorMessage}
                     name={name}
                     onClickCapture={handleInputClick}
                     onKeyUp={() => setShouldFilterList(true)}

src/components/Input/Input.scss

@@ -125,6 +125,10 @@ $input-placement: 16px;
         }
     }
 
+    &__left-content {
+        margin-right: 8px;
+    }
+
     &__right-content {
         margin-left: $input-placement;
     }

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>
-                    {!hideMessage && message && (
-                         <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>
         );
     },

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: "",
@@ -23,6 +24,7 @@ const meta = {
         onSelect: (value: string) => console.log(`Selected value: ${value}`),
         value: "option1",
         variant: "comboBox",
+        islabelAnimationDisabled: false,
     },
 } satisfies Meta<typeof Dropdown>;
 
@@ -63,7 +65,6 @@ export const PromptNoResults: Story = {
             { text: "Option C", value: "optionC" },
         ],
         label: "Choose an option",
-        emptyResultMessage: "No search results"
-    }
-
-}
+        emptyResultMessage: "No search results",
+    },
+};