From 70a90b2443123797fba2a830c24df29892561d39 Mon Sep 17 00:00:00 2001
From: prateek565 <78357778+prateek565@users.noreply.github.com>
Date: Tue, 11 Oct 2022 13:47:15 +0530
Subject: [PATCH] Added Border color  style property to Container widgets
 (#4202)

* Update Container.jsx

* Update widgetConfig.js

* Update frontend/src/Editor/Components/Container.jsx

small edit

Co-authored-by: Arpit <arpitnath42@gmail.com>

* Update frontend/src/Editor/WidgetManager/widgetConfig.js

small edit

Co-authored-by: Arpit <arpitnath42@gmail.com>

* Update widgetConfig.js

shifted border color next to border sradius

* Update Container.jsx

small changes

* Update widgetConfig.js

Co-authored-by: Arpit <arpitnath42@gmail.com>
---
 frontend/src/Editor/Components/Container.jsx      | 5 +++--
 frontend/src/Editor/WidgetManager/widgetConfig.js | 8 ++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Editor/Components/Container.jsx b/frontend/src/Editor/Components/Container.jsx
index 1abf5992b1..2ffda2a1e6 100644
--- a/frontend/src/Editor/Components/Container.jsx
+++ b/frontend/src/Editor/Components/Container.jsx
@@ -12,14 +12,15 @@ export const Container = function Container({
   styles,
   darkMode,
 }) {
-  const { visibility, disabledState, borderRadius } = styles;
+  const { visibility, disabledState, borderRadius,borderColor } = styles;
   const backgroundColor =
     ['#fff', '#ffffffff'].includes(styles.backgroundColor) && darkMode ? '#232E3C' : styles.backgroundColor;
   const computedStyles = {
     backgroundColor,
+    borderRadius: borderRadius ? parseFloat(borderRadius) : 0,
+    border: `1px solid ${borderColor}`,
     height,
     display: visibility ? 'flex' : 'none',
-    borderRadius: borderRadius ? parseFloat(borderRadius) : 0,
   };
 
   const parentRef = useRef(null);
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index f143db6ab4..f27452e32d 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -2051,6 +2051,13 @@ export const widgets = [
           },
         },
       },
+      borderColor: {
+        type: 'color',
+        displayName: 'Border color',
+        validation: {
+          schema: { type: 'string' },
+        },
+      },
       visibility: {
         type: 'toggle',
         displayName: 'Visibility',
@@ -2079,6 +2086,7 @@ export const widgets = [
       styles: {
         backgroundColor: { value: '' },
         borderRadius: { value: '0' },
+        borderColor: { value: '#fff' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
       },