Merge pull request #1287 from alphagov/amend-border-width-variable

Rename border-width-mobile to reflect how it's used
alphagov · Apr 30, 2019 · 67fd864 · 67fd864
2 parents 0fbf6a6 + 845b82b
commit 67fd864
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,15 @@
 # Changelog
 
-## Unreleased
+## 3.0.0 (Breaking release)
 
 💥 Breaking changes:
 
+- Rename `$govuk-border-width-mobile` to `$govuk-border-width-narrow`
+
+  To migrate: If you are using `$govuk-border-width-mobile` in your own custom code, you need to rename any instances to `$govuk-border-width-narrow`.
+
+  ([PR #1287](https://github.com/alphagov/govuk-frontend/pull/1287))
+
 - The colour palette has been updated.
 
   **Note:** If you are using [compatibility mode], the existing palette will be
@@ -106,11 +112,13 @@
 
 🔧 Fixes:
 
-- Pull Request Title goes here
+- Rename `$govuk-border-width-mobile` to `$govuk-border-width-narrow`
 
-  Description goes here (optional)
+  This better reflects how the variable is used.
 
-  ([PR #N](https://github.com/alphagov/govuk-frontend/pull/N))
+  Also make the error summary border the standard width on mobile.
+
+  ([PR #1287](https://github.com/alphagov/govuk-frontend/pull/1287))
 
 [compatibility mode]: https://github.com/alphagov/govuk-frontend/blob/master/docs/installation/installing-with-npm.md#compatibility-mode
 

diff --git a/src/components/checkboxes/_checkboxes.scss b/src/components/checkboxes/_checkboxes.scss
@@ -149,7 +149,9 @@
   // Conditional reveals
   // =========================================================
 
-  $conditional-border-width: $govuk-border-width-mobile;
+  // The narrow border is used in the conditional reveals because the border has
+  // to be an even number in order to be centred under the 40px checkbox or radio.
+  $conditional-border-width: $govuk-border-width-narrow;
   // Calculate the amount of padding needed to keep the border centered against the checkbox.
   $conditional-border-padding: ($govuk-checkboxes-size / 2) - ($conditional-border-width / 2);
   // Move the border centered with the checkbox

diff --git a/src/components/error-summary/_error-summary.scss b/src/components/error-summary/_error-summary.scss
@@ -12,11 +12,7 @@
     @include govuk-responsive-margin(8, "bottom");
     @include govuk-focusable;
 
-    border: $govuk-border-width-mobile solid $govuk-error-colour;
-
-    @include govuk-media-query($from: tablet) {
-      border: $govuk-border-width solid $govuk-error-colour;
-    }
+    border: $govuk-border-width solid $govuk-error-colour;
   }
 
   .govuk-error-summary__title {

diff --git a/src/components/radios/_radios.scss b/src/components/radios/_radios.scss
@@ -187,7 +187,9 @@
   // Conditional reveals
   // =========================================================
 
-  $conditional-border-width: $govuk-border-width-mobile;
+  // The narrow border is used in the conditional reveals because the border has
+  // to be an even number in order to be centred under the 40px checkbox or radio.
+  $conditional-border-width: $govuk-border-width-narrow;
   // Calculate the amount of padding needed to keep the border centered against the radios.
   $conditional-border-padding: ($govuk-radios-size / 2) - ($conditional-border-width / 2);
   // Move the border centered with the radios

diff --git a/src/settings/_measurements.scss b/src/settings/_measurements.scss
@@ -63,12 +63,12 @@ $govuk-border-width: 5px !default;
 
 $govuk-border-width-wide: 10px !default;
 
-/// Border width on mobile
+/// Narrow border width
 ///
 /// @type Number
 /// @access public
 
-$govuk-border-width-mobile: 4px !default;
+$govuk-border-width-narrow: 4px !default;
 
 /// Form control border width
 ///