Skip to main content

Version 2.14.0

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

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

Updates and improvements ​

Figma libraries​

  • Extended the Theme Builder’s theme with extended typography, additional DataViz sequential palettes, and fully rounded buttons for all except the “Filter” and “Sort” buttons.

  • Radio: Added a new component––Radio-group along with a label.

  • Checkbox: Introduced a new component––the Checkbox-group with a label.

  • File upload: Replaced the upload icon with the Avatar component "with an icon"

  • Icons:

    • Introduced a math formula icon to the Design System component library.
    • Introduced an icon “Unlink” that removes the linkage between two items.
    • Introduced “Incomplete” and “Number” icons to the Design System component library.
    • Introduced new icons for Columns, Carousel, iFrame, CTA, Accordion, Link, Segmented Control, and Action.
    • Updated the icons of upload, download, import and export with distinct styles to stand out.

  • Card:

    • Introduced a new property “variant” to the Expandable cards, allowing you to choose between "primary" and "secondary" variants considering “primary” the default variant.
    • Enabled switching between button properties within the Card component using the Nested Instances" feature for faster access to an action within Cards layers.

  • Table: Added skeleton variants to the table's cells and headers.

  • List item: Updated the guidelines of the List item component with detailed examples, and recent component updates.

Development specific​

  • Popover: Resolved an issue to ensure that click events on buttons inside a Popover component trigger correctly for OS-based applications.

  • Updated examples for the Tag, Inline message, Load more and Datepicker component.

  • Tabs: Updated Tab items to take the width of the text and the paddings.

  • Radio: Added a new component––Radio-group along with a label.

  • Checkbox: Introduced a new component––the Checkbox-group with a label.

  • File upload: Replaced the upload icon with the Avatar component "with an icon".

  • Icons:

    • Introduced a math formula icon to the Design System component library.

    • Introduced an icon “Unlink” that removes the linkage between two items.

    • Introduced “Incomplete” and “Number” icons to the Design System component library.

    • Introduced new icons for Columns, Carousel, iFrame, CTA, Accordion, Segmented Control, and Action.

    • Updated the icons of upload, download, import and export with distinct styles to stand out.

    • Added a filled version of the Send icon to pair with the existing one.

    • Introduced new icons for Eco/Carbon footprint and pollution.

    • Created an Event icon for concerts, sports, and theatre events.

    • Created a Magic wand icon.

    • Fixed the AI icon.

  • Card: Introduced a new property “variant” to the Expandable cards, allowing you to choose between "primary" and "secondary" variants considering “primary” the default variant.

  • Side-Modal: The divider in the Top bar of a Side modal now becomes instantly visible as soon as a user starts scrolling.

Bug fixes​

Figma libraries​

  • List item: Adjusted the background of the Avatar icon with default grey fill and aligned the icon on the top for two-line list items.

  • Card: Corrected the button icon color to automatically adjust when switching between different button types within the Card component.

Development specific​

  • Added missing components to the "components-library.module.ts" file in the "components-library-angular" package.

  • Select:

    • Added a border radius to the bottom of the dropdowns and ensured that the divider between action buttons and items matches Figma design—only appearing when the dropdown is scrollable.

    • Resolved an issue with custom select to make the dropdown function as expected, ensuring the Select dropdown automatically hides when clicked if it doesn’t contain items.

  • Topbar: Fixed an issue with aligning the Top bar items properly within the page, matching the design specs to prevent truncation issues.

  • Segmented control: Corrected the display issue where two dots appear on the top left and bottom left, and ensured that the left border is properly displayed when there's only one item.

  • Counter: Fixed the counter component, so that text below the increment button doesn't get selected during rapid clicks.

  • Tree: Revised the logic for calculating the tree's width to prevent issues like hidden text when the parent width changes.

  • Slider: Fixed an issue to make the Slider marks display in a single row, even when the slider is placed inside a Side-Modal.

  • File upload: Resolved an issue where the background of the file icon in the file-upload component flickered when hovering over the upload area.

  • Pill: Fixed an issue with the Pills component ensuring that clicking the Close icon triggers only the onWppClose event but not the onWppClick event.