Updates

New brand colors

In order to align to the new brand colors, we are including in Watson the capability to switch to the new color palette. This means we will support the legacy accent color (blue) for a while until changes are performed in our products.

Design

Semantics prevail. Form components have semantically changed their appearance from accent to inverted to avoid the plausible connection with success. To understand how to get these changes in Figma and use the new color palette, check this video.

Development

You can follow these steps to introduce the new brand colors to your project:

Updating Watson for the latest version available for the component and tokens will automatically bring the new brand colors out of the box. If you want to continue with the legacy colors, import them from the tokens package:

yarn add @dp-watson-web/tokens

Once installed, add the legacy theme like this:

@import '~@dp-watson-web/tokens/dist/themes/legacy.css';

Other features

• New Breadcrumbs and Header components.
• New Loading pattern.

Bug Fixes

• WTextarea can disable the resize mode.
• WModal sticks to the bottom when we are on mobile.
• WDatepicker emits select event when we select a new date.
• Other minor fixes.

Responsiveness

Watson Design System supports responsive design. This update includes:

• Breakpoint tokens so we can create useful and responsive user experiences in all devices supported by our PMSes.
• _breakpoints.scss added to the bundle. Now, breakpoints SCSS mixins are available for use in projects that use Watson components.
• Watson components are verified to not break on different screen sizes.
• We introduced breaking changes to the WGridItem component which is a part of WGrid. Please refer to the documentation to see how to set up the component properly.

New Contribute section in Documentation

We added a new Contribute section to our documentation. It provides useful information about various ways of contributing to Watson Design System and how to proceed with each of them. We want our design system to be widely used across the company projects. That's why we value every idea and every person who want to contribute to our project and help us achieve this goal.

Other features

• New WDatepicker component.
• WCollapse, WDropdown, WFieldset, WModal, now support custom id attribute.

Bug Fixes

• WCombobox now calculates the height of the popout correctly based on the viewport.
• NavList style fixes.

Documentation

• Watson Documentation now supports mobile view.

Documentation

• We have added Templates section to the documentation. It contains examples of how to use Watson components in different scenarios.
• The documentation now includes a new Guidelines section. Design principles are the first addition to this section. These principles aim to guide designers and developers when working with the system, serving as a foundation for better, more informed decisions.

Features

• We've added to WTable spinner and skeleton loading states. Additionally, users now can set the default number of skeleton rows via the skeletonRowsNumber property if there is no data in the table.
• We wrapped tokens into :host selector so that they can be used inside Shadow DOM without additional effort.
• We enabled support for custom id property for WInput and WCheckbox components. It will make it easier to test apps using those components.
• WModal and WToast will now accept HTML Element as their teleport target.

Bug Fixes

• Minor bug fixes of WCheckbox and WCalendar components.

Documentation

• We updated documentation for several components with new best practises and examples

Features

• Added WCalendar component
• Added support for nesting multiple WCollapse components
• Added reactivity to properties of WNavlistItem component
• Added loading states to WTable component
• Added support for custom id in WCheckbox component

Refactors

• Breaking change **We removed matchingTriggerWidth and preventCloseOnTriggerClick properties from WPopover. **
  Those properties were added to the component as we needed them in WCombobox which was built using Wpopover. Right now combobox is a standalone component thus we decided to remove them from WPopover.
  Consequences:
  • You can't have Popover with identical width as trigger element (matchingTriggerWidth)
  • You don't have the option to prevent a Popover from closing by clicking on the trigger element ( preventCloseOnTriggerClick).
• Added multiple changes in WCombobox:
  • Removed WPopover dependency
  • Added floating-ui
  • Fixed loading issue

Bug Fixes

• Fixed text styling in w-banner
• Fixed styles of w-pagination
• Added auto update logic to w-tooltip position

Breaking changes in CSS Tokens

During the Figma variables effort, we are encountering some issues and inconsistencies with component tokens. Here you have a list with changed tokens per component.

Button

removed:

• --w-button-box-shadow-gap-focus
• --w-button-box-shadow-outline-focus
• --w-button-color-border-inverted

added:

• --w-button-plain-outline-focus

changed:

• --w-button-color-border-accent → --w-button-primary-outline-focus

Checkbox

added:

• --w-checkbox-icon-color-error

Fieldset

removed:

• --w-fieldset-hint-margin
• --w-fieldset-error-margin
• --w-fieldset-radio-size

Tabs

removed:

• --w-tabs-color-background

Tabs item

removed:

• --w-tabs-item-icon-spacing

added:

• --w-tabs-item-height

changed:

• --w-tabs-item-padding-vertical → --w-tabs-item-padding-horizontal

Combobox

added:

• --w-combobox-trigger-multiselect-options-color-foreground

Step indicator

changed:

• --w-step-indicator-label-color → --w-step-indicator-label-color-foreground

Modal

changed:

• --w-modal-background-color → --w-modal-color-background
• --w-modal-backdrop-color → --w-modal-backdrop-color-background
• --w-modal-footer-border-color → --w-modal-footer-color-border
• --w-modal-footer-background → --w-modal-footer-color-background
• --w-modal-header-border-color → --w-modal-header-color-border

Bug fixes

• Fixed issue with update position in WTooltip.

Features

• Height of WDropdown content is now calculated automatically to fit the available space. Scroll is applied if necessary.
• New label tokens for WCheckbox, WRadio and WToggle Vue components.
• WTable Vue component supports sticky columns.

Bug fixes

• Fixed issue with icon resizing in WRadio and WCheckbox.
• Fixed WIconHalfStar icon.
• Show default value in WCombobox.

Features

• We added WCombobox Vue component.
• We added WFileUpload Vue component.
• fullWidth property has been added to WButton component.
• align property has been added to WStepIndicator component.
• We introduced new version of X (former Twitter) icon.

Library improvements

We enabled sideEffects in package.json to improve tree shaking and bundle size.

Bug Fixes

We added custom class support for WModal component.

Updates page released

A new Updates section has been added to our documentation. It’s a dedicated space for you to easily track the history of new updates.

Documentation Improvements

We've added New and Planned badges to our documentation to clearly indicate newly released components and those in the pipeline.

Updates Page

We’re adding a section in our docs for sharing Watson updates, making it easier to keep up with updates.

Figma Variables support

Work is underway to integrate Figma variables into our system, aiming to streamline design process and improve connection between design and development.

Library Tree Shaking

We’ve resolved the tree shaking issue in our library. The fix will be implemented this week.

Dynamic Icon Loading

Dynamic loading for icons is set to be released this week.

Collapse — Released

The Collapse component has been released, offering a new way to manage space in interfaces.

File Upload

The audit & proposal for file uploads are available.

Combobox

Development is ongoing for the Combobox component, focusing on adding more options for user interactions.

Watson Office Hours

We're initiating Watson Office Hours every Thursday afternoon. This is an open invitation to discuss anything related to Watson – questions, ideas, or concerns. Look out for our weekly reminder in the #tech-proj-watson channel every Monday.

Improving existing components

We’re actively working on small but significant improvements in various components, including cards, links, buttons, and form elements, aiming to refine their behaviour and style.

Resolved Table Sorting Issue

The development team has successfully addressed the table sorting issue, ensuring smoother functionality and user experience.

New Components underway

We're working on three new components: Combobox, File Upload and Collapse.

Enhancing Watson Documentation Search

Improvements are being made to the search functionality in Watson Documentation, aimed at making it more user-friendly.