Version 2.5.0
Welcome to the WPP Open Design System v.2.5.0!
Resources
You can download icons, foundations, and components from the Open Design System v.2.5.0.
New component: Search
We're introducing Search as a standalone component, separate from Input. It allows toggling suggested results, customizing result labels, and turning search query highlights on or off. For now, Search exists both as an input variant and a standalone component.
Updates and improvements
- Accordion: Added interactive Accordion states as variants in Figma.
- Avatar: Introduced the
typeproperty to select eitheruser,logo, oricon; the Logo variant now supports background customization with the Grey/000, Grey/100, and Grey/200 options. - Select: Switched the position of action buttons for the multiple-item select variant: the Select all button is now located on the left, while Clear all is on the right. Clear all appears when at least one item is selected, and both buttons remain active.
- File upload: Implemented a disabled state upon reaching the maximum file upload limit and introduced a cap on the number of permissible uploaded files.
- Modal: Refined the modal variants by removing Danger and renaming Warning to Destructive. We also removed icons from modal titles.
- Sidebar: Added a divider to the right edge of the Sidebar to ensure consistency with the Top bar styling.
- Icons: Improved the
data-view-cardsicon and the Pinterest logo to icons. - Data visualization: Introduced a set of chart illustrations in Figma, perfect for empty-state visuals. They're available in the largest avatar size and have editable colors for flexibility. We've also added interactive geographic shapes, including world and continent maps, with detailed outlines for the USA and UK regions.
Bug fixes
-
Autocomplete in Select: Fixed an issue where the input appeared empty after unselecting one item, even if other items remained selected.
-
Combined input: Corrected an issue where selecting None resulted in the empty input without a placeholder.
-
Datepicker: Fixed an issue where pasting a date with
cmd + Vwasn't working. -
Select: Fixed an issue in the single-item select variant with search where the None option was incorrectly displayed as an item; choosing None now leaves the input empty and shows the placeholder.
-
Menu context: Resolved an issue where third-level items were not displayed on hover over their parent item.
-
Modal: Fixed a bug in Storybook for the Destructive Modal where clicking outside didn't close the component; it now closes as expected. Also, we resolved an issue where placing a Vertical Stepper with 100% width inside a Modal caused the Modal's width to expand to 100%.
-
Radio and Toggle: Resolved an issue where clicking on a disabled component incorrectly triggered the
clickedevent in the console. -
- Optimized the dropdown animation speed for smoother opening and closing.
- Ensured that the dropdown with suggested results no longer persists after unselecting an item or entering the space character.
- Fixed the missing tooltip issue.
- Enhanced the
openDropdownOnFocusprop to function accurately with tab focus. - Rectified the clear button functionality to accurately reflect the unselected state in the dropdown.
- Improved the overall responsiveness and animation timing for dropdown interactions.
-
Stepper: Addressed a problem where a selected radio option would clear when navigating between steps.
-
Top bar: Resolved an issue where the icon flipped after opening the second dropdown and then hovering over an item in the first dropdown.
-
Tooltip: Resolved positioning and display concerns with the Validation tooltip. Addressed an issue on Chrome where the tooltip was missing for truncated list items in the Multiple-item Select.
-
Resolved an inconsistency where two different versions of
createThemewere being exported. Now, only the correct version from@platform-ui-kit/components-libraryis available for import.