Arc XP LogoArc Design System
v2.3.0
GuidesPatternsComponentsIcon libraryTokensRelease notes
Github repo
Arc XP LogoArc Design System
v2.3.0

Arc-UI 1.4.0

#React Components

  • Updated
    AlertAction - @wpmedia/ads-notification@0.2.0
  • Updated
    Icons - @wpmedia/ads-icon@0.1.1
  • Updated
    SCSS and Bootstrap variables
    • @wpmedia/ads-theme@1.3.0

#Guidelines

#React Components

#AlertAction

By default every alert action will now close the alert. This can be overridden with the new preventClose prop on AlertAction.

#Icon

New - We have added 18 paths for use within our Icon react component. You can now also view the full icon library via a Figma embed in the documentation. 'Icon Updates

#Design Guidelines

#Badge

New - Badges use both content & color to communicate states. Throughout Arc XP, some common badge states are:
  • Unpublished - content is new and has not been published.
  • Published - content is published and live.
  • Read-Only Mode - another user is currently editing content
  • Unpublished Changes - changes have been made that are not yet published.
  • Scheduled - content is scheduled for publish.
'Badge States

#File upload

New - In Arc XP, our users upload files in many places. This pattern creates an experience that reduces upload friction and errors, by clearly communicating what our system is expecting. File upload overview

#Revision history

New - Throughout Arc XP users create, revise, and publish content. The collaboration during the authoring process requires a robust system for displaying and accessing revision history. 'Revision History Pattern Structure'

#Form validation

Updated - All required fields should be indicated via (required) tag in the label.

#Toggle

Updated - The toggle color was changed from $arc-green-500: #1f3cd0; to $arc-purple-500: #1f3cd0.

#What are we working on now?

  • Publish / Work Bar
  • Arc Navigation 2.0
  • React components for all atomic elements
  • Small Variants of Form Elements
  • Website Selection
  • More layout primitives like Stack and Grid

#Arc Design System in Action

Want to see the Arc Design System in action? Keep an eye out for these soon-to-be released Arc platform features
  • Theme Builder / Theme Settings
  • Photo Center Image Landing Page
  • Global Settings - Distributors
Questions? Reach out on #ads-support on Slack.
Back to release notes
Copyright 2021 Arc XP