Skip to content

Design Systems Newsletter

New components to brighten your day:

Work has begun on the next round of components:

  • File uploads
  • Selectable Cards
A screenshot of the Heading component

Heading has been expanded to include a line of subtext below the primary heading. This visual separation allows us to distinguish between an eye-catching heading and smaller supporting text.

Check out the Subtext

A screenshot of the Autocomplete component

In our last edition of the Design Systems Newsletter we announced that we were sunsetting an Autocomplete experiment in Workbench Lab in favor of an entirely new component. (drumroll) The new Autocomplete is hot off the presses and ready for consumption! Give it a shot and let us know what you think. Stay tuned for a migration path for our deprecated Autocomplete components.

Autocomplete me

visuallyHidden is a Workbench export for a CSS class used to visually hide content while keeping it available for screen readers. We use it extensively within Workbench and the Workbench website, but we’re now exporting it as a Workbench utility.

Hide me

The FirstPage and LastPage icons
  • FirstPage
  • LastPage

Check out the icon gallery

The HandHoldingPhoneSmall illustration
  • HandHoldingPhoneSmall
    (previously available as medium, now available as a small illo)

Check out the illustrations

The cover of the Workbench UI Kit
  • We’ve released a new version of the Spinner component in Figma that comes in four different sizes. We have deprecated the old one and suggest migrating your designs to this new version.
  • Checkbox was updated with a new Checkbox Group component.

We are bidding farewell to the Pager component in the Component Library. Most pagination is done within the context of tables and can therefore use the TablePagination component that comes bundled with Table. For simpler pagination needs, we’ve created a pagination pattern in Figma and supplied “first page” and “last page” icons to make the dream a reality.

We’ve added a “featured” variant to Panel, featuring a kale background. This variant is intended to highlight promoted or featured content.

Your eyes do not deceive you: the bottom border of our form inputs was changed from salt-700 to salt-800 in order to meet stricter contrast guidelines.

Additionally, we have standardized the methodology for hiding form field labels to utilize our visuallyHidden utility. See the visuallyHidden docs for an example.

Design Systems is hiring a Senior Product Designer. Know someone who might be interested? Send them our way!

Sample anatomy and blueprint graphics for Autocomplete Field

We made some small design tweaks to the component prop tables and the testing code samples to improve the legibility and usability of these features.

We’ve been experimenting with anatomy and blueprint diagrams in some recent components to help explain the relationships between elements within our composed components. We hope you find them useful.

Check them out on the Autocomplete docs

  • Link guidelines were clarified and split into implementation and usage tabs to better categorize the huge amount of guidance related to this component.
  • Component comparison tables (comparing one component to another) have been standardized.

Have questions? Want to propose changes or additions to Workbench? Need other support or advice on using the system? We’re here for you!

  • Reach out in #design-systems
  • Office hours are held Wednesdays, 1–2pm Pacific Sign up

Warmest regards,

Team DS • Ben, Brad, Daniel, Eric, Jordan, Josh, Juliann & Lise