From 1d2b306574d1af0b1e897d3e7f2bb36b8d5b6568 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 1 Jul 2021 00:40:16 +0100
Subject: [PATCH] Add border style as an explicit option to prevent issues with
 dynamically adding it via the styleable helper

---
 .../design/PropertiesPanel/componentStyles.js | 20 ++++++++++++++++---
 packages/client/src/utils/styleable.js        |  5 -----
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
index 95ca1e52d5..4b30b65fc5 100644
--- a/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
+++ b/packages/builder/src/components/design/PropertiesPanel/componentStyles.js
@@ -284,7 +284,7 @@ export const background = {
 
 export const border = {
   label: "Border",
-  columns: "auto 1fr",
+  columns: "1fr 1fr",
   settings: [
     {
       label: "Color",
@@ -295,17 +295,31 @@ export const border = {
       label: "Width",
       key: "border-width",
       control: Select,
+      column: "1 / 2",
+      placeholder: "None",
       options: [
         { label: "Small", value: "1px" },
         { label: "Medium", value: "2px" },
         { label: "Large", value: "4px" },
       ],
     },
+    {
+      label: "Style",
+      key: "border-style",
+      control: Select,
+      column: "2 / 3",
+      placeholder: "None",
+      options: [
+        { label: "Solid", value: "solid" },
+        { label: "Dotted", value: "dotted" },
+        { label: "Dashed", value: "dashed" },
+      ],
+    },
     {
       label: "Radius",
       key: "border-radius",
       control: Select,
-      column: "1 / 3",
+      placeholder: "None",
       options: [
         { label: "Small", value: "0.25rem" },
         { label: "Medium", value: "0.5rem" },
@@ -317,7 +331,7 @@ export const border = {
       label: "Shadow",
       key: "box-shadow",
       control: Select,
-      column: "1 / 3",
+      placeholder: "None",
       options: [
         {
           label: "Small",
diff --git a/packages/client/src/utils/styleable.js b/packages/client/src/utils/styleable.js
index 62688e5c07..3f02b36600 100644
--- a/packages/client/src/utils/styleable.js
+++ b/packages/client/src/utils/styleable.js
@@ -34,11 +34,6 @@ export const styleable = (node, styles = {}) => {
       baseStyles.overflow = "hidden"
     }
 
-    // Append border-style css if border-width is specified
-    if (newStyles.normal?.["border-width"]) {
-      baseStyles["border-style"] = "solid"
-    }
-
     const componentId = newStyles.id
     const customStyles = newStyles.custom || ""
     const normalStyles = { ...baseStyles, ...newStyles.normal }