Version 5 Release Notes
v5.0 of the Design System contains some significant updates and is a major step towards our end goal of having a flexible design that will cater for everyone's needs and use cases.
New icon and text sidebar components
We’ve added new sidebar components to give you more flexibility when adding navigation to your pages. The icon sidebar works well with visual displays such as maps or dashboards. The text sidebar is useful when you have too many options to fit into a header. There’s also an expandable text sidebar for when you need nested options within your navigation.
Consistent spacing across components
We’ve introduced padding, margin and spacing variables for every component. These make it easier to keep layouts consistent and adjust spacing when needed, without having to write custom CSS.
Updated website to use the text sidebar
The design system now uses the new text sidebar component. This improves page layout and makes navigation clearer. We’ve also introduced ‘Versions’ page so you can see which version of the design system you’re using, see latest updates, understand any breaking changes, and find guidance on how to update.
Clearer documentation
We’ve updated the guidance to show how to use the new CSS variables and the attributes for each component. You’ll now find examples and usage notes alongside the relevant components, making it easier to apply them correctly.
Improved responsiveness of the design system website
We’ve improved the responsiveness of some of the design system web pages so that it now works well on smaller screens, ensuring that all content remains easy for users to read and navigate.
Improved component interactions
We’ve updated button hover states and borders to improve visual feedback when users interact with them. We’ve also fixed issues with the autocomplete component so it behaves as expected.
Updated fonts
We've stopped hosting fonts inside the library and now load them from a central CDN, making them faster and easier to update. So there is no longer the need to manually define the fonts inside your application or website.
Going the forward the font being used is called 'Johnston ITC Pro' not 'Johnston ITC'.