What’s new in Design System 3

[m7kvqbe1]

3.x.x is the latest stable major release of the MOD.UK Design System.

This release contains a number of breaking changes and, as such we recommend following the detailed upgrade guide.

Overview

Over the last few months we've been gearing up to ship the next major release of the MOD UK Design System.

This release includes a plethora of improvements, iterating on our already existing component base.

Read on to find out more about some of the major changes.

Forms

We’ve taken a holistic look at forms and form related components. Overhauling the look and feel of the components themselves, and reworking the underlying implementations to improve accessibility, keyboard control and general usability.

It’s now up to you, the developer, to choose how you integrate forms into your application.

Our components are agnostic of any particular form companion library and have been extensively tested with Formik, react-hook-form (our favourite) and native integrations.

Supplementary components (Field, Fieldset, SectionDivider) have been included to help you layout forms in a consistent way. These also help to enforce opinionated styling of error messages and hint text.

Feature Parity

Our focus for the initial release was to reach feature parity with the previous generation of components. This means you can be sure your existing use cases will continue to be covered upon upgrading.

We have a number of new features in the pipeline that are intended to further enhance these new components. We will be shipping these ‘little and often’ in upcoming minor releases.

Component Examples

Sidebar

The new Sidebar component has been available for a while in experimental form. It’s much more feature rich; sub-navigation, notifications, user menu - and has a greatly improved user experience. This now replaces the previously deprecated implementation.

Under the hood

strictNullChecks

TypeScript strictNullChecks has been enabled. Interfaces are now more accurate about whether props accept null or undefined.

Automated Testing

In addition to automated RTL Jest tests, AXE and Chromatic Storybook visual regression testing, we now also test nuanced component behaviours with Cypress.

CSS Framework

This package has been removed in its entirety from the code base.

We recommend using a combination of the design tokens package (an agnostic way to store variables such as typography, color, and spacing) and a CSS-in-JS solution like styled-components.

The root of your application should now be wrapped with the provided GlobalStyleProvider context provider.

If you are heavily reliant on some of the remaining CSS Framework package features (like the utility classes) you can continue to use the last stable 2.x.x release of the package.

ESLint

eslint-config-airbnb has been upgraded. The new version includes official compatibility with ESLint 8, drops support for ESLint 6 and older and adds a few new rules.

LTS

The previous 2.x.x major release will from now on only get security patches and critical bug fixes. We won’t be shipping any new functionality. We recommend upgrading to 3.x.x as soon as possible.

The previous major release can be found on the following branch: 2-lts.

Feedback and Contributing

As always, we very much welcome external contributions. Feel free to open discussion threads, issues or pull requests on the GitHub monorepo. Take a look at our contributing guidelines to find out more.

You can also get in touch with us via the Defence Digital #design-system Slack channel.