Design Systems Newsletter
Some upcoming gems are hanging out in the Lab:
Design work has begun on the next round of components:
- Autocomplete
- Breadcrumbs
- Card
We’ve released an extension for VS Code that will allow engineers to quickly pull in scaffolding for Workbench components. Imagine: building a Dialog with only a few keystrokes. Less time copying and pasting and more time building! You’re welcome.
Check out the Workbench VS Code extension
We’re kicking the tires on DataGrid with pilot programs in the Payroll and Partners teams. These experiments allow us to discover (and solve for) more real-world use cases than we could think of on our own. Each of these experiments moves us closer to our goal of making large datasets performant and usable. Stay tuned for a general release.
Behold new icons!
- Caret
- Duplicate
Check out the complete icon library
Padding was reduced system-wide (including the Component Library) on our default (“large”) buttons. Buttons were formerly wrapped with a chunky 40px of horizontal padding, but it’s now a much more reasonable 24px. We’re currently auditing “small” and “medium” buttons to decide if they should be updated or are even necessary.
We’ve changed the default icon color from salt.700 to salt.800 to increase contrast and improve accessibility.
A winner has been declared in the epic battle of Caret vs Chevron! We are updating the iconography for the toggles in Accordion, Details, and SelectField from Chevron to Caret. But why, you ask? The goal is to create a language of intentionality with our iconography, and so we have decided to use Chevron to represent forward (or backward) motion while Caret will be used to represent toggles for elements that open and close. This intentionality becomes more important when combining multiple UI elements into a single flow, such as pagination and Accordion.
See Caret in action with Accordion
The Tag API and design were recently overhauled to support icons and adapt to more use cases that we’ve seen since it was first released. The new API is more flexible so that styles and colors can be mixed and matched more easily, but keep in mind that there is a relationship between color and intent.
Design Systems has been a small but mighty team for the past couple of years, so we’re excited to be able to grow our team and increase our impact at Gusto.
Jordan Cutler will join us as a Design Systems Engineer on November 15. Jordan has been a vocal advocate for the front-end at Gusto during his time on Modern Bank/Financial Products/Members and has a passion for sharing his knowledge, so we’re thrilled to welcome him to the team.Additionally, Design Systems will welcome a Design Systems Lead in December. She will sit at the top of our little pyramid scheme and both Design and Engineering will report to her. More to follow!
We are currently interviewing for an Engineering PE and an additional Designer and hope to fill those roles in the next couple of months. Combined with the recent addition of Program Manager Tia Alvarez, all these new folks will really level up the impact Design Systems can make at Gusto.
The Workbench website has been adapted for mobile use. Yes, you are correct: we should have done this from the start and we are deeply embarrassed, so learn from our mistake and build for mobile first! Anyway, you can check them out on your phone now. Enjoy!
Check out the newly-responsive Workbench website
The Workbench website has reached parity with our Storybook development environment and now contains a baseline of documentation on every component within the library, most with far more guidance regarding usage and implementation. Components in the Lab will be documented when they are released to Workbench core.
- Site search
- Testing code snippets (moving from Storybook)
- Improvements to code examples
- Reimagined Component Status and Updates pages
The Product Infrastructure team officially dropped support for IE11 on September 22. The change to configuration dramatically reduced the amount of code that was automatically generated to “polyfill” the aging browser to support modern features, which benefits all our users.
How often do you forget how to type fancy apostrophes or quotes? How about a proper ellipsis? Good news, we have a cheat sheet to help you out!
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
Warmest regards,
Team DS • Ben, Brad, Daniel, Eric, Jordan, Josh, Juliann & Lise#design-systems