Add border related settings to input style settings

[MAILPOET-2599]

assets/js/src/form_editor/blocks/input_styles_settings.jsx

@@ -5,6 +5,7 @@ import {
   ColorPalette,
   Panel,
   PanelBody,
+  RangeControl,
   ToggleControl,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -71,6 +72,40 @@ const InputStylesSettings = ({
               checked={localStyles.bold || false}
               onChange={partial(updateStyles, 'bold')}
             />
+            <RangeControl
+              label={MailPoet.I18n.t('formSettingsBorderSize')}
+              value={localStyles.borderSize}
+              min={0}
+              max={10}
+              allowReset
+              onChange={partial(updateStyles, 'borderSize')}
+            />
+            <RangeControl
+              label={MailPoet.I18n.t('formSettingsBorderRadius')}
+              value={localStyles.borderRadius}
+              min={0}
+              max={40}
+              allowReset
+              onChange={partial(updateStyles, 'borderRadius')}
+            />
+            <div>
+              <h3 className="mailpoet-styles-settings-heading">
+                {MailPoet.I18n.t('formSettingsBorderColor')}
+                {
+                  localStyles.borderColor !== undefined
+                  && (
+                    <ColorIndicator
+                      colorValue={styles.borderColor}
+                    />
+                  )
+                }
+              </h3>
+              <ColorPalette
+                value={localStyles.borderColor}
+                onChange={partial(updateStyles, 'borderColor')}
+                colors={settingsColors}
+              />
+            </div>
           </>
         ) : null}
       </PanelBody>

assets/js/src/form_editor/store/blocks_to_form_body.jsx

@@ -11,6 +11,15 @@ const mapBlockStyles = (styles) => {
   if (has(styles, 'backgroundColor') && styles.backgroundColor) {
     mappedStyles.background_color = styles.backgroundColor;
   }
+  if (has(styles, 'borderSize') && styles.borderSize !== undefined) {
+    mappedStyles.border_size = styles.borderSize;
+  }
+  if (has(styles, 'borderRadius') && styles.borderRadius !== undefined) {
+    mappedStyles.border_radius = styles.borderRadius;
+  }
+  if (has(styles, 'borderColor') && styles.borderColor) {
+    mappedStyles.border_color = styles.borderColor;
+  }
   return mappedStyles;
 };
 

assets/js/src/form_editor/store/form_body_to_blocks.jsx

@@ -42,6 +42,15 @@ const mapBlockStyles = (styles) => {
   if (has(styles, 'background_color') && styles.background_color) {
     mappedStyles.backgroundColor = styles.background_color;
   }
+  if (has(styles, 'border_size') && styles.border_size !== undefined) {
+    mappedStyles.borderSize = parseInt(styles.border_size, 10);
+  }
+  if (has(styles, 'border_radius') && styles.border_radius !== undefined) {
+    mappedStyles.borderRadius = parseInt(styles.border_radius, 10);
+  }
+  if (has(styles, 'border_color') && styles.border_color) {
+    mappedStyles.borderColor = styles.border_color;
+  }
   return mappedStyles;
 };
 

tests/javascript/form_editor/store/blocks_to_form_body.spec.js

@@ -84,6 +84,9 @@ describe('Blocks to Form Body', () => {
           inheritFromTheme: false,
           bold: true,
           backgroundColor: '#aaaaaa',
+          borderRadius: 23,
+          borderSize: 4,
+          borderColor: '#dddddd',
         },
       },
     };
@@ -98,6 +101,9 @@ describe('Blocks to Form Body', () => {
       full_width: '0',
       bold: '1',
       background_color: '#aaaaaa',
+      border_radius: 23,
+      border_size: 4,
+      border_color: '#dddddd',
     });
   });
 

tests/javascript/form_editor/store/form_body_to_blocks.spec.js

@@ -133,6 +133,9 @@ describe('Form Body To Blocks', () => {
       full_width: '0',
       bold: '1',
       background_color: '#ffffff',
+      border_size: '4',
+      border_radius: '20',
+      border_color: '#cccccc',
     };
 
     const map = formBodyToBlocksFactory(colorDefinitions, [customFieldText]);
@@ -149,6 +152,9 @@ describe('Form Body To Blocks', () => {
       inheritFromTheme: false,
       bold: true,
       backgroundColor: '#ffffff',
+      borderSize: 4,
+      borderRadius: 20,
+      borderColor: '#cccccc',
     });
   });
 

views/form/editor.html

@@ -49,6 +49,9 @@
   'formSettingsInheritStyleFromTheme': __('Inherit style from theme'),
   'formSettingsDisplayFullWidth': _x('Display Fullwidth', 'A label for checkbox in form style settings'),
   'formSettingsBold': _x('Bold', 'A label for checkbox in form style settings'),
+  'formSettingsBorderSize': _x('Border Size', 'A label for checkbox in form style settings'),
+  'formSettingsBorderRadius': _x('Border Radius', 'A label for checkbox in form style settings'),
+  'formSettingsBorderColor': _x('Border Color', 'A label for checkbox in form style settings'),
   'customFieldSettings': _x('Custom field settings', 'A settings section heading'),
   'customFieldsFormSettings': _x('Form settings', 'A settings section heading'),
   'formPlacement': _x('Form Placement', 'A settings section heading'),