From 5577d3632e1b20466dab1c4bbcc2d7e7bfb15294 Mon Sep 17 00:00:00 2001
From: David Smith <smithdc@gmail.com>
Date: Mon, 13 Jul 2020 14:42:12 +0100
Subject: [PATCH] Vertical forms

---
 .../rest_framework/vertical/checkbox.html     | 16 +++---
 .../vertical/checkbox_multiple.html           | 41 +++++++---------
 .../rest_framework/vertical/dict_field.html   |  4 +-
 .../rest_framework/vertical/fieldset.html     |  4 +-
 .../rest_framework/vertical/input.html        | 10 ++--
 .../rest_framework/vertical/list_field.html   |  4 +-
 .../vertical/list_fieldset.html               |  6 +--
 .../rest_framework/vertical/radio.html        | 49 ++++++-------------
 .../rest_framework/vertical/select.html       | 10 ++--
 .../vertical/select_multiple.html             | 12 ++---
 .../rest_framework/vertical/textarea.html     | 10 ++--
 tests/test_bound_fields.py                    | 14 +++---
 12 files changed, 74 insertions(+), 106 deletions(-)

diff --git a/rest_framework/templates/rest_framework/vertical/checkbox.html b/rest_framework/templates/rest_framework/vertical/checkbox.html
index cdc8eee32..b99499f4b 100644
--- a/rest_framework/templates/rest_framework/vertical/checkbox.html
+++ b/rest_framework/templates/rest_framework/vertical/checkbox.html
@@ -1,18 +1,16 @@
-<div class="mb-3 {% if field.errors %}has-error{% endif %}">
-  <div class="checkbox">
-    <label>
-      <input type="checkbox" name="{{ field.name }}" value="true" {% if field.value %}checked{% endif %}>
-        {% if field.label %}{{ field.label }}{% endif %}
-    </label>
-  </div>
+<div class="mb-3">
+  <div class="form-check">
+  <input class="form-check-input{% if field.errors %} is-invalid{% endif %}" type="checkbox" name="{{ field.name }}" value="true" {% if field.value %}checked{% endif %}>
+    {% if field.label %}<label class="form-check-label">{{ field.label }}</label>{% endif %}
 
   {% if field.errors %}
     {% for error in field.errors %}
-      <span class="help-block">{{ error }}</span>
+      <span class="invalid-feedback">{{ error }}</span>
     {% endfor %}
   {% endif %}
 
   {% if field.help_text %}
-    <span class="help-block">{{ field.help_text|safe }}</span>
+    <span class="form-text">{{ field.help_text|safe }}</span>
   {% endif %}
+    </div>
 </div>
diff --git a/rest_framework/templates/rest_framework/vertical/checkbox_multiple.html b/rest_framework/templates/rest_framework/vertical/checkbox_multiple.html
index 5aed1519a..c5cc45a5a 100644
--- a/rest_framework/templates/rest_framework/vertical/checkbox_multiple.html
+++ b/rest_framework/templates/rest_framework/vertical/checkbox_multiple.html
@@ -1,37 +1,30 @@
 {% load rest_framework %}
 
-<div class="mb-3 {% if field.errors %}has-error{% endif %}">
+<div class="mb-3">
   {% if field.label %}
-    <label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
+    <label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
   {% endif %}
 
-  {% if style.inline %}
-    <div>
-      {% for key, text in field.choices|items %}
-        <label class="checkbox-inline">
-          <input type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key|as_string in field.value|as_list_of_strings %}checked{% endif %}>
-            {{ text }}
-        </label>
-      {% endfor %}
-    </div>
-  {% else %}
+  <div>
     {% for key, text in field.choices|items %}
-      <div class="checkbox">
-        <label>
-          <input type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key|as_string in field.value|as_list_of_strings %}checked{% endif %}>
-          {{ text }}
-        </label>
+      <div class="form-check {% if style.inline %}form-check-inline{% endif %}">
+        <input class="form-check-input{% if field.errors %} is-invalid{% endif %}" type="checkbox" name="{{ field.name }}" value="{{ key }}" {% if key|as_string in field.value|as_list_of_strings %}checked{% endif %}>
+        <label class="form-check-label">{{ text }}</label>
       </div>
     {% endfor %}
-  {% endif %}
 
