Skip to main content

Version 2.15.0

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

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

Updates and improvements ​

Figma libraries​

  • Extended the "Examples" file by adding new ready-to-use examples for the Table component.

  • Hint State: The Hint state now visually matches the Filled state in the select component. The placeholder text color has been changed to grey/1000 for a uniform look across both states.

  • New tooltip variant: Added a custom 'light' tooltip variant to the Design System. Previously, only a dark variant was available.

  • File upload: Added thumbnails for uploaded files using the Logo avatar component enabling the display of a preview for uploaded images.

  • Tag: Updated typography size to xs-midi (12px) and adjusted background opacity to 30% for better visual balance. The text colour is set to grey/1000 with opacity to improve colour contrast and overall readability.

  • Inline edit Updated the component to support multiple lines in input and text areas. The Edit icon placement has been adjusted from centre to top for better visibility, especially with larger text.

  • Pills Extended the component's variants to support displaying logos within the Pill elements. This enhancement allows for a more dynamic and visually informative design, integrating branding elements directly into the Pill component for a richer user experience.

  • Table: The obsolete "Action button" and "More action" cell variants have been deprecated.

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

Development specific​

  • Horizontal Stepper: Added an option to disable “ResizeObserver” for the horizontal stepper. This helps prevent errors, improving stability when ResizeObserver isn’t needed. With this update, the horizontal stepper maintains its correct dimensions when the page loads and doesn’t change when the page is resized.

  • Search Added the ability to turn the Search field on or off in both single and multi-select components. The Search field can be in one of three states: Auto(default), On, and Off. Options:

    • withSearch = true: The search bar is always visible.
    • withSearch = false: The search bar is never visible.
    • withSearch = auto (default): The search bar appears only when there are more than 10 items in the dropdown.

This update allows for more control over the search functionality based on the number of items, enhancing the user experience.

  • File Upload: Added the ability to display thumbnails for uploaded files, providing a visual preview. For non-image files (e.g., .pdf, .docx, .mp4), appropriate file type icons are displayed based on the file extension, making it easy to identify each uploaded file. No thumbnail is shown for non-image files.

  • Tag: Updated the typography size to xs-midi (12px) for a more refined look. Standard tags now have padding set to 2px 8px, while tags with icons have padding of 2px 8px 2px 6px. The background opacity is set to 0.25, with updated text and icon colors for improved visual consistency.

  • Inline edit: Implemented support for displaying multiple lines of text in inline edit fields, preventing text from being cut off. Adjusted the placement of the Edit icon, moving it from the center to the top of the field for better usability and visibility, particularly in cases where the text is large.

  • Pills: Updated the Pill component to include a new variant that supports logo display.

  • Typography Added new typography classes corresponding to each newly defined mixin. This update was necessary to support the recently added typography types extending up to 9XL.

Bug fixes​

Figma libraries​

  • User avatar: Resolved an issue with updating the user’s avatar image that affected List Item in size M(two-line) and other components.

Development specific​

  • Text Input:

    • Helper Text: Updated helper text to have a 12 px font size and xs-midi typography style for all inputs and selects.
    • Inline Messages: Ensured that inline messages for s-size have a 12 px font size and xs-midi typography style.
    • Selects: Standardised helper text within selects to have a 12 px font size and xs-midi typography style for all.

  • Select

    • Resolved an issue in the select component where the selected item's name is displayed even if the WppListItems contained a false value in the value property.
    • Select All and Clear All Buttons: Updated the behaviour of the Select All and Clear All buttons to ensure they only impact the items filtered by the search term, without affecting the entire list.
    • Disabled Items: Modified the behavior of Select All and Clear All buttons to exclude disabled items from being selected or cleared.

  • Popover: Fixed an issue to ensure that popover doesn’t open if the trigger element is disabled.

  • Search: Removed the wppCreateNewOption event from the wpp-search component and Storybook documentation.

  • Card:

    • Fixed an issue in the Wpp-card-group component ensuring no card is selected by default when an empty value or a false value is provided.
    • Resolved an issue in the Wpp-card-group component to prevent the radio button or checkbox from rendering when a card is placed within another card.
    • Addressed an issue in the WppCard component to prevent triggering wppClick event when actions are clicked.

  • Stepper: Fixed an issue in the WppStep component making the tooltip appear on hover when the label is truncated, showing the full text.

  • Added missing image components to the Angular module. The image components are now available for use in Angular projects.

  • Slider:

    • Symbols in Input: resolved an issue preventing symbols in the input field. Symbols get removed when clicking outside the input.
    • Inconsistency Between Range and Single Slider: Fixed the sliders to follow a consistent flow ensuring the even number as input results same adjustments in both the range and single slider.

  • Segment Control

    • Icon Variant: Removed the counter from items using the icon variant in the WppSegmentedControl component. The counter is not displayed next to the icon.
    • Padding Adjustment: Fixed padding for the last item in the WppSegmentedControl to ensure proper alignment.