From fc7235e636d9aa592b1f470d7a9add74e3ea6d1e Mon Sep 17 00:00:00 2001
From: David Smith <smithdc@gmail.com>
Date: Sat, 11 Jul 2020 20:53:12 +0100
Subject: [PATCH] Horizontal forms

* checkbox are now fully custom by default in Bootstrap5 - removed previous tweaks.
* control-label --> col-form-label
* errors now need `invalid-feedback` on the text and `is-invalid` on the input
* new `form-text` class for help text
* New html layout and css classes for radio/multiple checkbox. Added work around for errors and inline (see comments in code).
---
 .../rest_framework/css/bootstrap-tweaks.css   | 14 -----
 .../rest_framework/horizontal/checkbox.html   | 12 ++--
 .../horizontal/checkbox_multiple.html         | 45 +++++++--------
 .../rest_framework/horizontal/dict_field.html |  6 +-
 .../rest_framework/horizontal/fieldset.html   |  4 +-
 .../rest_framework/horizontal/input.html      | 10 ++--
 .../rest_framework/horizontal/list_field.html |  6 +-
 .../horizontal/list_fieldset.html             |  4 +-
 .../rest_framework/horizontal/radio.html      | 57 +++++++------------
 .../rest_framework/horizontal/select.html     | 10 ++--
 .../horizontal/select_multiple.html           | 10 ++--
 .../rest_framework/horizontal/textarea.html   | 10 ++--
 12 files changed, 77 insertions(+), 111 deletions(-)

diff --git a/rest_framework/static/rest_framework/css/bootstrap-tweaks.css b/rest_framework/static/rest_framework/css/bootstrap-tweaks.css
index e626a7735..523092e98 100644
--- a/rest_framework/static/rest_framework/css/bootstrap-tweaks.css
+++ b/rest_framework/static/rest_framework/css/bootstrap-tweaks.css
@@ -198,20 +198,6 @@ body a:hover {
   clear:both;
 }
 
