Merge pull request #1227 from Wizleap-Inc/fix/form-control-layoutshift

Fix(form-control): エラーメッセージ表示によるレイアウトシフト発生を防ぐ
Wizleap-Inc · Feb 26, 2024 · 17414b3 · 17414b3
2 parents f1e5df1 + 68674bb
commit 17414b3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/.changeset/kind-cars-sneeze.md b/.changeset/kind-cars-sneeze.md
@@ -0,0 +1,5 @@
+---
+"@wizleap-inc/wiz-ui-react": patch
+---
+
+fix(form-control): エラーメッセージ表示によるレイアウトシフト発生を防ぐ
diff --git a/packages/wiz-ui-react/src/components/custom/form/components/form-control.tsx b/packages/wiz-ui-react/src/components/custom/form/components/form-control.tsx
@@ -1,4 +1,4 @@
-import { ComponentName } from "@wizleap-inc/wiz-ui-constants";
+import { ComponentName, THEME } from "@wizleap-inc/wiz-ui-constants";
 import { FC, ReactNode, useContext } from "react";
 
 import { WizHStack, WizTag, WizText, WizVStack } from "@/components";
@@ -47,13 +47,13 @@ const FormControl: FC<Props> = ({
           </WizHStack>
           <WizVStack>{children}</WizVStack>
         </WizHStack>
-        {error && (
+        <WizHStack height={THEME.fontSize.sm}>
           <div style={{ marginInlineStart: labelWidth }}>
             <WizText fontSize="xs2" lineHeight="sm" color="red.800">
               {error}
             </WizText>
           </div>
-        )}
+        </WizHStack>
       </WizVStack>
     </FormControlContext.Provider>
   );