From 4c4749af0ae9e74dc93e372df4d16ad8f5f14d68 Mon Sep 17 00:00:00 2001
From: Srisuma Atluri <40341173+Srisuma13@users.noreply.github.com>
Date: Thu, 3 Nov 2022 11:02:00 +0530
Subject: [PATCH] Add border color property to number input widget (#4175)

* add border color property to number input widget

* fix lint

* adds default value

* fixes

* fix lint
---
 frontend/src/Editor/Components/NumberInput.jsx    | 10 ++++++++--
 frontend/src/Editor/WidgetManager/widgetConfig.js |  8 ++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Editor/Components/NumberInput.jsx b/frontend/src/Editor/Components/NumberInput.jsx
index bfdd635651..966509e99c 100644
--- a/frontend/src/Editor/Components/NumberInput.jsx
+++ b/frontend/src/Editor/Components/NumberInput.jsx
@@ -9,7 +9,7 @@ export const NumberInput = function NumberInput({
   darkMode,
   fireEvent,
 }) {
-  const { visibility, borderRadius } = styles;
+  const { visibility, borderRadius, borderColor } = styles;
 
   const textColor = darkMode && ['#232e3c', '#000000ff'].includes(styles.textColor) ? '#fff' : styles.textColor;
 
@@ -50,7 +50,13 @@ export const NumberInput = function NumberInput({
       type="number"
       className="form-control"
       placeholder={properties.placeholder}
-      style={{ height, display: visibility ? '' : 'none', borderRadius: `${borderRadius}px`, color: textColor }}
+      style={{
+        height,
+        display: visibility ? '' : 'none',
+        borderRadius: `${borderRadius}px`,
+        borderColor,
+        color: textColor,
+      }}
       value={value}
       data-cy={`draggable-widget-${String(component.name).toLowerCase()}`}
     />
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index 15c9b86c4b..1d9c4d77e3 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -1092,6 +1092,13 @@ export const widgets = [
           schema: { type: 'union', schemas: [{ type: 'string' }, { type: 'number' }] },
         },
       },
+      borderColor: {
+        type: 'color',
+        displayName: 'Border Color',
+        validation: {
+          schema: { type: 'string' },
+        },
+      },
       textColor: {
         type: 'color',
         displayName: 'Text Color',
@@ -1117,6 +1124,7 @@ export const widgets = [
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },
         borderRadius: { value: '{{0}}' },
+        borderColor: { value: '#fff' },
         textColor: { value: '#232e3c' },
       },
     },