Merge pull request #281 from Budibase/padding-and-margin-props-fix

Padding and margin props fix

packages/builder/src/builderStore/generate_css.js

@@ -1,3 +1,5 @@
+import { toNumber } from "lodash/fp"
+
 export const generate_screen_css = component_arr => {
   let styles = ""
   for (const { _styles, _id, _children, _component } of component_arr) {
@@ -37,7 +39,7 @@ export const generate_css = style => {
 export const generate_array_styles = item => {
   let safeItem = item === "" ? 0 : item
   let hasPx = new RegExp("px$")
-  if (!hasPx.test(safeItem)) {
+  if (!hasPx.test(safeItem) && !isNaN(toNumber(safeItem))) {
     return `${safeItem}px`
   } else {
     return safeItem

packages/builder/src/components/common/Input.svelte

@@ -16,7 +16,6 @@
     line-height: 1.3;
     padding: 12px;
     width: 164px;
-    float: right;
     max-width: 100%;
     box-sizing: border-box;
     margin: 0;

packages/builder/src/components/common/Inputs/InputGroup.svelte

@@ -4,7 +4,7 @@
   export let meta = []
   export let label = ""
   export let value = [0, 0, 0, 0]
-  export let type = "number"
+  export let type = "text"
   export let onChange = () => {}
 
   function handleChange(val, idx) {
@@ -28,9 +28,6 @@
 </div>
 
 <style>
-  .input-container {
-  }
-
   .label {
     flex: 0;
   }
@@ -53,18 +50,17 @@
     border: 1px solid var(--grey);
     border-radius: 2px;
     outline: none;
-    float: right;
   }
 
-  input[type="number"]::-webkit-inner-spin-button,
-  input[type="number"]::-webkit-outer-spin-button {
+  input[type="text"]::-webkit-inner-spin-button,
+  input[type="text"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     margin: 0;
   }
 
-  input[type="number"] {
+  input[type="text"] {
     -moz-appearance: textfield;
   }
 

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

@@ -40,7 +40,10 @@
         class="budibase__nav-item item"
         class:selected={currentComponent === component}
         style="padding-left: {level * 20 + 53}px">
-        <div>{get_capitalised_name(component._component)}</div>
+        <div class="nav-item">
+          <i class="icon ri-arrow-right-circle-fill" />
+          {get_capitalised_name(component._component)}
+        </div>
         <div class="actions">
           <ComponentDropdownMenu {component} />
         </div>
@@ -72,8 +75,6 @@
     border-radius: 3px;
     height: 35px;
     align-items: center;
-    font-weight: 400;
-    font-size: 13px;
   }
 
   .actions {
@@ -95,4 +96,16 @@
   .item:hover .actions {
     display: block;
   }
+
+  .nav-item {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: var(--ink);
+  }
+
+  .icon {
+    color: var(--ink-light);
+    margin-right: 8px;
+  }
 </style>

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

@@ -27,7 +27,7 @@ export const layout = [
       { label: "Select Option", value: "" },
       { label: "Row", value: "row" },
       { label: "Row Reverse", value: "rowReverse" },
-      { label: "column", value: "column" },
+      { label: "Column", value: "column" },
       { label: "Column Reverse", value: "columnReverse" },
     ],
   },
@@ -75,10 +75,10 @@ export const layout = [
 ]
 
 const spacingMeta = [
-  { placeholder: "L" },
-  { placeholder: "B" },
-  { placeholder: "R" },
   { placeholder: "T" },
+  { placeholder: "R" },
+  { placeholder: "B" },
+  { placeholder: "L" },
 ]
 
 export const spacing = [