Skip to main content

Version 2.21.0

Welcome to the WPP Open Design System v.2.21.0!  This release introduces updates and bug fixes to our components library.  Read on to learn more! 

Resources  ​

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

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

New component: Time picker​

Introducing a new component—Time Picker. Time picker provides an option to select a time in a 24-hour time format and offers both input and dropdown selection options.

Updates and improvements ​

Development Specific​

  • Table AG Grid: Enhanced functionality with the addition of a Load More button example that demonstrates how to dynamically load additional rows while preserving user selections.

  • Autocomplete:

    • Selected items in the multi-select Autocomplete now render as Pill components within the dropdown area.

    • Updated the placement of Show +n more button and placed it in a single row with the selected pills.

  • Input:

    • Improved masked inputs with masks accepting simple string values and automatically format them for display.

    • Masked inputs offer both the formatted and raw values, allowing users to choose the format that best suits their needs.

    • Masks are also applied to the data passed programmatically. Additionally, the change event emits both raw and masked values.

  • Select:

    • Updated the WppSelect and other related input components, such as WppInput, WppTextArea, to include the name property in the emitted event.detail.

    • Implemented a React/Angular/Vue example showcasing how to use WppSelect type="combined" with a dropdown and input field together.

      • Added an example under the Select documentation.

  • Sidebar: Updated the WppNavSidebarItem to support all standard values of the native anchor (<a>) tag's target attribute, such as _blank, _self, _parent, and _top—allowing users to control how links open.

  • Icons:

    • Added two icons: scale bottom-left and scale bottom-right.
    • Icons: Updated the wpp-icon-info with an outlined version—previously it was a filled icon.

  • Divider: Added a resizable variant.

Figma libraries​

  • Chat: Added documentation of the chat component.

  • Autocomplete: Updated the autocomplete documentation.

  • Time picker: Created documentation for Time picker.

  • Icons: Updated the wpp-icon-info with an outlined version—previously it was a filled icon.

  • Segmented control: Updated the missing outline of the Segmented control component.

  • Search: Updated placeholders across the Search component.

  • Divider: Added a resizable variant.

Bug fixes  ​

Development Specific​

  • Tooltip:

    • Resolved an issue with the tooltip for WppListItems in WppAutocomplete to ensure that it works correctly.

    • Added tooltips for truncated list items in the suggestions list to improve readability.

  • Search: Updated the idle state icon color in Storybook from Grey/800 to Grey/600.

  • Toast: Fixed an issue with WppToast—now it displays consistently in OS-based apps, ensuring consistency across environments.

  • Input: Fixed an issue where the tooltip appeared empty after clicking the clear button or deleting a long text input and hovering over the field.