Zendesk

Context

In 2022, Garden was in the midst of updating its design system offering to meet WCAG 2.1 accessibility standards, which meant creating and rewriting a significant portion of its codebase to meet the needs of Zendesk’s future. Their primary deliverable consists of a suite of meticulously developed React component packages (available on npm). Many of these are backed by custom React hooks providing the bulk of component business logic.

Among many projects, there were three focus areas that needed close attention:

• Creating a standardized component-set for drag & drop (DnD) functionality
• Rewriting a prominent menu component to meet modern accessibility expectations
• Helping plan and implement platform-wide dark mode with existing technologies (Styled Components)

Right Warp lead the first two projects, and contributed throughout the duration of the last in the form of early technical explorations, planning, and component migrations.

Drag and drop

As a customer service platform, drag and drop is a prolific UI pattern used by agents in their day-to-day Zendesk workflows. At the time, drag and drop libraries saw only a few popular options. Instead of implementing its own drag and drop library, Garden instead focused on library interoperability. This way a developer can use Garden for the right UI experience, and choose their own implementation to suit their specific use case.

Interactive examples use dnd-kit.

Menu

Menus are one of the most popular UI patterns on the internet. Getting the pattern right meant understanding menu WCAG requirements to their fullest. Especially when 50 million interactions each month were with menus in some capacity across Zendesk’s products.

Garden's legacy menu suffered from painful API patterns and a subpar accessibility model that moreso mimicked a combobox, causing issues for screen reader support.

The result is an intuitive component that developers understand and follows the same patterns as Garden’s other dropdown-like components (such as Combobox). The resulting component is also capable of dropping into other components wherever a button can be used as a menu, increasing composability.

Menu is backed by a robust useMenu React hook that enables complex interactions, such as check and radio menu items, and even nested menus. The component is available in both controlled and uncontrolled environments.

Dark mode

Enabling system-wide theming on any platform can be challenging. Thankfully, there are great industry patterns (e.g., media queries with CSS variables) to inspire architectural directions.

In Garden’s case, a v1 for dark & light mode meant leaning into Styled Components theming capabilities, along with powerful custom-written theming utilities, to allow all of Garden’s components to utilize either color scheme. Each component was rewritten to enable various buckets of colors to receive the correct colors depending on the chosen theme.

Variable buckets included border, foreground (e.g., text, icons), background, and shadows.

From the start, the team decided to avoid specifying excessive numbers of variables to cover things like interactive states. Having too wide of a token surface area can easily spell death for a design system by overwhelming consumers and creating pitfalls and bottlenecks, causing a maintenance nightmare.

Result

As a hard-fought team effort, the above changes (and more) is Garden v9, providing a significant number of platform-wide capabilities (along with a detailed migration guide) for consumers.