Change form input wrappers to form p to div
[MAILPOET-2609]
This commit is contained in:
committed by
Pavel Dohnal
parent
28b750c9e2
commit
d9d1f05119
@@ -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;
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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']}";
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -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;
|
||||
}
|
||||
|
@@ -14,6 +14,7 @@ class Styles {
|
||||
/* paragraphs (label + input) */
|
||||
.mailpoet_paragraph {
|
||||
line-height:20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* labels */
|
||||
|
@@ -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');
|
||||
|
@@ -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;');
|
||||
}
|
||||
|
@@ -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>");
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user