From d029dc6a4d9a30f1e71be6b46c1ac0b18e507ce6 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Tue, 9 Jun 2020 11:33:37 +0100
Subject: [PATCH] User can now specify suffix in the Input

---
 .../src/components/common/Inputs/InputGroup.svelte        | 8 ++++----
 .../src/components/userInterface/propertyCategories.js    | 8 --------
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index 3be9f17b16..e5fed68103 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -10,18 +10,18 @@
   export let onChange = () => {}
 
   function handleChange(val, idx) {
-    value.splice(idx, 1, val !== "auto" ? val + suffix : val)
+    value.splice(idx, 1, val !== "auto" && suffix ? val + suffix : val)
 
     value = value
     let _value = value.map(v =>
-      !v.endsWith(suffix) && v !== "auto" ? v + suffix : v
+      suffix && !v.endsWith(suffix) && v !== "auto" ? v + suffix : v
     )
     onChange(_value)
   }
 
-  $: displayValues = value
+  $: displayValues = value && suffix
     ? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
-    : []
+    : value || []
 </script>
 
 <div class="input-container">
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 59458edd49..20e4703324 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -84,7 +84,6 @@ export const spacing = [
     key: "margin",
     control: InputGroup,
     meta: spacingMeta,
-    suffix: "px",
     defaultValue: ["0", "0", "0", "0"],
   },
   {
@@ -92,7 +91,6 @@ export const spacing = [
     key: "padding",
     control: InputGroup,
     meta: spacingMeta,
-    suffix: "px",
     defaultValue: ["0", "0", "0", "0"],
   },
 ]
@@ -103,7 +101,6 @@ export const size = [
     key: "width",
     control: Input,
     placeholder: "px",
-    suffix: "px",
     width: "48px",
     textAlign: "center",
   },
@@ -112,7 +109,6 @@ export const size = [
     key: "height",
     control: Input,
     placeholder: "px",
-    suffix: "px",
     width: "48px",
     textAlign: "center",
   },
@@ -121,7 +117,6 @@ export const size = [
     key: "min-width",
     control: Input,
     placeholder: "px",
-    suffix: "px",
     width: "48px",
     textAlign: "center",
   },
@@ -129,7 +124,6 @@ export const size = [
     label: "Min H",
     key: "min-height",
     control: Input,
-    suffix: "px",
     placeholder: "px",
     width: "48px",
     textAlign: "center",
@@ -139,7 +133,6 @@ export const size = [
     key: "max-width",
     control: Input,
     placeholder: "px",
-    suffix: "px",
     width: "48px",
     textAlign: "center",
   },
@@ -148,7 +141,6 @@ export const size = [
     key: "max-height",
     control: Input,
     placeholder: "px",
-    suffix: "px",
     width: "48px",
     textAlign: "center",
   },