Add a modifier for tables with lots of data

[owenatgov]

Adds govuk-table--small-text-until-tablet for instances where users have complex tables which benefit from smaller text on smaller screens.

Merging into the type-scale branch, not main.

Fixes #3922

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-development.min.css	107.48 KiB
dist/govuk-frontend-development.min.js	38.58 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	78.74 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	73.99 KiB
packages/govuk-frontend/dist/govuk/all.mjs	3.86 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	107.47 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	38.57 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.38 KiB

Modules

File	Size
all.mjs	70.32 KiB
components/accordion/accordion.mjs	21.67 KiB
components/button/button.mjs	4.7 KiB
components/character-count/character-count.mjs	21.24 KiB
components/checkboxes/checkboxes.mjs	5.83 KiB
components/error-summary/error-summary.mjs	6.57 KiB
components/exit-this-page/exit-this-page.mjs	16.08 KiB
components/header/header.mjs	4.46 KiB
components/notification-banner/notification-banner.mjs	4.93 KiB
components/radios/radios.mjs	4.83 KiB
components/skip-link/skip-link.mjs	4.39 KiB
components/tabs/tabs.mjs	10.16 KiB

View stats and visualisations on the review app

---

Action run for 30d1ce8

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 8133c4408..de1d6fec7 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -5130,6 +5130,32 @@ screen and (-ms-high-contrast:active) {
     }
 }
 
+.govuk-table--small-text-until-tablet {
+    font-size: 1rem;
+    line-height: 1.25
+}
+
+@media print {
+    .govuk-table--small-text-until-tablet {
+        font-size: 14pt;
+        line-height: 1.2
+    }
+}
+
+@media (min-width:40.0625em) {
+    .govuk-table--small-text-until-tablet {
+        font-size: 1.1875rem;
+        line-height: 1.3157894737
+    }
+}
+
+@media print and (min-width:40.0625em) {
+    .govuk-table--small-text-until-tablet {
+        font-size: 14pt;
+        line-height: 1.15
+    }
+}
+
 .govuk-table__header {
     font-weight: 700
 }

---

Action run for 30d1ce8

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/table/_index.scss b/packages/govuk-frontend/dist/govuk/components/table/_index.scss
index c847ba233..5bb7bca5c 100644
--- a/packages/govuk-frontend/dist/govuk/components/table/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/table/_index.scss
@@ -9,6 +9,16 @@
     border-collapse: collapse;
   }
 
+  // Modifier for tables with a lot of data. Tables with lots of data benefit
+  // from a smaller font size on small screens.
+  .govuk-table--small-text-until-tablet {
+    @include govuk-font-size($size: 16);
+
+    @include govuk-media-query($from: tablet) {
+      @include govuk-font-size($size: 19);
+    }
+  }
+
   .govuk-table__header {
     @include govuk-typography-weight-bold;
   }
diff --git a/packages/govuk-frontend/dist/govuk/components/table/fixtures.json b/packages/govuk-frontend/dist/govuk/components/table/fixtures.json
index 6b9357731..6fe6b0d38 100644
--- a/packages/govuk-frontend/dist/govuk/components/table/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/table/fixtures.json
@@ -180,6 +180,57 @@
             "previewLayoutModifiers": [],
             "html": "<table class=\"govuk-table\">\n  <caption class=\"govuk-table__caption govuk-table__caption--m\">Caption 1: Months and rates</caption>\n  <thead class=\"govuk-table__head\">\n    <tr class=\"govuk-table__row\">\n      <th scope=\"col\" class=\"govuk-table__header\">Month you apply</th>\n      <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for bicycles</th>\n      <th scope=\"col\" class=\"govuk-table__header govuk-table__header--numeric\">Rate for vehicles</th>\n    </tr>\n  </thead>\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <th scope=\"row\" class=\"govuk-table__header\">January</th>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£85</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£95</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <th scope=\"row\" class=\"govuk-table__header\">February</th>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£75</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£55</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <th scope=\"row\" class=\"govuk-table__header\">March</th>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£165</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£125</td>\n        </tr>\n  </tbody>\n</table>"
         },