-  {% if field.errors %}
-    {% for error in field.errors %}
-      <span class="help-block">{{ error }}</span>
-    {% endfor %}
-  {% endif %}
+    {% if field.errors %}
+      {# A fake input to trigger the error messages as it needs to be after a valid input #}
+      {# If it's with the last input and it's inline then the error stacks under the last input label #}
+      {# It has no name so no data will be sent #}
+      <input type="radio" class="is-invalid" style="display: none"/>
+      {% for error in field.errors %}
+        <span class="invalid-feedback">{{ error }}</span>
+      {% endfor %}
+    {% endif %}
 
   {% if field.help_text %}
-    <span class="help-block">{{ field.help_text|safe }}</span>
+    <span class="form-text">{{ field.help_text|safe }}</span>
   {% endif %}
 </div>
+</div>
\ No newline at end of file
diff --git a/rest_framework/templates/rest_framework/vertical/dict_field.html b/rest_framework/templates/rest_framework/vertical/dict_field.html
index a46759196..335b60c50 100644
--- a/rest_framework/templates/rest_framework/vertical/dict_field.html
+++ b/rest_framework/templates/rest_framework/vertical/dict_field.html
@@ -1,7 +1,7 @@
 <div class="mb-3">
   {% if field.label %}
-    <label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
+    <label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
   {% endif %}
 
-  <p class="form-control-static">Dictionaries are not currently supported in HTML input.</p>
+  <p class="form-label">Dictionaries are not currently supported in HTML input.</p>
 </div>
diff --git a/rest_framework/templates/rest_framework/vertical/fieldset.html b/rest_framework/templates/rest_framework/vertical/fieldset.html
index 4ec2a5d48..3fdac3539 100644
--- a/rest_framework/templates/rest_framework/vertical/fieldset.html
+++ b/rest_framework/templates/rest_framework/vertical/fieldset.html
@@ -2,9 +2,7 @@
 
 <fieldset>
   {% if field.label %}
-    <legend {% if style.hide_label %}class="sr-only"{% endif %}>
-      {{ field.label }}
-    </legend>
+    <label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
   {% endif %}
 
   {% for nested_field in field %}
diff --git a/rest_framework/templates/rest_framework/vertical/input.html b/rest_framework/templates/rest_framework/vertical/input.html
index 6bcd3d93d..26711ccda 100644
--- a/rest_framework/templates/rest_framework/vertical/input.html
+++ b/rest_framework/templates/rest_framework/vertical/input.html
@@ -1,17 +1,17 @@
-<div class="mb-3 {% if field.errors %}has-error{% endif %}">
+<div class="mb-3">
   {% if field.label %}
-    <label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
+    <label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
   {% endif %}
 
-  <input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value is not None %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>
+  <input name="{{ field.name }}" {% if style.input_type != "file" %}class="form-control{% if field.errors %} is-invalid{% endif %}"{% endif %} type="{{ style.input_type }}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value is not None %}value="{{ field.value }}"{% endif %} {% if style.autofocus and style.input_type != "hidden" %}autofocus{% endif %}>
 
   {% if field.errors %}
     {% for error in field.errors %}
-      <span class="help-block">{{ error }}</span>
+      <span class="invalid-feedback">{{ error }}</span>
     {% endfor %}
   {% endif %}
 
   {% if field.help_text %}
-    <span class="help-block">{{ field.help_text|safe }}</span>
+    <span class="form-text">{{ field.help_text|safe }}</span>
   {% endif %}
 </div>
diff --git a/rest_framework/templates/rest_framework/vertical/list_field.html b/rest_framework/templates/rest_framework/vertical/list_field.html
index f5a724ad2..67dfb44f9 100644
--- a/rest_framework/templates/rest_framework/vertical/list_field.html
+++ b/rest_framework/templates/rest_framework/vertical/list_field.html
@@ -1,7 +1,7 @@
 <div class="mb-3">
   {% if field.label %}
-    <label {% if style.hide_label %}class="sr-only"{% endif %}>{{ field.label }}</label>
+    <label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
   {% endif %}
 
-  <p class="form-control-static">Lists are not currently supported in HTML input.</p>
+  <p class="form-label">Lists are not currently supported in HTML input.</p>
 </div>
diff --git a/rest_framework/templates/rest_framework/vertical/list_fieldset.html b/rest_framework/templates/rest_framework/vertical/list_fieldset.html
index f2b615fe1..a2e05d8e0 100644
--- a/rest_framework/templates/rest_framework/vertical/list_fieldset.html
+++ b/rest_framework/templates/rest_framework/vertical/list_fieldset.html
@@ -1,9 +1,7 @@
 <fieldset>
   {% if field.label %}
-    <legend {% if style.hide_label %}class="sr-only"{% endif %}>
-      {{ field.label }}
-    </legend>
+    <label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
   {% endif %}
 
-  <p>Lists are not currently supported in HTML input.</p>
+  <p class="form-label">Lists are not currently supported in HTML input.</p>
 </fieldset>
diff --git a/rest_framework/templates/rest_framework/vertical/radio.html b/rest_framework/templates/rest_framework/vertical/radio.html
index 3d8ec0690..98c17ad1f 100644
--- a/rest_framework/templates/rest_framework/vertical/radio.html
+++ b/rest_framework/templates/rest_framework/vertical/radio.html
@@ -2,56 +2,39 @@
 {% load rest_framework %}
 {% trans "None" as none_choice %}
 
-<div class="mb-3 {% if field.errors %}has-error{% endif %}">
+<div class="mb-3">
   {% if field.label %}
-    <label {% if style.hide_label %}class="sr-only"{% endif %}>
+    <label class="form-label {% if style.hide_label %}sr-only{% endif %}">
       {{ field.label }}
     </label>
   {% endif %}
-
-    {% if style.inline %}
-      <div>
-        {% if field.allow_null or field.allow_blank %}
-          <label class="radio-inline">
-            <input type="radio" name="{{ field.name }}" value="" {% if not field.value %}checked{% endif %} />
-            {{ none_choice }}
-          </label>
-        {% endif %}
-
-        {% for key, text in field.choices|items %}
-          <label class="radio-inline">
-            <input type="radio" name="{{ field.name }}" value="{{ key }}" {% if key|as_string == field.value|as_string %}checked{% endif %}>
-            {{ text }}
-          </label>
-        {% endfor %}
-      </div>
-    {% else %}
+  <div>
       {% if field.allow_null or field.allow_blank %}
-        <div class="radio">
-          <label>
-            <input type="radio" name="{{ field.name }}" value="" {% if not field.value %}checked{% endif %} />
-            {{ none_choice }}
-          </label>
+        <div class="form-check {% if style.inline %}form-check-inline{% endif %}">
+          <input class="form-check-input{% if field.errors %} is-invalid{% endif %}" type="radio" name="{{ field.name }}" value="" {% if not field.value %}checked{% endif %} />
+          <label class="form-check-label">{{ none_choice }}</label>
         </div>
       {% endif %}
 
       {% for key, text in field.choices|items %}
-        <div class="radio">
-          <label>
-            <input type="radio" name="{{ field.name }}" value="{{ key }}" {% if key|as_string == field.value|as_string %}checked{% endif %}>
-            {{ text }}
-          </label>
+        <div class="form-check {% if style.inline %}form-check-inline{% endif %}">
+          <input class="form-check-input{% if field.errors %} is-invalid{% endif %}" type="radio" name="{{ field.name }}" value="{{ key }}" {% if key|as_string == field.value|as_string %}checked{% endif %}>
+          <label class="form-check-label">{{ text }}</label>
         </div>
       {% endfor %}
-    {% endif %}
 
     {% if field.errors %}
+      {# A fake input to trigger the error messages as it needs to be after a valid input #}
+      {# If it's with the last input and it's inline then the error stacks under the last input label #}
+      {# It has no name so no data will be sent #}
+      <input type="radio" class="is-invalid" style="display: none"/>
       {% for error in field.errors %}
-        <span class="help-block">{{ error }}</span>
+        <span class="invalid-feedback">{{ error }}</span>
       {% endfor %}
     {% endif %}
 
     {% if field.help_text %}
-      <span class="help-block">{{ field.help_text|safe }}</span>
+      <span class="form-text">{{ field.help_text|safe }}</span>
     {% endif %}
 </div>
+</div>
\ No newline at end of file
diff --git a/rest_framework/templates/rest_framework/vertical/select.html b/rest_framework/templates/rest_framework/vertical/select.html
index 03a581d2d..0561a01dc 100644
--- a/rest_framework/templates/rest_framework/vertical/select.html
+++ b/rest_framework/templates/rest_framework/vertical/select.html
@@ -1,13 +1,13 @@
 {% load rest_framework %}
 
-<div class="mb-3 {% if field.errors %}has-error{% endif %}">
+<div class="mb-3">
   {% if field.label %}
-    <label {% if style.hide_label %}class="sr-only"{% endif %}>
+    <label class="form-label {% if style.hide_label %}sr-only{% endif %}">
       {{ field.label }}
     </label>
   {% endif %}
 
-  <select class="form-control" name="{{ field.name }}">
+  <select class="form-select{% if field.errors %} is-invalid{% endif %}" name="{{ field.name }}">
     {% if field.allow_null or field.allow_blank %}
       <option value="" {% if not field.value %}selected{% endif %}>--------</option>
     {% endif %}
@@ -24,11 +24,11 @@
 
   {% if field.errors %}
     {% for error in field.errors %}
-      <span class="help-block">{{ error }}</span>
+      <span class="invalid-feedback">{{ error }}</span>
     {% endfor %}
   {% endif %}
 
   {% if field.help_text %}
-    <span class="help-block">{{ field.help_text|safe }}</span>
+    <span class="form-text">{{ field.help_text|safe }}</span>
   {% endif %}
 </div>
diff --git a/rest_framework/templates/rest_framework/vertical/select_multiple.html b/rest_framework/templates/rest_framework/vertical/select_multiple.html
index 0b34df1e9..fe4587010 100644
--- a/rest_framework/templates/rest_framework/vertical/select_multiple.html
+++ b/rest_framework/templates/rest_framework/vertical/select_multiple.html
@@ -2,14 +2,12 @@
 {% load rest_framework %}
 {% trans "No items to select." as no_items %}
 
-<div class="mb-3 {% if field.errors %}has-error{% endif %}">
+<div class="mb-3">
   {% if field.label %}
-    <label {% if style.hide_label %}class="sr-only"{% endif %}>
-      {{ field.label }}
-    </label>
+    <label class="form-label {% if style.hide_label %}sr-only{% endif %}">{{ field.label }}</label>
   {% endif %}
 
-  <select multiple {{ field.choices|yesno:",disabled" }} class="form-control" name="{{ field.name }}">
+  <select multiple {{ field.choices|yesno:",disabled" }} class="form-select {% if field.errors %} is-invalid{% endif %}" name="{{ field.name }}">
     {% for select in field.iter_options %}
         {% if select.start_option_group %}
           <optgroup label="{{ select.label }}">
@@ -24,10 +22,10 @@
   </select>
 
     {% if field.errors %}
-      {% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
+      {% for error in field.errors %}<span class="invalid-feedback">{{ error }}</span>{% endfor %}
     {% endif %}
 
     {% if field.help_text %}
-      <span class="help-block">{{ field.help_text|safe }}</span>
+      <span class="form-text">{{ field.help_text|safe }}</span>
     {% endif %}
 </div>
diff --git a/rest_framework/templates/rest_framework/vertical/textarea.html b/rest_framework/templates/rest_framework/vertical/textarea.html
index 41f45917e..0d1682c30 100644
--- a/rest_framework/templates/rest_framework/vertical/textarea.html
+++ b/rest_framework/templates/rest_framework/vertical/textarea.html
@@ -1,17 +1,17 @@
-<div class="mb-3 {% if field.errors %}has-error{% endif %}">
+<div class="mb-3">
   {% if field.label %}
-    <label {% if style.hide_label %}class="sr-only"{% endif %}>
+    <label class="form-label {% if style.hide_label %}sr-only{% endif %}">
       {{ field.label }}
     </label>
   {% endif %}
 
-  <textarea name="{{ field.name }}" class="form-control" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if style.rows %}rows="{{ style.rows }}"{% endif %}>{% if field.value %}{{ field.value }}{% endif %}</textarea>
+  <textarea name="{{ field.name }}" class="form-control{% if field.errors %} is-invalid{% endif %}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if style.rows %}rows="{{ style.rows }}"{% endif %}>{% if field.value %}{{ field.value }}{% endif %}</textarea>
 
   {% if field.errors %}
-    {% for error in field.errors %}<span class="help-block">{{ error }}</span>{% endfor %}
+    {% for error in field.errors %}<span class="invalid-feedback">{{ error }}</span>{% endfor %}
   {% endif %}
 
   {% if field.help_text %}
-    <span class="help-block">{{ field.help_text|safe }}</span>
+    <span class="form-text">{{ field.help_text|safe }}</span>
   {% endif %}
 </div>
diff --git a/tests/test_bound_fields.py b/tests/test_bound_fields.py
index 52ef9b368..92ac77c5c 100644
--- a/tests/test_bound_fields.py
+++ b/tests/test_bound_fields.py
@@ -79,9 +79,9 @@ class TestSimpleBoundField:
         rendered = renderer.render_field(serializer['bool_field'], {})
         expected_packed = (
             '<divclass="mb-3">'
-            '<divclass="checkbox">'
-            '<label>'
-            '<inputtype="checkbox"name="bool_field"value="true"checked>'
+            '<divclass="form-check">'
+            '<inputclass="form-check-input"type="checkbox"name="bool_field"value="true"checked>'
+            '<labelclass="form-check-label">'
             'Boolfield'
             '</label>'
             '</div>'
@@ -167,16 +167,16 @@ class TestNestedBoundField:
             rendered = renderer.render_field(field, {})
             expected_packed = (
                 '<fieldset>'
-                '<legend>Nested2</legend>'
+                '<labelclass="form-label">Nested2</label>'
                 '<fieldset>'
-                '<legend>Nested1</legend>'
+                '<labelclass="form-label">Nested1</label>'
                 '<divclass="mb-3">'
-                '<label>Textfield</label>'
+                '<labelclass="form-label">Textfield</label>'
                 '<inputname="nested2.nested1.text_field"class="form-control"type="text"value="">'
                 '</div>'
                 '</fieldset>'
                 '<divclass="mb-3">'
-                '<label>Textfield</label>'
+                '<labelclass="form-label">Textfield</label>'
                 '<inputname="nested2.text_field"class="form-control"type="text"value="test">'
                 '</div>'
                 '</fieldset>'