Used form-text for help_text (#117)

* Used `form-text` for help_text Fixes #80 * Fixed Tests
django-crispy-forms · Jul 6, 2022 · 05ba4f6 · 05ba4f6
1 parent 7136000
commit 05ba4f6
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 20 deletions.
diff --git a/crispy_bootstrap5/templates/bootstrap5/layout/help_text.html b/crispy_bootstrap5/templates/bootstrap5/layout/help_text.html
@@ -1,7 +1,7 @@
 {% if field.help_text %}
     {% if help_text_inline %}
-        <span id="hint_{{ field.auto_id }}" class="text-muted">{{ field.help_text|safe}}</span>
+        <span id="hint_{{ field.auto_id }}" class="form-text">{{ field.help_text|safe}}</span>
     {% else %}
-        <small id="hint_{{ field.auto_id }}" class="form-text text-muted">{{ field.help_text|safe }}</small>
+        <div id="hint_{{ field.auto_id }}" class="form-text">{{ field.help_text|safe }}</div>
     {% endif %}
 {% endif %}
diff --git a/tests/results/field_with_buttons.html b/tests/results/field_with_buttons.html
@@ -6,7 +6,7 @@
 				<div class="input-group"><input class="form-control inputtext textInput textinput" id="id_email"
 						maxlength="30" name="email" required type="text"><a class="btn btn-primary"
 						role="button">click me</a></div>
-				<small class="form-text text-muted" id="hint_id_email">Insert your email</small>
+				<div class="form-text" id="hint_id_email">Insert your email</div>
 			</div>
 		</div>
 	</div>

diff --git a/tests/results/help_text_escape.html b/tests/results/help_text_escape.html
@@ -1,5 +1,5 @@
 <div class="mb-3" id="div_id_email"><label class="form-label requiredField" for="id_email">email<span
             class="asteriskField">*</span></label><input class="form-control inputtext textInput textinput"
-        id="id_email" name="email" required type="text"><small class="form-text text-muted" id="hint_id_email">Insert
-        your <b>email</b></small>
+        id="id_email" name="email" required type="text"><div class="form-text" id="hint_id_email">Insert
+        your <b>email</b></div>
 </div>
diff --git a/tests/results/test_prepended_appended_text.html b/tests/results/test_prepended_appended_text.html
@@ -4,8 +4,8 @@
         <div>
             <div class="input-group"><span class="input-group-text">@&lt;&gt;&amp;</span><input
                     class="form-control form-control-lg inputtext textInput textinput" id="id_email" maxlength="30"
-                    name="email" required type="text"><span class="input-group-text">gmail.com</span></div><small
-                class="form-text text-muted" id="hint_id_email">Insert your email</small>
+                    name="email" required type="text"><span class="input-group-text">gmail.com</span></div><div
+                class="form-text" id="hint_id_email">Insert your email</div>
         </div>
     </div>
     <div class="mb-3" id="div_id_password1"><label class="form-label requiredField" for="id_password1">password<span

diff --git a/tests/results/test_tabular_formset_layout.html b/tests/results/test_tabular_formset_layout.html
@@ -27,8 +27,8 @@
             name="form-__prefix__-is_company" class="checkboxinput form-check-input"
             id="id_form-__prefix__-is_company"> </td>
         <td id="div_id_form-__prefix__-email" class="mb-3"> <input type="text" name="form-__prefix__-email"
-            maxlength="30" class="textinput textInput inputtext form-control" id="id_form-__prefix__-email"> <small
-            id="hint_id_form-__prefix__-email" class="form-text text-muted">Insert your email</small> </td>
+            maxlength="30" class="textinput textInput inputtext form-control" id="id_form-__prefix__-email"> <div
+            id="hint_id_form-__prefix__-email" class="form-text">Insert your email</div> </td>
         <td id="div_id_form-__prefix__-password1" class="mb-3"> <input type="password"
             name="form-__prefix__-password1" maxlength="30" class="textinput textInput form-control"
             id="id_form-__prefix__-password1"> </td>
@@ -48,8 +48,8 @@
         <td id="div_id_form-0-is_company" class="mb-3"> <input type="checkbox" name="form-0-is_company"
             class="checkboxinput form-check-input" id="id_form-0-is_company"> </td>
         <td id="div_id_form-0-email" class="mb-3"> <input type="text" name="form-0-email" maxlength="30"
-            class="textinput textInput inputtext form-control" id="id_form-0-email"> <small id="hint_id_form-0-email"
-            class="form-text text-muted">Insert your email</small> </td>
+            class="textinput textInput inputtext form-control" id="id_form-0-email"> <div id="hint_id_form-0-email"
+            class="form-text">Insert your email</div> </td>
         <td id="div_id_form-0-password1" class="mb-3"> <input type="password" name="form-0-password1" maxlength="30"
             class="textinput textInput form-control" id="id_form-0-password1"> </td>
         <td id="div_id_form-0-password2" class="mb-3"> <input type="password" name="form-0-password2" maxlength="30"
@@ -66,8 +66,8 @@
         <td id="div_id_form-1-is_company" class="mb-3"> <input type="checkbox" name="form-1-is_company"
             class="checkboxinput form-check-input" id="id_form-1-is_company"> </td>
         <td id="div_id_form-1-email" class="mb-3"> <input type="text" name="form-1-email" maxlength="30"
-            class="textinput textInput inputtext form-control" id="id_form-1-email"> <small id="hint_id_form-1-email"
-            class="form-text text-muted">Insert your email</small> </td>
+            class="textinput textInput inputtext form-control" id="id_form-1-email"> <div id="hint_id_form-1-email"
+            class="form-text">Insert your email</div> </td>
         <td id="div_id_form-1-password1" class="mb-3"> <input type="password" name="form-1-password1" maxlength="30"
             class="textinput textInput form-control" id="id_form-1-password1"> </td>
         <td id="div_id_form-1-password2" class="mb-3"> <input type="password" name="form-1-password2" maxlength="30"
@@ -84,8 +84,8 @@
         <td id="div_id_form-2-is_company" class="mb-3"> <input type="checkbox" name="form-2-is_company"
             class="checkboxinput form-check-input" id="id_form-2-is_company"> </td>
         <td id="div_id_form-2-email" class="mb-3"> <input type="text" name="form-2-email" maxlength="30"
-            class="textinput textInput inputtext form-control" id="id_form-2-email"> <small id="hint_id_form-2-email"
-            class="form-text text-muted">Insert your email</small> </td>
+            class="textinput textInput inputtext form-control" id="id_form-2-email"> <div id="hint_id_form-2-email"
+            class="form-text">Insert your email</div> </td>
         <td id="div_id_form-2-password1" class="mb-3"> <input type="password" name="form-2-password1" maxlength="30"
             class="textinput textInput form-control" id="id_form-2-password1"> </td>
         <td id="div_id_form-2-password2" class="mb-3"> <input type="password" name="form-2-password2" maxlength="30"

diff --git a/tests/results/test_tabular_formset_layout_failing.html b/tests/results/test_tabular_formset_layout_failing.html
@@ -28,8 +28,8 @@
                         name="form-__prefix__-is_company" type="checkbox"></td>
                 <td class="mb-3" id="div_id_form-__prefix__-email"><input
                         class="form-control inputtext textInput textinput" id="id_form-__prefix__-email" maxlength="30"
-                        name="form-__prefix__-email" type="text"><small class="form-text text-muted"
-                        id="hint_id_form-__prefix__-email">Insert your email</small></td>
+                        name="form-__prefix__-email" type="text"><div class="form-text"
+                        id="hint_id_form-__prefix__-email">Insert your email</div></td>
                 <td class="mb-3" id="div_id_form-__prefix__-password1"><input class="form-control textInput textinput"
                         id="id_form-__prefix__-password1" maxlength="30" name="form-__prefix__-password1"
                         type="password"></td>
@@ -58,8 +58,8 @@
                 <td class="mb-3" id="div_id_form-0-email"><input
                         class="form-control inputtext is-invalid textInput textinput" id="id_form-0-email"
                         maxlength="30" name="form-0-email" type="text"><span class="invalid-feedback"
-                        id="error_1_id_form-0-email"><strong>This field is required.</strong></span><small
-                        class="form-text text-muted" id="hint_id_form-0-email">Insert your email</small></td>
+                        id="error_1_id_form-0-email"><strong>This field is required.</strong></span><div
+                        class="form-text" id="hint_id_form-0-email">Insert your email</div></td>
                 <td class="mb-3" id="div_id_form-0-password1"><input class="form-control is-invalid textInput textinput"
                         id="id_form-0-password1" maxlength="30" name="form-0-password1" type="password"><span
                         class="invalid-feedback" id="error_1_id_form-0-password1"><strong>This field is

diff --git a/tests/test_form_helper.py b/tests/test_form_helper.py
@@ -556,7 +556,7 @@ def test_error_and_help_inline():
 
     # Check that error goes before help, otherwise CSS won't work
     error_position = html.find('<span id="error_1_id_email" class="help-inline">')
-    help_position = html.find('<small id="hint_id_email" class="form-text text-muted">')
+    help_position = html.find('<div id="hint_id_email" class="form-text">')
     assert error_position < help_position