From 5b8d1cead7bfbcc1a884d3dafb59c6f479df0f46 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Mon, 18 May 2020 16:32:00 +0100
Subject: [PATCH] Testing Complete - Resolve Post Issue

---
 .../builder/src/builderStore/generate_css.js  |  35 ++--
 .../builder/src/builderStore/store/index.js   |   9 +-
 .../common/Inputs/InputGroup.svelte           |  54 ++++---
 .../AppPreview/CurrentItemPreview.svelte      |   4 +-
 .../AppPreview/iframeTemplate.js              |   2 +-
 .../ComponentPropertiesPanel.svelte           |  32 ++--
 .../userInterface/DesignView.svelte           |   9 +-
 .../userInterface/PropertyControl.svelte      |   2 +
 .../userInterface/PropertyGroup.svelte        |  22 +--
 .../userInterface/SettingsView.svelte         |  35 ++++
 .../userInterface/pagesParsing/createProps.js |   4 +-
 .../userInterface/propertyCategories.js       | 145 +++++++++--------
 .../userInterface/temporaryPanelStructure.js  | 152 ++++++++++--------
 packages/client/src/render/attachChildren.js  |   2 +-
 .../src/render/prepareRenderComponent.js      |   2 +-
 15 files changed, 294 insertions(+), 215 deletions(-)
 create mode 100644 packages/builder/src/components/userInterface/SettingsView.svelte

diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js
index 4326e7cb0f..4311950a58 100644
--- a/packages/builder/src/builderStore/generate_css.js
+++ b/packages/builder/src/builderStore/generate_css.js
@@ -110,33 +110,36 @@ const object_to_css_string = [
   join_with("\n"),
 ]
 
