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