Skip to main content

Version 2.16.0

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

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

Updates and improvements ​

Figma specific:​

  • Colour picker:

    • Introduced the colour picker component and prepared the guidelines for the component.
    • The colour picker is available in three modes: "theme", "custom", and "theme and custom". It supports two colour formats: "hex" and "rgba".
    • By default, the colour picker uses the default theme data available on a page. In case the theme data contains custom colour palettes, that data must be passed to the component in the “themeColours” property.

  • Logo: Updated the WPP Open logo so that the platform reflects the latest brand identity.

  • Icons: ‘Play’ and ‘Pause’ icons are updated.

Development specific​

  • Logo: Updated the WPP Open logo to ensure the platform reflects the latest brand identity.

  • Stepper: Introduced the "stepperWidth" property for the stepper component to allow users to set the width of the vertical stepper.

  • Button: Aligned the WppButton component with standard HTML behavior—keyboard users can now trigger the onClick event using the Enter key.

  • Date Picker:

    • Changed the button text of the "clear all" button to "clear".
    • Updated the range separator - now it uses "en dash" instead of "hyphen".

  • Icons: Updated the 'Play' and the 'Pause' icons.

  • Select: Added the example for wppselect spinner with loaded results and dropdown width.

Bug fixes​

Figma specific​

  • Fixed slider breaking with the small width.

Development specific​

  • Angular: Decreased the Angular bundle size.

  • Documentation: Updated the color variable names in the documentation.

  • Modal:

    • Applied overflow style to the body element of the Modal component so that the page can’t be scrolled in the modal’s background.

    • Resolved an issue to prevent background scrolling when the delete popup appears, ensuring a focused deletion process.

  • Input: Enabled uninterrupted text input in the wpp-input component—enabling users to enter long text without losing focus.

  • Rich Text: Truncated text with an ellipsis for display without affecting the ability to edit the text.

    • Enabled focus on the input field during text entry, even when the text exceeds the visible area.

    • Fixed an issue to add a link to a selected text in the Rich text component.

  • Stepper:

    • Resolved improper step number and title alignment issues when the width of the stepper component is increased.

    • Fixed an issue with the Stepper component and enabled truncation of the dynamically added description content.

  • Card Group: Resolved an issue with the Card Group component, making the cards inside the group selectable if wrapped in a container.

  • Pagination: Resolved the issue to ensure that the blue background of the selected item remains visible on hover.

  • Select: Fixed an issue to make sure that the child Select displays options immediately after receiving data from the parent select without requiring to open and close the 'select' component.

  • Typography: Updated the typography component to pull styles directly from the theme and apply the nearest default value if theme data is missing.

  • Tag: Updated the Tag component so that icons can take "plus-darker" color blending mode.