Version 2.18.0

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

Components

Foundations

Icons

Updates and improvements 

Figma libraries

• Accordion:

  • Tags are now displayed inside the Accordion component.
  • The Hero Image in the documentation is updated to represent tags.

• Avatar:

  • Added an “avatar” name to the icon, logo and user variants so that it would be displayed properly in the list of assets.

• List item:

  • Added variants with skeleton loading.

• Select:

  • Added variants with avatar logo to the left part of single select.
  • Added variants with two-lines of text for single and multi-select.
  • Added variants with the text in the right part for the single selection.
  • Added variants with the tag and text in the right part for the multi-select.
  • Added variants with subtitle for single and multi-select.

• Tree:

  • Added variants with skeleton loading.

• Logos:

  • Added logos of OpenAI, Gemini, Claude and Copilot.

• Segmented Control: A new "Selected-Disabled" state has been introduced to enhance the Segment Control component, providing improved UI feedback and usability for specific scenarios. It allows the user to:

  • Visually distinguish sub-components that are both selected and disabled.
    • Combines the visual indicators of "Selected" and "Disabled" states.
    • Clearly shows that an option is currently selected but not interactive.
  • Prevent unintended interactions with options in this state while keeping their selection clear.
    • Options in the "Selected-Disabled" state cannot be clicked, changed, or interacted with.

Development specific

• Side Modals: Updated the current structure of side-modal to a more restrictive structure:

  • Deprecation Notice: The actions slot is now deprecated. Please transition to the new actionsConfig property.

  • New Feature: Introduced the actionsConfig property, which provides equivalent functionality to the deprecated actions slot.

  • New Feature: Introduced the actionsConfig property, which provides equivalent functionality to the deprecated actions slot.

  • Storybook Updates: Included a dedicated story for actionsConfig and added clear examples for its usage.

• Accordion: Added support for Tags in the header of the accordion.

• Nav-sidebar: Changes have been made to allow users to set the active item of the nav-sidebar programmatically:

  • New activePath Property:
    • Developers can now control the active item in the nav-sidebar programmatically by setting the activePathproperty.
    • This property updates the active item visually and allows for dynamic navigation states.
  • Deprecation of initialPath:
    • The initialPath property is now marked as deprecated and is documented as such in Storybook notes and the code.

• List item:

  • Added variants with the text in the right part for the single selection
  • Added Variants with the tag and text in the right part for the multi-select

• Input:

  • A new autocomplete property has been added to the WppInput component.
  • This property will be passed directly to the native input's autocomplete attribute, allowing developers to enable or disable autocompletion as needed (e.g., autocomplete="off")

• Select:

  • Added variants with avatar logo to the left part of single select
  • Added variants with two-lines of text for single and multi-select
  • Added variants with the text in the right part for the single selection
  • Added variants with the tag and text in the right part for the multi-select
  • Added variants with subtitle for single and multi-select

• Tree:

  • Added variants with skeleton loading

• Progress Indicator: Introduced an intermediate state to the progress indicator component based on user feedback. This enhancement allows developers to customize the display when the progress value is 0%, ensuring it shows as 0% with an empty bar rather than an indeterminate loader.

• Tooltip: Added a restriction to prevent the usage of components from the Components-Library (CL) in custom tooltip content. Only typography components and other native HTML components are allowed. This ensures that only plain content is used within tooltips, and prevents potential issues with complex component rendering.

  • Users can still pass custom content into tooltips, but if any component from the Components-Library (CL) is detected within the tooltip content, a warning is shown.
  • This warning informs users that tooltips should not contain CL components, ensuring proper use of the tooltip feature.

• Tree: Improved search functionality within the WppTree component.

  • Deprecation Notice: The "isMatchSearch" option from "searchConfig" property is now deprecated. Please transition to the new "isMatchingSearch" option.

  • New Feature: Introduced the "isMatchingSearch" property, which passes the whole tree-item in the callback, instead of just the title.

• List item: Enabled developers to change the dropdown configuration of the WppTooltip component that wraps the "label" slot of the WppListItem component.

Bug fixes

Figma and development

• Table: Resolved an issue where the padding between the image and text differed in the Avatar + Text and Avatar Group components. Both were updated to have consistent sizing.

• List item: Ensured that the tag element is correctly disabled in its disabled state. Previously, the tag remained active while all other elements were properly disabled.

  • Rich Text Editor: Resolved the issue of the number of characters being entered into the text input section of a rich text editor to be displayed accurately.

  • Date picker: Fixed the issue where the datepicker instance attempts to select a date before it has been fully initialized.

  • List item: Fixed inaccuracies in the developer documentation of the highlight property:

• Logotypes:

  • Resolved an issue where WPP logo won’t resize in Figma.
  • Current Documentation:

  /** * If `true`, 
  the component is disabled*/
  "highlight": string;

  • Updated Documentation:

  /**
  * If `true`, it will be used to highlight matching parts of the label or caption text in the component.
  */
  "highlight": string;
  

• Pill : Updated the documentation to clarify that the removable property adds a close button only when the type is display or draggable

  * If `true`, the pill has a close icon button.
  * Note: This is applicable only for `type="display"` or `type="draggable"`.
  */
  "removable": boolean;

• Card : Resolved an issue where cards within a card group were not queried quickly enough while navigating between tabs and returning to the card group.

• Angular: Extended the "components-library.module.ts" file with the WppBackToTopButton component from the "components-library-angular" package.

• Select:: Addressed the issue of two tool-tips being rendered for the same item by ensuring that it displays only 1 tooltip for highlighted items that are truncated.

• Autocomplete: Added additional checks and debounced the ResizeObserver to eliminate the error being caused due to the feedback loop.

• Modal: Multiple issues were identified and addressed in the event handling of the WppSideModal component. These fixes have been applied to all modal components, including wpp-modal, wpp-side-modal, and wpp-full-screen-modal, to ensure consistency and reliability.

  • Deprecated Event:

    • The onWppSideModalClose event was previously marked as deprecated. However, as the event handles different logic than the animations events, so it will no longer be deprecated.

  • The following animation events are now consistently triggered during all modal close scenarios:

    • onWppSideModalCloseStart: Fired when the modal begins closing.
    • onWppSideModalCloseComplete: Fired when the modal finishes closing.

  • Storybook Examples:

    • The examples in Storybook (available at Storybook Link) have been updated to use the new event.