-export const generate_css = ({ layout, position }) => {
-  let _layout = pipe(layout, object_to_css_string)
-  if (_layout.length) {
-    _layout += `\ndisplay: ${_layout.includes("flex") ? "flex" : "grid"};`
-  }
+export const generate_css = style => {
+  // let cssString = pipe(style, object_to_css_string)
+  let cssString = Object.entries(style).reduce((str, [key, value]) => {
+    //TODO Handle arrays and objects here also
+    if (typeof value === "string") {
+      if (value) {
+        return (str += `${key}: ${value};\n`)
+      }
+    } else if (Array.isArray(value)) {
+      return (str += `${key}: ${value.map(v => `${v}px`).join(" ")};\n`)
+    }
+  }, "")
 
-  return {
-    layout: _layout,
-    position: pipe(position, object_to_css_string),
-  }
+  return (cssString || "").trim()
 }
 
 const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}`
 
 export const generate_screen_css = component_array => {
   let styles = ""
-  let emptyStyles = { layout: {}, position: {} }
-
+  let emptyStyles = {}
   for (let i = 0; i < component_array.length; i += 1) {
     const { _styles, _id, _children } = component_array[i]
-    const { layout, position } = generate_css(_styles || emptyStyles)
-
-    styles += apply_class(_id, "pos", position) + "\n"
-    styles += apply_class(_id, "lay", layout) + "\n"
+    const cssString = generate_css(_styles || emptyStyles) || ""
+    if (cssString) {
+      styles += apply_class(_id, "element", cssString)
+    }
     if (_children && _children.length) {
       styles += generate_screen_css(_children) + "\n"
     }
   }
   return styles.trim()
-}
+}
\ No newline at end of file
diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index a8315918ba..7e108bbe09 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -140,10 +140,12 @@ const _saveScreen = async (store, s, screen) => {
   return s
 }
 
-const _saveScreenApi = (screen, s) =>
+const _saveScreenApi = (screen, s) => {
+
   api
     .post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen)
     .then(() => _savePage(s))
+}
 
 const createScreen = store => (screenName, route, layoutComponentName) => {
   store.update(state => {
@@ -278,7 +280,6 @@ const removeStylesheet = store => stylesheet => {
 
 const _savePage = async s => {
   const page = s.pages[s.currentPageName]
-
   await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, {
     page: { componentLibraries: s.pages.componentLibraries, ...page },
     uiFunctions: s.currentPageFunctions,
@@ -426,7 +427,9 @@ const setComponentStyle = store => (type, name, value) => {
     if (!state.currentComponentInfo._styles) {
       state.currentComponentInfo._styles = {}
     }
-    state.currentComponentInfo._styles[type][name] = value
+    // state.currentComponentInfo._styles[type][name] = value
+    state.currentComponentInfo._styles[name] = value
+
     state.currentPreviewItem._css = generate_screen_css([
       state.currentPreviewItem.props,
     ])
diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index 078edea28f..7976cabd55 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -2,36 +2,50 @@
   import { onMount } from "svelte"
 
   export let meta = []
-  export let size = ""
+  export let label = ""
   export let values = []
   export let type = "number"
-  export let onStyleChanged = () => {}
+  export let onChange = () => {}
 
   let _values = values.map(v => v)
 
-  $: onStyleChanged(_values)
+  // $: onChange(_values)
 </script>
 
-<div class="inputs {size}">
-  {#each meta as { placeholder }, i}
-    <input
-      {type}
-      {placeholder}
-      value={values[i]}
-      on:input={e => (_values[i] = e.target.value)} />
-  {/each}
+<div class="input-container">
+  <div class="label">{label}</div>
+  <div class="inputs">
+    {#each meta as { placeholder }, i}
+      <input
+        {type}
+        placeholder={placeholder || ''}
+        value={values[i]}
+        on:input={e => (_values[i] = e.target.value)} />
+    {/each}
+  </div>
 </div>
 
 <style>
-  .inputs {
+  .input-container {
     display: flex;
-    justify-content: space-between;
+  }
+
+  .label {
+    flex: 0;
+  }
+
+  .inputs {
+    flex: 1;
+    /* display: flex;
+    justify-content: space-between; */
   }
 
   input {
-    width: 83px;
+    width: 40px;
+    height: 32px;
     font-size: 13px;
     font-weight: 700;
+    margin: 0px 5px;
     color: #163057;
     opacity: 0.7;
     padding: 5px 10px;
@@ -49,17 +63,11 @@
     margin: 0;
   }
 
-  .small > input {
-    width: 38px;
-    height: 38px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    padding: 0;
+  input[type="number"] {
+    -moz-appearance: textfield;
   }
 
-  .small > input::placeholder {
+  input::placeholder {
     text-align: center;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 02aa072910..18afb123ef 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -60,7 +60,7 @@
               _children: [
                 {
                   _component: "@budibase/standard-components/container",
-                  _styles: { position: {}, layout: {} },
+                  _styles: {},
                   _id: "__screenslot__text",
                   _code: "",
                   className: "",
@@ -69,7 +69,7 @@
                   _children: [
                     {
                       _component: "@budibase/standard-components/text",
-                      _styles: { position: {}, layout: {} },
+                      _styles: {},
                       _id: "__screenslot__text_2",
                       _code: "",
                       text: "content",
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index 3c774cc4b8..c1cf4aab1f 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -11,7 +11,7 @@ export default ({
     <style>
       ${styles || ""}
 
-      .pos-${selectedComponentId} {
+      .element-${selectedComponentId} {
         border: 2px solid #0055ff; 
       }
 
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
index 5c07895792..051bc48bc2 100644
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { setContext, onMount } from "svelte"
   import PropsView from "./PropsView.svelte"
   import { store } from "builderStore"
   import IconButton from "components/common/IconButton.svelte"
@@ -16,27 +17,28 @@
   import panelStructure from "./temporaryPanelStructure.js"
   import CategoryTab from "./CategoryTab.svelte"
   import DesignView from "./DesignView.svelte"
+  import SettingsView from "./SettingsView.svelte"
 
   let current_view = "design"
   let codeEditor
   let flattenedPanel = flattenComponents(panelStructure.categories)
   let categories = [
-    { name: "Design" },
-    { name: "Settings" },
-    { name: "Actions" },
+    { value: "design", name: "Design" },
+    { value: "settings", name: "Settings" },
+    { value: "actions", name: "Actions" },
   ]
   let selectedCategory = categories[0]
 
   $: components = $store.components
   $: componentInstance = $store.currentComponentInfo
-  $: componentDefinition = $store.components.find(
-    c => c.name === componentInstance._component
-  )
-
-  $: panelDefinition = flattenedPanel.find(
+  $: componentDefinition = $store.components[componentInstance._component]
+  $: componentPropDefinition = flattenedPanel.find(
     //use for getting controls for each component property
     c => c._component === componentInstance._component
   )
+  $: panelDefinition = componentPropDefinition
+    ? componentPropDefinition.properties[selectedCategory.value]
+    : {}
 
   // SCREEN PROPS =============================================
   $: screen_props =
@@ -44,8 +46,11 @@
       ? getProps($store.currentPreviewItem, ["name", "favicon"])
       : getProps($store.currentPreviewItem, ["name", "description", "route"])
 
+  // const onStyleChanged = store.setComponentStyle
+  // const onStyleChanged = store.onStyleChanged
+
   const onStyleChanged = store.setComponentStyle
-  const onPropChanged = store.onPropChanged
+  const onPropChanged = store.setComponentProp
 
   function walkProps(component, action) {
     action(component)
@@ -81,12 +86,17 @@
     {selectedCategory} />
 
   <div class="component-props-container">
-    {#if current_view === 'design'}
+    {#if selectedCategory.value === 'design'}
       <DesignView
         {panelDefinition}
         {componentInstance}
         {componentDefinition}
-        {onPropChanged} />
+        {onStyleChanged} />
+    {:else if selectedCategory.value === 'settings'}
+      <SettingsView
+        {componentInstance}
+        {panelDefinition}
+        onChange={onPropChanged} />
     {/if}
 
   </div>
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte
index 7fc6af5312..612def10b0 100644
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@@ -5,11 +5,11 @@
   export let panelDefinition = {}
   export let componentInstance = {}
   export let componentDefinition = {}
-  export let onPropChanged = () => {}
+  export let onStyleChanged = () => {}
 
   let selectedCategory = "desktop"
 
-  const getProperties = name => panelDefinition.properties[name]
+  const getProperties = name => panelDefinition[name]
 
   function onChange(category) {
     selectedCategory = category
@@ -23,8 +23,7 @@
     { value: "selected", text: "Selected" },
   ]
 
-  $: propertyGroupNames =
-    !!panelDefinition.properties && Object.keys(panelDefinition.properties)
+  $: propertyGroupNames = Object.keys(panelDefinition)
 </script>
 
 <div class="design-view-container">
@@ -38,7 +37,7 @@
       <PropertyGroup
         name={groupName}
         properties={getProperties(groupName)}
-        {onPropChanged}
+        {onStyleChanged}
         {componentDefinition}
         {componentInstance} />
     {/each}
diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte
index 23dd223de6..4c018f49e4 100644
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@@ -1,4 +1,6 @@
 <script>
+  import { onMount, getContext } from "svelte"
+
   export let label = ""
   export let control = null
   export let value = ""
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index 2d88557777..be0e257355 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -3,10 +3,10 @@
   import PropertyControl from "./PropertyControl.svelte"
 
   export let name = ""
-  export let properties = {}
+  export let properties = []
   export let componentInstance = {}
   export let componentDefinition = {}
-  export let onPropChanged = () => {}
+  export let onStyleChanged = () => {}
 
   export let show = false
   let showComponentGroup = false
@@ -15,7 +15,10 @@
   const capitalize = name => name[0].toUpperCase() + name.slice(1)
 
   function onChange(key, v) {
-    !!v.target ? onPropChanged(key, v.target.value) : onPropChanged(key, v)
+    console.log("PROPERTY GROUP ON CHANGE")
+    !!v.target
+      ? onStyleChanged(name, key, v.target.value)
+      : onStyleChanged(name, key, v)
   }
 
   $: {
@@ -29,7 +32,6 @@
     }
   }
 
-  $: propertyDefinition = Object.entries(properties)
   $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
 </script>
 
@@ -43,14 +45,14 @@
   </div>
   <div class="property-panel" class:show>
 
-    {#each propertyDefinition as [key, definition]}
+    {#each properties as props}
       <!-- {#if propExistsOnComponentDef(key)} -->
       <PropertyControl
-        label={definition.label || capitalize(key)}
-        control={definition.control}
-        value={componentInstance[key]}
-        onChange={value => onChange(key, value)}
-        props={{ ...excludeProps(definition, ['control']) }} />
+        label={props.label}
+        control={props.control}
+        value={componentInstance[props.cssKey]}
+        onChange={value => onChange(props.cssKey, value)}
+        props={{ ...excludeProps(props, ['control']) }} />
       <!-- {/if} -->
     {/each}
   </div>
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte
new file mode 100644
index 0000000000..bf8ead76ff
--- /dev/null
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@@ -0,0 +1,35 @@
+<script>
+  import PropertyControl from "./PropertyControl.svelte"
+  import InputGroup from "../common/Inputs/InputGroup.svelte"
+  import { excludeProps } from "./propertyCategories.js"
+
+  export let panelDefinition = {}
+  export let componentInstance = {}
+  export let onChange = () => {}
+
+  function handleChange(key, data) {
+    data.target ? onChange(key, data.target.value) : onChange(key, data)
+  }
+
+  const meta = [
+    { placeholder: "T" },
+    { placeholder: "R" },
+    { placeholder: "B" },
+    { placeholder: "L" },
+  ]
+
+  $: settingsControls = !!panelDefinition ? Object.entries(panelDefinition) : []
+</script>
+
+<h4>Settings Panel</h4>
+
+<InputGroup label="Testing" {meta} />
+
+{#each settingsControls as [key, definition]}
+  <PropertyControl
+    control={definition.control}
+    label={key}
+    value={componentInstance[key]}
+    onChange={value => handleChange(key, value)}
+    props={{ ...excludeProps(definition, ['control']) }} />
+{/each}
diff --git a/packages/builder/src/components/userInterface/pagesParsing/createProps.js b/packages/builder/src/components/userInterface/pagesParsing/createProps.js
index c37e05e023..99f67ccc80 100644
--- a/packages/builder/src/components/userInterface/pagesParsing/createProps.js
+++ b/packages/builder/src/components/userInterface/pagesParsing/createProps.js
@@ -24,7 +24,7 @@ export const createProps = (componentDefinition, derivedFromProps) => {
   const props = {
     _id: uuid(),
     _component: componentDefinition._component,
-    _styles: { position: {}, layout: {} },
+    _styles: {},
     _code: "",
   }
 
@@ -71,7 +71,7 @@ export const makePropsSafe = (componentDefinition, props) => {
   }
 
   if (!props._styles) {
-    props._styles = { layout: {}, position: {} }
+    props._styles = {}
   }
 
   return props
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 08503b4414..1ad86f810d 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -1,16 +1,14 @@
 import Input from "../common/Input.svelte"
 import OptionSelect from "./OptionSelect.svelte"
+import InputGroup from "../common/Inputs/InputGroup.svelte"
 /*
   TODO: Allow for default values for all properties
 */
 
-export const general = {
-  text: { control: Input },
-}
-
-export const layout = {
-  flexDirection: {
+export const layout = [
+  {
     label: "Direction",
+    cssKey: "flex-direction",
     control: OptionSelect,
     initialValue: "columnReverse",
     options: [
@@ -20,41 +18,45 @@ export const layout = {
       { label: "column-reverse", value: "columnReverse" },
     ],
   },
-  justifyContent: { label: "Justify", control: Input },
-  alignItems: { label: "Align", control: Input },
-  flexWrap: {
+  { label: "Justify", cssKey: "justify-content", control: Input },
+  { label: "Align", cssKey: "align-items", control: Input },
+  {
     label: "Wrap",
+    cssKey: "flex-wrap",
     control: OptionSelect,
     options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }],
   },
-}
+]
 
-export const spacing = {
-  padding: { control: Input },
-  margin: { control: Input },
-}
+const spacingMeta = [
+  { placeholder: "T" },
+  { placeholder: "R" },
+  { placeholder: "B" },
+  { placeholder: "L" },
+]
+export const spacing = [
+  {
+    label: "Padding",
+    cssKey: "padding",
+    control: InputGroup,
+    meta: spacingMeta,
+  },
+  { label: "Margin", cssKey: "margin", control: InputGroup, meta: spacingMeta },
+]
 
-export const size = {
-  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: OptionSelect,
-    options: [
-      { label: "visible" },
-      { label: "auto" },
-      { label: "hidden" },
-      { label: "auto" },
-      { label: "scroll" },
-    ],
-  }, //custom
-}
+export const size = [
+  { label: "Width", cssKey: "width", control: Input },
+  { label: "Height", cssKey: "height", control: Input },
+  { label: "Min W", cssKey: "min-width", control: Input },
+  { label: "Min H", cssKey: "min-height", control: Input },
+  { label: "Max W", cssKey: "max-width", control: Input },
+  { label: "Max H", cssKey: "max-height", control: Input },
+]
 
-export const position = {
-  position: {
+export const position = [
+  {
+    label: "Position",
+    cssKey: "position",
     control: OptionSelect,
     options: [
       { label: "static" },
@@ -64,11 +66,12 @@ export const position = {
       { label: "sticky" },
     ],
   },
-}
+]
 
-export const typography = {
-  fontFamily: {
+export const typography = [
+  {
     label: "Font",
+    cssKey: "font-family",
     control: OptionSelect,
     options: [
       { label: "initial" },
@@ -82,8 +85,9 @@ export const typography = {
     ],
     styleBindingProperty: "font-family",
   },
-  fontWeight: {
-    label: "weight",
+  {
+    label: "Weight",
+    cssKey: "font-weight",
     control: OptionSelect,
     options: [
       { label: "normal" },
@@ -92,9 +96,11 @@ export const typography = {
       { label: "lighter" },
     ],
   },
-  fontSize: { label: "size", control: Input },
-  lineHeight: { label: "Line H", control: Input },
-  color: {
+  { label: "size", cssKey: "font-size", control: Input },
+  { label: "Line H", cssKey: "line-height", control: Input },
+  {
+    label: "Color",
+    cssKey: "color",
     control: OptionSelect,
     options: [
       { label: "black" },
@@ -104,8 +110,9 @@ export const typography = {
       { label: "green" },
     ],
   },
-  textAlign: {
+  {
     label: "align",
+    cssKey: "text-align",
     control: OptionSelect,
     options: [
       { label: "initial" },
@@ -115,13 +122,14 @@ export const typography = {
       { label: "justify" },
     ],
   }, //custom
-  textTransform: { label: "transform", control: Input }, //custom
-  fontStyle: { label: "style", control: Input }, //custom
-}
+  { label: "transform", cssKey: "text-transform", control: Input }, //custom
+  { label: "style", cssKey: "font-style", control: Input }, //custom
+]
 
-export const background = {
-  backgroundColor: {
-    label: "Background Color",
+export const background = [
+  {
+    label: "Background",
+    cssKey: "background",
     control: OptionSelect,
     options: [
       { label: "white" },
@@ -131,30 +139,29 @@ export const background = {
       { label: "black" },
     ],
   },
-  image: { control: Input }, //custom
-}
+  { label: "Image", cssKey: "image", control: Input }, //custom
+]
 
-export const border = {
-  borderRadius: { label: "radius", control: Input },
-  borderWidth: { label: "width", control: Input }, //custom
-  borderColor: { label: "color", control: Input },
-  borderStyle: { label: "style", control: Input },
-}
+export const border = [
+  { label: "Radius", cssKey: "border-radius", control: Input },
+  { label: "Width", cssKey: "border-width", control: Input }, //custom
+  { label: "Color", cssKey: "border-color", control: Input },
+  { label: "Style", cssKey: "border-style", control: Input },
+]
 
-export const effects = {
-  opacity: { control: Input },
-  rotate: { control: Input },
-  shadow: { control: Input },
-}
+export const effects = [
+  { label: "Opacity", cssKey: "opacity", control: Input },
+  { label: "Rotate", cssKey: "transform", control: Input }, //needs special control
+  { label: "Shadow", cssKey: "box-shadow", control: Input },
+]
 
-export const transitions = {
-  property: { control: Input },
-  duration: { control: Input },
-  ease: { control: Input },
-}
+export const transitions = [
+  { label: "Property", cssKey: "transition-property", control: Input },
+  { label: "Duration", cssKey: "transition-timing-function", control: Input },
+  { label: "Ease", cssKey: "transition-ease", control: Input },
+]
 
 export const all = {
-  general,
   layout,
   spacing,
   size,
@@ -174,4 +181,4 @@ export function excludeProps(props, propsToExclude) {
     }
   }
   return modifiedProps
-}
+}
\ No newline at end of file
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 918deacfc2..6e115431da 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@@ -1,12 +1,6 @@
-import {
-  general,
-  layout,
-  typography,
-  border,
-  size,
-  background,
-  all,
-} from "./propertyCategories.js"
+import Input from "../common/Input.svelte"
+
+import { all } from "./propertyCategories.js"
 
 export default {
   categories: [
@@ -30,7 +24,7 @@ export default {
           icon: "ri-layout-row-fill",
           commonProps: {},
           children: [],
-          properties: { background, size },
+          properties: { design: { ...all } },
         },
         {
           name: "Text",
@@ -44,17 +38,29 @@ export default {
               description: "A component for displaying heading text",
               icon: "ri-heading",
               properties: {
-               ...all
+                design: { ...all },
+                settings: {
+                  text: {
+                    control: Input,
+                  },
+                },
               },
             },
             {
               _component: "@budibase/standard-components/text",
               name: "Paragraph",
               description: "A component for displaying paragraph text.",
-              icon: 'ri-paragraph',
-              properties: { general, typography },
-            }
-          ]
+              icon: "ri-paragraph",
+              properties: {
+                design: { ...all },
+                settings: {
+                  text: {
+                    control: Input,
+                  },
+                },
+              },
+            },
+          ],
         },
         {
           name: "Input",
@@ -65,58 +71,60 @@ export default {
             {
               _component: "@budibase/standard-components/input",
               name: "Textfield",
-              description: "A textfield component that allows the user to input text.",
-              icon: 'ri-edit-box-line',
-              properties: {}
+              description:
+                "A textfield component that allows the user to input text.",
+              icon: "ri-edit-box-line",
+              properties: { design: { ...all } },
             },
             {
               _component: "@budibase/standard-components/checkbox",
               name: "Checkbox",
               description: "A selectable checkbox component",
-              icon: 'ri-checkbox-line',
-              properties: {}
+              icon: "ri-checkbox-line",
+              properties: { design: { ...all } },
             },
             {
               _component: "@budibase/standard-components/radiobutton",
               name: "Radiobutton",
               description: "A selectable radiobutton component",
-              icon: 'ri-radio-button-line',
-              properties: {}
+              icon: "ri-radio-button-line",
+              properties: { design: { ...all } },
             },
             {
               _component: "@budibase/standard-components/select",
               name: "Select",
-              description: "A select component for choosing from different options",
-              icon: 'ri-file-list-line',
-              properties: {}
-            }
-          ]
+              description:
+                "A select component for choosing from different options",
+              icon: "ri-file-list-line",
+              properties: { design: { ...all } },
+            },
+          ],
         },
         {
           _component: "@budibase/standard-components/button",
-          name: 'Button',
-          description: 'A basic html button that is ready for styling',
-          icon: 'ri-radio-button-fill',
+          name: "Button",
+          description: "A basic html button that is ready for styling",
+          icon: "ri-radio-button-fill",
           children: [],
-          properties: { background, typography, border, size },
+          properties: { design: { ...all } },
         },
         {
           _component: "@budibase/standard-components/icon",
-          name: 'Icon',
-          description: 'A basic component for displaying icons',
-          icon: 'ri-sun-fill',
-          properties: {},
-          children: []
+          name: "Icon",
+          description: "A basic component for displaying icons",
+          icon: "ri-sun-fill",
+          children: [],
+          properties: { design: { ...all } },
         },
         {
           _component: "@budibase/standard-components/link",
-          name: 'Link',
-          description: 'A basic link component for internal and external links',
-          icon: 'ri-link',
-          properties: {},
-          children: []
-        }
-      ]
+          name: "Link",
+          description: "A basic link component for internal and external links",
+          icon: "ri-link",
+          children: [],
+          properties: { design: { ...all } },
+        },
+      ],
     },
     {
       name: "Blocks",
@@ -124,18 +132,20 @@ export default {
       children: [
         {
           _component: "@budibase/materialdesign-components/BasicCard",
-          name: 'Card',
-          description: 'A basic card component that can contain content and actions.',
-          icon: 'ri-layout-bottom-line',
+          name: "Card",
+          description:
+            "A basic card component that can contain content and actions.",
+          icon: "ri-layout-bottom-line",
           children: [],
-          properties: { size, background, border },
+          properties: { design: { ...all } },
         },
         {
-          name: 'Login',
-          description: 'A component that automatically generates a login screen for your app.',
-          icon: 'ri-login-box-fill',
-          properties: {},
-          children: []
+          name: "Login",
+          description:
+            "A component that automatically generates a login screen for your app.",
+          icon: "ri-login-box-fill",
+          children: [],
+          properties: { design: { ...all } },
         },
         {
           name: "Navigation Bar",
@@ -143,27 +153,27 @@ export default {
           description:
             "A component for handling the navigation within your app.",
           icon: "ri-navigation-fill",
-          properties: {},
-          children: []
-        }
-      ]
+          children: [],
+          properties: { design: { ...all } },
+        },
+      ],
     },
     {
       name: "Data",
       isCategory: true,
       children: [
         {
-          name: 'Table',
-          description: 'A component that generates a table from your data.',
-          icon: 'ri-archive-drawer-fill',
-          properties: {},
-          children: []
+          name: "Table",
+          description: "A component that generates a table from your data.",
+          icon: "ri-archive-drawer-fill",
+          properties: { design: { ...all } },
+          children: [],
         },
         {
-          name: 'Form',
-          description: 'A component that generates a form from your data.',
-          icon: 'ri-file-edit-fill',
-          properties: {},
+          name: "Form",
+          description: "A component that generates a form from your data.",
+          icon: "ri-file-edit-fill",
+          properties: { design: { ...all } },
           _component: "@budibase/materialdesign-components/Form",
           template: {
             component: "@budibase/materialdesign-components/Form",
@@ -177,7 +187,7 @@ export default {
           name: "DataTable",
           description: "A table for displaying data from the backend.",
           icon: "ri-archive-drawer-fill",
-          commonProps: {},
+          properties: { design: { ...all } },
           children: [],
         },
         {
@@ -185,7 +195,7 @@ export default {
           name: "DataForm",
           description: "Form stuff",
           icon: "ri-file-edit-fill",
-          commonProps: {},
+          properties: { design: { ...all } },
           children: [],
         },
         {
@@ -193,7 +203,7 @@ export default {
           _component: "@budibase/standard-components/datachart",
           description: "Shiny chart",
           icon: "ri-bar-chart-line",
-          commonProps: {},
+          properties: { design: { ...all } },
           children: [],
         },
         {
@@ -201,7 +211,7 @@ export default {
           _component: "@budibase/standard-components/datalist",
           description: "Shiny list",
           icon: "ri-file-list-line",
-          commonProps: {},
+          properties: { design: { ...all } },
           children: [],
         },
         {
@@ -209,10 +219,10 @@ export default {
           _component: "@budibase/standard-components/datamap",
           description: "Shiny map",
           icon: "ri-map-pin-line",
-          commonProps: {},
+          properties: { design: { ...all } },
           children: [],
         },
       ],
     },
   ],
-}
+}
\ No newline at end of file
diff --git a/packages/client/src/render/attachChildren.js b/packages/client/src/render/attachChildren.js
index ebb5dd34da..22dff2b2a8 100644
--- a/packages/client/src/render/attachChildren.js
+++ b/packages/client/src/render/attachChildren.js
@@ -31,7 +31,7 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => {
     }
   }
 
-  htmlElement.classList.add(`lay-${treeNode.props._id}`)
+  // htmlElement.classList.add(`lay-${treeNode.props._id}`)
 
   const childNodes = []
   for (let childProps of treeNode.props._children) {
diff --git a/packages/client/src/render/prepareRenderComponent.js b/packages/client/src/render/prepareRenderComponent.js
index 916ac82960..91001018a7 100644
--- a/packages/client/src/render/prepareRenderComponent.js
+++ b/packages/client/src/render/prepareRenderComponent.js
@@ -36,7 +36,7 @@ export const prepareRenderComponent = ({
         htmlElement.children[htmlElement.children.length - 1]
 
       if (props._id && thisNode.rootElement) {
-        thisNode.rootElement.classList.add(`pos-${props._id}`)
+        thisNode.rootElement.classList.add(`element-${props._id}`)
       }
     }
   }