Fix instance name on layouts

packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte

@@ -87,14 +87,16 @@
 </script>
 
 <DetailSummary name="General" collapsible={false}>
-  <PropertyControl
+  {#if !componentInstance._component.endsWith("/layout")}
-    bindable={false}
+    <PropertyControl
-    control={Input}
+      bindable={false}
-    label="Name"
+      control={Input}
-    key="_instanceName"
+      label="Name"
-    value={componentInstance._instanceName}
+      key="_instanceName"
-    onChange={val => updateProp("_instanceName", val)}
+      value={componentInstance._instanceName}
-  />
+      onChange={val => updateProp("_instanceName", val)}
+    />
+  {/if}
   {#if settings && settings.length > 0}
     {#each settings as setting (`${componentInstance._id}-${setting.key}`)}
       {#if canRenderControl(setting)}
@@ -114,8 +116,6 @@
         />
       {/if}
     {/each}
-  {:else}
-    <div class="text">This component doesn't have any additional settings.</div>
   {/if}
   {#if componentDefinition?.info}
     <div class="text">

packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte

@@ -1,5 +1,5 @@
 <script>
-  import PropertyGroup from "./PropertyControls/PropertyGroup.svelte"
+  import StyleSection from "./StyleSection.svelte"
   import * as ComponentStyles from "./componentStyles"
 
   export let componentDefinition
@@ -23,10 +23,10 @@
 
 {#if styles?.length > 0}
   {#each styles as style}
-    <PropertyGroup
+    <StyleSection
       {style}
       name={style.label}
-      inline={style.inline}
+      columns={style.columns}
       properties={style.settings}
       {componentInstance}
     />

packages/builder/src/components/design/PropertiesPanel/StyleSection.svelte

@@ -1,10 +1,10 @@
 <script>
-  import PropertyControl from "./PropertyControl.svelte"
+  import PropertyControl from "./PropertyControls/PropertyControl.svelte"
   import { DetailSummary } from "@budibase/bbui"
   import { store } from "builderStore"
 
   export let name
-  export let inline = false
+  export let columns
   export let properties
   export let componentInstance
 
@@ -25,31 +25,27 @@
 </script>
 
 <DetailSummary collapsible={false} name={`${name}${changed ? " *" : ""}`}>
-  <div class="group-content" class:inline>
+  <div class="group-content" style="grid-template-columns: {columns || '1fr'}">
     {#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
-      <PropertyControl
+      <div style="grid-column: {prop.column || 'auto'}">
-        bindable={false}
+        <PropertyControl
-        label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
+          bindable={false}
-        control={prop.control}
+          label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
-        key={prop.key}
+          control={prop.control}
-        value={style[prop.key]}
+          key={prop.key}
-        onChange={val => store.actions.components.updateStyle(prop.key, val)}
+          value={style[prop.key]}
-        props={getControlProps(prop)}
+          onChange={val => store.actions.components.updateStyle(prop.key, val)}
-      />
+          props={getControlProps(prop)}
+        />
+      </div>
     {/each}
   </div>
 </DetailSummary>
 
 <style>
   .group-content {
-    display: flex;
+    display: grid;
-    flex-direction: column;
-    justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-l);
   }
-  .inline {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
 </style>

packages/builder/src/components/design/PropertiesPanel/componentStyles.js

@@ -83,7 +83,7 @@ export const layout = [
 
 export const margin = {
   label: "Margin",
-  inline: true,
+  columns: "1fr 1fr",
   settings: [
     {
       label: "Top",
@@ -170,7 +170,7 @@ export const margin = {
 
 export const padding = {
   label: "Padding",
-  inline: true,
+  columns: "1fr 1fr",
   settings: [
     {
       label: "Top",
@@ -257,19 +257,19 @@ export const padding = {
 
 export const size = {
   label: "Size",
-  inline: true,
+  columns: "1fr 1fr",
   settings: [
     {
       label: "Width",
       key: "width",
       control: Input,
-      placeholder: "px",
+      placeholder: "Auto",
     },
     {
       label: "Height",
       key: "height",
       control: Input,
-      placeholder: "px",
+      placeholder: "Auto",
     },
   ],
 }
@@ -386,6 +386,8 @@ export const typography = [
 
 export const background = {
   label: "Background",
+  inline: true,
+  columns: "auto 1fr",
   settings: [
     {
       label: "Color",
@@ -474,23 +476,13 @@ export const background = {
 
 export const border = {
   label: "Border",
+  columns: "auto 1fr",
   settings: [
     {
       label: "Color",
       key: "border-color",
       control: ColorPicker,
     },
-    {
-      label: "Radius",
-      key: "border-radius",
-      control: Select,
-      options: [
-        { label: "Small", value: "0.25rem" },
-        { label: "Medium", value: "0.5rem" },
-        { label: "Large", value: "1rem" },
-        { label: "Round", value: "100%" },
-      ],
-    },
     {
       label: "Width",
       key: "border-width",
@@ -501,10 +493,23 @@ export const border = {
         { label: "Large", value: "4px" },
       ],
     },
+    {
+      label: "Radius",
+      key: "border-radius",
+      control: Select,
+      column: "1 / 3",
+      options: [
+        { label: "Small", value: "0.25rem" },
+        { label: "Medium", value: "0.5rem" },
+        { label: "Large", value: "1rem" },
+        { label: "Round", value: "100%" },
+      ],
+    },
     {
       label: "Shadow",
       key: "box-shadow",
       control: Select,
+      column: "1 / 3",
       options: [
         {
           label: "Small",

packages/server/src/api/controllers/layout.js

@@ -14,6 +14,7 @@ exports.save = async function (ctx) {
       ...EMPTY_LAYOUT,
       ...layout,
     }
+    layout.props._instanceName = layout.name
   }
 
   layout._id = layout._id || generateLayoutID()

packages/server/src/constants/layouts.js

@@ -57,6 +57,7 @@ const BASE_LAYOUTS = [
     name: "Navigation Layout",
     props: {
       _id: "4f569166-a4f3-47ea-a09e-6d218c75586f",
+      _instanceName: "Navigation Layout",
       _component: "@budibase/standard-components/layout",
       _children: [
         {
@@ -102,6 +103,7 @@ const BASE_LAYOUTS = [
     name: "Empty Layout",
     props: {
       _id: "3723ffa1-f9e0-4c05-8013-98195c788ed6",
+      _instanceName: "Empty Layout",
       _component: "@budibase/standard-components/layout",
       _children: [
         {

packages/standard-components/manifest.json

@@ -5,7 +5,7 @@
     "icon": "Sandbox",
     "hasChildren": true,
     "styleable": true,
-    "illegalChildren": [],
+    "styles": ["padding", "background"],
     "settings": [
       {
         "type": "text",
@@ -62,6 +62,7 @@
     "icon": "Sandbox",
     "hasChildren": true,
     "showSettingsBar": true,
+    "styles": ["padding", "size", "background", "border", "shadow"],
     "settings": [
       {
         "type": "select",
@@ -171,8 +172,7 @@
         ],
         "defaultValue": "shrink"
       }
-    ],
+    ]
-    "styles": ["padding", "size", "background", "border", "shadow"]
   },
   "section": {
     "name": "Section",
@@ -679,7 +679,6 @@
     "name": "Bar Chart",
     "description": "Bar chart",
     "icon": "GraphBarVertical",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -780,7 +779,6 @@
     "name": "Line Chart",
     "description": "Line chart",
     "icon": "GraphTrend",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -882,7 +880,6 @@
     "name": "Area Chart",
     "description": "Line chart",
     "icon": "GraphAreaStacked",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -996,7 +993,6 @@
     "name": "Pie Chart",
     "description": "Pie chart",
     "icon": "GraphPie",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1074,7 +1070,6 @@
     "name": "Donut Chart",
     "description": "Donut chart",
     "icon": "GraphDonut",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1152,7 +1147,6 @@
     "name": "Candlestick Chart",
     "description": "Candlestick chart",
     "icon": "GraphBarVerticalStacked",
-    "styleable": true,
     "illegalChildren": ["section"],
     "settings": [
       {
@@ -1665,7 +1659,6 @@
   "table": {
     "name": "Table",
     "icon": "Table",
-    "styleable": true,
     "illegalChildren": ["section"],
     "hasChildren": true,
     "showEmptyState": false,
@@ -1721,11 +1714,6 @@
           }
         ]
       },
-      {
-        "type": "boolean",
-        "label": "Quiet",
-        "key": "quiet"
-      },
       {
         "type": "multifield",
         "label": "Columns",
@@ -1735,7 +1723,12 @@
       },
       {
         "type": "boolean",
-        "label": "Auto Cols.",
+        "label": "Quiet",
+        "key": "quiet"
+      },
+      {
+        "type": "boolean",
+        "label": "Auto Columns",
         "key": "showAutoColumns",
         "defaultValue": false
       }