Skip to main content

Version 2.17.0

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

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

Updates and improvements ​

Figma libraries​

  • Label: Added the label component to the Pills and Segmented control groups.

  • Tree: Defined what action button, text, tag, or avatar can be shown on the right side of the Tree component.

  • Accordion: Increased the spacing between a title and a chevron to make the accordion look balanced when placed within the Expandable card of bigger sizes.

  • DS: Revealed the hidden Label setting in the components—such as in the Input component in their Figma files.

  • Toggle: Improved the following sections of the Toggle components’ guidelines—usage, best practices, and examples.

Development specific​

  • Upgraded Stencil.js library to the version 4.2.0.

  • Pills: Added the label component to the Pills and Segmented control groups.

  • Autocomplete: Enabled autocomplete to open dropdown when users click the search field by passing an array of suggestions.

  • List item: Introduced a non-interactive mode for the list-item component, disabling hover or active states and allowing it to display text only; retained interactive states for list-item’s toggle button and action button.

  • Input: Extended the maxMessageLength property to accept special keywords like “auto” or “fit” for message length, allowing the message to adjust with the input container's dimensions dynamically and truncate as needed.

  • Tooltip: Introduced a property for the word-break option that allows users to choose between break-all— to cut words without a hyphen, break-word— to cut words with a hyphen, and auto-phrase — to preserve words by moving them to the next line without breaking.

  • Tree: Defined the elements—action button, text, tag, or avatar—that can be displayed on the right side of the Tree component.

  • Accordion: Increased the spacing between a title and a chevron to make the accordion look balanced when placed within the Expandable card of bigger sizes.

Bug fixes​

Figma libraries​

  • Popover, Side modal: Fixed the content area of Popover and Side modal components.

  • Inline edit: Made the active state input resizable. Additionally, fixed issues related to text style.

Development specific​

  • Inline Edit:

    • Improved the “inputWidth” property to support additional CSS expressions such as calc() to calculate width dynamically.

    • Added a new property “inputWidth” that takes string values to adjust the width of Inline Edit.

  • Sidebar: Adjusted the z-index and top properties of the sidebar component to position it correctly below the header in OS-based applications.

  • Multi-select: Resolved an issue in multi-child dropdown dependencies, making the child dropdowns display values immediately when the API returns data—without requiring user interaction.

  • Card group:

    • Added the allowEmptySelection property to the single card group, which enables optional card selection when set to true and enforces at least one card selection when set to false.
    • Fixed an issue in the Card-group component—made the dynamically added cards retain their selected state when reintroduced after removal.

  • Modal: Triggered the “open” event at the beginning of the animation for wpp-modal, wpp-side-modal, and wpp-full-screen-modal.

    • Wpp-side-modal:

      • Added a new event wppSideModalOpenComplete to trigger upon the completion of the Open animation.
      • Marked the events wppSideModalOpen and wppSideModalClose deprecated.
      • Ensured that wppSideModalOpenStart triggers upon the beginning of the Open animation.

    • Wpp-modal:

      • Added a new event wppModalOpenComplete to trigger upon the completion of the Open animation.
      • Deprecated the events wppModalOpen and wppModalClose.

    • WppFullScreenModal: Added a new event “wppFullScreenModalOpenComp- -lete” to trigger upon the completion of the Open animation.

      • Deprecated the events wppFullScreenModalOpen and wppFullScreenModalClose.

    • Buttons: Updated the button component to prevent the onClick event from triggering when the button is in the loading state.

    • Icon documentation: Updated the documentation to mark wpp-icon-eye as deprecated and added wpp-icon-eye-on.

  • Storybook:

    • Updated the Angular example of the WppToast documentation.

    • Fixed an issue in Storybook to ensure that the tooltip for the slider appears when hovering over a truncated label.

    • Enhanced the WppIcon component documentation in Storybook to include all properties, covering all the properties that were undocumented previously.

  • Search: Fixed an issue with dropdown enabling the dropdown list to update data changes correctly even with caching enabled. Additionally, correctly highlighted elements based on the search value when caching is active.

  • Load more: Fixed the Load more button in the Storybook to function correctly.

  • Typography:

    • Removed the setTimeout from the typography component to eliminate the flickering issue with the Typography component.
    • Fixed an issue with Typography, ensuring the last character never clips or hides while using italic font.

  • Input: Fixed an issue with the Input component—now, the input doesn’t lose focus while the cursor moves or hovers—without clicking outside.

  • Rich Text: Updated the Rich Text Editor to automatically wrap longer links, making them visible without truncation or horizontal scrolling.