change name to section, add illegalChildren prop to manifest

packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte

@@ -1,16 +1,18 @@
 <script>
-  import {
-    ActionMenu,
-    ActionGroup,
-    ActionButton,
-    MenuItem,
-    Icon,
-  } from "@budibase/bbui"
-  import { store, currentAssetName } from "builderStore"
+  import { ActionMenu, ActionButton, MenuItem, Icon } from "@budibase/bbui"
+  import { store, currentAssetName, selectedComponent } from "builderStore"
   import structure from "./componentStructure.json"
 
   $: enrichedStructure = enrichStructure(structure, $store.components)
 
+  const isChildAllowed = ({ name }, selectedComponent) => {
+    const currentComponent = store.actions.components.getDefinition(
+      selectedComponent._component
+    )
+
+    return currentComponent?.illegalChildren?.includes(name)
+  }
+
   const enrichStructure = (structure, definitions) => {
     let enrichedStructure = []
     structure.forEach(item => {
@@ -45,6 +47,7 @@
     <ActionMenu disabled={!item.isCategory}>
       <ActionButton
         icon={item.icon}
+        disabled={isChildAllowed(item, $selectedComponent)}
         quiet
         size="S"
         slot="control"

packages/builder/src/components/design/AppPreview/componentStructure.json

@@ -1,6 +1,6 @@
 [
+  "section",
   "container",
-  "layout",
   "dataprovider",
   "table",
   "repeater",

packages/standard-components/manifest.json

@@ -6,15 +6,17 @@
     "hasChildren": true,
     "styleable": true,
     "transitionable": true,
+    "illegalChildren": ["Section"],
     "settings": []
   },
-  "layout": {
-    "name": "Layout",
-    "description": "Use this component to create different column layouts",
+  "section": {
+    "name": "Section",
+    "description": "Add a section to your application",
     "icon": "ColumnTwoB",
     "hasChildren": true,
     "styleable": true,
     "transitionable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "modal",
@@ -35,6 +37,7 @@
     "name": "Button",
     "description": "A basic html button that is ready for styling",
     "icon": "Button",
+    "illegalChildren": ["Section"],
     "styleable": true,
     "settings": [
       {
@@ -59,6 +62,7 @@
     "description": "A configurable data list that attaches to your backend tables.",
     "icon": "ViewList",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "hasChildren": true,
     "settings": [
       {
@@ -87,6 +91,7 @@
     "icon": "TaskList",
     "description": "A basic card component that can contain content and actions.",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "text",
@@ -116,6 +121,7 @@
     "description": "A basic card component that can contain content and actions.",
     "icon": "ViewColumn",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "text",
@@ -176,6 +182,7 @@
     "description": "A component for displaying paragraph text.",
     "icon": "TextParagraph",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "text",
@@ -189,6 +196,7 @@
     "icon": "TextBold",
     "description": "A component for displaying heading text",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "text",
@@ -209,6 +217,7 @@
     "description": "A basic component for displaying images",
     "icon": "Image",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "text",
@@ -222,6 +231,7 @@
     "description": "A background image",
     "icon": "Images",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "text",
@@ -279,6 +289,7 @@
     "description": "A basic component for displaying icons",
     "icon": "Bell",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "icon",
@@ -326,6 +337,7 @@
     "description": "A component for handling the navigation within your app.",
     "icon": "BreadcrumbNavigation",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "hasChildren": true,
     "settings": [
       {
@@ -346,6 +358,7 @@
     "description": "A basic link component for internal and external links",
     "icon": "Link",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "text",
@@ -375,6 +388,7 @@
     "description": "A basic card component that can contain content and actions.",
     "icon": "ViewRow",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "text",
@@ -447,6 +461,7 @@
     "description": "A card component for displaying numbers.",
     "icon": "Card",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "text",
@@ -473,6 +488,7 @@
     "icon": "Code",
     "description": "Embed content from 3rd party sources",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "text",
@@ -486,6 +502,7 @@
     "description": "Bar chart",
     "icon": "GraphBarVertical",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "text",
@@ -586,6 +603,7 @@
     "description": "Line chart",
     "icon": "GraphTrend",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "text",
@@ -687,6 +705,7 @@
     "description": "Line chart",
     "icon": "GraphAreaStacked",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "text",
@@ -800,6 +819,7 @@
     "description": "Pie chart",
     "icon": "GraphPie",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "text",
@@ -877,6 +897,7 @@
     "description": "Donut chart",
     "icon": "GraphDonut",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "text",
@@ -954,6 +975,7 @@
     "description": "Candlestick chart",
     "icon": "GraphBarVerticalStacked",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "text",
@@ -1036,6 +1058,7 @@
     "icon": "Form",
     "styleable": true,
     "hasChildren": true,
+    "illegalChildren": ["Section"],
     "actions": [
       "ValidateForm"
     ],
@@ -1100,6 +1123,7 @@
     "name": "Field Group",
     "icon": "Group",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "hasChildren": true,
     "settings": [
       {
@@ -1128,6 +1152,7 @@
     "name": "Text Field",
     "icon": "Text",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "field/string",
@@ -1156,6 +1181,7 @@
     "name": "Number Field",
     "icon": "123",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "field/number",
@@ -1184,6 +1210,7 @@
     "name": "Password Field",
     "icon": "LockClosed",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "field/string",
@@ -1212,6 +1239,7 @@
     "name": "Options Picker",
     "icon": "ViewList",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "field/options",
@@ -1241,6 +1269,7 @@
     "name": "Checkbox",
     "icon": "Checkmark",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "field/boolean",
@@ -1269,6 +1298,7 @@
     "name": "Rich Text",
     "icon": "TextParagraph",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "field/longform",
@@ -1298,6 +1328,7 @@
     "name": "Date Picker",
     "icon": "DateInput",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "field/datetime",
@@ -1332,6 +1363,7 @@
     "name": "Attachment",
     "icon": "Attach",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "field/attachment",
@@ -1355,6 +1387,7 @@
     "name": "Relationship Picker",
     "icon": "TaskList",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "settings": [
       {
         "type": "field/link",
@@ -1384,6 +1417,7 @@
     "info": "Pagination is only available for data stored in internal tables.",
     "icon": "Data",
     "styleable": false,
+    "illegalChildren": ["Section"],
     "hasChildren": true,
     "settings": [
       {
@@ -1447,6 +1481,7 @@
     "name": "Table",
     "icon": "Table",
     "styleable": true,
+    "illegalChildren": ["Section"],
     "hasChildren": true,
     "settings": [
       {

packages/standard-components/src/Layout.svelte → packages/standard-components/src/Section.svelte

@@ -30,6 +30,7 @@
   bind:clientWidth={containerWidth}
   in:transition={{ type: $component.transition }}
   class="{type} columns-{columnsDependingOnSize}"
+  use:styleable={$component.styles}
 >
   <slot />
   {#if layoutMap[type] - $component.children > 0}
@@ -45,10 +46,10 @@
     grid-gap: 16px;
   }
   .mainSidebar {
-    grid-template-columns: 2fr 1fr;
+    grid-template-columns: 3fr 1fr;
   }
   .sidebarMain {
-    grid-template-columns: 1fr 2fr;
+    grid-template-columns: 1fr 3fr;
   }
   .twoColumns {
     grid-template-columns: 1fr 1fr;

packages/standard-components/src/index.js

@@ -11,7 +11,7 @@ import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-rollup.js"
 loadSpectrumIcons()
 
 export { default as container } from "./Container.svelte"
-export { default as layout } from "./Layout.svelte"
+export { default as section } from "./Section.svelte"
 export { default as dataprovider } from "./DataProvider.svelte"
 export { default as screenslot } from "./ScreenSlot.svelte"
 export { default as button } from "./Button.svelte"