feat: Add customizable border color for text input component (#4191)

* feat: Add customizable border color for text input component * Update widgetConfig.js * chore: Fix linter issues
ToolJet · Oct 26, 2022 · 0c895e2 · 0c895e2
1 parent 0853685
commit 0c895e2
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/frontend/src/Editor/Components/TextInput.jsx b/frontend/src/Editor/Components/TextInput.jsx
@@ -13,13 +13,18 @@ export const TextInput = function TextInput({
 }) {
   const textInputRef = useRef();
 
-  const textColor = darkMode && styles.textColor === '#000' ? '#fff' : styles.textColor;
-
   const [disable, setDisable] = useState(styles.disabledState);
   const [value, setValue] = useState(properties.value);
   const [visibility, setVisibility] = useState(styles.visibility);
   const { isValid, validationError } = validate(value);
 
+  const computedStyles = {
+    height,
+    borderRadius: `${styles.borderRadius}px`,
+    color: darkMode && styles.textColor === '#000' ? '#fff' : styles.textColor,
+    borderColor: styles.borderColor,
+  };
+
   useEffect(() => {
     disable !== styles.disabledState && setDisable(styles.disabledState);
   }, [styles.disabledState]);
@@ -98,7 +103,7 @@ export const TextInput = function TextInput({
           darkMode && 'dark-theme-placeholder'
         }`}
         placeholder={properties.placeholder}
-        style={{ height, borderRadius: `${styles.borderRadius}px`, color: textColor }}
+        style={computedStyles}
         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
@@ -954,6 +954,11 @@ export const widgets = [
         displayName: 'Text Color',
         validation: { schema: { type: 'string' } },
       },
+      borderColor: {
+        type: 'color',
+        displayName: 'Border Color',
+        validation: { schema: { type: 'string' } },
+      },
       borderRadius: {
         type: 'code',
         displayName: 'Border radius',
@@ -1012,6 +1017,7 @@ export const widgets = [
       events: [],
       styles: {
         textColor: { value: '#000' },
+        borderColor: { value: '#dadcde' },
         borderRadius: { value: '{{0}}' },
         visibility: { value: '{{true}}' },
         disabledState: { value: '{{false}}' },