Merge pull request #1623 from kaliber5/forms-margin

Add `.mb-3` margins to BS5 form elements in vertical layout
ember-bootstrap · Oct 19, 2021 · 4b5684f · 4b5684f
2 parents 11c9fa9 + da339e7
commit 4b5684f
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 45 deletions.
diff --git a/addon/components/bs-form/element.hbs b/addon/components/bs-form/element.hbs
@@ -1,6 +1,6 @@
 {{!-- template-lint-disable no-invalid-interactive --}}
 <div
-  class="{{if (macroCondition (macroGetOwnConfig "isNotBS5")) "form-group"}} {{if @disabled "disabled"}} {{if @required "is-required"}} {{if this.isValidating "is-validating"}} {{if (bs-eq @formLayout "horizontal") (if (macroCondition (macroGetOwnConfig "isBS5")) "row mb-3" "row")}}"
+  class="{{if (macroCondition (macroGetOwnConfig "isNotBS5")) "form-group"}} {{if @disabled "disabled"}} {{if @required "is-required"}} {{if this.isValidating "is-validating"}} {{if (macroCondition (macroGetOwnConfig "isBS5")) (if (bs-eq @formLayout "vertical") "mb-3")}} {{if (bs-eq @formLayout "horizontal") (if (macroCondition (macroGetOwnConfig "isBS5")) "row mb-3" "row")}}"
   ...attributes
   {{create-ref "mainNode"}}
   {{on "focusout" this.showValidationOnHandler}}

diff --git a/tests/integration/components/bs-form/element-test.js b/tests/integration/components/bs-form/element-test.js
@@ -13,7 +13,6 @@ import {
   test,
   testBS4,
   testBS5,
-  testForBootstrap,
   testRequiringFocus,
   validationErrorClass,
   validationSuccessClass,
@@ -31,7 +30,7 @@ module('Integration | Component | bs-form/element', function (hooks) {
   setupRenderingTest(hooks);
   setupNoDeprecations(hooks);
 
-  testForBootstrap([3, 4], 'component has form-group bootstrap class', async function (assert) {
+  testBS4('component has form-group bootstrap class', async function (assert) {
     await render(hbs`<BsForm::Element data-test-form-element />`);
     assert.dom('[data-test-form-element]').hasClass('form-group', 'component has form-group class');
   });
@@ -41,6 +40,61 @@ module('Integration | Component | bs-form/element', function (hooks) {
     assert.dom('[data-test-form-element]').doesNotHaveClass('form-group', 'component has no form-group class');
   });
 
+  test('supports vertical form layout', async function (assert) {
+    await render(hbs`
+      <BsForm @formLayout="vertical" as |form|>
+        <form.element @label="some label" data-test-form-element />
+      </BsForm>
+    `);
+
+    if (isBootstrap(4)) {
+      assert.dom('[data-test-form-element]').hasClass('form-group', 'component has form-group class');
+    } else {
+      assert.dom('[data-test-form-element]').hasClass('mb-3');
+    }
+    assert.equal(
+      this.element.querySelector('[data-test-form-element] > :nth-child(1)').tagName,
+      'LABEL',
+      'first child is a label'
+    );
+    assert.equal(
+      this.element.querySelector('[data-test-form-element] > :nth-child(2)').tagName,
+      'INPUT',
+      'second child is a input'
+    );
+  });
+
+  test('supports horizontal form layout', async function (assert) {
+    await render(hbs`
+      <BsForm @formLayout="horizontal" as |form|>
+        <form.element @label="some label" data-test-form-element />
+      </BsForm>
+    `);
+
+    if (isBootstrap(4)) {
+      assert.dom('[data-test-form-element]').hasClass('form-group', 'component has form-group class');
+    } else {
+      assert.dom('[data-test-form-element]').hasClass('row').hasClass('mb-3');
+    }
+    assert.equal(
+      this.element.querySelector('[data-test-form-element] > :nth-child(1)').tagName,
+      'LABEL',
+      'first child is a label'
+    );
+    assert.dom('[data-test-form-element] > :nth-child(1)').hasClass('col-md-4', 'label has grid class');
+    assert.equal(
+      this.element.querySelector('[data-test-form-element] > :nth-child(2)').tagName,
+      'DIV',
+      'second child is a div'
+    );
+    assert.dom('[data-test-form-element] > :nth-child(2)').hasClass('col-md-8', 'div has grid class');
+    assert.equal(
+      this.element.querySelector('[data-test-form-element] > :nth-child(2) > :first-child').tagName,
+      'INPUT',
+      'divs first child is an input'
+    );
+  });
+
   test('setting label property displays label tag', async function (assert) {
     await render(hbs`<BsForm::Element @label="myLabel" />`);
 
@@ -451,48 +505,6 @@ module('Integration | Component | bs-form/element', function (hooks) {
     assert.dom('input').hasValue('baz', 'input updates value from model');
   });
 
-  test('Changing formLayout changes markup', async function (assert) {
-    this.set('formLayout', 'vertical');
-    await render(
-      hbs`<BsForm @horizontalLabelGridClass="col-sm-4" @formLayout={{this.formLayout}} as |form|><form.element @controlType="text" @label="myLabel" data-test-form-element /></BsForm>`
-    );
-    if (!isBootstrap(5)) {
-      assert.dom('[data-test-form-element]').hasClass('form-group', 'component has form-group class');
-    }
-    assert.equal(
-      this.element.querySelector('[data-test-form-element] > :nth-child(1)').tagName,
-      'LABEL',
-      'first child is a label'
-    );
-    assert.equal(
-      this.element.querySelector('[data-test-form-element] > :nth-child(2)').tagName,
-      'INPUT',
-      'second child is a input'
-    );
-
-    this.set('formLayout', 'horizontal');
-    if (!isBootstrap(5)) {
-      assert.dom('[data-test-form-element]').hasClass('form-group', 'component has form-group class');
-    }
-    assert.equal(
-      this.element.querySelector('[data-test-form-element] > :nth-child(1)').tagName,
-      'LABEL',
-      'first child is a label'
-    );
-    assert.dom('[data-test-form-element] > :nth-child(1)').hasClass('col-sm-4', 'label has grid class');
-    assert.equal(
-      this.element.querySelector('[data-test-form-element] > :nth-child(2)').tagName,
-      'DIV',
-      'second child is a div'
-    );
-    assert.dom('[data-test-form-element] > :nth-child(2)').hasClass('col-sm-8', 'div has grid class');
-    assert.equal(
-      this.element.querySelector('[data-test-form-element] > :nth-child(2) > :first-child').tagName,
-      'INPUT',
-      'divs first child is an input'
-    );
-  });
-
   test('Custom controls are supported', async function (assert) {
     let model = new (class {
       @tracked gender = 'male';