Skip to main content

Version 2.13.0

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

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

Updates and improvements ​

Figma libraries​

  • Select: Added the ability to specify an icon before the label in the Select component.

  • Stepper: Added subheader to the vertical stepper component––the changes will be released on Design System v.2.13.1.

  • Search: Added a spinner for the input field in the search component denoting the loading state.

  • Buttons: Added inverted variants for primary and secondary buttons.

  • Inline Message:

    • Updated the S-size Inline Message to the XS-Midi typography style.

    • Deprecated the L-Size Brand Inline Message component.

  • Side Modal:

    • Removed the option to turn off the “X” button––the button used to close the modal.

  • Label: Made documentation for label component.

  • OS Bar:

    • Updated the OS Bar component based on the recent changes.

    • Prepared a guideline for the OS Bar component.

  • Avatar: Added a new 56px variant of the Avatar component and increased the current L size from 64px to 72px.

  • Inline Edit: Introduced empty states for “empty idle” and “empty active” variants of the Inline Edit component.

  • DS:

    • Added pointer icon variants for hover, drag, resize, and other interactions to support designers in the mock-up creation process.

    • Added icons to represent hierarchy, hub/workspace, sub-task/sub-item, rocket––representing launch and lamp––representing an idea.

    • Added improved examples in the documentation of components.

  • Datepicker: Updated the datepicker guideline to reflect the recent changes with the preset.

  • Slider: Added two new variants of sliders––size S and size M.

  • Table:

    • Added new "Actions" variant.

    • The "Action button" and "More action" should be changed to the "Actions variant" and will be deprecated in the 2.15.0 release.

    • Changed text color for the error states from system/danger to grey.

Development specific​

  • Popover: Added a method to open the popover programmatically, complementing the existing "closePopover" method.

  • Slider:

    • Expanded the slider's draggable areas, including the circles' border, making it easier to position the cursor and drag.
    • Added two new variants of sliders––size S and size M.

  • Divider: Implemented vertical divider component.

  • Datepicker:

    • Made the datepicker to update minDate and maxDate dynamically.

    • Updated documentation to include supported date formats when dates are defined as strings.

    • Added support for the "yy" year format in the datepicker, in addition to the existing "yyyy” ––the four-digit format.

    • Improved the placeholder logic in the datepicker component to reflect the provided date format rather than a default constant value.

  • Load More: Added a new component Load More––a progress indication component under Navigation to the code base.

  • Sticky Bar: Added the Sticky Bar component to Storybook with the following variants:

    • one line

    • two line

    • two lines with tabs 

    • blank

  • App Top Bar: Introduced a new variant, “Chevron Only” to the App Top Bar component.

Bug fixes​

Figma libraries​

  • Sticky Bar:

    • Added an optional button group to all the variants of the Sticky Bar component.

    • Fixed issues with the tab variants of Sticky Bar, ensuring the tabs maintain a fixed position when the Back Button or Page Header is turned off.

    • Fixed the issue in Figma regarding guides for bigger sizes.

  • Slider: Fixed the height of the slider component and made it equal to the Input and the Select components so that they can be used together.

Development specific​

  • Modal:

    • Fixed the visibility issue of the modal component while zooming a large content––making the model height shrink to maintain the margin from top-bottom edges.

    • Fixed the issue of the header slot in the fullscreen modal component rendering it as a div element.

  • Avatar: Fixed the Avatar icon component to display icons correctly with all properties.

  • Tab: Made the “value” property for the Tab component required.

  • Tag: Fixed the mapping issue between “categoricalColorIndex” property in Tag component with "Categorical Palette" colors.

  • App Bar:

    • Fixed the margin issue in the App Bar, allowing it to stretch correctly without any restrictions.

    • Fixed the production bugs in CL components for version 2.11.0 related to “ResizeObserver” and the context menu.

  • File upload: Improved the styling of info text for a better appearance even if it spans multiple rows.

  • Slider: Fixed the height of the slider component and made it equal to the Input and the Select components so that they can be used together.

  • Inline Message: Adjusted the “Close” button of Inline Message––size L and made it optional, allowing users to hide it if desired.