Arc UI v2.0

Releasing Arc Design System (ADS) 2.0 was our most ambitious release yet! We've completely swapped out the underlying styling technology and rebuilt much of our accessibility functionality on top of proven accessibility libraries.

Additionally, we've updated our website to better reflect all aspects of ADS. One of our main goals with the new website is to use ADS to build it. This helped us prove our approach and use the site as a showcase of ADS usage. We couldn't have done it without the great work by the Adobe Spectrum, SEEK, and Modulz design system teams!

---

With the 2.0 release there are a number of breaking changes that were introduced. The new release is now fully built on top of Stitches! The previous styling system was built on styled-system and relied on a theme provider wrapping any area where ADS components were used. In this release, ArcThemeProvider is no longer needed and has been removed from the @wpmedia/ads-system package. A top-level provider may be added again in the future for use in internationalization or style overrides. Additionally, another feature of the previous system used the sx prop to provide styles for a component. To make this work, a JSX pragma was required:

/** @jsx jsx */
import { jsx } from '@wpmedia/ads-system'
 

Stitches does not require JSX pragma and so this was removed from ADS in 2.0. Moving forward, the pragma declaration can be replaced by the standard React import. For more information on using Stitches with ADS, see the Stitches documentation and the ADS page on Styling with ADS. After discussing with AppSec, we've decided to move from GitHub package registry back to Artifactory. For information on how to configure access to ADS package locally and on your CI/CD provider, see this guide. With the namespace requirements removed, we are also renaming the packages back to using the @arc-ui namespace. This change is reflected throughout the site. Before 2.0, there was a single Icon component. To use an icon, an icon name was passed as a prop, e.g., <Icon name="close" />. As new icons were added to ADS, the icon package (and by extension, Icon) grew in size even if the location Icon was imported only used a single icon. To mitigate the inevitable bloat, ADS 2.0 now exports each icon as its own component. With this approach, you can be confident that you are not importing the entire ADS icon system when using an icon.

// pre-2.0
import { Icon } from '@wpmedia/ads-icon'

<Icon name="close" />
<Button iconName="close">Close</Button>

// 2.0!
import { Close } from '@wpmedia/ads-icon/Close'

<Close />
<Button icon={<Close />}>Close</Button>
 

Before 2.0, many of the components used the isSmall prop to choose to use the small variant of a component. Given the nature and frequency of the small variant in Arc designs, isSmall has been removed from all components and is now handled via a provider. By wrapping a component or a component sub-tree with the SmallProvider every component that has a small variant will be adjusted to its smaller size.

<SmallProvider>
  {/* everything here is small (if it has a small style) */}
  <Button>A small button</Button>
</SmallProvider>
 

ADS also provides a hook to allow you to determine whether a component is within a small provider or not.

let isSmall = useSmallSize()
 

All of the components in ADS are now built on the excellent react-aria and react-stately libraries. Following the example of Adobe Spectrum we've updated our handlers from onClick to onPress. For more information on the reasoning behind this, see the thorough explanation from the Spectrum design system team. See Button and IconButton. In order to be line more with the select element and the ADS single select component, the onSelect handler on MenuItem has been removed. Instead, to handle selections an onAction handler has been added to OverflowMenu component.

<OverflowMenu onAction={(key) => {...}}>
  <MenuOption value="pick-me">Pick Me!</MenuOption>
</OverflowMenu>
 

Additionally, MenuItem has been renamed to MenuOption. Enhancements to the way notifications are presented have been made by the design team. More details on these changes will be in the upcoming September release.

---

A new react component that has an animated Arc XP logo. Provides critical feedback to user as Arc loads. A layout component that provides critical content actions and publish status at the user's fingertips. A form component that facilitates selecting a single item from a dropdown list.

---

New guide that outlines the Arc XP Product Design Team's approach to accessibility. To support PageBuilder Editor's dark mode use case, the design system now includes a dark mode color palette. New documentation for a future component that handles the selection of just date, just time, and date/time combos. New pattern documentation for how to handle drag & drop across the Arc platform. New pattern documentation for how to handle empty states across the Arc platform. New guide from the Arc Product Design Team outlining their approach to maintaining the Figma design component library. New guide from the Arc Product Design Team outlining their approach to internationalization. New component documentation for a future component that provides tabbed interfaces.

---

Back to release notes