From 02fece40ef58fd26dd18fa1f230dd38706e30317 Mon Sep 17 00:00:00 2001
From: Abhishek Verma <abhishek.verma@gojek.com>
Date: Fri, 2 Feb 2024 16:30:25 +0530
Subject: [PATCH] Fix form & tabs UI issues (#26)

* fix(form): remove form wrapper

* fix(tabs): overflow issue
---
 packages/apsara-ui/src/FormBuilder/Form.tsx   | 24 +++++++++----------
 .../src/FormBuilder/FormBuilder.styles.tsx    | 23 +++++++++---------
 packages/apsara-ui/src/Tabs/Tabs.styles.tsx   |  3 ++-
 3 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/apsara-ui/src/FormBuilder/Form.tsx b/packages/apsara-ui/src/FormBuilder/Form.tsx
index 46082398..751c8120 100644
--- a/packages/apsara-ui/src/FormBuilder/Form.tsx
+++ b/packages/apsara-ui/src/FormBuilder/Form.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useMemo } from "react";
 import classNames from "classnames";
-import FieldForm, { List } from "rc-field-form";
+import { List } from "rc-field-form";
 import { FormProps as RcFormProps } from "rc-field-form/lib/Form";
 import { ValidateErrorEntity } from "rc-field-form/lib/interface";
 import { ColProps } from "./grid/col";
@@ -9,7 +9,7 @@ import { FormContext, FormContextProps } from "./context";
 import { FormLabelAlign } from "./interface";
 import useForm, { FormInstance } from "./hooks/useForm";
 import SizeContext, { SizeType, SizeContextProvider } from "./SizeContext";
-import { FormWrapper } from "./FormBuilder.styles";
+import { StyledFieldForm } from "./FormBuilder.styles";
 
 export type RequiredMark = boolean | "optional";
 export type FormLayout = "horizontal" | "inline" | "vertical";
@@ -95,17 +95,15 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
     return (
         <SizeContextProvider size={size}>
             <FormContext.Provider value={formContextValue}>
-                <FormWrapper>
-                    <FieldForm
-                        id={name}
-                        {...restFormProps}
-                        name={name}
-                        onFinishFailed={onInternalFinishFailed}
-                        form={wrapForm}
-                        className={formClassName}
-                        validateMessages={validateMessages}
-                    />
-                </FormWrapper>
+                <StyledFieldForm
+                    id={name}
+                    {...restFormProps}
+                    name={name}
+                    onFinishFailed={onInternalFinishFailed}
+                    form={wrapForm}
+                    className={formClassName}
+                    validateMessages={validateMessages}
+                />
             </FormContext.Provider>
         </SizeContextProvider>
     );
diff --git a/packages/apsara-ui/src/FormBuilder/FormBuilder.styles.tsx b/packages/apsara-ui/src/FormBuilder/FormBuilder.styles.tsx
index 125b2c9e..404a9572 100644
--- a/packages/apsara-ui/src/FormBuilder/FormBuilder.styles.tsx
+++ b/packages/apsara-ui/src/FormBuilder/FormBuilder.styles.tsx
@@ -1,4 +1,5 @@
 import styled, { keyframes } from "styled-components";
+import FieldForm from "rc-field-form";
 
 const explainShowHelpIn = keyframes`
 0% {
@@ -17,8 +18,8 @@ to {
 }
 `;
 
-export const FormWrapper = styled.div`
-.custom-form-inline {
+export const StyledFieldForm: typeof FieldForm = styled(FieldForm)`
+&.custom-form-inline {
 	display: flex;
 	flex-wrap: wrap;
 	.custom-form-item {
@@ -46,7 +47,7 @@ export const FormWrapper = styled.div`
 		margin-bottom: 24px;
 	}
 }
-.custom-form-horizontal {
+&.custom-form-horizontal {
 	.custom-form-item-label {
 		flex-grow: 0;
 	}
@@ -71,7 +72,7 @@ export const FormWrapper = styled.div`
 		}
 	}
 }
-.custom-form-vertical {
+&.custom-form-vertical {
 	.custom-form-item {
 		flex-direction: column;
 		.custom-form-item-control {
@@ -93,7 +94,7 @@ export const FormWrapper = styled.div`
 		text-align: left;
 	}
 }
-.custom-form-rtl.custom-form-vertical {
+&.custom-form-rtl.custom-form-vertical {
 	.custom-form-item-label {
 		text-align: right;
 	}
@@ -114,7 +115,7 @@ export const FormWrapper = styled.div`
 		color: #ff4d4f;
 	}
 }
-.custom-form {
+&.custom-form {
 	box-sizing: border-box;
 	margin: 0;
 	padding: 0;
@@ -187,7 +188,7 @@ export const FormWrapper = styled.div`
 		padding-right: 8px;
 	}
 }
-.custom-form-small {
+&.custom-form-small {
 	.custom-form-item-label {
 		>label {
 			height: 24px;
@@ -197,7 +198,7 @@ export const FormWrapper = styled.div`
 		min-height: 24px;
 	}
 }
-.custom-form-large {
+&.custom-form-large {
 	.custom-form-item-label {
 		>label {
 			height: 32px;
@@ -295,7 +296,7 @@ export const FormWrapper = styled.div`
 	line-height: 1.3215em;
 	white-space: unset;
 }
-.custom-form-hide-required-mark {
+&.custom-form-hide-required-mark {
 	.custom-form-item-label {
 		>label.custom-form-item-required {
 			&:not(.custom-form-item-required-mark-optional) {
@@ -409,7 +410,7 @@ export const FormWrapper = styled.div`
 	overflow: hidden;
 	transition: height 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
 }
-.custom-form-rtl {
+&.custom-form-rtl {
 	direction: rtl;
 	.custom-form-item-label {
 		text-align: left;
@@ -454,7 +455,7 @@ export const FormWrapper = styled.div`
 		}
 	}
 }
-.custom-form-rtl.custom-form-inline {
+&.custom-form-rtl.custom-form-inline {
 	.custom-form-item {
 		margin-right: 0;
 		margin-left: 16px;
diff --git a/packages/apsara-ui/src/Tabs/Tabs.styles.tsx b/packages/apsara-ui/src/Tabs/Tabs.styles.tsx
index 5d2fe327..f2109c32 100644
--- a/packages/apsara-ui/src/Tabs/Tabs.styles.tsx
+++ b/packages/apsara-ui/src/Tabs/Tabs.styles.tsx
@@ -9,7 +9,8 @@ const StyledTabs = styled(TabsPrimitive.Root)`
     height: 100%;
     overflow-y: auto;
     [role="tabpanel"] {
-        height: 100%
+        overflow-y: auto;
+        height: 100%;
     }
 `;