Version 2.11.0

Welcome to the WPP Open Design System v.2.11.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.11.0.

Components

Foundations

Icons

Updates and improvements 

• Table cell: Added a chart variant to the table cell component.

• Calendar: Added a customizable range selection feature in the Calendar component, enabling users to choose time intervals or predefined ranges like "last week" or "last month".

• Design system:

  • Changed the pixel size from 8px to 6px for the selected corner items in the S-sized segment control.

  • Added the following: fill version for the Send icon, icon to reflect Eco/Carbon footprint and Pollution, icon for spreadsheet, Event icon, Magic wand icon and AI icons for Genie and Brain.

  • Amended the Sync and Update icons.

• Rich text:

  • Implemented a new feature to insert icons into the Rich text editor.

  • Enabled the drag-and-drop functionality for images and videos to quickly organize multimedia content.

• Floating UI: Introduced a property to specify the placement of the dropdown list at the top when space is insufficient at the bottom.

• Search: Dropdown now reacts to window resize.

• Datepicker: Made datepicker compatible with floatingUI to optimize the usage of screen space.

• Input:

  • Implemented tooltips for truncated text in input fields and list items, allowing users to view the full string upon hovering and expanding the field when clicked.

  • Conducted research to determine the minimal width for the dropdown component and completed the corresponding Figma design.

Bug fixes

• Autocomplete:

  • Corrected an issue to make the searched keywords load properly.
  • Fixed an issue where users couldn't find newly created elements in the list while searching.
  • Addressed margin issues occurring within dropdowns featuring Pills.
  • Fixed issues where the "Create new element" button appeared only when the input didn’t match the existing list of elements.

• Menu context:

  • Corrected the functioning of the onHide and onShow events to make them trigger at the appropriate time.

  • Resolved the functionality of the onWppChangeListItem event to successfully trigger after clicking an item from the menu-context component.

• Images: Fixed an issue with the 404 image display in storybook.

• Tab, Orchestration: Addressed an issue related to tab focus when switching between browser tabs. 

• Datepicker:

  • Resolved the issue to make the calendar dropdown appear uncropped in the side modals and similar scenarios.
  • Improved range datepicker functionality so that borders are no longer displayed on empty dates when clicking and dragging from the first to last date or vice versa.

• DevHub, Popover: Fixed an issue where if the property “Add size” in Widget parameters is disabled, it prevents triggering new events.

• Rich text: Fixed an issue to properly align bullets with the size of the text even when the text size changes.

• Input: Made the input text disappear when hovering over browser-suggested text. Additionally, maintained an unchanged background color.

• Multiple select: Fixed an issue where searching for the same data twice in a row wasn't correctly displaying items.

• Icons: Centered the POIs icons for improved alignment.

• Storybook: Updated the description of the following components in Storybook notes:

  action-button, autocomplete, banner, button, card-group, card, expandable-card, file-upload, filter-button, floating-button, icon-button, menu-group, nav-sidebar, nav-sidebar-item, pill-group, pill, popover, radio-group, search, segmented-control, segmented-control-item, select, sort-button, step, stepper, tabs, tooltip.

• Tooltip: Updated the React example for WppTooltip in the documentation.

• Vue boilerplate: Fixed a bug to run the Vue examples project.