Extending the GOV.UK Design System, progressive enhancement, naming patterns

Insanity Max 30—week 5

The first month of this program was impossible. And yet, the second month is a level up, which you’ll see in my max out times.

First week fail times: 7:01 9:49 7:51 10:42 8:35

Second week fail times: 9:17 10:43 10:01 10:48 11:45

Third week fail times: 17:15 7:14 12:01 8:15 11:43

Forth week fail times: 19:14 10:44 12:12 11:10 12:15

Fifth week fail times: 8:20 5:55 4:52 6:01 5:58

Three weeks to go.

Extending components from the GOV.UK Design System

I’ve been designing a currency input component for the HMCTS Design System because it’s needed across a number of services.

The currency input is basically a text input with a currency symbol prefixed to the input. And some accessibility provisions that provide an equivalent experience for non-sighted users.

My first thought was to extend the Input component by overriding parameters using Nunjuck’s set. But you can’t use set to override properties of an object.

Ed suggested using a Nunjucks filter. In Eleventy something like this:

eleventyConfig.addFilter(‘mergeObjects’, function(item, …rest) {
return Object.assign({}, item, …rest);

Then in the template:

{% set options = {} | mergeObjects({size: ‘large’}, options) %}

But then, I thought I’d check to see how the GOV.UK Design System is doing this. For example, the Select and the Input components are similar. And I noticed they just duplicate parts while ensuring the parameters are the same where possible.

This seems like a sensible approach so I’m going to try doing this first. This way I get to feel some of the pain of duplication (if any) before going down the complicated route.

Progressive enhancement: things from the past don’t have to break in the future

I read a tweet by Wes Bos talking about how a site built in Polymer (from a couple years back) will break in the latest version of Chrome.

It’s a good reminder of how the web doesn’t have to be built like this. Good advice and technical design is timeless.

Pattern renaming with Amy

The best part of my week was spent with Amy working out a better name for the “Help users perform an action in bulk” pattern.

After a machine gun round of questions and plenty of back and fourth we came up with a much better name: “Help users to manage items in a list.”