Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 00:48:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

[Feature] :: Option to customise the error message styles for validations :: [Text input widget] (#4616)

Browse source 
* 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>
This commit is contained in:
Manthan Kuber 2022-11-17 11:52:09 +05:30 committed by GitHub
parent 222eca68fe
commit 0aeab09c2a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/Editor/Components/TextInput.jsx
View file

@ -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>

6
frontend/src/Editor/WidgetManager/widgetConfig.js
View file

@ -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}}' },