Skip to content

Allow required fields to be highlighted instead of optional fields #78

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Jul 12, 2024
Merged

Allow required fields to be highlighted instead of optional fields #78

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
539ad00
Allow devs to highlight required fields instead of highlighting optio…
kbayliss Jul 11, 2024
f1d9814
Add tests
kbayliss Jul 11, 2024
fd131dd
Fix lock file
kbayliss Jul 11, 2024
a6cf34d
Avoid using pytest-django as it breaks things
kbayliss Jul 11, 2024
bd3ee41
Update README
kbayliss Jul 11, 2024
b05e318
Use new BLOCK block element as it's not always a label
kbayliss Jul 11, 2024
9a337c9
Update changelog
kbayliss Jul 11, 2024
eba47e4
Typo
kbayliss Jul 11, 2024
4fa218b
Update README with reference to new classes
kbayliss Jul 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm

## Unreleased

### Changed

- Allow required fields to be highlighted instead of optional ones [#78]

### Fixed

- Choice hints not showing on Django 5.x [#69]
Expand Down
9 changes: 9 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,6 +336,15 @@ Layout(

## Customising behaviour

### Highlight required fields instead of optional ones

If `TBXFORMS_HIGHLIGHT_REQUIRED_FIELDS=False` (or unset), optional fields will
have "(optional)" appended to their labels. This is the default behaviour and
recommended by GDS.

If `TBXFORMS_HIGHLIGHT_REQUIRED_FIELDS=True`, required fields will have an
asterisk appended to their labels and optional fields will not be highlighted.

### Change the default label and legend classes

Possible values for the `label_size` and `legend_size`:
Expand Down
6 changes: 6 additions & 0 deletions tbxforms/helper.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
from django.conf import settings

from crispy_forms import helper as crispy_forms_helper
from crispy_forms.utils import TEMPLATE_PACK

Expand Down Expand Up @@ -73,6 +75,10 @@ def render_layout(self, form, context, template_pack=TEMPLATE_PACK):
if self.legend_size:
context["legend_size"] = Size.for_legend(self.legend_size)

context["highlight_required_fields"] = getattr(
settings, "TBXFORMS_HIGHLIGHT_REQUIRED_FIELDS", False
)

return super().render_layout(
form, context, template_pack=template_pack
)
6 changes: 5 additions & 1 deletion tbxforms/templates/tbx/field.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,11 @@
{% if label_tag %}<{{ label_tag }} class="tbxforms-label-wrapper">{% endif %}
<label for="{{ field.id_for_label }}" class="tbxforms-label{% if label_size %} {{ label_size }}{% endif %}">
{{ field.label }}
{% if not field|show_as_required %} <span>{% trans "(optional)" %}</span>{% endif %}
{% if highlight_required_fields %}
{% if field|show_as_required %} {# djlint:off #}<span class="tbxforms-field_marker--required" title="{% trans '(required)' %}">*</span>{# djlint:on #}{% endif %}
{% else %}
{% if not field|show_as_required %} <span class="tbxforms-field_marker--optional">{% trans "(optional)" %}</span>{% endif %}
{% endif %}
</label>
{% if label_tag %}</{{ label_tag }}>{% endif %}
{% endif %}
Expand Down
6 changes: 5 additions & 1 deletion tbxforms/templates/tbx/layout/checkboxes.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,11 @@
<legend class="tbxforms-fieldset__legend{% if legend_size %} {{ legend_size }}{% endif %}">
{% if legend_tag %}<{{ legend_tag }} class="tbxforms-fieldset__heading">{% endif %}
{{ field.label }}
{% if not field|show_as_required %} <span>{% trans "(optional)" %}</span>{% endif %}
{% if highlight_required_fields %}
{% if field|show_as_required %} {# djlint:off #}<span class="tbxforms-field_marker--required" title="{% trans '(required)' %}">*</span>{# djlint:on #}{% endif %}
{% else %}
{% if not field|show_as_required %} <span class="tbxforms-field_marker--optional">{% trans "(optional)" %}</span>{% endif %}
{% endif %}
{% if legend_tag %}</{{ legend_tag }}>{% endif %}
</legend>
{% endif %}
Expand Down
6 changes: 5 additions & 1 deletion tbxforms/templates/tbx/layout/multifield.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,11 @@
<legend class="tbxforms-fieldset__legend{% if legend_size %} {{ legend_size }}{% endif %}">
{% if legend_tag %}<{{ legend_tag }} class="tbxforms-fieldset__heading">{% endif %}
{{ field.label }}
{% if not field|show_as_required %} <span>{% trans "(optional)" %}</span>{% endif %}
{% if highlight_required_fields %}
{% if field|show_as_required %} {# djlint:off #}<span class="tbxforms-field_marker--required" title="{% trans '(required)' %}">*</span>{# djlint:on #}{% endif %}
{% else %}
{% if not field|show_as_required %} <span class="tbxforms-field_marker--optional">{% trans "(optional)" %}</span>{% endif %}
{% endif %}
{% if legend_tag %}</{{ legend_tag }}>{% endif %}
</legend>
{% endif %}
Expand Down
6 changes: 5 additions & 1 deletion tbxforms/templates/tbx/layout/radios.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,11 @@
<legend class="tbxforms-fieldset__legend{% if legend_size %} {{ legend_size }}{% endif %}">
{% if legend_tag %}<{{ legend_tag }} class="tbxforms-fieldset__heading">{% endif %}
{{ field.label }}
{% if not field|show_as_required %} <span>{% trans "(optional)" %}</span>{% endif %}
{% if highlight_required_fields %}
{% if field|show_as_required %} {# djlint:off #}<span class="tbxforms-field_marker--required" title="{% trans '(required)' %}">*</span>{# djlint:on #}{% endif %}
{% else %}
{% if not field|show_as_required %} <span class="tbxforms-field_marker--optional">{% trans "(optional)" %}</span>{% endif %}
{% endif %}
{% if legend_tag %}</{{ legend_tag }}>{% endif %}
</legend>
{% endif %}
Expand Down
37 changes: 37 additions & 0 deletions tests/layout/__snapshots__/test_checkboxes/test_optional_field_highlighting.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<form class="tbxforms" method="post">
<div id="div_id_method" class="tbxforms-form-group">
<fieldset class="tbxforms-fieldset" aria-describedby="id_method_hint">
<legend class="tbxforms-fieldset__legend tbxforms-fieldset__legend--m">
How would you like to be contacted?
<span class="tbxforms-field_marker--optional">(optional)</span>
</legend>
<span id="id_method_hint" class="tbxforms-hint">Select all options that are relevant to you.</span>
<div class="tbxforms-checkboxes">
<div class="tbxforms-checkboxes__item">
<input type="checkbox"
name="method"
class="tbxforms-checkboxes__input"
id="id_method_1"
value="email" />
<label class="tbxforms-label tbxforms-checkboxes__label" for="id_method_1">Email</label>
</div>
<div class="tbxforms-checkboxes__item">
<input type="checkbox"
name="method"
class="tbxforms-checkboxes__input"
id="id_method_2"
value="phone" />
<label class="tbxforms-label tbxforms-checkboxes__label" for="id_method_2">Phone</label>
</div>
<div class="tbxforms-checkboxes__item">
<input type="checkbox"
name="method"
class="tbxforms-checkboxes__input"
id="id_method_3"
value="text" />
<label class="tbxforms-label tbxforms-checkboxes__label" for="id_method_3">Text message</label>
</div>
</div>
</fieldset>
</div>
</form>
37 changes: 37 additions & 0 deletions tests/layout/__snapshots__/test_checkboxes/test_required_field_highlighting.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<form class="tbxforms" method="post">
<div id="div_id_method" class="tbxforms-form-group">
<fieldset class="tbxforms-fieldset" aria-describedby="id_method_hint">
<legend class="tbxforms-fieldset__legend tbxforms-fieldset__legend--m">
How would you like to be contacted?
<span class="tbxforms-field_marker--required" title="(required)">*</span>
</legend>
<span id="id_method_hint" class="tbxforms-hint">Select all options that are relevant to you.</span>
<div class="tbxforms-checkboxes">
<div class="tbxforms-checkboxes__item">
<input type="checkbox"
name="method"
class="tbxforms-checkboxes__input"
id="id_method_1"
value="email" />
<label class="tbxforms-label tbxforms-checkboxes__label" for="id_method_1">Email</label>
</div>
<div class="tbxforms-checkboxes__item">
<input type="checkbox"
name="method"
class="tbxforms-checkboxes__input"
id="id_method_2"
value="phone" />
<label class="tbxforms-label tbxforms-checkboxes__label" for="id_method_2">Phone</label>
</div>
<div class="tbxforms-checkboxes__item">
<input type="checkbox"
name="method"
class="tbxforms-checkboxes__input"
id="id_method_3"
value="text" />
<label class="tbxforms-label tbxforms-checkboxes__label" for="id_method_3">Text message</label>
</div>
</div>
</fieldset>
</div>
</form>
2 changes: 1 addition & 1 deletion ...pshots__/test_date_input/test_non_required_field_left_blank_does_not_raise_exception.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<fieldset class="tbxforms-fieldset" aria-describedby="id_date_hint">
<legend class="tbxforms-fieldset__legend tbxforms-fieldset__legend--m">
When was your passport issued?
<span>(optional)</span>
<span class="tbxforms-field_marker--optional">(optional)</span>
</legend>
<span id="id_date_hint" class="tbxforms-hint">For example, 12 11 2007</span>
<div class="tbxforms-date-input" id="id_date">
Expand Down
46 changes: 46 additions & 0 deletions tests/layout/__snapshots__/test_date_input/test_optional_field_highlighting.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<form class="tbxforms" method="post">
<div id="div_id_date" class="tbxforms-form-group">
<fieldset class="tbxforms-fieldset" aria-describedby="id_date_hint">
<legend class="tbxforms-fieldset__legend tbxforms-fieldset__legend--m">
When was your passport issued?
<span class="tbxforms-field_marker--optional">(optional)</span>
</legend>
<span id="id_date_hint" class="tbxforms-hint">For example, 12 11 2007</span>
<div class="tbxforms-date-input" id="id_date">
<div class="tbxforms-date-input__item">
<div class="tbxforms-form-group">
<label class="tbxforms-label tbxforms-date-input__label" for="id_date_0">Day</label>
<input type="text"
name="date_0"
class="tbxforms-input tbxforms-input--text tbxforms-date-input__input tbxforms-input--width-2"
pattern="[0-9]*"
inputmode="numeric"
id="id_date_0">
</div>
</div>
<div class="tbxforms-date-input__item">
<div class="tbxforms-form-group">
<label class="tbxforms-label tbxforms-date-input__label" for="id_date_1">Month</label>
<input type="text"
name="date_1"
class="tbxforms-input tbxforms-input--text tbxforms-date-input__input tbxforms-input--width-2"
pattern="[0-9]*"
inputmode="numeric"
id="id_date_1">
</div>
</div>
<div class="tbxforms-date-input__item">
<div class="tbxforms-form-group">
<label class="tbxforms-label tbxforms-date-input__label" for="id_date_2">Year</label>
<input type="text"
name="date_2"
class="tbxforms-input tbxforms-input--text tbxforms-date-input__input tbxforms-input--width-4"
pattern="[0-9]*"
inputmode="numeric"
id="id_date_2">
</div>
</div>
</div>
</fieldset>
</div>
</form>
49 changes: 49 additions & 0 deletions tests/layout/__snapshots__/test_date_input/test_required_field_highlighting.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<form class="tbxforms" method="post">
<div id="div_id_date" class="tbxforms-form-group">
<fieldset class="tbxforms-fieldset" aria-describedby="id_date_hint">
<legend class="tbxforms-fieldset__legend tbxforms-fieldset__legend--m">
When was your passport issued?
<span class="tbxforms-field_marker--required" title="(required)">*</span>
</legend>
<span id="id_date_hint" class="tbxforms-hint">For example, 12 11 2007</span>
<div class="tbxforms-date-input" id="id_date">
<div class="tbxforms-date-input__item">
<div class="tbxforms-form-group">
<label class="tbxforms-label tbxforms-date-input__label" for="id_date_0">Day</label>
<input type="text"
name="date_0"
class="tbxforms-input tbxforms-input--text tbxforms-date-input__input tbxforms-input--width-2"
pattern="[0-9]*"
inputmode="numeric"
required="required"
id="id_date_0">
</div>
</div>
<div class="tbxforms-date-input__item">
<div class="tbxforms-form-group">
<label class="tbxforms-label tbxforms-date-input__label" for="id_date_1">Month</label>
<input type="text"
name="date_1"
class="tbxforms-input tbxforms-input--text tbxforms-date-input__input tbxforms-input--width-2"
pattern="[0-9]*"
inputmode="numeric"
required="required"
id="id_date_1">
</div>
</div>
<div class="tbxforms-date-input__item">
<div class="tbxforms-form-group">
<label class="tbxforms-label tbxforms-date-input__label" for="id_date_2">Year</label>
<input type="text"
name="date_2"
class="tbxforms-input tbxforms-input--text tbxforms-date-input__input tbxforms-input--width-4"
pattern="[0-9]*"
inputmode="numeric"
required="required"
id="id_date_2">
</div>
</div>
</div>
</fieldset>
</div>
</form>
14 changes: 14 additions & 0 deletions tests/layout/__snapshots__/test_file_upload/test_optional_field_highlighting.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<form class="tbxforms" method="post" enctype="multipart/form-data">
<div id="div_id_file" class="tbxforms-form-group">
<label for="id_file" class="tbxforms-label tbxforms-label--m">
Upload a file
<span class="tbxforms-field_marker--optional">(optional)</span>
</label>
<span id="id_file_hint" class="tbxforms-hint">Select the CSV file to upload.</span>
<input type="file"
name="file"
aria-describedby="id_file_hint"
class="tbxforms-file-upload"
id="id_file">
</div>
</form>
15 changes: 15 additions & 0 deletions tests/layout/__snapshots__/test_file_upload/test_required_field_highlighting.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<form class="tbxforms" method="post" enctype="multipart/form-data">
<div id="div_id_file" class="tbxforms-form-group">
<label for="id_file" class="tbxforms-label tbxforms-label--m">
Upload a file
<span class="tbxforms-field_marker--required" title="(required)">*</span>
</label>
<span id="id_file_hint" class="tbxforms-hint">Select the CSV file to upload.</span>
<input type="file"
name="file"
aria-describedby="id_file_hint"
class="tbxforms-file-upload"
required="required"
id="id_file">
</div>
</form>
37 changes: 37 additions & 0 deletions tests/layout/__snapshots__/test_radios/test_optional_field_highlighting.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<form class="tbxforms" method="post">
<div id="div_id_method" class="tbxforms-form-group">
<fieldset class="tbxforms-fieldset" aria-describedby="id_method_hint">
<legend class="tbxforms-fieldset__legend tbxforms-fieldset__legend--m">
How would you like to be contacted?
<span class="tbxforms-field_marker--optional">(optional)</span>
</legend>
<span id="id_method_hint" class="tbxforms-hint">Select the most convenient way to contact you.</span>
<div class="tbxforms-radios">
<div class="tbxforms-radios__item">
<input type="radio"
name="method"
class="tbxforms-radios__input"
id="id_method_1"
value="email" />
<label class="tbxforms-label tbxforms-radios__label" for="id_method_1">Email</label>
</div>
<div class="tbxforms-radios__item">
<input type="radio"
name="method"
class="tbxforms-radios__input"
id="id_method_2"
value="phone" />
<label class="tbxforms-label tbxforms-radios__label" for="id_method_2">Phone</label>
</div>
<div class="tbxforms-radios__item">
<input type="radio"
name="method"
class="tbxforms-radios__input"
id="id_method_3"
value="text" />
<label class="tbxforms-label tbxforms-radios__label" for="id_method_3">Text message</label>
</div>
</div>
</fieldset>
</div>
</form>
37 changes: 37 additions & 0 deletions tests/layout/__snapshots__/test_radios/test_required_field_highlighting.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<form class="tbxforms" method="post">
<div id="div_id_method" class="tbxforms-form-group">
<fieldset class="tbxforms-fieldset" aria-describedby="id_method_hint">
<legend class="tbxforms-fieldset__legend tbxforms-fieldset__legend--m">
How would you like to be contacted?
<span class="tbxforms-field_marker--required" title="(required)">*</span>
</legend>
<span id="id_method_hint" class="tbxforms-hint">Select the most convenient way to contact you.</span>
<div class="tbxforms-radios">
<div class="tbxforms-radios__item">
<input type="radio"
name="method"
class="tbxforms-radios__input"
id="id_method_1"
value="email" />
<label class="tbxforms-label tbxforms-radios__label" for="id_method_1">Email</label>
</div>
<div class="tbxforms-radios__item">
<input type="radio"
name="method"
class="tbxforms-radios__input"
id="id_method_2"
value="phone" />
<label class="tbxforms-label tbxforms-radios__label" for="id_method_2">Phone</label>
</div>
<div class="tbxforms-radios__item">
<input type="radio"
name="method"
class="tbxforms-radios__input"
id="id_method_3"
value="text" />
<label class="tbxforms-label tbxforms-radios__label" for="id_method_3">Text message</label>
</div>
</div>
</fieldset>
</div>
</form>
Loading
Loading