Updates to naming conventions

packages/builder/src/components/userInterface/DesignView.svelte

@@ -1,17 +1,19 @@
 <script>
   import PropertyGroup from "./PropertyGroup.svelte"
+
   export let panelDefinition = {}
   export let componentInstance = {}
   export let componentDefinition = {}
-  const getProperties = prop => panelDefinition.props[prop]
+  const getProperties = name => panelDefinition.properties[name]
 
-  $: props = !!panelDefinition.props && Object.keys(panelDefinition.props)
+  $: propertyGroupNames =
+    !!panelDefinition.properties && Object.keys(panelDefinition.properties)
 </script>
 
-{#each props as prop}
+{#each propertyGroupNames as groupName}
   <PropertyGroup
-    title={prop}
-    content={getProperties(prop)}
+    name={groupName}
+    properties={getProperties(groupName)}
     {componentDefinition}
     {componentInstance} />
 {/each}

packages/builder/src/components/userInterface/PropertyGroup.svelte

@@ -1,6 +1,6 @@
 <script>
-  export let title = ""
-  export let content = {}
+  export let name = ""
+  export let properties = {}
   export let componentInstance = {}
   export let componentDefinition = {}
 
@@ -8,24 +8,24 @@
 
   const propExistsOnComponentDef = prop => prop in componentDefinition.props
 
-  const capitalize = title => title[0].toUpperCase() + title.slice(1)
+  const capitalize = name => name[0].toUpperCase() + name.slice(1)
 
-  $: propertyKeys = Object.keys(content)
+  $: propertyKeys = Object.keys(properties)
   $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
 </script>
 
 <div class="property-group-container" on:click={() => (show = !show)}>
-  <div class="property-group-title">
+  <div class="property-group-name">
     <div class="icon">
       <i class={icon} />
     </div>
-    <div class="title">{capitalize(title)}</div>
+    <div class="name">{capitalize(name)}</div>
   </div>
   <div class="property-panel" class:show>
     <ul>
       {#each propertyKeys as key}
         <!-- {#if propExistsOnComponentDef(key)} -->
-        <li>{content[key].displayName || capitalize(key)}</li>
+        <li>{properties[key].label || capitalize(key)}</li>
         <!-- {/if} -->
       {/each}
     </ul>
@@ -42,7 +42,7 @@
     padding: 5px;
   }
 
-  .property-group-title {
+  .property-group-name {
     cursor: pointer;
     flex: 0 0 20px;
     display: flex;
@@ -54,7 +54,7 @@
     text-align: center;
   }
 
-  .title {
+  .name {
     flex: 1;
     text-align: left;
   }

packages/builder/src/components/userInterface/propertyCategories.js

@@ -1,4 +1,3 @@
-
 /* 
   TODO: all strings types are really inputs and could be typed as such
   TODO: Options types need option items
@@ -6,52 +5,52 @@
 */
 
 export const layout = {
-  flexDirection: { displayName: "Direction", type: "string" },
-  justifyContent: { displayName: "Justify", type: "string" },
-  alignItems: { displayName: "Align", type: "string" },
-  flexWrap: { displayName: "Wrap", type: "options" },
+  flexDirection: { label: "Direction", control: "string" },
+  justifyContent: { label: "Justify", control: "string" },
+  alignItems: { label: "Align", control: "string" },
+  flexWrap: { label: "Wrap", control: "options" },
 }
 
 export const spacing = {
-  padding: { type: "string" },
-  margin: { type: "string" },
+  padding: { control: "string" },
+  margin: { control: "string" },
 }
 
 export const size = {
-  width: { type: "string" },
-  height: { type: "string" },
-  minWidth: { displayName: "Min W", type: "string" },
-  minHeight: { displayName: "Min H", type: "string" },
-  maxWidth: { displayName: "Max W", type: "string" },
-  maxHeight: { displayName: "Max H", type: "string" },
-  overflow: { type: "string" }, //custom
+  width: { control: "string" },
+  height: { control: "string" },
+  minWidth: { label: "Min W", control: "string" },
+  minHeight: { label: "Min H", control: "string" },
+  maxWidth: { label: "Max W", control: "string" },
+  maxHeight: { label: "Max H", control: "string" },
+  overflow: { control: "string" }, //custom
 }
 
 export const position = {
-  position: { type: "options" },
+  position: { control: "options" },
 }
 
 export const typography = {
-  font: { type: "options" },
-  weight: { type: "options" },
-  size: { type: "string" },
-  lineHeight: { displayName: "Line H", type: "string" },
-  color: { type: "colour" },
-  align: { type: "string" }, //custom
-  transform: { type: "string" }, //custom
-  style: { type: "string" }, //custom
+  font: { control: "options" },
+  weight: { control: "options" },
+  size: { control: "string" },
+  lineHeight: { label: "Line H", control: "string" },
+  color: { control: "colour" },
+  align: { control: "string" }, //custom
+  transform: { control: "string" }, //custom
+  style: { control: "string" }, //custom
 }
 
 export const background = {
-  backgroundColor: { displayName: "Background Color", type: "colour" },
-  image: { type: "string" }, //custom
+  backgroundColor: { label: "Background Color", control: "colour" },
+  image: { control: "string" }, //custom
 }
 
 export const border = {
-  radius: { type: "string" },
-  width: { type: "string" }, //custom
-  color: { type: "colour" },
-  style: { type: "options" },
+  radius: { control: "string" },
+  width: { control: "string" }, //custom
+  color: { control: "colour" },
+  style: { control: "options" },
 }
 
 export const effects = {
@@ -61,9 +60,9 @@ export const effects = {
 }
 
 export const transitions = {
-  property: { type: "options" },
-  duration: { type: "string" },
-  ease: { type: "options" },
+  property: { control: "options" },
+  duration: { control: "string" },
+  ease: { control: "options" },
 }
 
 export function excludeProps(props, propsToExclude) {

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -13,7 +13,7 @@ export default {
           icon: 'ri-layout-row-fill',
           commonProps: {},
           children: [],
-          props: { layout, background },
+          properties: { layout, background },
         },
         {
           name: 'Text',
@@ -26,7 +26,7 @@ export default {
               name: 'Headline',
               description: "A component for displaying heading text",
               icon: "ri-heading",
-              props: {
+              properties: {
                 layout,
                 background,
               },
@@ -36,7 +36,7 @@ export default {
               name: 'Paragraph',
               description: "A component for displaying paragraph text.",
               icon: 'ri-paragraph',
-              props: {}
+              properties: {}
             }
           ]
         },
@@ -51,28 +51,28 @@ export default {
               name: "Textfield",
               description: "A textfield component that allows the user to input text.",
               icon: 'ri-edit-box-line',
-              props: {}
+              properties: {}
             },
             {
               _component: "@budibase/standard-components/checkbox",
               name: "Checkbox",
               description: "A selectable checkbox component",
               icon: 'ri-checkbox-line',
-              props: {}
+              properties: {}
             },
             {
               _component: "@budibase/standard-components/radiobutton",
               name: "Radiobutton",
               description: "A selectable radiobutton component",
               icon: 'ri-radio-button-line',
-              props: {}
+              properties: {}
             },
             {
               _component: "@budibase/standard-components/select",
               name: "Select",
               description: "A select component for choosing from different options",
               icon: 'ri-file-list-line',
-              props: {}
+              properties: {}
             }
           ]
         },
@@ -82,14 +82,14 @@ export default {
           description: 'A basic html button that is ready for styling',
           icon: 'ri-radio-button-fill',
           children: [],
-          props: {},
+          properties: {},
         },
         {
           _component: "@budibase/standard-components/icon",
           name: 'Icon',
           description: 'A basic component for displaying icons',
           icon: 'ri-sun-fill',
-          props: {},
+          properties: {},
           children: []
         },
         {
@@ -97,7 +97,7 @@ export default {
           name: 'Link',
           description: 'A basic link component for internal and external links',
           icon: 'ri-link',
-          props: {},
+          properties: {},
           children: []
         }
       ]
@@ -111,14 +111,14 @@ export default {
           name: 'Card',
           description: 'A basic card component that can contain content and actions.',
           icon: 'ri-layout-bottom-line',
-          props: {},
+          properties: {},
           children: []
         },
         {
           name: 'Login',
           description: 'A component that automatically generates a login screen for your app.',
           icon: 'ri-login-box-fill',
-          props: {},
+          properties: {},
           children: []
         },
         {
@@ -126,7 +126,7 @@ export default {
           _component: "@budibase/standard-components/Navigation",
           description: "A component for handling the navigation within your app.",
           icon: "ri-navigation-fill",
-          props: {},
+          properties: {},
           children: []
         }
       ]
@@ -139,14 +139,14 @@ export default {
           name: 'Table',
           description: 'A component that generates a table from your data.',
           icon: 'ri-archive-drawer-fill',
-          props: {},
+          properties: {},
           children: []
         },
         {
           name: 'Form',
           description: 'A component that generates a form from your data.',
           icon: 'ri-file-edit-fill',
-          props: {},
+          properties: {},
           _component: "@budibase/materialdesign-components/Form",
           template: {
             component: "@budibase/materialdesign-components/Form",