Fix Alignment issue in form elements

ClickHouse · Sep 28, 2023 · 7e2c57b · 7e2c57b
1 parent 7b19eff
commit 7e2c57b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/src/components/Input/InputWrapper.tsx b/src/components/Input/InputWrapper.tsx
@@ -87,6 +87,7 @@ export const InputWrapper = ({
     <FormRoot
       $orientation={orientation}
       $dir={dir}
+      $addLabelPadding
     >
       <FormElementContainer>
         <Wrapper $error={!!error}>{children}</Wrapper>

diff --git a/src/components/Select/common/InternalSelect.tsx b/src/components/Select/common/InternalSelect.tsx
@@ -326,6 +326,7 @@ export const InternalSelect = ({
     <FormRoot
       $orientation={orientation}
       $dir={dir}
+      $addLabelPadding
       {...props}
     >
       <FormElementContainer>

diff --git a/src/components/commonElement.tsx b/src/components/commonElement.tsx
@@ -4,11 +4,12 @@ import { IconSize } from "./Icon/types";
 export const FormRoot = styled.div<{
   $orientation?: "horizontal" | "vertical";
   $dir?: "start" | "end";
+  $addLabelPadding?: boolean;
 }>`
   display: flex;
   width: 100%;
   gap: ${({ theme }) => theme.click.field.space.gap};
-  ${({ theme, $orientation = "vertical", $dir = "start" }) => `
+  ${({ theme, $orientation = "vertical", $dir = "start", $addLabelPadding = false }) => `
     flex-direction: ${
       $orientation === "horizontal"
         ? $dir === "start"
@@ -19,11 +20,15 @@ export const FormRoot = styled.div<{
         : "column"
     };
     align-items: flex-start;
+    ${
+      $addLabelPadding && $orientation === "horizontal"
+        ? `
     label {
-      padding-top: ${
-        $orientation === "horizontal" ? `calc(${theme.click.field.space.y} + 1px)` : 0
-      };
-      ${$orientation === "horizontal" ? "line-height: 1lh;" : ""}
+      padding-top: calc(${theme.click.field.space.y} + 1px);
+      line-height: 1lh;
+    }
+    `
+        : ""
     }
   `}
   * {