From 082be1b63d8ceba1ae132d88cb2dd21793df0fe6 Mon Sep 17 00:00:00 2001
From: Froosty <khanalsagar83@gmail.com>
Date: Tue, 11 Oct 2022 09:25:30 +0545
Subject: [PATCH] Feature/list view border color (#4300)

* Update widgetConfig.js

* Update Listview.jsx

* Update widgetConfig.js

* Update Listview.jsx

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

Co-authored-by: Kavin Venkatachalam <50441969+kavinvenkatachalam@users.noreply.github.com>

Co-authored-by: Kavin Venkatachalam <50441969+kavinvenkatachalam@users.noreply.github.com>
---
 frontend/src/Editor/Components/Listview.jsx       | 4 ++++
 frontend/src/Editor/WidgetManager/widgetConfig.js | 8 ++++++++
 2 files changed, 12 insertions(+)

diff --git a/frontend/src/Editor/Components/Listview.jsx b/frontend/src/Editor/Components/Listview.jsx
index bf3c53ed1f..f45d650bc8 100644
--- a/frontend/src/Editor/Components/Listview.jsx
+++ b/frontend/src/Editor/Components/Listview.jsx
@@ -22,8 +22,12 @@ export const Listview = function Listview({
   const { visibility, disabledState, borderRadius } = { ...fallbackStyles, ...styles };
   const backgroundColor =
     ['#fff', '#ffffffff'].includes(styles.backgroundColor) && darkMode ? '#232E3C' : styles.backgroundColor;
+  const borderColor = styles.borderColor ?? 'transparent';
+
   const computedStyles = {
     backgroundColor,
+    border: '1px solid',
+    borderColor,
     height,
     display: visibility ? 'flex' : 'none',
     borderRadius: borderRadius ?? 0,
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index 4d63a16414..1dd458be04 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -3528,6 +3528,13 @@ export const widgets = [
           schema: { type: 'string' },
         },
       },
+      borderColor: {
+        type: 'color',
+        displayName: 'Border color',
+        validation: {
+          schema: { type: 'string' },
+        },
+      },
       visibility: {
         type: 'toggle',
         displayName: 'Visibility',
@@ -3575,6 +3582,7 @@ export const widgets = [
       events: [],
       styles: {
         backgroundColor: { value: '' },
+        borderColor: { value: '#dadcde' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
         borderRadius: { value: '{{0}}' },