Refactor tabular numbers into their own mixin

alphagov · Oct 5, 2023 · b16fd38 · b16fd38
1 parent 30f2705
commit b16fd38
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 9 deletions.
diff --git a/packages/govuk-frontend/src/govuk/components/character-count/_index.scss b/packages/govuk-frontend/src/govuk/components/character-count/_index.scss
@@ -14,7 +14,7 @@
   }
 
   .govuk-character-count__message {
-    @include govuk-font($size: false, $tabular: true);
+    @include govuk-typography-tabular-numbers;
     margin-top: 0;
     margin-bottom: 0;
 

diff --git a/packages/govuk-frontend/src/govuk/components/input/_index.scss b/packages/govuk-frontend/src/govuk/components/input/_index.scss
@@ -57,7 +57,7 @@
   }
 
   .govuk-input--extra-letter-spacing {
-    @include govuk-font(false, $tabular: true);
+    @include govuk-typography-tabular-numbers;
     letter-spacing: 0.05em;
   }
 

diff --git a/packages/govuk-frontend/src/govuk/components/table/_index.scss b/packages/govuk-frontend/src/govuk/components/table/_index.scss
@@ -22,7 +22,7 @@
   }
 
   .govuk-table__cell--numeric {
-    @include govuk-font($size: false, $tabular: true);
+    @include govuk-typography-tabular-numbers;
   }
 
   .govuk-table__header--numeric,

diff --git a/packages/govuk-frontend/src/govuk/helpers/_typography.scss b/packages/govuk-frontend/src/govuk/helpers/_typography.scss
@@ -62,6 +62,22 @@
   font-weight: $govuk-font-weight-bold if($important, !important, null);
 }
 
+/// Tabular number helper
+///
+/// Using font-feature-settings is generally discouraged, but unfortunately
+/// IE 11 doesn't support font-variant-numeric or @supports, so we resort to
+/// using font-feature-settings as the default and then removing it again if
+/// font-variant-numeric is supported.
+///
+/// @param {Boolean} $important [false] - Whether to mark declarations as
+///   `!important`. Generally Used to create override classes.
+/// @access public
+
+@mixin govuk-typography-tabular-numbers($important: false) {
+  font-feature-settings: "tnum" 1 if($important, !important, null);
+  font-variant-numeric: tabular-nums if($important, !important, null);
+}
+
 /// Convert line-heights specified in pixels into a relative value, unless
 /// they are already unit-less (and thus already treated as relative values)
 /// or the units do not match the units used for the font size.
@@ -171,12 +187,7 @@
   @include govuk-typography-common;
 
   @if $tabular {
-    font-feature-settings: "tnum" 1;
-
-    @supports (font-variant-numeric: tabular-nums) {
-      font-feature-settings: normal;
-      font-variant-numeric: tabular-nums;
-    }
+    @include govuk-typography-tabular-numbers;
   }
 
   @if $weight == regular {