From 74b3b3dcc393fb37ebefff681907b99b4b1541b0 Mon Sep 17 00:00:00 2001
From: melohagan <101575380+melohagan@users.noreply.github.com>
Date: Tue, 4 Jul 2023 10:46:53 +0100
Subject: [PATCH] Add section setting to field group (#11110)

* Add section setting to field group

* Left aligned fix for oneColumn only

* Only use section for above label position
---
 .../design/settings/controls/SectionSelect.svelte      |  4 ++++
 packages/client/manifest.json                          | 10 ++++++++++
 packages/client/src/components/app/Section.svelte      |  4 ++++
 .../client/src/components/app/forms/FieldGroup.svelte  | 10 +++++++++-
 4 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/components/design/settings/controls/SectionSelect.svelte b/packages/builder/src/components/design/settings/controls/SectionSelect.svelte
index 6b3cf72016..4394f47cef 100644
--- a/packages/builder/src/components/design/settings/controls/SectionSelect.svelte
+++ b/packages/builder/src/components/design/settings/controls/SectionSelect.svelte
@@ -17,6 +17,10 @@
       name: "Sidebar with Main",
       icon: "ColumnTwoC",
     },
+    oneColumn: {
+      name: "One column",
+      icon: "LoupeView",
+    },
     twoColumns: {
       name: "Two columns",
       icon: "ColumnTwoA",
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index 649038c20e..212042d3c0 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -2350,6 +2350,16 @@
             "value": "above"
           }
         ]
+      },
+      {
+        "type": "section",
+        "label": "Type",
+        "key": "type",
+        "defaultValue": "oneColumn",
+        "dependsOn": {
+          "setting": "labelPosition",
+          "value": "above"
+        }
       }
     ]
   },
diff --git a/packages/client/src/components/app/Section.svelte b/packages/client/src/components/app/Section.svelte
index 5bd3364b94..11f0f2978f 100644
--- a/packages/client/src/components/app/Section.svelte
+++ b/packages/client/src/components/app/Section.svelte
@@ -11,6 +11,7 @@
   let layoutMap = {
     mainSidebar: 2,
     sidebarMain: 2,
+    oneColumn: 1,
     twoColumns: 2,
     threeColumns: 3,
   }
@@ -54,6 +55,9 @@
   .sidebarMain {
     grid-template-columns: 1fr 3fr;
   }
+  .oneColumn {
+    grid-template-columns: 1fr;
+  }
   .twoColumns {
     grid-template-columns: 1fr 1fr;
   }
diff --git a/packages/client/src/components/app/forms/FieldGroup.svelte b/packages/client/src/components/app/forms/FieldGroup.svelte
index a2fbe7d103..9b495338e1 100644
--- a/packages/client/src/components/app/forms/FieldGroup.svelte
+++ b/packages/client/src/components/app/forms/FieldGroup.svelte
@@ -1,7 +1,9 @@
 <script>
   import { getContext, setContext } from "svelte"
+  import Section from "../Section.svelte"
 
   export let labelPosition = "above"
+  export let type = "oneColumn"
 
   const { styleable } = getContext("sdk")
   const component = getContext("component")
@@ -13,7 +15,13 @@
     class="spectrum-Form"
     class:spectrum-Form--labelsAbove={labelPosition === "above"}
   >
-    <slot />
+    {#if labelPosition === "above" && type !== "oneColumn"}
+      <Section {type}>
+        <slot />
+      </Section>
+    {:else}
+      <slot />
+    {/if}
   </div>
 </div>