A packed two months:
On web we shipped three new components (WFeedback, WTimeSlotSelector and Scroll mask) and upgraded WCombobox, WModal and WStack, while Watson Mobile had its biggest period yet with the major v3.0.0 release (WBottomSheet, WToast and WSkeleton, plus a new platform baseline).
Across both platforms we migrated to the new @docplanner/watson-tokens pipeline, refreshed the patient theme and icons, and made a major push on accessibility and automated quality.
Two things to check in your apps: the accessibility audits and the color-contrast token fix may change focus and color behaviour, and if you consume Watson Mobile, v3.0.0 and v4.0.0 contain breaking changes.
Mobile (React Native) Updates
This was the biggest period yet for Watson Mobile, headlined by the major v3.0.0 release.
New components
- WCheckbox and WCheckbox.Group — v2.5.0
- WToolbar — with dedicated tokens — v2.5.0
- WBanner — v2.5.0
- WBottomSheet — modal bottom sheet with portal rendering, swipe-to-dismiss, scroll coordination, sticky-footer support, keyboard handling and a useBottomSheet hook — v3.0.0
- WToast and the toast service — auto-dismiss timers, duplicate suppression, replacement behaviour, safe-area-aware placement, reduced-motion support and accessibility announcements — v3.0.0
- WSkeleton and WSkeleton.Text — loading placeholders with default and noa variants, shape support and shimmer animation — v3.0.0
- WHeader — v3.2.0
- WListItem — v3.2.0
- WTabs — v3.2.0
- WDrawer — v4.0.0
- WEmptyState — v4.0.0
- WSectionHeader — v4.0.0
- WToggle — v4.0.0
- WLabel — v4.0.0
Platform & tooling
- Runtime themes migrated to the generated @docplanner/watson-tokens pipeline, with component specs refreshed against the new token source.
- Expo Go native PR previews for Storybook — review components on real devices.
- Automated Supernova component-status sync, with documentation auto-published afterwards.
⚠️ Breaking changes (v3.0.0). Watson Mobile now targets Expo SDK 55, React 19.2 and React Native 0.83. v3 introduces native peer requirements for the gesture- and animation-driven components: react-native-gesture-handler ≥ 2.30.0, react-native-reanimated ≥ 4.2.0, react-native-safe-area-context ≥ 5.6.0 and react-native-worklets ≥ 0.7.0. WBottomSheet ships from a subpath export and requires PortalHost inside ThemeProvider, both inside GestureHandlerRootView:
import { ThemeProvider } from '@docplanner/watson-mobile';
import { PortalHost } from '@docplanner/watson-mobile/bottom-sheet';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
Before upgrading, move your app to Expo SDK 55, run npx expo install --fix, then restart Metro with npx expo start --clear. See the v3.0.0 changelog for the full migration guide.
⚠️ Breaking changes (v4.0.0). toast prop on ThemeProvider is replaced by config prop to handle all provider-level configuration. The config object includes those props under the toast member, and adds a new label member with optionalLabel prop to pass a translated “Optional” text.
Web component Updates
New components
- WFeedback: a new component to provide feedback to users users.
- WTimeSlotSelector: a new community component for selecting time slots.
- Scroll mask: a new component that adds a fade / scroll-mask effect to scrollable areas, hinting that there is more content to scroll.
Component improvements
WCombobox
- New showAsTags mode to display selected values as tags.
- New allowCustomValue prop to accept values that are not in the list.
- The popover is no longer clipped when WCombobox is used inside a WModal.
- Mobile typing has been restored.
WModal
- Refined layout and animation, plus a generally improved mobile layout (including Vue 2).
- New swipe-down-to-close gesture on mobile.
- New disableHistoryIntegration prop and more reliable browser-history handling when the modal closes (a history entry is now popped on every close).
WStack
- New vertical spacing props built on semantic spacing tokens (none, small, medium, large, xlarge): marginBlock (shorthand for top + bottom) plus marginTop and marginBottom.
WTabs
- Tab labels now truncate with a tooltip when they overflow.
- The patient border is hidden.
- The label tooltip is disabled on touch devices.
Buttons
- New icon-button variants.
- Refreshed visual styles for the patient theme.
- Adjusted small and large button padding to match the new tokens.
WBadge
- Styles aligned with the Vue version.
- Badge borders removed.
WCheckbox
- No longer scrolls the page when clicked inside a scrollable popover.
Icons (component)
- The WIcon gallery story now shows deprecation badges.
- Origin-aware pop-out animations.
Design updates
New pattern added
The Group, tile, or list item? pattern provides a decision-making guide to help you choose between a standard group, a tile, or a list item layout when designing radio or checkbox selection flows.
Custom values in Combobox
The combobox now allows users to add custom values, so they can add specific terms when necessary.
Tokens & theming
- Design-token pipeline — both web and mobile now consume the new @docplanner/watson-tokens package. New tooling flattens resolved tokens and generates a token-reference JSON; legacy tokens were cleaned up.
- Mobile tokens synced from Supernova, with additional mobile tokens added from the design specs.
- Patient theme — improved size tokens, a new card border and refined component sizes (plus a dropdownItem height fix).
- Color-contrast fix — foreground references moved from muted to secondary to meet contrast requirements.
Accessibility
Accessibility was a major focus this period — in the components themselves and in how we catch issues going forward.
- Keyboard-navigation and focus-management audits completed across React, Vue 3 and Vue 2 components.
- Color-contrast fix in the tokens (see Tokens & theming).
- New accessibility testing infrastructure added to the design system.
Accessibility automation
- Fixed existing accessibility issues across the design system.
- Phase 1 of the automation plan landed: ESLint-based Storybook accessibility tests.
- Automatic checks now run on every change, so new problems are caught the moment they're introduced, not weeks later.
- The checks run in parallel to keep the pipeline fast, so teams aren't slowed down.
- Problems surface directly inside each pull request, where engineers already work, with clear feedback on what to fix.
Visual regression testing
We set up automated visual regression testing for Watson Web using Percy by BrowserStack, an industry tool that integrates directly with Storybook (our visual source of truth for components).
- Every component has a dedicated test that captures how it should look.
- The system runs on a weekly schedule and can also be triggered manually when needed.
- New screenshots are automatically compared against the approved baseline, and any pixel-level differences are reported.
- The team is notified in Slack whenever a visual change needs human review.
Icon updates
New icons
During this period, our libraries have been enriched with the addition of some new and updated icons: transcript, duplicate, discount, home, home-filled, referral, no-user and folder.
Find them in Figma and code libraries.
Modified icons
Some icons have been modified to align them with brand updates. These icons are: clinic-cloud and tuo-tempo.
Deprecated icons
Since the Jameda logo icon is no longer used in DocPlanner products, it has been deprecated from the design and code libraries.
