Skip to main content

Version 2.22.0

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

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

Updates and Improvements​

Development Specific​

  • Sidemodal

    • Added parameters to actionsConfig property, now accepting all WppButton component properties for full user configuration flexibility.
    • Introduced restrictions to the actions section structure:
      • Left side: At most one WppActionButton (primary/destructive) with an icon.
      • Right side: Up to two WppButtons, one with variant="primary" or "destructive", and one with variant="secondary" or "destructive-secondary".

  • Rich Text

    • Improved markdown processing by normalizing underscore-delimited emphasis (_italic_) to asterisk-delimited (*italic*).
    • Updated Markdown input logic to compute and store both HTML and plain text.
    • Exposed plainText in the RichtextChangeEventDetail interface for validation or character counting.
    • Ensured handling of edge cases like part*italic*regular.

  • Autocomplete

    • Enhanced autocomplete experience:
      • Dropdown remains open during loading, eliminating the need for users to re-click post-load.
      • Search input persists after clearing.
      • Extended WppAutocomplete to support all WppListItem variants, enabling full control over item structure (e.g., tags, custom content).
      • Improved loading experience, removing the need to manually re-click to view updated lists.

  • Component Library

    • Updated class names on host elements to use a unique wpp- prefix, preventing collisions with generic classes like hidden or visible.

  • Icon

    • Updated icons to align with Figma designs and deprecated the wpp-icon-pin component.

  • Logos

    • Added missing logos to the logos/ folder under the "Social media and companies" category, following naming conventions.
    • Added the following logos:
      • Gemini
      • Open AI
      • Copilot
      • Claude

  • Toast

    • Updated the icon in WppToast to match the one used in WppInlineMessage.

  • List Item

    • Initiated investigation to restrict unsupported elements on the left and right sides of ListItem, allowing only design-approved elements.

  • Tag

    • Achieved WCAG AA accessibility compliance.

  • Select

    • Updated WppSelect to autofocus the search input when the dropdown opens.

  • Fullscreen Modal

    • Aligned fullscreen and side modals with design specifications:
      • Close button in fullscreen modals remains right-aligned, regardless of title presence.
      • Added Storybook support for rendering fullscreen modals with or without an action bar or title.
      • Adjusted styles and paddings for both modal types to match design requirements.

  • Icons

    • Added alternative icon option for info-inline message.

  • Avatar

    • Added hover interaction for all avatars with click events.
    • Implemented tooltips on avatars for additional context.

Figma Libraries​

  • Logos

    • Added the following logos:
      • Gemini
      • Open AI
      • Copilot
      • Claude

  • Autocomplete

    • Improved loading experience, eliminating the need to manually re-click to view updated lists.
    • Updated search input placeholder label from "Text" to "Search".

  • Icons

    • Updated icon for info inline message.
    • Introduced an Experiment icon.
    • Fixed text box resizing issue when displaying a hint.

  • Avatar

    • Added hover interaction for all avatars with click events.

  • Tag

    • Adjusted tag styling by adding a white background layer beneath transparent color for visual consistency across backgrounds.
    • Added wrapping for tag groups.
    • Updated to reflect disabled state.

  • Overlay

    • Updated selected state color to Grey 500 at 60% opacity.

  • List Item

    • Provided an example of draggable list items in the Examples section.

  • Tree Tag:

    • Updated the tree and tag components to reflect the disabled state.

  • Table

    • Updated cell for totals to use 48px height and added a bottom divider.

  • Data Viz

    • Added possibility to enable and disable divider and decreased label size.

Bug Fixes​

Development specific​

  • Icon

    • Fixed issue with rarely used icons so that they populate in the pre-production; previously, it was working correctly on localhost but failed to render on pre-production.

  • Inline Message

    • Aligned content layout in Storybook with Figma maintaining content in specified container instead of wrapping under a button.

  • Multiple Select

    • Fixed search functionality for WppSelect multiple when placed inside WppSideModal.
    • Resolved an issue to make sure that "Select All" button is always disabled when maximumSelectedItems is used.

  • Autocomplete

    • Fixed selection behavior in the Autocomplete component—now selecting an already selected item retains selection and closes the list.

  • Popover

    • Fixed the Popover component to close correctly when the trigger element is clicked for the second time. The dropdown now toggles as expected without unwanted animations.

  • Side-Modal

    • Updated wpp-side-modal to add padding-right to the page when an overlay is present, preventing content shift on open and close.