Skip to main content

Version 2.12.0

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

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

Updates and improvements ​

Figma libraries​

  • Updated component thumbnails on the Overview page.

  • Added a tool overlay surface component available in 3 sizes with toggle options for guides and scroll.

  • Sticky Bar:

    • Added variable widths for the Sticky Bar component to extend the design compatibility.

    • Relocated the Sticky Bar component to the "Navigation" components group.

  • OS Bar: Removed the AI icon from the OS bar.

  • Inline Message: Marked the L-size custom variant for Inline Message as obsolete–will be deprecated in the release 2.13.0.

Development specific​

  • Select: Added ResizeObserver to accurately calculate the withScroll flag in Select, resolving issues with rendering the search.

  • Datepicker: Improved the Datepicker functionality to support the ‘EEEE dd MMMM, yyyy’ format for the minDate and maxDate values without slashes. The default air-datepicker feature now accurately renders dates using its internal formatting.

  • Accordion: Added a “disable” prop to the Accordion component.

  • Segmented Control: Included a reason in the wppChange event for improved event handling and debugging.

  • Inline Message: Introduced the “L” size option for the inline message component, featuring a structured layout comprising a title, content, and action buttons.

  • Tooltip: Expanded our tooltip examples in Storybook with some new additions:

    • Included an example demonstrating how to customize the content of a tooltip.

    • Included examples for the tooltip “error” variant.

    • Updated React, Vue, and Angular examples.

Bug fixes​

Figma libraries​

  • Selects and Inputs: Resolved the content overflow issue for Select and Input components.

Development specific​

  • Tab, Orchestration: Fixed tab focus display issue when switching between browser tabs.

  • Rich text:

    • Fixed an issue to resize bullets and numbered lists according to the changing sizes of the text.

    • Resolved an issue with the layout of the Rich text editor––making it non-overlapping with its subsequent component.

  • Segmented Control: Resolved an issue of rounded border shape in segmented control when using the keyboard arrows for navigation.

  • Radio, Toggle, Checkbox: Fixed an issue with displaying the label color for disabled Radio, Checkbox, and Toggle components––now displaying as grey/500 as intended.

  • Pagination: Resolved spacing inconsistency between the page select and page range in Pagination.

  • Autocomplete, Search: Adjusted placeholder font color and border color for Firefox browser to align with other browsers like Chrome and Safari.

  • Multiple select: Implemented a fix for autofocus in multiple selects, making only the first select open as intended.

  • Sidebar: Resolved margin issues between truncation and icon in the Sidebar by adjusting the spacing from 23px to 8px.

  • Search, Segmented Control, Select: Resolved issues to ensure that S-sized Search, Segmented Control, and Select components now have consistent heights, matching the size of the Segmented Control.

  • Search: Improved search functionality within single-select and multiple-select components.

  • Component library: Fixed the issue of updating CL library to the latest version.