+        {
+            "name": "with small text modifier for tables with a lot of data",
+            "options": {
+                "classes": "govuk-table--small-text-until-tablet",
+                "rows": [
+                    [
+                        {
+                            "text": "January"
+                        },
+                        {
+                            "text": "£85",
+                            "format": "numeric"
+                        },
+                        {
+                            "text": "£95",
+                            "format": "numeric"
+                        }
+                    ],
+                    [
+                        {
+                            "text": "February"
+                        },
+                        {
+                            "text": "£75",
+                            "format": "numeric"
+                        },
+                        {
+                            "text": "£55",
+                            "format": "numeric"
+                        }
+                    ],
+                    [
+                        {
+                            "text": "March"
+                        },
+                        {
+                            "text": "£165",
+                            "format": "numeric"
+                        },
+                        {
+                            "text": "£125",
+                            "format": "numeric"
+                        }
+                    ]
+                ]
+            },
+            "hidden": false,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "html": "<table class=\"govuk-table govuk-table--small-text-until-tablet\">\n  <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">January</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£85</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£95</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">February</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£75</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£55</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">March</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£165</td>\n          <td class=\"govuk-table__cell govuk-table__cell--numeric\">£125</td>\n        </tr>\n  </tbody>\n</table>"
+        },
         {
             "name": "classes",
             "options": {

---

Action run for 30d1ce8

[querkmachine]

I'm a little unsure of how suitable complex is for the name of a modifier class.

From what I can gather, most of the modifier classes in Frontend describe either the state (e.g. govuk-input--error, govuk-tabs__panel--hidden, govuk-pagination__item--current) or the appearance (e.g. govuk-link--no-underline, govuk-input--extra-letter-spacing, govuk-tag--yellow).

complex is a descriptor of the contents of the table, rather than the state or appearance of it¹, and there is a potential for a disconnect between what is considered 'complex' and what kind of data would actually benefit from having a smaller text size.

A table with three-columns for say, name, job title, and organisation isn't complex per se, but as each cell can contain reasonably long text, it could easily overflow a narrow screen on the default font-size. A three-column table where they all contain short words or numeric values is just as structurally 'complex', but can get away with the larger font-size.

Would a name like small or smaller-text better describe the modifier?

Footnotes

1. This isn't unheard of, tables also have govuk-table__cell--numeric which is arguably doing the same (though it could be considered appearance-based too, as it activates tabular numbers), but it does feel like those kinds of modifiers are the exception rather than the rule. ↩

[owenatgov]

@querkmachine That's a very good point. What do you think about small-text-on-mobile? It's a bit of a mouthful but I can't think of a more concise way to convey that the text size is dropping down at the mobile breakpoint.

[querkmachine]

@owenatgov small-text-on-mobile feels along the right lines. We have a similarly al dente breakpoint-based class name in the form of govuk-grid-column-one-quarter-from-desktop and its relatives.

I guess the question that spawns is that, as the other one uses from-desktop to indicate it only applies to desktop and up, should this new class do similar? I suppose by that logic the name outta be small-text-to-tablet, but that doesn't feel very intuitive sounding.

I think small-text-on-mobile is probably fine.

[owenatgov]

@querkmachine More good points. what about small-text-until-tablet?

[querkmachine]

@owenatgov Oh yeah, that sounds better. More consistent with the from/until parameters on the media query mixin too. Go for that one, I think!

[querkmachine]

Happy with the code itself. Still wonder if this comment and the name of the review app example now need to be amended to something other than 'complex table' though.

[owenatgov]

I've gone with "tables with a lot of data" which is complies with your point on complexity not necessarily being the barometer. Whatcha think?

[querkmachine]

Works for me 👍