From 2079481f44c5510b7353f0a85e84f701afae64ea Mon Sep 17 00:00:00 2001
From: Kimberly Grey <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Thu, 10 Nov 2022 12:19:24 +0000
Subject: [PATCH 1/7] Change back link arrow measurements to use ems
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Currently the back link is measured in pixels. This prevents the arrow from changing size when text zooming is in use.

Changing this to em units allows the arrow to scale in size with the text.

em units have been calculated by taking the previous pixel value and dividing it by the text's pixel size (16). e.g. 7px ÷ 16px = 0.4375em.
---
 src/govuk/components/back-link/_index.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/govuk/components/back-link/_index.scss b/src/govuk/components/back-link/_index.scss
index a41de205ee..da04806101 100644
--- a/src/govuk/components/back-link/_index.scss
+++ b/src/govuk/components/back-link/_index.scss
@@ -1,10 +1,10 @@
 @include govuk-exports("govuk/component/back-link") {
 
   // Size of chevron (excluding border)
-  $chevron-size: 7px;
+  $chevron-size: .4375em;
 
   // Size of chevron border
-  $chevron-border-width: 1px;
+  $chevron-border-width: .0625em;
 
   // Colour of chevron
   $chevron-border-colour: $govuk-secondary-text-colour;
@@ -21,7 +21,7 @@
     margin-bottom: govuk-spacing(3);
 
     // Allow space for the arrow
-    padding-left: 14px;
+    padding-left: .875em;
   }
 
   // Prepend left pointing chevron

