From afaa122b7eba4b2f83b83bd5bc52fa843291ac3b Mon Sep 17 00:00:00 2001
From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com>
Date: Wed, 31 Jul 2024 14:05:14 +0530
Subject: [PATCH 1/2] feat: Added action form section component

---
 .../pages/Editor/ActionForm/Section/index.tsx | 20 +++++++++++++++++++
 .../ActionForm/Section/styles.module.css      | 17 ++++++++++++++++
 .../src/pages/Editor/ActionForm/index.ts      |  1 +
 3 files changed, 38 insertions(+)
 create mode 100644 app/client/src/pages/Editor/ActionForm/Section/index.tsx
 create mode 100644 app/client/src/pages/Editor/ActionForm/Section/styles.module.css
 create mode 100644 app/client/src/pages/Editor/ActionForm/index.ts

diff --git a/app/client/src/pages/Editor/ActionForm/Section/index.tsx b/app/client/src/pages/Editor/ActionForm/Section/index.tsx
new file mode 100644
index 000000000000..27c4982f1847
--- /dev/null
+++ b/app/client/src/pages/Editor/ActionForm/Section/index.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import styles from "./styles.module.css";
+
+interface SectionProps {
+  children?: React.ReactNode;
+  isStandalone?: boolean;
+}
+
+const Section: React.FC<SectionProps> = ({
+  children,
+  isStandalone = false,
+}) => {
+  return (
+    <div className={styles.section} data-standalone={isStandalone.toString()}>
+      {children}
+    </div>
+  );
+};
+
+export { Section };
diff --git a/app/client/src/pages/Editor/ActionForm/Section/styles.module.css b/app/client/src/pages/Editor/ActionForm/Section/styles.module.css
new file mode 100644
index 000000000000..d47a53d232a1
--- /dev/null
+++ b/app/client/src/pages/Editor/ActionForm/Section/styles.module.css
@@ -0,0 +1,17 @@
+.section {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 800px;
+  align-items: center;
+  justify-content: center;
+  container: uqi-section / inline-size;
+}
+
+.section[data-standalone="false"] {
+  padding-block: var(--ads-v2-spaces-6);
+}
+
+.section[data-standalone="false"]:not(:last-child) {
+  border-bottom: 1px solid var(--ads-v2-color-border);
+}
diff --git a/app/client/src/pages/Editor/ActionForm/index.ts b/app/client/src/pages/Editor/ActionForm/index.ts
new file mode 100644
index 000000000000..8d851af279b1
--- /dev/null
+++ b/app/client/src/pages/Editor/ActionForm/index.ts
@@ -0,0 +1 @@
+export * from "./Section";

From 95175f3dfff8659a42b453e6b205e2a1fd4d91b1 Mon Sep 17 00:00:00 2001
From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com>
Date: Wed, 31 Jul 2024 14:09:30 +0530
Subject: [PATCH 2/2] fix: updated gap

---
 app/client/src/pages/Editor/ActionForm/Section/styles.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/client/src/pages/Editor/ActionForm/Section/styles.module.css b/app/client/src/pages/Editor/ActionForm/Section/styles.module.css
index d47a53d232a1..7f80f5836e16 100644
--- a/app/client/src/pages/Editor/ActionForm/Section/styles.module.css
+++ b/app/client/src/pages/Editor/ActionForm/Section/styles.module.css
@@ -1,6 +1,7 @@
 .section {
   display: flex;
   flex-direction: column;
+  gap: var(--ads-v2-spaces-4);
   width: 100%;
   max-width: 800px;
   align-items: center;