Go to Content
Design System
Playroom Storybook
#ClimateEmergency

Release highlights February

Konstantin Demblin, Design System Lead

This blog post covers some highlights from the latest releases of GDS.

Release of design-system v3.0.0-beta.0

We released v3.0.0-beta in January and are aiming for a stable version soon. We encourage everyone using GDS to join the Slack channel #gds-web-v3-beta for further discussions on that topic.

Check out the entire changelog here.

George Design System version 3 beta 0 with component search

LabeledList

We added zigzag variant to LabeledList.

A labeled list where the form fields are arranged in a zigzag pattern

Look at this improvement in Playroom.

StripeActionButton

We updated StripeActionButton to show on scrolling to the bottom of page.

Animation showing how the StripeActionButton behaves when scrolling in a narrow tier.

Look at this improvement in Playroom.

StepNavigation

We updated StepNavigation to support custom icons for completed steps.

Animation showing how the StripeActionButton behaves when scrolling in a narrow tier.

Look at this improvement in Playroom.

A11y colour contrast: Badge

We updated Badge colours for a11y.

Showcase of all badges both in light mode and dark mode.

Look at this improvement in Playroom.

A11y colour contrast

  • We updated primary Button dark mode background colour.
  • We updated primary disabled Button dark mode background colour.
  • We updated the color of the minimal Stepper.

Showcase of Button primary, both in light mode and dark mode, on differen backgrounds and different button states. Example of minimal stepper, both in light and dark mode.

AmountInput

We added formatOnChange prop to AmountInput. Formatting on change works only with precision={0}.

Animation showing the new formatting of AmountInput.

Look at this improvement in Playroom.

Small Alerts in small tiers

We updated the alignment of small Alerts in smaller tiers.

Small alerts

Look at this improvement in Playroom.

A11y colour contrast: ui-green

Updated ui-green colour value to meet a11y colour contrast.

Colour swatch showcasing the new colours and hex values for ui-green in light and darkmode.

FullPage

We added companySwitch prop to FullPage.

George Store with the new section for the company switch

Look at this improvement in Storybook.

ProductCard

We added headingOverline prop.

ProductCard with a new top most line.

DrawerNavigation

Menu item change: “Requests” -> “Approvals”

George Business page with DrawerNavigation's updated menu item "Approvals".

Look at this improvement in Storybook.

Signing

We added support for the signing component.

Animation of the new signing flow

Look at a flow of the signing component in Playroom.
Look at a various examples of the signing component in Playroom.

Thank you to everyone involved for their outstanding work on the latest design system releases!