From e5a7e3045c73207fbf3f7dd7d1ece7b6cf9667be Mon Sep 17 00:00:00 2001
From: Kimberly Grey <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Thu, 10 Nov 2022 14:56:07 +0000
Subject: [PATCH 2/7] Add changelog entry

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6f71651360..50f4f07f9d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -206,6 +206,7 @@ We've made fixes to GOV.UK Frontend in the following pull requests:
 - [#2821: Avoid duplicated --error class on Character Count](https://github.com/alphagov/govuk-frontend/pull/2821)
 - [#2800: Improve Pagination component print styles](https://github.com/alphagov/govuk-frontend/pull/2800)
 - [#2909: Fix JavaScript errors when entering text into the Character Count in IE8](https://github.com/alphagov/govuk-frontend/pull/2909)
+- [#2998: Change back link arrow measurements to use ems](https://github.com/alphagov/govuk-frontend/pull/2998)
 
 ## 4.3.1 (Patch release)
 

From 767f13e1fa77310cf7e156a5168d741c6f606f96 Mon Sep 17 00:00:00 2001
From: Kimberly Grey <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Thu, 10 Nov 2022 16:20:09 +0000
Subject: [PATCH 3/7] Switch to using govuk-em function

---
 src/govuk/components/back-link/_index.scss | 31 +++++++++-------------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/govuk/components/back-link/_index.scss b/src/govuk/components/back-link/_index.scss
index da04806101..a5a4ef88f8 100644
--- a/src/govuk/components/back-link/_index.scss
+++ b/src/govuk/components/back-link/_index.scss
@@ -1,16 +1,21 @@
 @include govuk-exports("govuk/component/back-link") {
+  // Component font-size on the Frontend (used for calculations)
+  $font-scale-size: 16;
+  $font-size: $font-scale-size * 1px;
 
   // Size of chevron (excluding border)
-  $chevron-size: .4375em;
+  $chevron-size: govuk-em(7px, $font-size);
 
   // Size of chevron border
-  $chevron-border-width: .0625em;
+  // Awkward syntax hack to ensure we're using the CSS max() function and not
+  // the Sass one. This can be called normally once we're using Sass modules.
+  $chevron-border-width: govuk-em(1px, $font-size);
 
   // Colour of chevron
   $chevron-border-colour: $govuk-secondary-text-colour;
 
   .govuk-back-link {
-    @include govuk-typography-responsive($size: 16);
+    @include govuk-typography-responsive($size: $font-scale-size);
     @include govuk-link-common;
     @include govuk-link-style-text;
 
@@ -21,7 +26,7 @@
     margin-bottom: govuk-spacing(3);
 
     // Allow space for the arrow
-    padding-left: .875em;
+    padding-left: govuk-em(14px, $font-size);
   }
 
   // Prepend left pointing chevron
@@ -35,14 +40,15 @@
     @if $govuk-use-legacy-font {
       // Begin adjustments for font baseline offset
       // These should be removed when legacy font support is dropped
-      top: -1px;
-      bottom: 1px;
+      $offset: govuk-em(1px, $font-size);
+      top: $offset * -1;
+      bottom: $offset;
     } @else {
       top: 0;
       bottom: 0;
     }
 
-    left: 3px;
+    left: govuk-em(3px, $font-size);
 
     width: $chevron-size;
     height: $chevron-size;
@@ -81,15 +87,4 @@
     bottom: -14px;
     left: 0;
   }
-
-  @if $govuk-use-legacy-font {
-    // Begin adjustments for font baseline offset
-    // These should be removed when legacy font support is dropped
-    .govuk-back-link:before {
-      $offset: 1px;
-
-      top: $offset * -1;
-      bottom: $offset;
-    }
-  }
 }

From 253d4878c147c9ca614847777d28eef593ffd073 Mon Sep 17 00:00:00 2001
From: Kimberly Grey <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Fri, 11 Nov 2022 17:11:42 +0000
Subject: [PATCH 4/7] Mirror changes onto breadcrumbs component chevrons

---
 src/govuk/components/back-link/_index.scss   |  2 --
 src/govuk/components/breadcrumbs/_index.scss | 22 ++++++++++++--------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/govuk/components/back-link/_index.scss b/src/govuk/components/back-link/_index.scss
index a5a4ef88f8..a38a0df87d 100644
--- a/src/govuk/components/back-link/_index.scss
+++ b/src/govuk/components/back-link/_index.scss
@@ -7,8 +7,6 @@
   $chevron-size: govuk-em(7px, $font-size);
 
   // Size of chevron border
-  // Awkward syntax hack to ensure we're using the CSS max() function and not
-  // the Sass one. This can be called normally once we're using Sass modules.
   $chevron-border-width: govuk-em(1px, $font-size);
 
   // Colour of chevron
diff --git a/src/govuk/components/breadcrumbs/_index.scss b/src/govuk/components/breadcrumbs/_index.scss
index 9f8c476ad8..4ef5ad62e6 100644
--- a/src/govuk/components/breadcrumbs/_index.scss
+++ b/src/govuk/components/breadcrumbs/_index.scss
@@ -1,10 +1,13 @@
 @include govuk-exports("govuk/component/breadcrumbs") {
+  // Component font-size on the Frontend (used for calculations)
+  $font-scale-size: 16;
+  $font-size: $font-scale-size * 1px;
 
   // Size of chevron (excluding border)
-  $chevron-size: 7px;
+  $chevron-size: govuk-em(7px, $font-size);
 
   // Size of chevron border
-  $chevron-border-width: 1px;
+  $chevron-border-width: govuk-em(1px, $font-size);
 
   // Colour of chevron
   $chevron-border-colour: $govuk-secondary-text-colour;
@@ -13,10 +16,10 @@
   // of length 8 (7px + 1px border):
   //
   // √(8² + 8²) * 0.5 ≅ 5.655
-  $chevron-altitude-calculated: 5.655px;
+  $chevron-altitude-calculated: govuk-em(5.655px, $font-size);
 
   .govuk-breadcrumbs {
-    @include govuk-font($size: 16);
+    @include govuk-font($size: $font-scale-size);
     @include govuk-text-colour;
 
     margin-top: govuk-spacing(3);
@@ -40,8 +43,8 @@
 
     // Add both margin and padding such that the chevron appears centrally
     // between each breadcrumb item
-    margin-left: govuk-spacing(2);
-    padding-left: govuk-spacing(2) + $chevron-altitude-calculated;
+    margin-left: govuk-em(govuk-spacing(2), $font-size);
+    padding-left: govuk-em(govuk-spacing(2), $font-size) + $chevron-altitude-calculated;
 
     float: left;
 
@@ -55,8 +58,9 @@
       @if $govuk-use-legacy-font {
         // Begin adjustments for font baseline offset
         // These should be removed when legacy font support is dropped
-        top: -1px;
-        bottom: 1px;
+        $offset: govuk-em(1px, $font-size);
+        top: $offset * -1;
+        bottom: $offset;
       } @else {
         top: 0;
         bottom: 0;
@@ -118,7 +122,7 @@
         }
 
         &:before {
-          top: 6px;
+          top: govuk-em(6px, $font-size);
           margin: 0;
         }
       }

From ab937f4aa3cdfc93659eda313e15e7ee76722d10 Mon Sep 17 00:00:00 2001
From: Kimberly Grey <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Mon, 14 Nov 2022 14:26:20 +0000
Subject: [PATCH 5/7] Add minimum border thickness to chevrons

---
 src/govuk/components/back-link/_index.scss   | 14 +++++++++-----
 src/govuk/components/breadcrumbs/_index.scss | 14 +++++++++-----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/govuk/components/back-link/_index.scss b/src/govuk/components/back-link/_index.scss
index a38a0df87d..430d3a8c3a 100644
--- a/src/govuk/components/back-link/_index.scss
+++ b/src/govuk/components/back-link/_index.scss
@@ -1,19 +1,19 @@
 @include govuk-exports("govuk/component/back-link") {
   // Component font-size on the Frontend (used for calculations)
-  $font-scale-size: 16;
-  $font-size: $font-scale-size * 1px;
+  $font-size: 16;
 
   // Size of chevron (excluding border)
   $chevron-size: govuk-em(7px, $font-size);
 
   // Size of chevron border
-  $chevron-border-width: govuk-em(1px, $font-size);
+  $chevron-border-min-width: 1px;
+  $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
 
   // Colour of chevron
   $chevron-border-colour: $govuk-secondary-text-colour;
 
   .govuk-back-link {
-    @include govuk-typography-responsive($size: $font-scale-size);
+    @include govuk-typography-responsive($size: $font-size);
     @include govuk-link-common;
     @include govuk-link-style-text;
 
@@ -56,9 +56,13 @@
     transform: rotate(225deg);
 
     border: solid;
-    border-width: $chevron-border-width $chevron-border-width 0 0;
+    border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
     border-color: $chevron-border-colour;
 
+    @supports (border-width: unquote("max(0px)")) {
+      border-width: unquote("max(#{$chevron-border-min-width}, #{$chevron-border-width}) max(#{$chevron-border-min-width}, #{$chevron-border-width})") 0 0;
+    }
+
     // Fall back to a less than sign for IE8
     @include govuk-if-ie8 {
       content: "\003c"; // Less than sign (<)
diff --git a/src/govuk/components/breadcrumbs/_index.scss b/src/govuk/components/breadcrumbs/_index.scss
index 4ef5ad62e6..b8a754ee72 100644
--- a/src/govuk/components/breadcrumbs/_index.scss
+++ b/src/govuk/components/breadcrumbs/_index.scss
@@ -1,13 +1,13 @@
 @include govuk-exports("govuk/component/breadcrumbs") {
   // Component font-size on the Frontend (used for calculations)
-  $font-scale-size: 16;
-  $font-size: $font-scale-size * 1px;
+  $font-size: 16;
 
   // Size of chevron (excluding border)
   $chevron-size: govuk-em(7px, $font-size);
 
   // Size of chevron border
-  $chevron-border-width: govuk-em(1px, $font-size);
+  $chevron-border-min-width: 1px;
+  $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
 
   // Colour of chevron
   $chevron-border-colour: $govuk-secondary-text-colour;
@@ -19,7 +19,7 @@
   $chevron-altitude-calculated: govuk-em(5.655px, $font-size);
 
   .govuk-breadcrumbs {
-    @include govuk-font($size: $font-scale-size);
+    @include govuk-font($size: $font-size);
     @include govuk-text-colour;
 
     margin-top: govuk-spacing(3);
@@ -78,9 +78,13 @@
       transform: rotate(45deg);
 
       border: solid;
-      border-width: $chevron-border-width $chevron-border-width 0 0;
+      border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
       border-color: $chevron-border-colour;
 
+      @supports (border-width: unquote("max(0px)")) {
+        border-width: unquote("max(#{$chevron-border-min-width}, #{$chevron-border-width}) max(#{$chevron-border-min-width}, #{$chevron-border-width})") 0 0;
+      }
+
       // Fall back to a greater than sign for IE8
       @include govuk-if-ie8 {
         content: "\003e"; // Greater than sign (>)

From b0d4ee7ff9e73fbc1536ba30952abd638c756177 Mon Sep 17 00:00:00 2001
From: Kimberly Grey <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Mon, 28 Nov 2022 14:53:00 +0000
Subject: [PATCH 6/7] Use max() to enforce a minimum chevron size

---
 src/govuk/components/back-link/_index.scss   | 3 +++
 src/govuk/components/breadcrumbs/_index.scss | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/src/govuk/components/back-link/_index.scss b/src/govuk/components/back-link/_index.scss
index 430d3a8c3a..568c8389cb 100644
--- a/src/govuk/components/back-link/_index.scss
+++ b/src/govuk/components/back-link/_index.scss
@@ -61,6 +61,9 @@
 
     @supports (border-width: unquote("max(0px)")) {
       border-width: unquote("max(#{$chevron-border-min-width}, #{$chevron-border-width}) max(#{$chevron-border-min-width}, #{$chevron-border-width})") 0 0;
+
+      // Ensure that the chevron never gets smaller than 16px
+      font-size: unquote("max(#{$font-size * 1px}, 1em)");
     }
 
     // Fall back to a less than sign for IE8
diff --git a/src/govuk/components/breadcrumbs/_index.scss b/src/govuk/components/breadcrumbs/_index.scss
index b8a754ee72..c0182e5964 100644
--- a/src/govuk/components/breadcrumbs/_index.scss
+++ b/src/govuk/components/breadcrumbs/_index.scss
@@ -83,6 +83,9 @@
 
       @supports (border-width: unquote("max(0px)")) {
         border-width: unquote("max(#{$chevron-border-min-width}, #{$chevron-border-width}) max(#{$chevron-border-min-width}, #{$chevron-border-width})") 0 0;
+
+        // Ensure that the chevron never gets smaller than 16px
+        font-size: unquote("max(#{$font-size * 1px}, 1em)");
       }
 
       // Fall back to a greater than sign for IE8

From 33d69cbeacd9654312aa578c0e3e0d42603f2512 Mon Sep 17 00:00:00 2001
From: Kimberly Grey <kimberly.grey@digital.cabinet-office.gov.uk>
Date: Tue, 29 Nov 2022 12:49:13 +0000
Subject: [PATCH 7/7] Update changelog

---
 CHANGELOG.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 50f4f07f9d..468f7b00f9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Fixes
+
+- [#2998: Refactor back link and breadcrumb chevrons to use ems](https://github.com/alphagov/govuk-frontend/pull/2998)
+
 ## 4.4.0 (Feature release)
 
 ### New features
@@ -206,7 +210,6 @@ We've made fixes to GOV.UK Frontend in the following pull requests:
 - [#2821: Avoid duplicated --error class on Character Count](https://github.com/alphagov/govuk-frontend/pull/2821)
 - [#2800: Improve Pagination component print styles](https://github.com/alphagov/govuk-frontend/pull/2800)
 - [#2909: Fix JavaScript errors when entering text into the Character Count in IE8](https://github.com/alphagov/govuk-frontend/pull/2909)
-- [#2998: Change back link arrow measurements to use ems](https://github.com/alphagov/govuk-frontend/pull/2998)
 
 ## 4.3.1 (Patch release)