Skip to main content

Version 2.0.0

Welcome to the Open Design System v.2.0.0!

This release introduces some exciting and major updates to the WPP DS, including changes to the design guidelines, new and updated components, and significant improvements to our documentation.

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.0.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.0.0.

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

Revamped Autocomplete​

Autocomplete is now a search input field that allows selecting one or many items from the query, which is displayed as a dropdown. The search results are displayed only when users enter something into the input field. Once selected, Autocomplete can show the search results in a compact or expanded way.

View in StorybookExternal link icon

Extended Select​

The single-item variant of Select now has a search feature that you can turn on and off depending on your needs. We've styled the search to replicate other selectors' overall look and feel.

In addition, we're introducing the multiple-item variant that enables you to create multiple-choice dropdowns. The dropdown behavior is predefined, and users can extend and collapse the selector using its chevron icon. The multiple-item variant also supports the optional search field.

View in StorybookExternal link icon

Updates and improvements​

  • Tags can now support icons.
  • Table allows disabling rows.
  • Skeleton can be used for tables to improve the loading experience.
  • Sidebar can now support logos.
  • Checkbox and Radio have an updated disabled state label.
  • Selectable Cards no longer require using radios and checkboxes.
  • Pills have replaced the deprecated Chip component (affects Table (bulk edit) and Autocomplete).
  • Status is deprecated.
  • Select, Menu context, and Avatar are now linked to List item to ensure uniform style and behavior across all three.
  • The Storybook structure is now more in sync with the design libraries (for instance, Actions and Selection and input).
  • Colors and Typography have updated usage examples (pay attention to Primary/200—it's different now).
  • We've added some new Icons and improved the existing ones.
  • The Components Library repo is now called @wpp-open/components-library.
  • The label prop is deprecated, and you should use labelConfig instead.

Breaking changes​

Development​

  • We've removed the deprecated methods and events starting from v.1.0.0.
  • wpp-select now has a multiple-select option (the withSearch, withFolder, and maxItemsToDisplay attributes).
  • Single-select Dropdown now has search and scroll options (the withSearch attribute).
  • wpp-select-option is removed and replaced with wpp-list-item in wpp-pagination and wpp-select.
  • wpp-tree-2 is now called wpp-tree, and the old version has been removed.
  • wpp-autocomplete is fully refactored and has an entirely new design.
  • wpp-tag no longer has the primary and secondary variants.
  • wpp-pill has replaced all instances of wpp-chip (which is now deprecated).
  • wpp-status has been removed.
  • wpp-progress-indicator's progress prop is now called value.
  • wpp-card and wpp-expandable-card now have a header slot and no longer have an information slot.
  • wpp-text-input is now called wpp-input.
  • The WPP theme is updated: grey, primary, danger, highlight, success, and data visualization colors, along with the box-shadow values. The Success color palette in data visualization is now called Positive.

Design​

  • The following components may lack variants or have issues with sizing and text overrides due to significant changes in their design:
  • The following components are now deprecated:
    • Single Autocomplete
    • Removable Chip
    • [OBSOLETE] Select / Single
    • Text input with a Label
    • Text area with a Label
    • Select with a Label

Bug fixes​

  • Text area: We've changed the text limit wording from numbers entered/numbers allowed total to numbers left available.
  • More button: The icon is now horizontal.
  • Menu context: The menu now hides on click.
  • Card: We've reduced the number of slots used in cards to prevent browsers from freezing unexpectedly.
  • Date picker:
    • We're now using the vertical [Divider] as a delimiter in the range variant.
    • The maxDate and minDate props now respect locale.dateFormat, not only MM/DD/YYYY.
    • In the Range variant, the Clear all button now calls the onWppChange event and then onWppDateClear.
    • Clicking outside the calendar now resets all selected values.
    • Users can specify the start and end dates and then delete the day, month or year.
  • Breadcrumbs with the More button: The More button has 12 px paddings to the left and right and doesn't take the entire viewport width.
  • Icons: You can now customize the SVG fill property of icons.
  • File upload: The drag and drop area now highlights when you hover over it with a file.