Skip to main content

Version 2.8.0

Welcome to the WPP Open Design System v.2.8.0!

Resources​

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

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

Updates and improvements​

  • Neutral tag: Adjusted contrast of the neutral tag to ensure its visibility against a grey background.
  • Table: Improved contrast of selected rows in the Table component using the grey-200 color for hover and selected states.
  • Side modal: Added a back button for the side modal component as a property.   
  • Checkbox: Restyled the color of the intermediate state of the Checkbox component to match design specifications.  
  • Icons:
    • Sidebar - Menu Item (Leading icon): Unselected states now showcase refined icon colors: idle in grey/700, hover in grey/800, and pressed or active in grey/900. Selected states maintain a consistent icon color of grey/900, ensuring clarity and visual coherence.
    • List Item - Leading icon: The idle state adopts a sleek grey/800 color, providing a refined appearance. Hover and pressed states exhibit a subtle transition between grey/800 and grey/900, enhancing the interactive visual feedback. Hover and pressed states exhibit a subtle transition between grey/800 and grey/900, enhancing the interactive visual feedback.
    • List Item with Trailing icon: The right padding for List Items with a trailing icon has been optimized and is now set at 6px for improved layout consistency.
    • Tree - Leading icon: Similar to List Items, Tree components now follow a harmonized color scheme, with idle and hover states in grey/800 and pressed state in grey/900.
    • Input - Left icon: In the Input component, left icons maintain a consistent grey/800 color across filled, hover, and pressed states.
    • Search icon: The Search component ensures visual coherence with a grey/800 color for the search icon across filled, hover, and active states.
  • AG Grid table: Updated the intermediate state of the checkbox, refining the selected hover state to improve visual clarity.
  • Search: Centered the search label within the custom popover to resolve alignment discrepancies.   
  • Rich Text: Added Undo and Redo buttons on the toolbar! These new features improve control over the editing.   
  • Rich Text: Introduced a set of new form control functionalities for our Rich Text component. Now, users can:
    • Seamlessly integrate labels and messages.
    • Set names.
    • Enforce different states.
    • Handle warning and error scenarios.
    • Use the advantages of keyboard control recommendations.
    • Implement character limits with dynamic counters for an enriched form editing experience.

Bug fixes​

  • Multiple select with search: Fixed the visual misalignment issue to centre the search placeholder and icon when using multiple select with search. The search elements are now appropriately centered, improving the user interface.
  • Gallery view of carousel component: Fixed a bug in the gallery view of the Carousel component, where the Next and Previous slides displayed the same height as the current one, causing a visual inconsistency. The Next and Previous slides now have the expected smaller height.
  • Select all: Resolved a bug that caused the "Select All" option to incorrectly remain enabled. The fix ensures that the "Select All" option is now correctly disabled when all options in the dropdown are selected.
  • Autocomplete: Fixed a bug where users could trigger hover and press states on the loading text during autocomplete, causing unexpected interactions. The fix ensures that hover and pressed states no longer work on the loading text.
  • Counter: Fixed a bug where users could trigger hover and press states on the loading text during autocomplete, causing unexpected interactions. The fix ensures that hover and pressed states no longer work on the loading text.
  • Icons: Fixed the color discrepancy in the search component where the search icon was intended to be grey/800 but was displayed as grey/600.
  • List Item: Adjusted the right padding in the list item component from 8px to 6px. The new release ensures the intended right padding of 8px for the list item component.
  • Autocomplete: After triggering "nothing found" in the autocomplete, a subsequent search didn’t update the dropdown and went for infinite loading while using staleTime. The issue is fixed. Now, the autocomplete dropdown correctly updates and renders results.  
  • Storybook:
    • Added the hover state to the Destructive secondary button component.
    • Aligned colors of the Tag component (neutral, warning, positive, and negative) to match with our design patterns.
    • Improved the Inline message component by refining the text color for an enhanced visual experience. The text color has been changed from grey/800 to grey/1000.   
    • Changed the color of the Inline message - info component to grey/300 to align with our design specifications.   
    • Updated Table AG Grid and Carousel components to match our new WPP design theme.
  • Select: Disabled the “Select All” button to display the appropriate text in the dropdown when selecting one item.
  • Angular framework: Resolved TypeScript compilation errors that occurred when using the latest library versions (@wppopen/components-library and @wppopen/components-library-angular) in the Angular framework.