Spotlight on Paragon - July 2022

[adamstankiewicz]

Spotlight on Paragon 💎🔦 July 2022

Kicking off a new series, the Paragon Working Group will share a digest of notable releases to the design system and component library, including new components, features and capabilities, and documentation improvements.

New Components

Chip

Chips are interactive elements that represents an input, attribute, or action.

Dropzone

Allows users to upload files via drag and drop, or by clicking the component. Dropzone may be configured with a loading spinner or progress bar, custom validation (e.g., file types, file sizes) and error messages. It provides a request configuration to pass to an HTTP client (i.e., axios).

ProductTour

A guided sequence of checkpoints that allows product teams to showcase specific elements (e.g., features) throughout their applications. Useful for user flows such as user onboarding and showcasing new features, for example.

Stack

A utility component to position elements together a group either horizontally or vertically as an abstraction around flexbox in CSS.

Updated Components

Card

The cards now match the Figma spec, in all its supported variations and styles.

Tabs

• Responsive behavior to automatically move any tabs that overflow their container into an overflow dropdown menu (i.e., "More").
• Support for a notification badge on one or more tabs.

ProgressBar.Annotated

Adds support for annotations on a Progress Bar to indicate progress towards a threshold.

Features & Capabilities

Internationalization (i18n)

Some components in Paragon (e.g., Alert) have default English strings. While they are usually configurable, it was previously up to consumers to provide translation messages for these strings. With the release of Paragon v20, Paragon will begin exporting messages that may be consumed by applications, providing the supported translations for all default English strings. This is a breaking change, due to the added dependency on react-intl@^5.25.5. Note: support for i18n does not necessary mean the messages are translated yet, as the translation pipeline only pulls reviewed translations.

See the release notes for more details and documentation.

Documentation Improvements

Search

It's easier to find what you're looking for in Paragon's documentation website with search, powered by Algolia DocSearch.

Icons

A redesigned page for the Icons included with the Paragon design system, including the entire set of icons from Material UI. Filter icons by name and copy the React import syntax with a couple clicks.

Elevation & Shadow

Preview all possible elevation configurations in the design system, view CSS utility classes and SCSS variables for adding shadow at each level and direction.

Responsive

View pixel values of each breakpoint available in the design system and example usage for engineers.

---

The Paragon Working Group wants to hear from you! How is Paragon working for your team? Do you have any feedback for new components? Missing or confusing documentation? Let us know! 💬