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

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",

packages/client/manifest.json

@@ -2350,6 +2350,16 @@
             "value": "above"
           }
         ]
+      },
+      {
+        "type": "section",
+        "label": "Type",
+        "key": "type",
+        "defaultValue": "oneColumn",
+        "dependsOn": {
+          "setting": "labelPosition",
+          "value": "above"
+        }
       }
     ]
   },

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;
   }

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>