Change form input wrappers to form p to div

[MAILPOET-2609]
This commit is contained in:
Rostislav Wolny
2020-02-19 17:09:05 +01:00
committed by Pavel Dohnal
parent 28b750c9e2
commit d9d1f05119
15 changed files with 32 additions and 24 deletions

View File

@@ -65,6 +65,11 @@ $form-columns-space-between: 30px;
$form-columns-padding-vertical: 20px;
$form-columns-padding-horizontal: 20px;
$form-break-small-width: 500px;
$form-block-margin: 20px;
.mailpoet_paragraph {
margin-bottom: $form-block-margin;
}
@mixin maxWidthColumns() {
flex-wrap: wrap;

View File

@@ -23,7 +23,7 @@ class Checkbox {
$fieldName = 'data[' . $this->rendererHelper->getFieldName($block) . ']';
$fieldValidation = $this->rendererHelper->getInputValidation($block);
$html .= '<p class="mailpoet_paragraph">';
$html .= '<div class="mailpoet_paragraph">';
$html .= $this->rendererHelper->renderLabel($block, $formSettings);
@@ -60,7 +60,7 @@ class Checkbox {
$html .= '<span class="mailpoet_error_' . $block['id'] . '"></span>';
$html .= '</p>';
$html .= '</div>';
return $html;
}

View File

@@ -22,7 +22,7 @@ class Columns {
}
private function getClass(array $params): string {
$classes = ['mailpoet_form_columns'];
$classes = ['mailpoet_form_columns mailpoet_paragraph'];
if (!empty($params['vertical_alignment'])) {
$classes[] = "mailpoet_vertically_align_{$params['vertical_alignment']}";
}

View File

@@ -13,10 +13,10 @@ class Date {
public function render(array $block, array $formSettings): string {
$html = '';
$html .= '<p class="mailpoet_paragraph">';
$html .= '<div class="mailpoet_paragraph">';
$html .= $this->rendererHelper->renderLabel($block, $formSettings);
$html .= $this->renderDateSelect($block);
$html .= '</p>';
$html .= '</div>';
return $html;
}

View File

@@ -22,9 +22,9 @@ class Html {
$text = nl2br($text);
}
$html .= '<p class="mailpoet_paragraph" ' . $this->rendererHelper->renderFontStyle($formSettings) . '>';
$html .= '<div class="mailpoet_paragraph" ' . $this->rendererHelper->renderFontStyle($formSettings) . '>';
$html .= $text;
$html .= '</p>';
$html .= '</div>';
return $html;
}

View File

@@ -23,7 +23,7 @@ class Radio {
$fieldName = 'data[' . $this->rendererHelper->getFieldName($block) . ']';
$fieldValidation = $this->rendererHelper->getInputValidation($block);
$html .= '<p class="mailpoet_paragraph">';
$html .= '<div class="mailpoet_paragraph">';
$html .= $this->rendererHelper->renderLabel($block, $formSettings);
@@ -68,7 +68,7 @@ class Radio {
$html .= '<span class="mailpoet_error_' . $block['id'] . '"></span>';
$html .= '</p>';
$html .= '</div>';
return $html;
}

View File

@@ -23,7 +23,7 @@ class Segment {
$fieldName = 'data[' . $this->rendererHelper->getFieldName($block) . ']';
$fieldValidation = $this->rendererHelper->getInputValidation($block);
$html .= '<p class="mailpoet_paragraph">';
$html .= '<div class="mailpoet_paragraph">';
$html .= $this->rendererHelper->renderLabel($block, $formSettings);
@@ -50,7 +50,7 @@ class Segment {
$html .= '<span class="mailpoet_error_' . $block['id'] . '"></span>';
$html .= '</p>';
$html .= '</div>';
return $html;
}

View File

@@ -22,7 +22,8 @@ class Select {
$fieldName = 'data[' . $this->rendererHelper->getFieldName($block) . ']';
$automationId = ($block['id'] == 'status') ? 'data-automation-id="form_status"' : '';
$html .= '<p class="mailpoet_paragraph">';
$html .= '<div class="mailpoet_paragraph">';
$html .= $this->rendererHelper->renderLabel($block, $formSettings);
$html .= '<select class="mailpoet_select" name="' . $fieldName . '" ' . $automationId . '>';
@@ -70,7 +71,7 @@ class Select {
}
$html .= '</select>';
$html .= '</p>';
$html .= '</div>';
return $html;
}

View File

@@ -14,7 +14,7 @@ class Submit {
public function render(array $block): string {
$html = '';
$html .= '<p class="mailpoet_paragraph"><input type="submit" class="mailpoet_submit" ';
$html .= '<div class="mailpoet_paragraph"><input type="submit" class="mailpoet_submit" ';
$html .= 'value="' . $this->rendererHelper->getFieldLabel($block) . '" ';
@@ -24,7 +24,7 @@ class Submit {
$html .= '<span class="mailpoet_form_loading"><span class="mailpoet_bounce1"></span><span class="mailpoet_bounce2"></span><span class="mailpoet_bounce3"></span></span>';
$html .= '</p>';
$html .= '</div>';
return $html;
}

View File

@@ -19,7 +19,7 @@ class Text {
$automationId = 'data-automation-id="form_email" ';
}
$html = '<p class="mailpoet_paragraph">';
$html = '<div class="mailpoet_paragraph">';
$html .= $this->rendererHelper->renderLabel($block, $formSettings);
@@ -41,7 +41,7 @@ class Text {
$html .= '/>';
$html .= '</p>';
$html .= '</div>';
return $html;
}

View File

@@ -13,7 +13,7 @@ class Textarea {
public function render(array $block, array $formSettings): string {
$html = '';
$html .= '<p class="mailpoet_paragraph">';
$html .= '<div class="mailpoet_paragraph">';
$html .= $this->rendererHelper->renderLabel($block, $formSettings);
@@ -31,7 +31,7 @@ class Textarea {
$html .= '>' . $this->rendererHelper->getFieldValue($block) . '</textarea>';
$html .= '</p>';
$html .= '</div>';
return $html;
}

View File

@@ -14,6 +14,7 @@ class Styles {
/* paragraphs (label + input) */
.mailpoet_paragraph {
line-height:20px;
margin-bottom: 20px;
}
/* labels */

View File

@@ -117,6 +117,7 @@ class SubscriptionFormCest {
$i->click('[data-automation-id="settings-submit-button"]');
$i->waitForText('Settings saved');
$i->amOnPage('/form-test');
$i->scrollTo('.mailpoet_form_iframe');
$i->switchToIframe('mailpoet_form_iframe');
$i->fillField('[data-automation-id="form_email"]', $this->subscriberEmail);
$i->click('.mailpoet_submit');

View File

@@ -27,7 +27,7 @@ class ColumnsTest extends \MailPoetUnitTest {
public function testItShouldRenderColumns() {
$html = $this->columns->render($this->block, 'content');
expect($html)->equals('<div class="mailpoet_form_columns">content</div>');
expect($html)->equals('<div class="mailpoet_form_columns mailpoet_paragraph">content</div>');
}
public function testItShouldRenderVerticalAlignClass() {
@@ -82,7 +82,7 @@ class ColumnsTest extends \MailPoetUnitTest {
$block = $this->block;
$block['params']['custom_text_color'] = '#ffffee';
$html = $this->columns->render($block, 'content');
$columns = $this->htmlParser->getElementByXpath($html, '//div[@class="mailpoet_form_columns"]');
$columns = $this->htmlParser->getElementByXpath($html, '//div[1]');
$style = $this->htmlParser->getAttribute($columns, 'style');
expect($style->textContent)->contains('color:#ffffee;');
}

View File

@@ -29,20 +29,20 @@ class HtmlTest extends \MailPoetUnitTest {
public function testItShouldRenderCustomHtml() {
$html = $this->html->render($this->block, []);
expect($html)->equals("<p class=\"mailpoet_paragraph\" >line1<br />\nline2</p>");
expect($html)->equals("<div class=\"mailpoet_paragraph\" >line1<br />\nline2</div>");
}
public function testItShouldRenderCustomHtmlWithoutAutomaticBrs() {
$block = $this->block;
$block['params']['nl2br'] = '';
$html = $this->html->render($block, []);
expect($html)->equals("<p class=\"mailpoet_paragraph\" >line1\nline2</p>");
expect($html)->equals("<div class=\"mailpoet_paragraph\" >line1\nline2</div>");
}
public function testItShouldNotEscapeHtml() {
$block = $this->block;
$block['params']['text'] = '<p class="my-p">Hello</p>';
$html = $this->html->render($block, []);
expect($html)->equals("<p class=\"mailpoet_paragraph\" ><p class=\"my-p\">Hello</p></p>");
expect($html)->equals("<div class=\"mailpoet_paragraph\" ><p class=\"my-p\">Hello</p></div>");
}
}