From ea09f3de05f8b9d1c158e1242032c68e6d9c53f1 Mon Sep 17 00:00:00 2001
From: Pavel Dohnal <pavel@mailpoet.com>
Date: Mon, 27 Apr 2020 15:03:21 +0200
Subject: [PATCH] Align correctly input fields in form

[MAILPOET-2809]
---
 .../blocks/convert_alignment_to_margin.ts            | 12 ++++++++++++
 .../js/src/form_editor/blocks/custom_select/edit.jsx |  8 ++------
 .../src/form_editor/blocks/custom_textarea/edit.jsx  |  6 ++++++
 assets/js/src/form_editor/blocks/text_input_edit.jsx | 10 ++++++++++
 4 files changed, 30 insertions(+), 6 deletions(-)
 create mode 100644 assets/js/src/form_editor/blocks/convert_alignment_to_margin.ts

diff --git a/assets/js/src/form_editor/blocks/convert_alignment_to_margin.ts b/assets/js/src/form_editor/blocks/convert_alignment_to_margin.ts
new file mode 100644
index 0000000000..56f794fe6b
--- /dev/null
+++ b/assets/js/src/form_editor/blocks/convert_alignment_to_margin.ts
@@ -0,0 +1,12 @@
+
+function convert(alignment: 'left' | 'center' | 'right'): string {
+  if (alignment === 'right') {
+    return '0 0 0 auto';
+  }
+  if (alignment === 'center') {
+    return '0 auto';
+  }
+  return 'auto 0';
+}
+
+export default convert;
diff --git a/assets/js/src/form_editor/blocks/custom_select/edit.jsx b/assets/js/src/form_editor/blocks/custom_select/edit.jsx
index 9e146d4990..7755308b4b 100644
--- a/assets/js/src/form_editor/blocks/custom_select/edit.jsx
+++ b/assets/js/src/form_editor/blocks/custom_select/edit.jsx
@@ -14,6 +14,7 @@ import ParagraphEdit from '../paragraph_edit.jsx';
 import formatLabel from '../label_formatter.jsx';
 import CustomFieldSettings from '../custom_radio/custom_field_settings.jsx';
 import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
+import convertAlignmentToMargin from '../convert_alignment_to_margin';
 
 const CustomSelectEdit = ({ attributes, setAttributes, clientId }) => {
   const settings = useSelect(
@@ -104,12 +105,7 @@ const CustomSelectEdit = ({ attributes, setAttributes, clientId }) => {
 
     if (settings.alignment !== undefined) {
       inputStyles.textAlign = settings.alignment;
-      if (inputStyles.textAlign === 'right') {
-        inputStyles.margin = '0 0 0 auto';
-      }
-      if (inputStyles.textAlign === 'center') {
-        inputStyles.margin = '0 auto';
-      }
+      inputStyles.margin = convertAlignmentToMargin(inputStyles.textAlign);
     }
 
     return (
diff --git a/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx b/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
index f43733174f..32aa00bc30 100644
--- a/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
+++ b/assets/js/src/form_editor/blocks/custom_textarea/edit.jsx
@@ -15,6 +15,7 @@ import CustomFieldSettings from '../custom_text/custom_field_settings.jsx';
 import formatLabel from '../label_formatter.jsx';
 import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
 import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
+import convertAlignmentToMargin from '../convert_alignment_to_margin';
 
 const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
   const settings = useSelect(
@@ -134,6 +135,11 @@ const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
     inputStyles.padding = settings.inputPadding;
   }
 
+  if (settings.alignment !== undefined) {
+    inputStyles.textAlign = settings.alignment;
+    inputStyles.margin = convertAlignmentToMargin(inputStyles.textAlign);
+  }
+
   inputStyles.resize = 'none';
 
   const textarea = useRef(null);
diff --git a/assets/js/src/form_editor/blocks/text_input_edit.jsx b/assets/js/src/form_editor/blocks/text_input_edit.jsx
index 255717537d..4f413a8f59 100644
--- a/assets/js/src/form_editor/blocks/text_input_edit.jsx
+++ b/assets/js/src/form_editor/blocks/text_input_edit.jsx
@@ -4,6 +4,7 @@ import { useSelect } from '@wordpress/data';
 import ParagraphEdit from './paragraph_edit.jsx';
 import formatLabel from './label_formatter.jsx';
 import { inputStylesPropTypes } from './input_styles_settings.jsx';
+import convertAlignmentToMargin from './convert_alignment_to_margin';
 
 const TextInputEdit = ({
   label,
@@ -35,6 +36,15 @@ const TextInputEdit = ({
     inputStyles.padding = settings.inputPadding;
   }
 
+  if (settings.inputPadding !== undefined) {
+    inputStyles.padding = settings.inputPadding;
+  }
+
+  if (settings.alignment !== undefined) {
+    inputStyles.textAlign = settings.alignment;
+    inputStyles.margin = convertAlignmentToMargin(inputStyles.textAlign);
+  }
+
   if (styles.fullWidth) {
     inputStyles.width = '100%';
   }