Updates

We are ready for mobile

We're excited to announce that with this update, we have completed adding comprehensive mobile support across the entire Watson Design System. The Watson components can now be safely used in projects that require responsive design and mobile compatibility. This milestone ensures all components deliver optimal experiences across all device sizes.

We've added responsive design updates to several key components:

• WCalendar - Added new mobile tokens and responsive styles with improved multi-calendar variant
• WCombobox - Completely redesigned mobile experience with:
  • New mobile tokens and responsive styles
  • Mobile-optimized popover behavior
  • Improved keyboard interaction
  • Sticky headers and better scrolling
• WDatepicker - Enhanced mobile experience with:
  • New mobile tokens and responsive styles
  • Sticky header for better usability
  • Improved scrolling for multi-month views
  • Optimized input behavior on mobile devices
• WNavList - Improved mobile experience with:
  • Increased font-size, height, and padding for buttons in group variant
  • Better touch targets for mobile users
• WFieldset - Updated font-size on mobile for better readability
• WBadge - Updated font-size and line-height for better mobile display
• WPopover - Improved animation on mobile devices

Features

• WModal - Added preventClose property to control modal closing behavior
• WCombobox - Added search by both title and description
• Improved data attribute handling across components (WCombobox, WTabs, WActionBar):
  • Enhanced attribute transformation
  • Better component attribute handling
  • Improved v-bind support

Bug Fixes

• WBanner - Reduced margins for close CTA
• WTabs - Fixed data attribute binding
• WTabs - Fixed reactivity for items prop

Breaking Changes

• WCollapse API updates:
  • Renamed open property to modelValue
  • Changed v-model:open to v-model
  • Updated related event names

Mobile-first Design

We've introduced comprehensive mobile support across Watson components with new mobile-specific tokens and responsive styles:

• Updated core components with mobile-optimized styles:
  • WButton
  • WInput
  • WSelect
  • WToggle
  • WRadio
  • WCheckbox
  • WText
  • WModal
  • WHeader
  • WNavList
  • WToast
  • WPopover - now includes mobile-specific backdrop and close button
  • WDropdown
  • WLink - updated icon size on mobile

Features

• WModal now supports preventClose property to control modal closing behavior
• WAvatar received a new xsmall size variant
• WDatepicker now supports firstDayOfWeek and highlightCurrentWeek properties
• Added hint slots to form components:
  • WDatepicker
  • WCombobox
  • WCheckbox
  • WFieldset
  • WFileUpload
  • WInput
  • WRadio
  • WSelect
  • WTextarea
  • WToggle
• WToast
  • Added position property
  • Added action button support
• WButton received a new alignLabel property
• WNavList added new slots for customization
• WDropdown added new slots for customization
• WActionBar updated breakpoints and stories
• Updated iconography with new icons and "unlock" icon

Bug Fixes

• Fixed icon shrinking issues in various scenarios
• WPopover now uses inert attribute instead of aria-hidden
• Improved accessibility and keyboard navigation
• Multiple fixes for form components and date handling
• Various minor improvements and optimizations
• Fixed missing badge variants
• Fixed skeleton text sizing for body variant
• Fixed hover color for WLink
• Avoid icon shrinking in some scenarios
• Replaced aria-hidden with inert in WPopover
• Fixed WDropdown size prop description
• Fixed adding attributes by default in table body cell
• Fixed WToast disabling teleport in web components

Features

• Added guidelines for depth to our documentation.
• Added onboarding template to our documentation.
• Added WActionBar component.
• Added anchor prop to trigger WPopover without default slot.
• Extended position prop of the WPopover with new values.
• Added data-id prop to NavListItem for easier e2e testing of NavList.
• WTextarea resize component on input.
• Added diagnosis and thumb-down icons.
• Added tag colors tokens.

Bug Fixes

• Datepicker
  • Emit event on manual input trigger.
  • Prevent firing blur event on key enter.
• Error Messages in form components
  • Aligned the icon to the first line of the error message.
  • Changed margin-top value.
• Multiple minor fixes.

Web Components

• Added WBreadcrums and WHeader components.
• Added tests for WBadge and WButton.
• Handled map error for Angular and vanilla environment in Breadcrumbs.

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 lepgacy 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:

@use "~@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.