From 19c83111f0a211951a40717a98040e7d6ff32be1 Mon Sep 17 00:00:00 2001 From: Alistair Laing Date: Thu, 3 May 2018 10:58:12 +0100 Subject: [PATCH] updates markup and styling of errors This commit updates the markup that this gem produces so that its closer inline with the markup that GOVUK Elements uses https://govuk-elements.herokuapp.com/form-elements/example-date/ It also fixes an issue with error styling which was broken as a result of GDS changing the css class name used to style error messages. The class name changes from `error` to `form-group-error` also each input field also receives a `form-control-error` https://github.com/alphagov/govuk_elements/releases/tag/v3.0.0 https://github.com/alphagov/govuk_elements/pull/405 As this commit introduces new markup and potentially breaking changes for any services relying on the markup for styling or js interaction may want to upgrade with caution. In addition to this update if your project is using GOVUK Elements < 3.0 then you will also need to update your GOVUK Elements version --- lib/gov_uk_date_fields/form_fields.rb | 42 ++-- test/dummy/test/models/form_fields_test.rb | 246 +++++++++++---------- 2 files changed, 162 insertions(+), 126 deletions(-) diff --git a/lib/gov_uk_date_fields/form_fields.rb b/lib/gov_uk_date_fields/form_fields.rb index 53e2bc9..588a12e 100644 --- a/lib/gov_uk_date_fields/form_fields.rb +++ b/lib/gov_uk_date_fields/form_fields.rb @@ -66,25 +66,30 @@ def generate_old_style_input_fields def generate_start_fieldset %Q| #{generate_fieldset_tag} - #{generate_legend_tag}#{@options[:legend_text]} -
+ #{generate_legend_tag} + #{@options[:legend_text]} + #{@form_hint_text} #{generate_error_message} -

#{@form_hint_text}

+ +
| end def generate_fieldset_tag - result = "" + "
" end def generate_legend_tag @@ -139,28 +144,37 @@ def generate_end_div end def generate_day_input_field(day_value) - %Q| + css_class = "form-control" + css_class += " form-control-error" if error_for_attr? + + result = %Q|
- +
| end def generate_month_input_field(month_value) - %Q| + css_class = "form-control" + css_class += " form-control-error" if error_for_attr? + + result = %Q|
- +
| end def generate_year_input_field(year_value) - %Q| + css_class = "form-control" + css_class += " form-control-error" if error_for_attr? + + result = %Q|
- +
| end diff --git a/test/dummy/test/models/form_fields_test.rb b/test/dummy/test/models/form_fields_test.rb index 38f83e0..bf39340 100644 --- a/test/dummy/test/models/form_fields_test.rb +++ b/test/dummy/test/models/form_fields_test.rb @@ -103,149 +103,171 @@ def expected_placeholder_output_without_fieldset def expected_fieldset_output_with_error_class_and_message %Q{ -
- Joining date -
-
    -
  • - Invalid joining date -
    • -
  • - Joining date must be in the past -
    • -
-

For example, 31 3 1980

-
- - -
-
- - -
-
- - +
+
+ + Joining date + + For example, 31 3 1980 + +
    +
  • Invalid joining date
    • +
  • Joining date must be in the past
    • +
+ +
+
+ + +
+
+ + +
+
+ + +
-
-
+ + } end def expected_fieldset_output_with_id %Q{ -
- Joining date -
-

For example, 31 3 1980

-
- - -
-
- - -
-
- - +
+
+ + Joining date + For example, 31 3 1980 + +
+
+ + +
+
+ + +
+
+ + +
-
-
+ + } end def expected_fieldset_output_with_form_hint %Q{ -
- Date of birth -
-

In the form: dd mm yyyy

-
- - -
-
- - -
-
- - +
+
+ + Date of birth + In the form: dd mm yyyy + +
+
+ + +
+
+ + +
+
+ + +
-
-
+ + } end def expected_fieldset_output_with_legend_class %Q{ -
- Joining date -
-

For example, 31 3 1980

-
- - -
-
- - -
-
- - +
+
+ + Joining date + For example, 31 3 1980 + +
+
+ + +
+
+ + +
+
+ + +
-
-
+ + } end def expected_fieldset_output_with_unstyled_today_button %Q{ -
- Joining date -
-

For example, 31 3 1980

- Today -
- - +
+
+ + Joining date + For example, 31 3 1980 + +
+ Today +
+ + +
+
+ + +
+
+ + +
-
- - -
-
- - -
-
-
+ + } end def expected_fieldset_output_with_syled_today_button %Q{ -
- Joining date -
-

For example, 31 3 1980

- Today -
- - -
-
- - -
-
- - +
+
+ + Joining date + For example, 31 3 1980 + +
+ Today +
+ + +
+
+ + +
+
+ + +
-
-
+ + } end