From 0aeab09c2ac63571269fef4e09644133e7f59149 Mon Sep 17 00:00:00 2001
From: Manthan Kuber <67104856+Manthan-Kuber@users.noreply.github.com>
Date: Thu, 17 Nov 2022 11:52:09 +0530
Subject: [PATCH] [Feature] :: Option to customise the error message styles for
 validations :: [Text input widget] (#4616)

* feat: add error text color property in styles

* feat: add default value to error text color

* fix: lint errors

* Update TextInput.jsx

* Remove errTextColor

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

* add style prop from computed styles

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

* Revert Package Lock changes

* Fixed bug on showing error message

Co-authored-by: Kavin Venkatachalam <50441969+kavinvenkatachalam@users.noreply.github.com>
Co-authored-by: Kavin Venkatachalam <kavin.saratha@gmail.com>
---
 frontend/src/Editor/Components/TextInput.jsx      | 6 +++++-
 frontend/src/Editor/WidgetManager/widgetConfig.js | 6 ++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Editor/Components/TextInput.jsx b/frontend/src/Editor/Components/TextInput.jsx
index 394879ef46..8f1c51ce0f 100644
--- a/frontend/src/Editor/Components/TextInput.jsx
+++ b/frontend/src/Editor/Components/TextInput.jsx
@@ -109,7 +109,11 @@ export const TextInput = function TextInput({
         value={value}
         data-cy={`draggable-widget-${String(component.name).toLowerCase()}`}
       />
-      <div className="invalid-feedback" data-cy={`${String(component.name).toLowerCase()}-invalid-feedback`}>
+      <div
+        className="invalid-feedback"
+        data-cy={`${String(component.name).toLowerCase()}-invalid-feedback`}
+        style={{ color: styles.errTextColor }}
+      >
         {validationError}
       </div>
     </div>
diff --git a/frontend/src/Editor/WidgetManager/widgetConfig.js b/frontend/src/Editor/WidgetManager/widgetConfig.js
index 59a35f2dcc..df4c0289e4 100644
--- a/frontend/src/Editor/WidgetManager/widgetConfig.js
+++ b/frontend/src/Editor/WidgetManager/widgetConfig.js
@@ -961,6 +961,11 @@ export const widgets = [
         displayName: 'Border Color',
         validation: { schema: { type: 'string' } },
       },
+      errTextColor: {
+        type: 'color',
+        displayName: 'Error Text Color',
+        validation: { schema: { type: 'string' } },
+      },
       borderRadius: {
         type: 'code',
         displayName: 'Border radius',
@@ -1020,6 +1025,7 @@ export const widgets = [
       styles: {
         textColor: { value: '#000' },
         borderColor: { value: '#dadcde' },
+        errTextColor: { value: '#ff0000' },
         borderRadius: { value: '{{0}}' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },