Merge pull request #2469 from Budibase/cheeks-fixes

Size options for form and table

packages/builder/src/builderStore/store/screenTemplates/newRowScreen.js

@@ -43,6 +43,7 @@ const createScreen = table => {
         tableId: table._id,
         type: "table",
       },
+      size: "spectrum--medium",
     })
 
   const fieldGroup = new Component("@budibase/standard-components/fieldgroup")

packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js

@@ -101,7 +101,6 @@ const createScreen = table => {
     .instanceName("Form")
     .customProps({
       actionType: "Update",
-      theme: "spectrum--lightest",
       size: "spectrum--medium",
       dataSource: {
         label: table.name,

packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js

@@ -65,6 +65,7 @@ const createScreen = table => {
         tableId: table._id,
         type: "table",
       },
+      size: "spectrum--medium",
       paginate: true,
       limit: 8,
     })

packages/standard-components/manifest.json

@@ -1726,6 +1726,21 @@
           "label": "Custom"
         }
       },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "options": [
+          {
+            "label": "Medium",
+            "value": "spectrum--medium"
+          }, {
+            "label": "Large",
+            "value": "spectrum--large"
+          }
+        ],
+        "defaultValue": "spectrum--medium"
+      },
       {
         "type": "boolean",
         "label": "Disabled",
@@ -2448,6 +2463,22 @@
         "dependsOn": "dataProvider",
         "placeholder": "All columns"
       },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "spectrum--medium",
+        "options": [
+          {
+            "label": "Medium",
+            "value": "spectrum--medium"
+          },
+          {
+            "label": "Large",
+            "value": "spectrum--large"
+          }
+        ]
+      },
       {
         "type": "boolean",
         "label": "Quiet",

packages/standard-components/src/forms/InnerForm.svelte

@@ -7,6 +7,7 @@
   export let dataSource
   export let disabled = false
   export let initialValues
+  export let size
   export let schema
   export let table
 
@@ -270,7 +271,7 @@
 </script>
 
 <Provider {actions} data={dataContext}>
-  <div use:styleable={$component.styles}>
+  <div use:styleable={$component.styles} class={size}>
     <slot />
   </div>
 </Provider>

packages/standard-components/src/table/Table.svelte

@@ -8,6 +8,7 @@
   export let showAutoColumns
   export let rowCount
   export let quiet
+  export let size
 
   const component = getContext("component")
   const { styleable } = getContext("sdk")
@@ -71,7 +72,7 @@
   }
 </script>
 
-<div use:styleable={$component.styles}>
+<div use:styleable={$component.styles} class={size}>
   <Table
     {data}
     {schema}