Update autoscreens to have new container props

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

@@ -6,9 +6,5 @@ export default {
 }
 
 const createScreen = () => {
-  return new Screen()
+  return new Screen().instanceName("New Screen").json()
-    .mainType("div")
-    .component("@budibase/standard-components/container")
-    .instanceName("New Screen")
-    .json()
 }

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

@@ -28,7 +28,6 @@ function generateTitleContainer(table, formId) {
 
 const createScreen = table => {
   const screen = new Screen()
-    .component("@budibase/standard-components/container")
     .instanceName(`${table.name} - New`)
     .route(newRowUrl(table))
 

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

@@ -149,7 +149,6 @@ const createScreen = table => {
   provider.addChild(repeater)
 
   return new Screen()
-    .component("@budibase/standard-components/container")
     .instanceName(`${table.name} - Detail`)
     .route(rowDetailUrl(table))
     .addChild(provider)

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

@@ -56,14 +56,15 @@ function generateTitleContainer(table) {
     .text(table.name)
 
   return new Component("@budibase/standard-components/container")
-    .type("div")
     .normalStyle({
-      display: "flex",
-      "flex-direction": "row",
-      "justify-content": "space-between",
-      "align-items": "center",
       "margin-bottom": "32px",
     })
+    .customProps({
+      direction: "row",
+      hAlign: "stretch",
+      vAlign: "middle",
+      size: "shrink",
+    })
     .instanceName("Title Container")
     .addChild(heading)
     .addChild(newButton)
@@ -137,13 +138,17 @@ const createScreen = table => {
       "padding-left": "48px",
       "margin-bottom": "20px",
     })
-    .type("div")
+    .customProps({
+      direction: "column",
+      hAlign: "stretch",
+      vAlign: "top",
+      size: "shrink",
+    })
     .instanceName("Container")
     .addChild(generateTitleContainer(table))
     .addChild(provider)
 
   return new Screen()
-    .component("@budibase/standard-components/container")
     .route(rowListUrl(table))
     .instanceName(`${table.name} - List`)
     .addChild(mainContainer)

packages/builder/src/builderStore/store/screenTemplates/utils/Screen.js

@@ -8,7 +8,7 @@ export class Screen extends BaseStructure {
       layoutId: "layout_private_master",
       props: {
         _id: uuid(),
-        _component: "",
+        _component: "@budibase/standard-components/container",
         _styles: {
           normal: {},
           hover: {},
@@ -17,6 +17,10 @@ export class Screen extends BaseStructure {
         },
         _children: [],
         _instanceName: "",
+        direction: "column",
+        hAlign: "stretch",
+        vAlign: "top",
+        size: "grow",
       },
       routing: {
         route: "",
@@ -41,11 +45,6 @@ export class Screen extends BaseStructure {
     return this
   }
 
-  mainType(type) {
-    this._json.type = type
-    return this
-  }
-
   route(route) {
     this._json.routing.route = route
     return this

packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js

@@ -35,7 +35,6 @@ export function makeLinkComponent(tableName) {
 
 export function makeMainForm() {
   return new Component("@budibase/standard-components/form")
-    .type("div")
     .normalStyle({
       width: "700px",
       padding: "0px",
@@ -79,11 +78,16 @@ export function makeBreadcrumbContainer(tableName, text, capitalise = false) {
     .instanceName("Identifier")
 
   return new Component("@budibase/standard-components/container")
-    .type("div")
     .normalStyle({
       "font-size": "14px",
       color: "#757575",
     })
+    .customProps({
+      direction: "row",
+      hAlign: "left",
+      vAlign: "middle",
+      size: "shrink",
+    })
     .instanceName("Breadcrumbs")
     .addChild(link)
     .addChild(arrowText)
@@ -149,15 +153,16 @@ export function makeTitleContainer(title) {
     .text(title)
 
   return new Component("@budibase/standard-components/container")
-    .type("div")
     .normalStyle({
-      display: "flex",
-      "flex-direction": "row",
-      "justify-content": "space-between",
-      "align-items": "center",
       "margin-top": "32px",
       "margin-bottom": "32px",
     })
+    .customProps({
+      direction: "row",
+      hAlign: "stretch",
+      vAlign: "middle",
+      size: "shrink",
+    })
     .instanceName("Title Container")
     .addChild(heading)
 }

packages/standard-components/manifest.json

@@ -39,8 +39,8 @@
             "barIcon": "AlignLeft"
           },
           {
-            "label": "Middle",
+            "label": "Center",
-            "value": "middle",
+            "value": "center",
             "barIcon": "AlignCenter"
           },
           {

packages/standard-components/src/Container.svelte

@@ -56,7 +56,7 @@
   .direction-column.vAlign-top {
     justify-content: flex-start;
   }
-  .direction-row.hAlign-middle,
+  .direction-row.hAlign-center,
   .direction-column.vAlign-middle {
     justify-content: center;
   }
@@ -74,7 +74,7 @@
     align-items: flex-start;
   }
   .direction-row.vAlign-middle,
-  .direction-column.hAlign-middle {
+  .direction-column.hAlign-center {
     align-items: center;
   }
   .direction-row.vAlign-bottom,