fix(DropDown): fix incorrect borders

lumada-design · Apr 13, 2023 · f8868ee · f8868ee
1 parent 5b3ca23
commit f8868ee
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/packages/core/src/components/BaseDropdown/BaseDropdown.styles.tsx b/packages/core/src/components/BaseDropdown/BaseDropdown.styles.tsx
@@ -197,7 +197,16 @@ export const StyledExtension = styled(
   })
 );
 
-export const StyledPanel = styled("div")({
+export const StyledPanel = styled(
+  "div",
+  transientOptions
+)(({ $popperPlacement }: { $popperPlacement: string }) => ({
   position: "relative",
   boxShadow: theme.baseDropdown.shadow,
-});
+  ...($popperPlacement === "top" && {
+    top: "1px",
+  }),
+  ...($popperPlacement === "bottom" && {
+    top: "-1px",
+  }),
+}));
diff --git a/packages/core/src/components/BaseDropdown/BaseDropdown.tsx b/packages/core/src/components/BaseDropdown/BaseDropdown.tsx
@@ -465,6 +465,9 @@ export const HvBaseDropdown = ({
               <StyledPanel
                 id={setId(elementId, "children-container")}
                 className={clsx(baseDropdownClasses.panel, classes?.panel)}
+                $popperPlacement={
+                  popperPlacement.includes("top") ? "top" : "bottom"
+                }
               >
                 {children}
               </StyledPanel>

diff --git a/packages/core/src/components/Dropdown/List/List.styles.tsx b/packages/core/src/components/Dropdown/List/List.styles.tsx
@@ -7,7 +7,6 @@ export const StyledRootList = styled("div")({
   width: "100%",
   backgroundColor: theme.dropdown.listBackgroundColor,
   border: theme.dropdown.listBorder,
-  borderTop: "none",
   borderRadius: theme.dropdown.listBorderRadius,
 });