-.horizontal-checkbox label {
-  padding-top: 0;
-}
-
-.horizontal-checkbox label {
-  padding-top: 0 !important;
-}
-
-.horizontal-checkbox input {
-  float: left;
-  width: 20px;
-  margin-top: 3px;
-}
-
 .modal-footer form {
   margin-left: 5px;
   margin-right: 5px;
diff --git a/rest_framework/templates/rest_framework/horizontal/checkbox.html b/rest_framework/templates/rest_framework/horizontal/checkbox.html
index 0d74d46ab..65a98a1c2 100644
--- a/rest_framework/templates/rest_framework/horizontal/checkbox.html
+++ b/rest_framework/templates/rest_framework/horizontal/checkbox.html
@@ -1,21 +1,23 @@
-<div class="mb-3 horizontal-checkbox {% if field.errors %}has-error{% endif %}">
+<div class="mb-3 row">
   {% if field.label %}
-    <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+    <label class="col-sm-2 col-form-label pt-0 {% if style.hide_label %}sr-only{% endif %}">
       {{ field.label }}
     </label>
   {% endif %}
 
   <div class="col-sm-10">
-    <input type="checkbox" name="{{ field.name }}" value="true" {% if field.value %}checked{% endif %}>
+    <div class="col-sm-10">
+    <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.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>
 </div>
diff --git a/rest_framework/templates/rest_framework/horizontal/checkbox_multiple.html b/rest_framework/templates/rest_framework/horizontal/checkbox_multiple.html
index 2c55c77ee..7cb7a8847 100644
--- a/rest_framework/templates/rest_framework/horizontal/checkbox_multiple.html
+++ b/rest_framework/templates/rest_framework/horizontal/checkbox_multiple.html
@@ -1,39 +1,32 @@
 {% load rest_framework %}
 
-<div class="mb-3">
+<div class="mb-3 row">
   {% if field.label %}
-    <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+    <label class="col-sm-2 col-form-label pt-0 {% if style.hide_label %}sr-only{% endif %}">
       {{ field.label }}
     </label>
   {% endif %}
 
   <div class="col-sm-10">
-    {% if style.inline %}
-      {% 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 %}
-    {% else %}
-      {% 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>
+    {% for key, text in field.choices|items %}
+      <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 %}
+
+    {% 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.errors %}
-    {% for error in field.errors %}
-      <span class="help-block">{{ error }}</span>
-    {% endfor %}
-  {% endif %}
-
-  {% if field.help_text %}
-    <span class="help-block">{{ field.help_text|safe }}</span>
-  {% endif %}
+    {% if field.help_text %}
+      <p class="form-text">{{ field.help_text|safe }}</p>
+    {% endif %}
   </div>
 </div>
diff --git a/rest_framework/templates/rest_framework/horizontal/dict_field.html b/rest_framework/templates/rest_framework/horizontal/dict_field.html
index bc5203b05..a13331b3b 100644
--- a/rest_framework/templates/rest_framework/horizontal/dict_field.html
+++ b/rest_framework/templates/rest_framework/horizontal/dict_field.html
@@ -1,11 +1,11 @@
-<div class="mb-3">
+<div class="mb-3 row">
   {% if field.label %}
-    <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+    <label class="col-sm-2 col-form-label {% if style.hide_label %}sr-only{% endif %}">
       {{ field.label }}
     </label>
   {% endif %}
 
   <div class="col-sm-10">
-    <p class="form-control-static">Dictionaries are not currently supported in HTML input.</p>
+    <p class="col-form-label">Dictionaries are not currently supported in HTML input.</p>
   </div>
 </div>
diff --git a/rest_framework/templates/rest_framework/horizontal/fieldset.html b/rest_framework/templates/rest_framework/horizontal/fieldset.html
index 3b0b7af41..fe5aae41f 100644
--- a/rest_framework/templates/rest_framework/horizontal/fieldset.html
+++ b/rest_framework/templates/rest_framework/horizontal/fieldset.html
@@ -1,8 +1,8 @@
 {% load rest_framework %}
 <fieldset>
   {% if field.label %}
-    <div class="mb-3" style="border-bottom: 1px solid #e5e5e5">
-      <legend class="control-label col-sm-2 {% if style.hide_label %}sr-only{% endif %}" style="border-bottom: 0">
+    <div class="mb-3 row" style="border-bottom: 1px solid #e5e5e5">
+      <legend class="col-form-label col-sm-2 {% if style.hide_label %}sr-only{% endif %}" style="border-bottom: 0">
         {{ field.label }}
       </legend>
     </div>
diff --git a/rest_framework/templates/rest_framework/horizontal/input.html b/rest_framework/templates/rest_framework/horizontal/input.html
index dbc44d819..8b5e63e70 100644
--- a/rest_framework/templates/rest_framework/horizontal/input.html
+++ b/rest_framework/templates/rest_framework/horizontal/input.html
@@ -1,21 +1,21 @@
-<div class="mb-3 {% if field.errors %}has-error{% endif %}">
+<div class="mb-3 row">
   {% if field.label %}
-    <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+    <label class="col-sm-2 col-form-label {% if style.hide_label %}sr-only{% endif %}">
       {{ field.label }}
     </label>
   {% endif %}
 
   <div class="col-sm-10">
-    <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>
 </div>
diff --git a/rest_framework/templates/rest_framework/horizontal/list_field.html b/rest_framework/templates/rest_framework/horizontal/list_field.html
index e1761c1d9..316ea6748 100644
--- a/rest_framework/templates/rest_framework/horizontal/list_field.html
+++ b/rest_framework/templates/rest_framework/horizontal/list_field.html
@@ -1,11 +1,11 @@
-<div class="mb-3">
+<div class="mb-3 row">
   {% if field.label %}
-    <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+    <label class="col-sm-2 col-form-label {% if style.hide_label %}sr-only{% endif %}">
       {{ field.label }}
     </label>
   {% endif %}
 
   <div class="col-sm-10">
-    <p class="form-control-static">Lists are not currently supported in HTML input.</p>
+    <p class="col-form-label">Lists are not currently supported in HTML input.</p>
   </div>
 </div>
diff --git a/rest_framework/templates/rest_framework/horizontal/list_fieldset.html b/rest_framework/templates/rest_framework/horizontal/list_fieldset.html
index 89f6a5b87..2c4a380e3 100644
--- a/rest_framework/templates/rest_framework/horizontal/list_fieldset.html
+++ b/rest_framework/templates/rest_framework/horizontal/list_fieldset.html
@@ -2,8 +2,8 @@
 
 <fieldset>
   {% if field.label %}
-    <div class="mb-3" style="border-bottom: 1px solid #e5e5e5">
-      <legend class="control-label col-sm-2 {% if style.hide_label %}sr-only{% endif %}" style="border-bottom: 0">
+    <div class="mb-3 row" style="border-bottom: 1px solid #e5e5e5">
+      <legend class="col-form-label col-sm-2 {% if style.hide_label %}sr-only{% endif %}" style="border-bottom: 0">
         {{ field.label }}
       </legend>
     </div>
diff --git a/rest_framework/templates/rest_framework/horizontal/radio.html b/rest_framework/templates/rest_framework/horizontal/radio.html
index 56bfda0c1..c3004dd70 100644
--- a/rest_framework/templates/rest_framework/horizontal/radio.html
+++ b/rest_framework/templates/rest_framework/horizontal/radio.html
@@ -3,55 +3,40 @@
 
 {% trans "None" as none_choice %}
 
-<div class="mb-3">
+<div class="mb-3 row">
   {% if field.label %}
-    <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+    <label class="col-sm-2 col-form-label pt-0 {% if style.hide_label %}sr-only{% endif %}">
       {{ field.label }}
     </label>
   {% endif %}
 
   <div class="col-sm-10">
-    {% if style.inline %}
-      {% 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 %}
-    {% else %}
-      {% 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>
-      {% 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>
-        {% endfor %}
+    {% if field.allow_null or field.allow_blank %}
+      <div class="form-check {% if style.inline %}form-check-inline {% endif %}">
+        <input class="form-check-input" 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="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 %}
+
     {% 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>
+      <p class="form-text">{{ field.help_text|safe }}</p>
     {% endif %}
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/rest_framework/templates/rest_framework/horizontal/select.html b/rest_framework/templates/rest_framework/horizontal/select.html
index d1b5e137e..31cd153a7 100644
--- a/rest_framework/templates/rest_framework/horizontal/select.html
+++ b/rest_framework/templates/rest_framework/horizontal/select.html
@@ -1,14 +1,14 @@
 {% load rest_framework %}
 
-<div class="mb-3">
+<div class="mb-3 row">
   {% if field.label %}
-    <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+    <label class="col-sm-2 col-form-label {% if style.hide_label %}sr-only{% endif %}">
       {{ field.label }}
     </label>
   {% endif %}
 
   <div class="col-sm-10">
-    <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 %}
@@ -25,12 +25,12 @@
 
     {% 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/horizontal/select_multiple.html b/rest_framework/templates/rest_framework/horizontal/select_multiple.html
index e48a4242f..86d1af494 100644
--- a/rest_framework/templates/rest_framework/horizontal/select_multiple.html
+++ b/rest_framework/templates/rest_framework/horizontal/select_multiple.html
@@ -3,15 +3,15 @@
 
 {% trans "No items to select." as no_items %}
 
-<div class="mb-3">
+<div class="mb-3 row">
   {% if field.label %}
-    <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+    <label class="col-sm-2 col-form-label {% if style.hide_label %}sr-only{% endif %}">
       {{ field.label }}
     </label>
   {% endif %}
 
   <div class="col-sm-10">
-    <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 }}">
@@ -27,12 +27,12 @@
 
     {% 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/horizontal/textarea.html b/rest_framework/templates/rest_framework/horizontal/textarea.html
index 8d5da811f..f8febe800 100644
--- a/rest_framework/templates/rest_framework/horizontal/textarea.html
+++ b/rest_framework/templates/rest_framework/horizontal/textarea.html
@@ -1,21 +1,21 @@
-<div class="mb-3 {% if field.errors %}has-error{% endif %}">
+<div class="mb-3 row">
   {% if field.label %}
-    <label class="col-sm-2 control-label {% if style.hide_label %}sr-only{% endif %}">
+    <label class="col-sm-2 col-form-label {% if style.hide_label %}sr-only{% endif %}">
       {{ field.label }}
     </label>
   {% endif %}
 
   <div class="col-sm-10">
-    <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>
+        <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>