From 06bbc88b3e37ccef13ea70fb332b8efd9d380cd4 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 4 May 2020 16:07:04 +0100
Subject: [PATCH 1/6] WIP: Changes for property panel

---
 .../userInterface/CategoryTab.svelte          |  43 ++++++
 .../ComponentPropertiesPanel.svelte           | 129 ++++++++----------
 .../ComponentSelectionList.svelte             |  16 +--
 .../userInterface/DesignView.svelte           |  17 +++
 .../userInterface/PropertyGroup.svelte        |  72 ++++++++++
 .../userInterface/propertyCategories.js       |  77 +++++++++++
 .../userInterface/temporaryPanelStructure.js  |  33 +++--
 7 files changed, 289 insertions(+), 98 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/CategoryTab.svelte
 create mode 100644 packages/builder/src/components/userInterface/DesignView.svelte
 create mode 100644 packages/builder/src/components/userInterface/PropertyGroup.svelte
 create mode 100644 packages/builder/src/components/userInterface/propertyCategories.js

diff --git a/packages/builder/src/components/userInterface/CategoryTab.svelte b/packages/builder/src/components/userInterface/CategoryTab.svelte
new file mode 100644
index 0000000000..246c1141e8
--- /dev/null
+++ b/packages/builder/src/components/userInterface/CategoryTab.svelte
@@ -0,0 +1,43 @@
+<script>
+  export let categories = []
+  export let selectedCategory = {}
+  export let onClick = category => {}
+</script>
+
+<ul class="tabs">
+  {#each categories as category}
+    <li
+      on:click={() => onClick(category)}
+      class:active={selectedCategory === category}>
+      {category.name}
+    </li>
+  {/each}
+
+</ul>
+
+<style>
+  .tabs {
+    display: flex;
+    justify-content: center;
+    list-style: none;
+    margin: 0 auto;
+    padding: 0 30px;
+    border-bottom: 1px solid #d8d8d8;
+
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.14px;
+  }
+
+  li {
+    color: #808192;
+    margin: 0 5px;
+    padding: 0 8px;
+    cursor: pointer;
+  }
+
+  .active {
+    border-bottom: solid 3px #0055ff;
+    color: #393c44;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index c4c57c8e04..84480b2d69 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -14,17 +14,33 @@
   import LayoutEditor from "./LayoutEditor.svelte"
   import EventsEditor from "./EventsEditor"
 
-  let current_view = "props"
-  let codeEditor
+  import panelStructure from "./temporaryPanelStructure.js"
+  import CategoryTab from "./CategoryTab.svelte"
+  import DesignView from "./DesignView.svelte"
+
+  let current_view = "design"
+  let codeEditor
+  let flattenedPanel = flattenComponents(panelStructure.categories)
+  let categories = [
+    { name: "Design" },
+    { name: "Settings" },
+    { name: "Actions" },
+  ]
+  let selectedCategory = categories[0]
 
-  $: component = $store.currentComponentInfo
-  $: originalName = component.name
-  $: name =
-    $store.currentView === "detail"
-      ? $store.currentPreviewItem.name
-      : component._component
-  $: description = component.description
   $: components = $store.components
+  $: componentInstance = $store.currentComponentInfo //contains prop values of currently selected component
+  $: componentDefinition = $store.components.find(
+    c => c.name === componentInstance._component
+  )
+
+  $: panelDefinition = flattenedPanel.find(
+    //use for getting controls for each component property
+    c => c._component === componentInstance._component
+  )
+
+  // OLD PROPS =============================================
+
   $: screen_props =
     $store.currentFrontEndType === "page"
       ? getProps($store.currentPreviewItem, ["name", "favicon"])
@@ -33,77 +49,47 @@
   const onPropChanged = store.setComponentProp
   const onStyleChanged = store.setComponentStyle
 
+  //May be able to remove some of the nested components in PropsView, PropsControl and StateBindingControl tree
+
+  function walkProps(component, action) {
+    action(component)
+    if (component.children) {
+      for (let child of component.children) {
+        walkProps(child, action)
+      }
+    }
+  }
+
+  function flattenComponents(props) {
+    const components = []
+    props.forEach(comp =>
+      walkProps(comp, c => {
+        if ("_component" in c) {
+          components.push(c)
+        }
+      })
+    )
+    return components
+  }
+
   function getProps(obj, keys) {
     return keys.map((k, i) => [k, obj[k], obj.props._id + i])
   }
 </script>
 
 <div class="root">
-  <ul>
-    <li>
-      <button
-        class:selected={current_view === 'props'}
-        on:click={() => (current_view = 'props')}>
-        <PaintIcon />
-      </button>
-    </li>
-    <li>
-      <button
-        class:selected={current_view === 'layout'}
-        on:click={() => (current_view = 'layout')}>
-        <LayoutIcon />
-      </button>
-    </li>
-    {#if !component._component.startsWith('##')}
-      <li>
-        <button
-          class:selected={current_view === 'code'}
-          on:click={() => codeEditor && codeEditor.show()}>
-          {#if component._code && component._code.trim().length > 0}
-            <div class="button-indicator">
-              <CircleIndicator />
-            </div>
-          {/if}
-          <TerminalIcon />
-        </button>
-      </li>
-      <li>
-        <button
-          class:selected={current_view === 'events'}
-          on:click={() => (current_view = 'events')}>
-          <EventsIcon />
-        </button>
-      </li>
-    {/if}
-  </ul>
+
+  <CategoryTab
+    onClick={category => (selectedCategory = category)}
+    {categories}
+    {selectedCategory} />
+
   <div class="component-props-container">
-
-    {#if current_view === 'props'}
-      {#if $store.currentView === 'detail'}
-        {#each screen_props as [k, v, id] (id)}
-          <div class="detail-prop" for={k}>
-            <label>{k}:</label>
-            <input
-              id={k}
-              value={v}
-              on:input={({ target }) => store.setMetadataProp(k, target.value)} />
-          </div>
-        {/each}
-        <PropsView {component} {components} {onPropChanged} />
-      {:else}
-        <PropsView {component} {components} {onPropChanged} />
-      {/if}
-    {:else if current_view === 'layout'}
-      <LayoutEditor {onStyleChanged} {component} />
-    {:else if current_view === 'events'}
-      <EventsEditor {component} {components} {onPropChanged} />
+    {#if current_view === 'design'}
+      <!-- <PropsView {component} {components} {onPropChanged} /> -->
+      <DesignView {panelDefinition} {componentInstance} {componentDefinition} />
     {/if}
 
-    <CodeEditor
-      bind:this={codeEditor}
-      code={component._code}
-      onCodeChanged={store.setComponentCode} />
-
   </div>
 
 </div>
@@ -146,7 +132,6 @@
 
   .root {
     height: 100%;
-    padding: 20px;
     display: flex;
     flex-direction: column;
   }
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index eb27559933..139dd65c59 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@@ -2,6 +2,7 @@
   import { splitName } from "./pagesParsing/splitRootComponentName.js"
   import components from "./temporaryPanelStructure.js"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
+  import CategoryTab from "./CategoryTab.svelte"
   import {
     find,
     sortBy,
@@ -85,15 +86,12 @@
 </script>
 
 <div class="root">
-  <ul class="tabs">
-    {#each categories as category}
-      <li
-        on:click={() => (selectedCategory = category)}
-        class:active={selectedCategory === category}>
-        {category.name}
-      </li>
-    {/each}
-  </ul>
+
+  <CategoryTab
+    onClick={category => (selectedCategory = category)}
+    {selectedCategory}
+    {categories} />
+
   <div class="panel">
     <Tab
       list={selectedCategory}
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
new file mode 100644
index 0000000000..60a6dc8bc3
--- /dev/null
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -0,0 +1,17 @@
+<script>
+  import PropertyGroup from "./PropertyGroup.svelte"
+  export let panelDefinition = {}
+  export let componentInstance = {}
+  export let componentDefinition = {}
+  const getProperties = prop => panelDefinition.props[prop]
+
+  $: props = !!panelDefinition.props && Object.keys(panelDefinition.props)
+</script>
+
+{#each props as prop}
+  <PropertyGroup
+    title={prop}
+    content={getProperties(prop)}
+    {componentDefinition}
+    {componentInstance} />
+{/each}
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
new file mode 100644
index 0000000000..1b424dcd28
--- /dev/null
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -0,0 +1,72 @@
+<script>
+  export let title = ""
+  export let content = {}
+  export let componentInstance = {}
+  export let componentDefinition = {}
+
+  let show = false
+
+  const propExistsOnComponentDef = prop => prop in componentDefinition.props
+
+  const capitalize = title => title[0].toUpperCase() + title.slice(1)
+
+  $: propertyKeys = Object.keys(content)
+  $: 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="icon">
+      <i class={icon} />
+    </div>
+    <div class="title">{capitalize(title)}</div>
+  </div>
+  <div class="property-panel" class:show>
+    <ul>
+      {#each propertyKeys as key}
+        <!-- {#if propExistsOnComponentDef(key)} -->
+        <li>{content[key].displayName || capitalize(key)}</li>
+        <!-- {/if} -->
+      {/each}
+    </ul>
+  </div>
+</div>
+
+<style>
+  .property-group-container {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    background: #fbfbfb;
+    margin: 5px;
+    padding: 5px;
+  }
+
+  .property-group-title {
+    cursor: pointer;
+    flex: 0 0 20px;
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  .icon {
+    flex: 0 0 20px;
+    text-align: center;
+  }
+
+  .title {
+    flex: 1;
+    text-align: left;
+  }
+
+  .property-panel {
+    height: 0px;
+    overflow: hidden;
+    /* transition: height 2s ease-in-out; */
+  }
+
+  .show {
+    overflow: auto;
+    height: auto;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
new file mode 100644
index 0000000000..8b662d443c
--- /dev/null
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -0,0 +1,77 @@
+
+/* 
+  TODO: all strings types are really inputs and could be typed as such
+  TODO: Options types need option items
+  TODO: Allow for default values for all properties
+*/
+
+export const layout = {
+  flexDirection: { displayName: "Direction", type: "string" },
+  justifyContent: { displayName: "Justify", type: "string" },
+  alignItems: { displayName: "Align", type: "string" },
+  flexWrap: { displayName: "Wrap", type: "options" },
+}
+
+export const spacing = {
+  padding: { type: "string" },
+  margin: { type: "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
+}
+
+export const position = {
+  position: { type: "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
+}
+
+export const background = {
+  backgroundColor: { displayName: "Background Color", type: "colour" },
+  image: { type: "string" }, //custom
+}
+
+export const border = {
+  radius: { type: "string" },
+  width: { type: "string" }, //custom
+  color: { type: "colour" },
+  style: { type: "options" },
+}
+
+export const effects = {
+  opacity: "string",
+  rotate: "string",
+  shadow: "string",
+}
+
+export const transitions = {
+  property: { type: "options" },
+  duration: { type: "string" },
+  ease: { type: "options" },
+}
+
+export function excludeProps(props, propsToExclude) {
+  const modifiedProps = {}
+  for (const prop in props) {
+    if (!propsToExclude.includes(prop)) {
+      modifiedProps[prop] = props[prop]
+    }
+  }
+  return modifiedProps
+}
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 5c4188d311..07facd4e28 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1,3 +1,5 @@
+import { layout, background } from "./propertyCategories.js"
+
 export default {
   categories: [
     {
@@ -10,7 +12,8 @@ export default {
           description: 'This component contains things within itself',
           icon: 'ri-layout-row-fill',
           commonProps: {},
-          children: []
+          children: [],
+          props: { layout, background },
         },
         {
           name: 'Text',
@@ -24,12 +27,8 @@ export default {
               description: "A component for displaying heading text",
               icon: "ri-heading",
               props: {
-                type: {
-                  type: "options",
-                  options: ["h1", "h2", "h3", "h4", "h5", "h6"],
-                  default: "h1",
-                },
-                text: "string",
+                layout,
+                background,
               },
             },
             {
@@ -82,15 +81,15 @@ export default {
           name: 'Button',
           description: 'A basic html button that is ready for styling',
           icon: 'ri-radio-button-fill',
-          commonProps: {},
-          children: []
+          children: [],
+          props: {},
         },
         {
           _component: "@budibase/standard-components/icon",
           name: 'Icon',
           description: 'A basic component for displaying icons',
           icon: 'ri-sun-fill',
-          commonProps: {},
+          props: {},
           children: []
         },
         {
@@ -98,7 +97,7 @@ export default {
           name: 'Link',
           description: 'A basic link component for internal and external links',
           icon: 'ri-link',
-          commonProps: {},
+          props: {},
           children: []
         }
       ]
@@ -112,14 +111,14 @@ export default {
           name: 'Card',
           description: 'A basic card component that can contain content and actions.',
           icon: 'ri-layout-bottom-line',
-          commonProps: {},
+          props: {},
           children: []
         },
         {
           name: 'Login',
           description: 'A component that automatically generates a login screen for your app.',
           icon: 'ri-login-box-fill',
-          commonProps: {},
+          props: {},
           children: []
         },
         {
@@ -127,7 +126,7 @@ export default {
           _component: "@budibase/standard-components/Navigation",
           description: "A component for handling the navigation within your app.",
           icon: "ri-navigation-fill",
-          commonProps: {},
+          props: {},
           children: []
         }
       ]
@@ -140,15 +139,15 @@ export default {
           name: 'Table',
           description: 'A component that generates a table from your data.',
           icon: 'ri-archive-drawer-fill',
-          commonProps: {},
+          props: {},
           children: []
         },
         {
           name: 'Form',
           description: 'A component that generates a form from your data.',
           icon: 'ri-file-edit-fill',
-          commonProps: {},
-          component: "@budibase/materialdesign-components/Form",
+          props: {},
+          _component: "@budibase/materialdesign-components/Form",
           template: {
             component: "@budibase/materialdesign-components/Form",
             description: "Form for saving a record",

From 8ad10976d3f03c2225a04873409014534e9703b3 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Tue, 5 May 2020 10:02:10 +0100
Subject: [PATCH 2/6] Updates to naming conventions

---
 .../userInterface/DesignView.svelte           | 12 ++--
 .../userInterface/PropertyGroup.svelte        | 18 +++---
 .../userInterface/propertyCategories.js       | 63 +++++++++----------
 .../userInterface/temporaryPanelStructure.js  | 30 ++++-----
 4 files changed, 62 insertions(+), 61 deletions(-)

diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 60a6dc8bc3..f8dad08905 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/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}
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 1b424dcd28..b2b1e9c9eb 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/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;
   }
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 8b662d443c..352baea93e 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/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) {
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 07facd4e28..7ec5988def 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/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",

From b52b9fdd2f65584111646f13b57a9868729cf30a Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Tue, 5 May 2020 14:45:52 +0100
Subject: [PATCH 3/6] <svelte:component> solution for rendering

---
 .../src/components/common/Colorpicker.svelte  | 13 +++---
 .../ComponentPropertiesPanel.svelte           |  7 +++-
 .../userInterface/DesignView.svelte           |  4 ++
 .../userInterface/PropertyGroup.svelte        | 42 +++++++++++++------
 .../userInterface/TempSelect.svelte           | 14 +++++++
 .../userInterface/propertyCategories.js       | 13 ++++--
 .../userInterface/temporaryPanelStructure.js  |  5 ++-
 .../standard-components/src/Heading.svelte    |  1 -
 8 files changed, 71 insertions(+), 28 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/TempSelect.svelte

diff --git a/packages/builder/src/components/common/Colorpicker.svelte b/packages/builder/src/components/common/Colorpicker.svelte
index 9cc3b3926a..28ca92554d 100644
--- a/packages/builder/src/components/common/Colorpicker.svelte
+++ b/packages/builder/src/components/common/Colorpicker.svelte
@@ -2,7 +2,7 @@
   import { onMount, beforeUpdate, afterUpdate } from "svelte"
 
   export let value = null
-  export let onChanged = () => {}
+  export let onChange = () => {}
   export let swatches = []
 
   let picker
@@ -58,13 +58,10 @@
   onMount(() => {
     getRecentColors()
     createPicker()
-
-    picker.on("save", (colour, instance) => {
-      let color = colour.toHEXA().toString()
-      onChanged(color)
-      setRecentColor(color)
-      picker.hide()
-    })
+    return () => {
+      picker.destroyAndRemove()
+      picker = null
+    }
   })
 </script>
 
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 84480b2d69..944862ebee 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -86,8 +86,11 @@
 
   <div class="component-props-container">
     {#if current_view === 'design'}
-      <!-- <PropsView {component} {components} {onPropChanged} /> -->
-      <DesignView {panelDefinition} {componentInstance} {componentDefinition} />
+      <DesignView
+        {panelDefinition}
+        {componentInstance}
+        {componentDefinition}
+        {onPropChanged} />
     {/if}
 
   </div>
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index f8dad08905..0aebd7b186 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -4,8 +4,11 @@
   export let panelDefinition = {}
   export let componentInstance = {}
   export let componentDefinition = {}
+  export let onPropChanged = () => {}
+
   const getProperties = name => panelDefinition.properties[name]
 
+  $: console.log("PDEF", panelDefinition)
   $: propertyGroupNames =
     !!panelDefinition.properties && Object.keys(panelDefinition.properties)
 </script>
@@ -14,6 +17,7 @@
   <PropertyGroup
     name={groupName}
     properties={getProperties(groupName)}
+    {onPropChanged}
     {componentDefinition}
     {componentInstance} />
 {/each}
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index b2b1e9c9eb..fa6dba0156 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -1,20 +1,27 @@
 <script>
+  import { excludeProps } from "./propertyCategories.js"
   export let name = ""
   export let properties = {}
   export let componentInstance = {}
   export let componentDefinition = {}
+  export let onPropChanged = () => {}
 
-  let show = false
+  let show = true
 
   const propExistsOnComponentDef = prop => prop in componentDefinition.props
-
   const capitalize = name => name[0].toUpperCase() + name.slice(1)
 
-  $: propertyKeys = Object.keys(properties)
+  function onChange(v) {
+    !!v.target ? onPropChanged(v.target.value) : onPropChanged(v)
+  }
+
+  $: propertyDefinition = Object.entries(properties)
+  $: console.log("props group", properties)
   $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
 </script>
 
-<div class="property-group-container" on:click={() => (show = !show)}>
+<!-- () => (show = !show) -->
+<div class="property-group-container" on:click={() => {}}>
   <div class="property-group-name">
     <div class="icon">
       <i class={icon} />
@@ -22,13 +29,20 @@
     <div class="name">{capitalize(name)}</div>
   </div>
   <div class="property-panel" class:show>
-    <ul>
-      {#each propertyKeys as key}
-        <!-- {#if propExistsOnComponentDef(key)} -->
-        <li>{properties[key].label || capitalize(key)}</li>
-        <!-- {/if} -->
-      {/each}
-    </ul>
+
+    {#each propertyDefinition as [key, definition]}
+      <div class="property-control">
+        {#if propExistsOnComponentDef(key)}
+          <span>{definition.label || capitalize(key)}</span>
+          <svelte:component
+            this={definition.control}
+            value={componentInstance[key]}
+            on:change={onChange}
+            {onChange}
+            {...excludeProps(definition, ['control'])} />
+        {/if}
+      </div>
+    {/each}
   </div>
 </div>
 
@@ -62,7 +76,11 @@
   .property-panel {
     height: 0px;
     overflow: hidden;
-    /* transition: height 2s ease-in-out; */
+  }
+
+  .property-control {
+    display: flex;
+    flex-flow: row nowrap;
   }
 
   .show {
diff --git a/packages/builder/src/components/userInterface/TempSelect.svelte b/packages/builder/src/components/userInterface/TempSelect.svelte
new file mode 100644
index 0000000000..514c9b5a20
--- /dev/null
+++ b/packages/builder/src/components/userInterface/TempSelect.svelte
@@ -0,0 +1,14 @@
+<script>
+  export let value = ""
+  export let onChange = value => {}
+  export let options = []
+</script>
+
+<select
+  class="uk-select uk-form-small"
+  {value}
+  on:change={ev => onChange(ev.target.value)}>
+  {#each options || [] as option}
+    <option value={option}>{option}</option>
+  {/each}
+</select>
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 352baea93e..6246462ecb 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -1,9 +1,16 @@
-/* 
+import ColorPicker from "../common/Colorpicker.svelte"
+import Input from "../common/Input.svelte"
+import TempSelect from "./TempSelect.svelte"
+/*
   TODO: all strings types are really inputs and could be typed as such
   TODO: Options types need option items
   TODO: Allow for default values for all properties
 */
 
+export const general = {
+  text: { control: Input }
+}
+
 export const layout = {
   flexDirection: { label: "Direction", control: "string" },
   justifyContent: { label: "Justify", control: "string" },
@@ -42,8 +49,8 @@ export const typography = {
 }
 
 export const background = {
-  backgroundColor: { label: "Background Color", control: "colour" },
-  image: { control: "string" }, //custom
+  backgroundColor: { label: "Background Color", control: ColorPicker },
+  image: { control: Input }, //custom
 }
 
 export const border = {
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 7ec5988def..bc60ac2bd6 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1,4 +1,4 @@
-import { layout, background } from "./propertyCategories.js"
+import { general, layout, background } from "./propertyCategories.js"
 
 export default {
   categories: [
@@ -13,7 +13,7 @@ export default {
           icon: 'ri-layout-row-fill',
           commonProps: {},
           children: [],
-          properties: { layout, background },
+          properties: { background },
         },
         {
           name: 'Text',
@@ -27,6 +27,7 @@ export default {
               description: "A component for displaying heading text",
               icon: "ri-heading",
               properties: {
+                general,
                 layout,
                 background,
               },
diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index 6a3a210dc3..4bbb9d0b36 100644
--- a/packages/standard-components/src/Heading.svelte
+++ b/packages/standard-components/src/Heading.svelte
@@ -11,7 +11,6 @@
 
   $: containerElement && !text && _bb.attachChildren(containerElement)
   $: style = buildStyle({ "font-family": fontFamily, color })
-  // $: console.log("HEADING", color)
 </script>
 
 {#if type === 'h1'}

From 8d8caa9ff5be59147d2b27726074af57fba30121 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Thu, 7 May 2020 14:30:04 +0100
Subject: [PATCH 4/6] Properties panel structure complete

---
 .../src/components/common/Input.svelte        |   5 +-
 .../ComponentPropertiesPanel.svelte           |  86 +--------------
 .../ComponentsPaneSwitcher.svelte             |   5 +-
 .../userInterface/DesignView.svelte           |  57 ++++++++--
 .../userInterface/FlatButton.svelte           |  38 +++++++
 .../userInterface/FlatButtonGroup.svelte      |  54 +++++++++
 .../userInterface/OptionSelect.svelte         |  22 ++++
 .../userInterface/PropertyControl.svelte      |  41 +++++++
 .../userInterface/PropertyGroup.svelte        |  52 ++++-----
 .../userInterface/TempSelect.svelte           |  14 ---
 .../userInterface/UserInterfaceRoot.svelte    |   4 +-
 .../userInterface/propertyCategories.js       | 103 +++++++++++-------
 .../userInterface/temporaryPanelStructure.js  |   6 +-
 13 files changed, 305 insertions(+), 182 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/FlatButton.svelte
 create mode 100644 packages/builder/src/components/userInterface/FlatButtonGroup.svelte
 create mode 100644 packages/builder/src/components/userInterface/OptionSelect.svelte
 create mode 100644 packages/builder/src/components/userInterface/PropertyControl.svelte
 delete mode 100644 packages/builder/src/components/userInterface/TempSelect.svelte

diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte
index 50b07f41f0..bc6741e0d8 100644
--- a/packages/builder/src/components/common/Input.svelte
+++ b/packages/builder/src/components/common/Input.svelte
@@ -1,8 +1,11 @@
 <script>
   export let value = ""
+  export let width = ""
+
+  let style = { width }
 </script>
 
-<input type="text" on:change bind:value />
+<input type="text" style={`width: ${width};`} on:change bind:value />
 
 <style>
   input {
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 944862ebee..94c450823a 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -49,8 +49,6 @@
   const onPropChanged = store.setComponentProp
   const onStyleChanged = store.setComponentStyle
 
-  //May be able to remove some of the nested components in PropsView, PropsControl and StateBindingControl tree
-
   function walkProps(component, action) {
     action(component)
     if (component.children) {
@@ -98,45 +96,11 @@
 </div>
 
 <style>
-  .detail-prop {
-    height: 40px;
-    margin-bottom: 15px;
-    display: grid;
-    grid-template-rows: 1fr;
-    grid-template-columns: 70px 1fr;
-    grid-gap: 10px;
-  }
-
-  .detail-prop label {
-    word-wrap: break-word;
-    font-size: 13px;
-    font-weight: 700;
-    color: #163057;
-    opacity: 0.6;
-    padding-top: 13px;
-    margin-bottom: 0;
-  }
-
-  input {
-    height: 30px;
-    padding-left: 8px;
-    padding-right: 8px;
-    border: 1px solid #dbdbdb;
-    border-radius: 2px;
-    opacity: 0.5;
-  }
-
-  input:focus {
-    outline: 0;
-    background-color: #fff;
-    color: #666;
-    border-color: #1e87f0;
-  }
-
   .root {
     height: 100%;
     display: flex;
     flex-direction: column;
+    overflow-x: hidden;
   }
 
   .title > div:nth-child(1) {
@@ -152,52 +116,4 @@
     margin-top: 10px;
     flex: 1 1 auto;
   }
-
-  ul {
-    list-style: none;
-    display: flex;
-    justify-content: space-between;
-    padding: 0;
-  }
-
-  li {
-    background: none;
-    border-radius: 3px;
-    width: 48px;
-    height: 48px;
-  }
-
-  li button {
-    width: 48px;
-    height: 48px;
-    background: none;
-    border: none;
-    border-radius: 3px;
-    padding: 7px;
-    outline: none;
-    cursor: pointer;
-    position: relative;
-  }
-
-  li:nth-last-child(1) {
-    margin-right: 0px;
-    background: none;
-    border-radius: 3px;
-    width: 48px;
-    height: 48px;
-  }
-
-  .selected {
-    color: var(--button-text);
-    background: #f9f9f9 !important;
-    width: 48px;
-    height: 48px;
-  }
-
-  .button-indicator {
-    position: absolute;
-    top: 8px;
-    right: 10px;
-    color: var(--button-text);
-  }
 </style>
diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
index 9ca5b1e122..8e72a17c54 100644
--- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
@@ -24,13 +24,13 @@
       <button
         class:selected={selected === COMPONENT_SELECTION_TAB}
         on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
-        Components
+        Add
       </button>
 
       <button
         class:selected={selected === PROPERTIES_TAB}
         on:click={() => selectTab(PROPERTIES_TAB)}>
-        Properties
+        Edit
       </button>
 
     </div>
@@ -55,6 +55,7 @@
     display: flex;
     flex-direction: column;
     padding: 20px 0;
+    border-left: solid 1px #e8e8ef;
   }
 
   .switcher {
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 0aebd7b186..7fc6af5312 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -1,23 +1,62 @@
 <script>
   import PropertyGroup from "./PropertyGroup.svelte"
+  import FlatButtonGroup from "./FlatButtonGroup.svelte"
 
   export let panelDefinition = {}
   export let componentInstance = {}
   export let componentDefinition = {}
   export let onPropChanged = () => {}
 
+  let selectedCategory = "desktop"
+
   const getProperties = name => panelDefinition.properties[name]
 
-  $: console.log("PDEF", panelDefinition)
+  function onChange(category) {
+    selectedCategory = category
+  }
+
+  const buttonProps = [
+    { value: "desktop", text: "Desktop" },
+    { value: "mobile", text: "Mobile" },
+    { value: "hover", text: "Hover" },
+    { value: "active", text: "Active" },
+    { value: "selected", text: "Selected" },
+  ]
+
   $: propertyGroupNames =
     !!panelDefinition.properties && Object.keys(panelDefinition.properties)
 </script>
 
-{#each propertyGroupNames as groupName}
-  <PropertyGroup
-    name={groupName}
-    properties={getProperties(groupName)}
-    {onPropChanged}
-    {componentDefinition}
-    {componentInstance} />
-{/each}
+<div class="design-view-container">
+
+  <div class="design-view-state-categories">
+    <FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} />
+  </div>
+
+  <div class="design-view-property-groups">
+    {#each propertyGroupNames as groupName}
+      <PropertyGroup
+        name={groupName}
+        properties={getProperties(groupName)}
+        {onPropChanged}
+        {componentDefinition}
+        {componentInstance} />
+    {/each}
+  </div>
+</div>
+
+<style>
+  .design-view-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .design-view-state-categories {
+    flex: 0 0 50px;
+  }
+
+  .design-view-property-groups {
+    flex: 1;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte
new file mode 100644
index 0000000000..abc4a3dc28
--- /dev/null
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@@ -0,0 +1,38 @@
+<script>
+  export let value = ""
+  export let text = ""
+  export let icon = ""
+  export let onClick = value => {}
+  export let selected = false
+
+  $: useIcon = !!icon
+</script>
+
+<div class="flatbutton" class:selected on:click={() => onClick(value || text)}>
+  {#if useIcon}
+    <i class={icon} />
+  {:else}
+    <span>{text}</span>
+  {/if}
+</div>
+
+<style>
+  .flatbutton {
+    cursor: pointer;
+    padding: 5px;
+    text-align: center;
+    background: #ffffff;
+    color: #808192;
+    border-radius: 4px;
+    font-family: Roboto;
+    font-size: 11px;
+    font-weight: 500;
+    letter-spacing: 0.11px;
+    transition: background 0.5s, color 0.5s ease;
+  }
+
+  .selected {
+    background: #808192;
+    color: #ffffff;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
new file mode 100644
index 0000000000..f16d832c67
--- /dev/null
+++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte
@@ -0,0 +1,54 @@
+<script>
+  import { onMount } from "svelte"
+
+  import FlatButton from "./FlatButton.svelte"
+  export let buttonProps = []
+  export let isMultiSelect = false
+  export let value = []
+  export let initialValue = ""
+  export let onChange = selected => {}
+
+  onMount(() => {
+    if (!value && !!initialValue) {
+      value = initialValue
+    }
+  })
+
+  function onButtonClicked(v) {
+    let val
+    if (isMultiSelect) {
+      if (value.includes(v)) {
+        let idx = value.findIndex(i => i === v)
+        val = [...value].splice(idx, 1)
+      } else {
+        val = [...value, v]
+      }
+    } else {
+      val = v
+    }
+    onChange(val)
+  }
+</script>
+
+<div class="flatbutton-group">
+  {#each buttonProps as props}
+    <div class="button-container">
+      <FlatButton
+        selected={value.includes(props.value)}
+        onClick={onButtonClicked}
+        {...props} />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .flatbutton-group {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  .button-container {
+    flex: 1;
+    margin: 5px;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
new file mode 100644
index 0000000000..cbbdb8f91f
--- /dev/null
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -0,0 +1,22 @@
+<script>
+  import { onMount } from "svelte"
+  export let value = ""
+  export let onChange = value => {}
+  export let options = []
+  export let initialValue = ""
+
+  onMount(() => {
+    if (!value && !!initialValue) {
+      value = initialValue
+    }
+  })
+</script>
+
+<select
+  class="uk-select uk-form-small"
+  {value}
+  on:change={ev => onChange(ev.target.value)}>
+  {#each options as { value, label }}
+    <option value={value || label}>{label}</option>
+  {/each}
+</select>
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
new file mode 100644
index 0000000000..23dd223de6
--- /dev/null
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -0,0 +1,41 @@
+<script>
+  export let label = ""
+  export let control = null
+  export let value = ""
+  export let props = {}
+  export let onChange = () => {}
+</script>
+
+<div class="property-control">
+  <div class="label">{label}</div>
+  <div class="control">
+    <svelte:component
+      this={control}
+      {value}
+      on:change={onChange}
+      {onChange}
+      {...props} />
+  </div>
+</div>
+
+<style>
+  .property-control {
+    display: flex;
+    flex-flow: row nowrap;
+    margin: 8px 0px;
+  }
+
+  .label {
+    flex: 0 0 50px;
+    padding: 0px 5px;
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: 0.12px;
+    text-align: left;
+  }
+
+  .control {
+    flex: 1;
+    padding-left: 5px;
+  }
+</style>
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index fa6dba0156..96d5ba7a7b 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -1,28 +1,27 @@
 <script>
   import { excludeProps } from "./propertyCategories.js"
+  import PropertyControl from "./PropertyControl.svelte"
   export let name = ""
   export let properties = {}
   export let componentInstance = {}
   export let componentDefinition = {}
   export let onPropChanged = () => {}
 
-  let show = true
+  export let show = false
 
   const propExistsOnComponentDef = prop => prop in componentDefinition.props
   const capitalize = name => name[0].toUpperCase() + name.slice(1)
 
-  function onChange(v) {
-    !!v.target ? onPropChanged(v.target.value) : onPropChanged(v)
+  function onChange(key, v) {
+    !!v.target ? onPropChanged(key, v.target.value) : onPropChanged(key, v)
   }
 
   $: propertyDefinition = Object.entries(properties)
-  $: console.log("props group", properties)
   $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
 </script>
 
-<!-- () => (show = !show) -->
-<div class="property-group-container" on:click={() => {}}>
-  <div class="property-group-name">
+<div class="property-group-container">
+  <div class="property-group-name" on:click={() => (show = !show)}>
     <div class="icon">
       <i class={icon} />
     </div>
@@ -31,17 +30,14 @@
   <div class="property-panel" class:show>
 
     {#each propertyDefinition as [key, definition]}
-      <div class="property-control">
-        {#if propExistsOnComponentDef(key)}
-          <span>{definition.label || capitalize(key)}</span>
-          <svelte:component
-            this={definition.control}
-            value={componentInstance[key]}
-            on:change={onChange}
-            {onChange}
-            {...excludeProps(definition, ['control'])} />
-        {/if}
-      </div>
+      <!-- {#if propExistsOnComponentDef(key)} -->
+      <PropertyControl
+        label={definition.label || capitalize(key)}
+        control={definition.control}
+        value={componentInstance[key]}
+        onChange={value => onChange(key, value)}
+        props={{ ...excludeProps(definition, ['control']) }} />
+      <!-- {/if} -->
     {/each}
   </div>
 </div>
@@ -63,14 +59,19 @@
     flex-flow: row nowrap;
   }
 
-  .icon {
-    flex: 0 0 20px;
-    text-align: center;
-  }
-
   .name {
     flex: 1;
     text-align: left;
+    padding-top: 2px;
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.14px;
+    color: #393c44;
+  }
+
+  .icon {
+    flex: 0 0 20px;
+    text-align: center;
   }
 
   .property-panel {
@@ -78,11 +79,6 @@
     overflow: hidden;
   }
 
-  .property-control {
-    display: flex;
-    flex-flow: row nowrap;
-  }
-
   .show {
     overflow: auto;
     height: auto;
diff --git a/packages/builder/src/components/userInterface/TempSelect.svelte b/packages/builder/src/components/userInterface/TempSelect.svelte
deleted file mode 100644
index 514c9b5a20..0000000000
--- a/packages/builder/src/components/userInterface/TempSelect.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-  export let value = ""
-  export let onChange = value => {}
-  export let options = []
-</script>
-
-<select
-  class="uk-select uk-form-small"
-  {value}
-  on:change={ev => onChange(ev.target.value)}>
-  {#each options || [] as option}
-    <option value={option}>{option}</option>
-  {/each}
-</select>
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
index 4f32c55d24..13d7a7e2a1 100644
--- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
+++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte
@@ -114,7 +114,7 @@
 
   .root {
     display: grid;
-    grid-template-columns: 275px 1fr 275px;
+    grid-template-columns: 275px 1fr 300px;
     height: 100%;
     width: 100%;
     background: #fafafa;
@@ -151,7 +151,7 @@
   .components-pane {
     grid-column: 3;
     background-color: var(--white);
-    min-height: 0px;
+    height: 100vh;
     overflow-y: scroll;
   }
 
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 6246462ecb..525738f02f 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -1,75 +1,102 @@
-import ColorPicker from "../common/Colorpicker.svelte"
 import Input from "../common/Input.svelte"
-import TempSelect from "./TempSelect.svelte"
+import OptionSelect from "./OptionSelect.svelte"
 /*
-  TODO: all strings types are really inputs and could be typed as such
-  TODO: Options types need option items
   TODO: Allow for default values for all properties
 */
 
 export const general = {
-  text: { control: Input }
+  text: { control: Input },
 }
 
 export const layout = {
-  flexDirection: { label: "Direction", control: "string" },
-  justifyContent: { label: "Justify", control: "string" },
-  alignItems: { label: "Align", control: "string" },
-  flexWrap: { label: "Wrap", control: "options" },
+  flexDirection: {
+    label: "Direction",
+    control: OptionSelect,
+    initialValue: "columnReverse",
+    options: [
+      { label: "row" },
+      { label: "row-reverse", value: "rowReverse" },
+      { label: "column" },
+      { label: "column-reverse", value: "columnReverse" },
+    ],
+  },
+  justifyContent: { label: "Justify", control: Input },
+  alignItems: { label: "Align", control: Input },
+  flexWrap: {
+    label: "Wrap",
+    control: OptionSelect,
+    options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }],
+  },
 }
 
 export const spacing = {
-  padding: { control: "string" },
-  margin: { control: "string" },
+  padding: { control: Input },
+  margin: { control: Input },
 }
 
 export const size = {
-  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
+  width: { control: Input },
+  height: { control: Input },
+  minWidth: { label: "Min W", control: Input },
+  minHeight: { label: "Min H", control: Input },
+  maxWidth: { label: "Max W", control: Input },
+  maxHeight: { label: "Max H", control: Input },
+  overflow: { control: Input }, //custom
 }
 
 export const position = {
-  position: { control: "options" },
+  position: { control: Input },
 }
 
 export const typography = {
-  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
+  font: { control: Input },
+  weight: { control: Input },
+  size: { control: Input },
+  lineHeight: { label: "Line H", control: Input },
+  color: {
+    control: OptionSelect,
+    options: [{ label: "red" }, { label: "blue" }, { label: "green" }],
+  },
+  align: { control: Input }, //custom
+  transform: { control: Input }, //custom
+  style: { control: Input }, //custom
 }
 
 export const background = {
-  backgroundColor: { label: "Background Color", control: ColorPicker },
+  backgroundColor: { label: "Background Color", control: Input },
   image: { control: Input }, //custom
 }
 
 export const border = {
-  radius: { control: "string" },
-  width: { control: "string" }, //custom
-  color: { control: "colour" },
-  style: { control: "options" },
+  radius: { control: Input },
+  width: { control: Input }, //custom
+  color: { control: Input },
+  style: { control: Input },
 }
 
 export const effects = {
-  opacity: "string",
-  rotate: "string",
-  shadow: "string",
+  opacity: { control: Input },
+  rotate: { control: Input },
+  shadow: { control: Input },
 }
 
 export const transitions = {
-  property: { control: "options" },
-  duration: { control: "string" },
-  ease: { control: "options" },
+  property: { control: Input },
+  duration: { control: Input },
+  ease: { control: Input },
+}
+
+export const all = {
+  general,
+  layout,
+  spacing,
+  size,
+  position,
+  typography,
+  background,
+  border,
+  effects,
+  transitions,
 }
 
 export function excludeProps(props, propsToExclude) {
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index bc60ac2bd6..c4426d1035 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1,4 +1,4 @@
-import { general, layout, background } from "./propertyCategories.js"
+import { general, layout, typography, background, all } from "./propertyCategories.js"
 
 export default {
   categories: [
@@ -13,7 +13,7 @@ export default {
           icon: 'ri-layout-row-fill',
           commonProps: {},
           children: [],
-          properties: { background },
+          properties: { ...all },
         },
         {
           name: 'Text',
@@ -29,7 +29,7 @@ export default {
               properties: {
                 general,
                 layout,
-                background,
+                typography,
               },
             },
             {

From 6b7a3d1d7e4a650a2e071fa1113dec1451dae626 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Fri, 8 May 2020 09:57:41 +0100
Subject: [PATCH 5/6] Style binding options and property categories

---
 .../userInterface/OptionSelect.svelte         | 13 +++-
 .../userInterface/propertyCategories.js       | 75 ++++++++++++++++---
 2 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte
index cbbdb8f91f..b3cfa5e54b 100644
--- a/packages/builder/src/components/userInterface/OptionSelect.svelte
+++ b/packages/builder/src/components/userInterface/OptionSelect.svelte
@@ -4,6 +4,9 @@
   export let onChange = value => {}
   export let options = []
   export let initialValue = ""
+  export let styleBindingProperty = ""
+
+  $: bindOptionToStyle = !!styleBindingProperty
 
   onMount(() => {
     if (!value && !!initialValue) {
@@ -17,6 +20,14 @@
   {value}
   on:change={ev => onChange(ev.target.value)}>
   {#each options as { value, label }}
-    <option value={value || label}>{label}</option>
+    {#if bindOptionToStyle}
+      <option
+        style={`${styleBindingProperty}: ${value || label};`}
+        value={value || label}>
+        {label}
+      </option>
+    {:else}
+      <option value={value || label}>{label}</option>
+    {/if}
   {/each}
 </select>
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 525738f02f..7505645b65 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -41,25 +41,76 @@ export const size = {
   minHeight: { label: "Min H", control: Input },
   maxWidth: { label: "Max W", control: Input },
   maxHeight: { label: "Max H", control: Input },
-  overflow: { control: Input }, //custom
+  overflow: {
+    control: OptionSelect,
+    options: [
+      { label: "visible" },
+      { label: "auto" },
+      { label: "hidden" },
+      { label: "auto" },
+      { label: "scroll" },
+    ],
+  }, //custom
 }
 
 export const position = {
-  position: { control: Input },
+  position: {
+    control: OptionSelect,
+    options: [
+      { label: "static" },
+      { label: "relative" },
+      { label: "fixed" },
+      { label: "absolute" },
+      { label: "sticky" },
+    ],
+  },
 }
 
 export const typography = {
-  font: { control: Input },
-  weight: { control: Input },
-  size: { control: Input },
+  fontFamily: {
+    label: "Font",
+    control: OptionSelect,
+    options: [
+      { label: "initial" },
+      { label: "Times New Roman" },
+      { label: "Georgia" },
+      { label: "Arial" },
+      { label: "Arial Black" },
+      { label: "Comic Sans MS" },
+      { label: "Impact" },
+      { label: "Lucida Sans Unicode" },
+    ],
+    styleBindingProperty: "font-family",
+  },
+  fontWeight: {
+    label: "weight",
+    control: OptionSelect,
+    options: [
+      { label: "normal" },
+      { label: "bold" },
+      { label: "bolder" },
+      { label: "lighter" },
+    ],
+  },
+  fontSize: { label: "size", control: Input },
   lineHeight: { label: "Line H", control: Input },
   color: {
     control: OptionSelect,
     options: [{ label: "red" }, { label: "blue" }, { label: "green" }],
   },
-  align: { control: Input }, //custom
-  transform: { control: Input }, //custom
-  style: { control: Input }, //custom
+  textAlign: {
+    label: "align",
+    control: OptionSelect,
+    options: [
+      { label: "initial" },
+      { label: "left" },
+      { label: "right" },
+      { label: "center" },
+      { label: "justify" },
+    ],
+  }, //custom
+  textTransform: { label: "transform", control: Input }, //custom
+  fontStyle: { label: "style", control: Input }, //custom
 }
 
 export const background = {
@@ -68,10 +119,10 @@ export const background = {
 }
 
 export const border = {
-  radius: { control: Input },
-  width: { control: Input }, //custom
-  color: { control: Input },
-  style: { control: Input },
+  borderRadius: { label: "radius", control: Input },
+  borderWidth: { label: "width", control: Input }, //custom
+  borderColor: { label: "color", control: Input },
+  borderStyle: { label: "style", control: Input },
 }
 
 export const effects = {

From 2e636dec9347e8fdf6e84408754de51b205def0e Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Fri, 8 May 2020 20:29:15 +0100
Subject: [PATCH 6/6] Pre demo changes

---
 .../ComponentPropertiesPanel.svelte           |  5 ++--
 .../userInterface/PropertyGroup.svelte        | 15 ++++++++++++
 .../userInterface/propertyCategories.js       | 20 ++++++++++++++--
 .../userInterface/temporaryPanelStructure.js  | 24 ++++++++++++-------
 packages/standard-components/components.json  |  4 +++-
 .../standard-components/src/Button.svelte     |  6 ++---
 .../standard-components/src/Container.svelte  | 12 ++++++++++
 7 files changed, 67 insertions(+), 19 deletions(-)

diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 94c450823a..12a7b3eb90 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -29,7 +29,7 @@
   let selectedCategory = categories[0]
 
   $: components = $store.components
-  $: componentInstance = $store.currentComponentInfo //contains prop values of currently selected component
+  $: componentInstance = $store.currentComponentInfo
   $: componentDefinition = $store.components.find(
     c => c.name === componentInstance._component
   )
@@ -39,8 +39,7 @@
     c => c._component === componentInstance._component
   )
 
-  // OLD PROPS =============================================
-
+  // SCREEN PROPS =============================================
   $: screen_props =
     $store.currentFrontEndType === "page"
       ? getProps($store.currentPreviewItem, ["name", "favicon"])
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 96d5ba7a7b..2d88557777 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -1,6 +1,7 @@
 <script>
   import { excludeProps } from "./propertyCategories.js"
   import PropertyControl from "./PropertyControl.svelte"
+
   export let name = ""
   export let properties = {}
   export let componentInstance = {}
@@ -8,6 +9,7 @@
   export let onPropChanged = () => {}
 
   export let show = false
+  let showComponentGroup = false
 
   const propExistsOnComponentDef = prop => prop in componentDefinition.props
   const capitalize = name => name[0].toUpperCase() + name.slice(1)
@@ -16,10 +18,22 @@
     !!v.target ? onPropChanged(key, v.target.value) : onPropChanged(key, v)
   }
 
+  $: {
+    let res = false
+    let componentProps = Object.keys(componentDefinition.props)
+    for (let prop in properties) {
+      if (componentProps.includes(prop)) {
+        showComponentGroup = true
+      }
+      if (showComponentGroup) break
+    }
+  }
+
   $: propertyDefinition = Object.entries(properties)
   $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
 </script>
 
+<!-- {#if showComponentGroup} -->
 <div class="property-group-container">
   <div class="property-group-name" on:click={() => (show = !show)}>
     <div class="icon">
@@ -41,6 +55,7 @@
     {/each}
   </div>
 </div>
+<!-- {/if} -->
 
 <style>
   .property-group-container {
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 7505645b65..08503b4414 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -96,7 +96,13 @@ export const typography = {
   lineHeight: { label: "Line H", control: Input },
   color: {
     control: OptionSelect,
-    options: [{ label: "red" }, { label: "blue" }, { label: "green" }],
+    options: [
+      { label: "black" },
+      { label: "red" },
+      { label: "white" },
+      { label: "blue" },
+      { label: "green" },
+    ],
   },
   textAlign: {
     label: "align",
@@ -114,7 +120,17 @@ export const typography = {
 }
 
 export const background = {
-  backgroundColor: { label: "Background Color", control: Input },
+  backgroundColor: {
+    label: "Background Color",
+    control: OptionSelect,
+    options: [
+      { label: "white" },
+      { label: "red" },
+      { label: "blue" },
+      { label: "green" },
+      { label: "black" },
+    ],
+  },
   image: { control: Input }, //custom
 }
 
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index c4426d1035..116984be4a 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1,4 +1,12 @@
-import { general, layout, typography, background, all } from "./propertyCategories.js"
+import {
+  general,
+  layout,
+  typography,
+  border,
+  size,
+  background,
+  all,
+} from "./propertyCategories.js"
 
 export default {
   categories: [
@@ -13,7 +21,7 @@ export default {
           icon: 'ri-layout-row-fill',
           commonProps: {},
           children: [],
-          properties: { ...all },
+          properties: { background, size },
         },
         {
           name: 'Text',
@@ -27,9 +35,7 @@ export default {
               description: "A component for displaying heading text",
               icon: "ri-heading",
               properties: {
-                general,
-                layout,
-                typography,
+               ...all
               },
             },
             {
@@ -37,7 +43,7 @@ export default {
               name: 'Paragraph',
               description: "A component for displaying paragraph text.",
               icon: 'ri-paragraph',
-              properties: {}
+              properties: { general, typography },
             }
           ]
         },
@@ -83,7 +89,7 @@ export default {
           description: 'A basic html button that is ready for styling',
           icon: 'ri-radio-button-fill',
           children: [],
-          properties: {},
+          properties: { background, typography, border, size },
         },
         {
           _component: "@budibase/standard-components/icon",
@@ -112,8 +118,8 @@ export default {
           name: 'Card',
           description: 'A basic card component that can contain content and actions.',
           icon: 'ri-layout-bottom-line',
-          properties: {},
-          children: []
+          children: [],
+          properties: { size, background, border },
         },
         {
           name: 'Login',
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 3bea545c9b..417721221b 100644
--- a/packages/standard-components/components.json
+++ b/packages/standard-components/components.json
@@ -326,6 +326,8 @@
 			},
 			"backgroundColor": "string",
 			"color": "string",
+			"height": "string",
+			"width": "string",
 			"borderWidth": "string",
 			"borderColor": "string",
 			"borderStyle": {
@@ -343,7 +345,7 @@
 				],
 				"default": "none"
 			}
-		},
+		},		
 		"container": true,
 		"tags": [
 			"div",
diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte
index 3d50c22df5..60c022f4ea 100644
--- a/packages/standard-components/src/Button.svelte
+++ b/packages/standard-components/src/Button.svelte
@@ -3,7 +3,7 @@
   import { buildStyle } from "./buildStyle"
   export let className = "default"
   export let disabled = false
-  export let contentText
+  export let text
   export let onClick
   export let background
   export let color
@@ -66,9 +66,7 @@
   disabled={disabled || false}
   on:click={clickHandler}
   style={buttonStyles}>
-  {#if !_bb.props._children || _bb.props._children.length === 0}
-    {contentText}
-  {/if}
+  {#if !_bb.props._children || _bb.props._children.length === 0}{text}{/if}
 </button>
 
 <style>
diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte
index 99835a3454..099051c7b2 100644
--- a/packages/standard-components/src/Container.svelte
+++ b/packages/standard-components/src/Container.svelte
@@ -6,6 +6,8 @@
   export let type = "div"
   export let backgroundColor
   export let color
+  export let width
+  export let height
   export let borderWidth
   export let borderColor
   export let borderStyle
@@ -18,6 +20,8 @@
   $: cssVariables = {
     backgroundColor,
     color,
+    height,
+    width,
     borderWidth,
     borderColor,
     borderStyle,
@@ -108,6 +112,14 @@
     color: var(--color);
   }
 
+  .height {
+    height: var(--height);
+  }
+
+  .width {
+    width: var(--width);
+  }
+
   .borderColor {
     border-color: var(--borderColor);
   }