From 5a5cece5bdc7fd897d4b789ac0ee5c17bfd27ef7 Mon Sep 17 00:00:00 2001
From: David Smith <smithdc@gmail.com>
Date: Mon, 13 Jul 2020 16:41:06 +0100
Subject: [PATCH] Inline Forms

---
 .../rest_framework/inline/checkbox.html        |  6 +++---
 .../inline/checkbox_multiple.html              | 10 ++++------
 .../rest_framework/inline/dict_field.html      |  4 ++--
 .../templates/rest_framework/inline/form.html  |  2 ++
 .../templates/rest_framework/inline/input.html |  4 ++--
 .../rest_framework/inline/list_field.html      |  4 ++--
 .../rest_framework/inline/list_fieldset.html   |  4 +++-
 .../templates/rest_framework/inline/radio.html | 18 +++++++-----------
 .../rest_framework/inline/select.html          |  4 ++--
 .../rest_framework/inline/select_multiple.html |  4 ++--
 .../rest_framework/inline/textarea.html        |  4 ++--
 11 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/rest_framework/templates/rest_framework/inline/checkbox.html b/rest_framework/templates/rest_framework/inline/checkbox.html
index e145dee69..2bf32e52f 100644
--- a/rest_framework/templates/rest_framework/inline/checkbox.html
+++ b/rest_framework/templates/rest_framework/inline/checkbox.html
@@ -1,7 +1,7 @@
-<div class="mb-3 {% if field.errors %}has-error{% endif %}">
-  <div class="checkbox">
+<div class="col-12">
+  <div class="form-check">
     <label>
-      <input type="checkbox" name="{{ field.name }}" value="true" {% if field.value %}checked{% endif %}>
+      <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 %}{{ field.label }}{% endif %}
     </label>
   </div>
diff --git a/rest_framework/templates/rest_framework/inline/checkbox_multiple.html b/rest_framework/templates/rest_framework/inline/checkbox_multiple.html
index 6c8d88408..a2db168f5 100644
--- a/rest_framework/templates/rest_framework/inline/checkbox_multiple.html
+++ b/rest_framework/templates/rest_framework/inline/checkbox_multiple.html
@@ -1,16 +1,14 @@
 {% load rest_framework %}
 
