Merge pull request #826 from nhsuk/feature/textarea-error-focus-height

Reduce form input error borders to 2px, matching govuk - fixes bug with moving text in inputs / textareas
nhsuk · Aug 8, 2022 · 568737d · 568737d
2 parents af013aa + ec56ae1
commit 568737d
Show file tree

Hide file tree

Showing 44 changed files with 33 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # NHS.UK frontend Changelog
 
+## Unreleased
+
+:wrench: **Fixes**
+
+- Reduce input and textarea error border widths to eliminate text movement / dimension changes when focusing and unfocusing a field with an error ([Issue 825](https://github.com/nhsuk/nhsuk-frontend/issues/825)), ([PR 826](https://github.com/nhsuk/nhsuk-frontend/pull/826)).
+
 ## 6.1.1 - 13 June 2022
 
 :wrench: **Fixes**

diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "backstop:ci": "start-server-and-test start http://0.0.0.0:3000 backstop:citest",
     "backstop:citest": "backstop --config=./tests/backstop/backstop.js test --docker",
     "backstop:approve": "backstop --config=./tests/backstop/backstop.js approve",
-    "backstop:clean": "rm -rf tests/backstop/bitmaps_test/*",
+    "backstop:clean": "rm -rf tests/backstop/bitmaps_test/* && rm -rf tests/backstop/html_report",
     "build-gh-pages": "gulp bundle && BASE_URL='/nhsuk-frontend/' gulp docs:build",
     "build-gh-release": "gulp zip",
     "jest:dev": "jest --watch",

diff --git a/packages/core/settings/_globals.scss b/packages/core/settings/_globals.scss
@@ -78,7 +78,7 @@ $nhsuk-header-spacing: 20px;
 //
 
 $nhsuk-border-width-form-element: 2px !default;
-$nhsuk-border-width-form-element-error: 4px !default;
+$nhsuk-border-width-form-element-error: 2px !default;
 $nhsuk-focus-width: 4px !default;
 $nhsuk-border-width: 4px !default;
 $nhsuk-border-width-mobile: 4px !default;

diff --git a/tests/backstop/backstop.js b/tests/backstop/backstop.js
@@ -125,6 +125,11 @@ module.exports = {
       label: 'Checkboxes with error message',
       url: `${TEST_URL}/checkboxes/error.html`,
     },
+    {
+      label: 'Checkboxes with error message - focused',
+      url: `${TEST_URL}/checkboxes/error.html`,
+      clickSelector: '#waste-1',
+    },
     {
       label: 'Checkboxes with conditional content',
       url: `${TEST_URL}/checkboxes/conditional.html`,
@@ -312,6 +317,11 @@ module.exports = {
       label: 'Input with error message',
       url: `${TEST_URL}/input/error.html`,
     },
+    {
+      label: 'Input with error message - focused',
+      url: `${TEST_URL}/input/error.html`,
+      clickSelector: '#input-with-error-message',
+    },
     {
       label: 'Input with width modifier',
       url: `${TEST_URL}/input/custom-width.html`,
@@ -364,6 +374,11 @@ module.exports = {
       label: 'Radios with hint text and error message',
       url: `${TEST_URL}/radios/hint-error.html`,
     },
+    {
+      label: 'Radios with hint text and error message - focused',
+      url: `${TEST_URL}/radios/hint-error.html`,
+      clickSelector: '#example-2',
+    },    
     {
       label: 'Radios with conditional content',
       url: `${TEST_URL}/radios/conditional.html`,
@@ -377,6 +392,11 @@ module.exports = {
       label: 'Select with hint text and error message',
       url: `${TEST_URL}/select/hint-error.html`,
     },
+    {
+      label: 'Select with hint text and error message - focused',
+      url: `${TEST_URL}/select/hint-error.html`,
+      clickSelector: '[for=select-2]',
+    },
     {
       label: 'Summary list',
       url: `${TEST_URL}/summary-list/index.html`,
@@ -413,6 +433,11 @@ module.exports = {
       label: 'Textarea with error message',
       url: `${TEST_URL}/textarea/error.html`,
     },
+    {
+      label: 'Textarea with error message - focused',
+      url: `${TEST_URL}/textarea/error.html`,
+      clickSelector: '#no-ni-reason',
+    },
     {
       label: 'Warning callout',
       url: `${TEST_URL}/warning-callout/index.html`,

diff --git a/...k-frontend_Checkboxes_with_error_message_-_focused_0_document_0_iPhone_5_SE.png b/...k-frontend_Checkboxes_with_error_message_-_focused_0_document_0_iPhone_5_SE.png
diff --git a/...uk-frontend_Checkboxes_with_error_message_-_focused_0_document_1_iPhone_6-8.png b/...uk-frontend_Checkboxes_with_error_message_-_focused_0_document_1_iPhone_6-8.png
diff --git a/...ce/nhsuk-frontend_Checkboxes_with_error_message_-_focused_0_document_2_iPad.png b/...ce/nhsuk-frontend_Checkboxes_with_error_message_-_focused_0_document_2_iPad.png
diff --git a/...ntend_Checkboxes_with_error_message_-_focused_0_document_3_Surface_iPad_Pro.png b/...ntend_Checkboxes_with_error_message_-_focused_0_document_3_Surface_iPad_Pro.png
diff --git a/...nce/nhsuk-frontend_Date_input_with_multiple_errors_0_document_0_iPhone_5_SE.png b/...nce/nhsuk-frontend_Date_input_with_multiple_errors_0_document_0_iPhone_5_SE.png
diff --git a/...ence/nhsuk-frontend_Date_input_with_multiple_errors_0_document_1_iPhone_6-8.png b/...ence/nhsuk-frontend_Date_input_with_multiple_errors_0_document_1_iPhone_6-8.png
diff --git a/..._reference/nhsuk-frontend_Date_input_with_multiple_errors_0_document_2_iPad.png b/..._reference/nhsuk-frontend_Date_input_with_multiple_errors_0_document_2_iPad.png
diff --git a/...hsuk-frontend_Date_input_with_multiple_errors_0_document_3_Surface_iPad_Pro.png b/...hsuk-frontend_Date_input_with_multiple_errors_0_document_3_Surface_iPad_Pro.png
diff --git a/...frontend_Error_summary_with_link_to_an_input_field_0_document_0_iPhone_5_SE.png b/...frontend_Error_summary_with_link_to_an_input_field_0_document_0_iPhone_5_SE.png
diff --git a/...-frontend_Error_summary_with_link_to_an_input_field_0_document_1_iPhone_6-8.png b/...-frontend_Error_summary_with_link_to_an_input_field_0_document_1_iPhone_6-8.png
diff --git a/.../nhsuk-frontend_Error_summary_with_link_to_an_input_field_0_document_2_iPad.png b/.../nhsuk-frontend_Error_summary_with_link_to_an_input_field_0_document_2_iPad.png
diff --git a/...end_Error_summary_with_link_to_an_input_field_0_document_3_Surface_iPad_Pro.png b/...end_Error_summary_with_link_to_an_input_field_0_document_3_Surface_iPad_Pro.png
diff --git a/.../nhsuk-frontend_Input_with_error_message_-_focused_0_document_0_iPhone_5_SE.png b/.../nhsuk-frontend_Input_with_error_message_-_focused_0_document_0_iPhone_5_SE.png
diff --git a/...e/nhsuk-frontend_Input_with_error_message_-_focused_0_document_1_iPhone_6-8.png b/...e/nhsuk-frontend_Input_with_error_message_-_focused_0_document_1_iPhone_6-8.png
diff --git a/...ference/nhsuk-frontend_Input_with_error_message_-_focused_0_document_2_iPad.png b/...ference/nhsuk-frontend_Input_with_error_message_-_focused_0_document_2_iPad.png
diff --git a/...k-frontend_Input_with_error_message_-_focused_0_document_3_Surface_iPad_Pro.png b/...k-frontend_Input_with_error_message_-_focused_0_document_3_Surface_iPad_Pro.png
diff --git a/..._reference/nhsuk-frontend_Input_with_error_message_0_document_0_iPhone_5_SE.png b/..._reference/nhsuk-frontend_Input_with_error_message_0_document_0_iPhone_5_SE.png
diff --git a/...s_reference/nhsuk-frontend_Input_with_error_message_0_document_1_iPhone_6-8.png b/...s_reference/nhsuk-frontend_Input_with_error_message_0_document_1_iPhone_6-8.png
diff --git a/...bitmaps_reference/nhsuk-frontend_Input_with_error_message_0_document_2_iPad.png b/...bitmaps_reference/nhsuk-frontend_Input_with_error_message_0_document_2_iPad.png
diff --git a/...rence/nhsuk-frontend_Input_with_error_message_0_document_3_Surface_iPad_Pro.png b/...rence/nhsuk-frontend_Input_with_error_message_0_document_3_Surface_iPad_Pro.png
diff --git a/..._Radios_with_hint_text_and_error_message_-_focused_0_document_0_iPhone_5_SE.png b/..._Radios_with_hint_text_and_error_message_-_focused_0_document_0_iPhone_5_SE.png
diff --git a/...d_Radios_with_hint_text_and_error_message_-_focused_0_document_1_iPhone_6-8.png b/...d_Radios_with_hint_text_and_error_message_-_focused_0_document_1_iPhone_6-8.png
diff --git a/...rontend_Radios_with_hint_text_and_error_message_-_focused_0_document_2_iPad.png b/...rontend_Radios_with_hint_text_and_error_message_-_focused_0_document_2_iPad.png
diff --git a/...os_with_hint_text_and_error_message_-_focused_0_document_3_Surface_iPad_Pro.png b/...os_with_hint_text_and_error_message_-_focused_0_document_3_Surface_iPad_Pro.png
diff --git a/..._Select_with_hint_text_and_error_message_-_focused_0_document_0_iPhone_5_SE.png b/..._Select_with_hint_text_and_error_message_-_focused_0_document_0_iPhone_5_SE.png
diff --git a/...d_Select_with_hint_text_and_error_message_-_focused_0_document_1_iPhone_6-8.png b/...d_Select_with_hint_text_and_error_message_-_focused_0_document_1_iPhone_6-8.png
diff --git a/...rontend_Select_with_hint_text_and_error_message_-_focused_0_document_2_iPad.png b/...rontend_Select_with_hint_text_and_error_message_-_focused_0_document_2_iPad.png
diff --git a/...ct_with_hint_text_and_error_message_-_focused_0_document_3_Surface_iPad_Pro.png b/...ct_with_hint_text_and_error_message_-_focused_0_document_3_Surface_iPad_Pro.png
diff --git a/...k-frontend_Select_with_hint_text_and_error_message_0_document_0_iPhone_5_SE.png b/...k-frontend_Select_with_hint_text_and_error_message_0_document_0_iPhone_5_SE.png
diff --git a/...uk-frontend_Select_with_hint_text_and_error_message_0_document_1_iPhone_6-8.png b/...uk-frontend_Select_with_hint_text_and_error_message_0_document_1_iPhone_6-8.png
diff --git a/...ce/nhsuk-frontend_Select_with_hint_text_and_error_message_0_document_2_iPad.png b/...ce/nhsuk-frontend_Select_with_hint_text_and_error_message_0_document_2_iPad.png
diff --git a/...ntend_Select_with_hint_text_and_error_message_0_document_3_Surface_iPad_Pro.png b/...ntend_Select_with_hint_text_and_error_message_0_document_3_Surface_iPad_Pro.png
diff --git a/...suk-frontend_Textarea_with_error_message_-_focused_0_document_0_iPhone_5_SE.png b/...suk-frontend_Textarea_with_error_message_-_focused_0_document_0_iPhone_5_SE.png
diff --git a/...hsuk-frontend_Textarea_with_error_message_-_focused_0_document_1_iPhone_6-8.png b/...hsuk-frontend_Textarea_with_error_message_-_focused_0_document_1_iPhone_6-8.png
diff --git a/...ence/nhsuk-frontend_Textarea_with_error_message_-_focused_0_document_2_iPad.png b/...ence/nhsuk-frontend_Textarea_with_error_message_-_focused_0_document_2_iPad.png
diff --git a/...rontend_Textarea_with_error_message_-_focused_0_document_3_Surface_iPad_Pro.png b/...rontend_Textarea_with_error_message_-_focused_0_document_3_Surface_iPad_Pro.png
diff --git a/...ference/nhsuk-frontend_Textarea_with_error_message_0_document_0_iPhone_5_SE.png b/...ference/nhsuk-frontend_Textarea_with_error_message_0_document_0_iPhone_5_SE.png
diff --git a/...eference/nhsuk-frontend_Textarea_with_error_message_0_document_1_iPhone_6-8.png b/...eference/nhsuk-frontend_Textarea_with_error_message_0_document_1_iPhone_6-8.png
diff --git a/...maps_reference/nhsuk-frontend_Textarea_with_error_message_0_document_2_iPad.png b/...maps_reference/nhsuk-frontend_Textarea_with_error_message_0_document_2_iPad.png
diff --git a/...ce/nhsuk-frontend_Textarea_with_error_message_0_document_3_Surface_iPad_Pro.png b/...ce/nhsuk-frontend_Textarea_with_error_message_0_document_3_Surface_iPad_Pro.png