Skip to main content

Version 2.1.0

Welcome to the Open Design System v.2.1.0!

This release introduces Vue.js support, new and updated components, and critical bug fixes.

To mitigate potential risks, we'll continue to fix bugs and issues without workarounds in version 1.7.x until April 28, 2023. But all new features will be coming to v.2.x.x only, so we recommend upgrading as soon as possible if you want to use them right away.

With that out of the way, we invite you to keep reading to learn more about v.2.1.0!

important

We're deprecating the WPP DS version 1.7.2 on April 28, 2023, so make sure to migrate to v.2.x.x before that.

Resources​

You can download icons, foundations, and components from the Open Design System v.2.1.0.

Components
External link icon
Foundations
External link icon
Icons
External link icon

Now supporting Vue.js​

You can now use the WPP Design System in Vue.js projects! The installation guidelines, packages, and code samples will be available once v.2.1.0 is released.

New components​

Popover​

Popover offers a non-interruptive overlay surface that can provide additional context, options, settings, or filters without disrupting the user's primary task or workflow.

View in StorybookExternal link icon

Inline edit​

Inline edit allows users to edit single and multi-line text content directly on the page without navigating to a different page or form.

View in StorybookExternal link icon

Load more​

Load more enables users to load additional content without refreshing or changing the page. You can implement this component with and without a progress indicator.

Improved components​

We've changed the Cancel buttons to the Secondary variant of the Regular button component to align the Modal styles with the rest of the system.

View in StorybookExternal link icon

Side modal​

We have added more functionality to Side modal, making it even more versatile. Specifically, we've included two additional sizes, XL and 2XL, to cater to a broader range of use cases. Additionally, we have made the footer optional, allowing for more flexibility in customization.

View in StorybookExternal link icon

Horizontal stepper​

We've improved the horizontal stepper navigation and styles to align with the vertical variant. Now, users can navigate by clicking on step indicators back to already activated steps for content updates. Additionally, we've made optional steps only available for the vertical variant.

tip

Since we've completely revamped the Horizontal stepper, it is now available as a new component. Please make sure to update your designs in Figma to accommodate these changes.

View in StorybookExternal link icon

More icons​

We've updated the existing icons and added some new ones. Please refer to Storybook for the latest changes.

Bug fixes​

  • Accordion: Removed animation for the expandedByDefault property.
  • Autocomplete: The single-select variant no longer provides multiple initial values.
  • Tree: Fixed the select all behavior and the missing triangle icon in navigation.
  • Date picker: Fixed the min and max properties, pressed state for the selected item, and invalid symbol issue.
  • File upload: Fixed the issue in which the already uploaded files were removed when users attempted to upload an invalid file.
  • Select: Fixed the issue with the real values displayed as a placeholder.
  • Tooltip: Fixed the wrapping for longer tooltip texts.
  • Truncation: We've resolved truncation issues across all components.