-<div class="mb-3 {% if field.errors %}has-error{% endif %}">
+<div class="col-12">
   {% if field.label %}
     <label class="sr-only">{{ field.label }}</label>
   {% endif %}
 
   {% 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>{{ text }}</label>
     </div>
   {% endfor %}
 </div>
diff --git a/rest_framework/templates/rest_framework/inline/dict_field.html b/rest_framework/templates/rest_framework/inline/dict_field.html
index 96853ae3e..423df2589 100644
--- a/rest_framework/templates/rest_framework/inline/dict_field.html
+++ b/rest_framework/templates/rest_framework/inline/dict_field.html
@@ -1,9 +1,9 @@
-<div class="mb-3">
+<div class="col-12">
   {% if field.label %}
     <label class="sr-only">
       {{ field.label }}
     </label>
   {% endif %}
 
-  <p class="form-control-static">Dictionaries are not currently supported in HTML input.</p>
+  <p class="form-text">Dictionaries are not currently supported in HTML input.</p>
 </div>
diff --git a/rest_framework/templates/rest_framework/inline/form.html b/rest_framework/templates/rest_framework/inline/form.html
index 13fc807eb..ba397034e 100644
--- a/rest_framework/templates/rest_framework/inline/form.html
+++ b/rest_framework/templates/rest_framework/inline/form.html
@@ -1,6 +1,8 @@
 {% load rest_framework %}
+<div class="row row-cols-md-auto g-3 align-items-center">
 {% for field in form %}
   {% if not field.read_only %}
     {% render_field field style=style %}
   {% endif %}
 {% endfor %}
+</div>
\ No newline at end of file
diff --git a/rest_framework/templates/rest_framework/inline/input.html b/rest_framework/templates/rest_framework/inline/input.html
index bdbcff160..b87d49d28 100644
--- a/rest_framework/templates/rest_framework/inline/input.html
+++ b/rest_framework/templates/rest_framework/inline/input.html
@@ -1,9 +1,9 @@
-<div class="mb-3 {% if field.errors %}has-error{% endif %}">
+<div class="col-12">
   {% if field.label %}
     <label class="sr-only">
       {{ 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 %}>
 </div>
diff --git a/rest_framework/templates/rest_framework/inline/list_field.html b/rest_framework/templates/rest_framework/inline/list_field.html
index a49b5bcf6..d038a4586 100644
--- a/rest_framework/templates/rest_framework/inline/list_field.html
+++ b/rest_framework/templates/rest_framework/inline/list_field.html
@@ -1,9 +1,9 @@
-<div class="mb-3">
+<div class="col-12">
   {% if field.label %}
     <label class="sr-only">
       {{ field.label }}
     </label>
   {% endif %}
 
-  <p class="form-control-static">Lists are not currently supported in HTML input.</p>
+  <p class="form-text">Lists are not currently supported in HTML input.</p>
 </div>
diff --git a/rest_framework/templates/rest_framework/inline/list_fieldset.html b/rest_framework/templates/rest_framework/inline/list_fieldset.html
index 2ae56d7cd..4a4d3aa38 100644
--- a/rest_framework/templates/rest_framework/inline/list_fieldset.html
+++ b/rest_framework/templates/rest_framework/inline/list_fieldset.html
@@ -1 +1,3 @@
-<span>Lists are not currently supported in HTML input.</span>
+<div class="col-12">
+<span class="form-text">Lists are not currently supported in HTML input.</span>
+</div>
\ No newline at end of file
diff --git a/rest_framework/templates/rest_framework/inline/radio.html b/rest_framework/templates/rest_framework/inline/radio.html
index d1ea5fd0e..8530f8b56 100644
--- a/rest_framework/templates/rest_framework/inline/radio.html
+++ b/rest_framework/templates/rest_framework/inline/radio.html
@@ -2,7 +2,7 @@
 {% load rest_framework %}
 {% trans "None" as none_choice %}
 
-<div class="mb-3 {% if field.errors %}has-error{% endif %}">
+<div class="col-12">
   {% if field.label %}
     <label class="sr-only">
       {{ field.label }}
@@ -10,20 +10,16 @@
   {% endif %}
 
   {% 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>{{ 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>{{ text }}</label>
     </div>
   {% endfor %}
 </div>
diff --git a/rest_framework/templates/rest_framework/inline/select.html b/rest_framework/templates/rest_framework/inline/select.html
index a50864241..8faa71793 100644
--- a/rest_framework/templates/rest_framework/inline/select.html
+++ b/rest_framework/templates/rest_framework/inline/select.html
@@ -1,13 +1,13 @@
 {% load rest_framework %}
 
-<div class="mb-3 {% if field.errors %}has-error{% endif %}">
+<div class="col-12">
   {% if field.label %}
     <label class="sr-only">
       {{ 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 %}
diff --git a/rest_framework/templates/rest_framework/inline/select_multiple.html b/rest_framework/templates/rest_framework/inline/select_multiple.html
index f783e8593..de385d67d 100644
--- a/rest_framework/templates/rest_framework/inline/select_multiple.html
+++ b/rest_framework/templates/rest_framework/inline/select_multiple.html
@@ -2,14 +2,14 @@
 {% load rest_framework %}
 {% trans "No items to select." as no_items %}
 
-<div class="mb-3 {% if field.errors %}has-error{% endif %}">
+<div class="col-12">
   {% if field.label %}
     <label class="sr-only">
       {{ 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 }}">
diff --git a/rest_framework/templates/rest_framework/inline/textarea.html b/rest_framework/templates/rest_framework/inline/textarea.html
index 4fc18d740..3fa55aff0 100644
--- a/rest_framework/templates/rest_framework/inline/textarea.html
+++ b/rest_framework/templates/rest_framework/inline/textarea.html
@@ -1,9 +1,9 @@
-<div class="mb-3 {% if field.errors %}has-error{% endif %}">
+<div class="col-12">
   {% if field.label %}
     <label class="sr-only">
       {{ field.label }}
     </label>
   {% endif %}
 
-  <input name="{{ field.name }}" type="text" class="form-control" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %}>
+  <input name="{{ field.name }}" type="text" class="form-control{% if field.errors %} is-invalid{% endif %}" {% if style.placeholder %}placeholder="{{ style.placeholder }}"{% endif %} {% if field.value %}value="{{ field.value }}"{% endif %}>
 </div>