UI

New Components

You can explore our new playground at docs.ohif.org/ui to see the latest components and their properties. We haven't provided a migration guide yet because the old components are still available. Feel free to update your codebase, including custom extensions and UI, to use the new Button, Dropdown, Icons, and other new components from @ohif/ui-next. The old methods (importing from @ohif/ui) will continue to work for now. However, the new components have a slightly different API, and we plan to deprecate the old components in a future release, as we see the new ones as the future of OHIF.

UINotificationService

We've switched our custom notification service to the Sonner component from https://sonner.emilkowal.ski/

1. Toast Positions (Kebab-Case)

Toast positions are now defined using kebab-case instead of camelCase. For instance, topRight becomes top-right, bottomRight becomes bottom-right, etc. Ensure your position strings are updated accordingly.

Old API:

uiNotificationService.show({
  title: 'My Title',
  message: 'My Message',
  duration: 3000,
  position: 'topRight',
  type: 'error',
  autoClose: true,
});

New API:

uiNotificationService.show({
  title: 'My Title',
  message: 'My Message',
  duration: 3000,
  position: 'top-right',  // Note the change to kebab-case
  type: 'error',
  autoClose: true,
});

2. Promise Support

The show() method now supports promises, enabling you to display loading notifications and automatically update them based on the promise's resolution or rejection. This significantly simplifies asynchronous operation feedback.

Example:

const myPromise = someAsyncOperation();
const notificationId = uiNotificationService.show({
  title: 'Loading Data',
  message: 'Fetching data from server...',
  type: 'info',
  promise: myPromise,
  promiseMessages: {
    loading: 'Fetching...',
    success: (data) => `Data loaded: ${data.length} items`,  // Access promise result
    error: (error) => `Failed to load data: ${error.message}`, // Access error details
  },
});
// Optionally hide notification manually if needed
// myPromise.finally(() => uiNotificationService.hide(notificationId));

3. hide() API Change

The hide() method no longer takes an options object. It only accepts the notification ID as a string argument.

Old API:

uiNotificationService.hide({ id: notificationId });

New API:

uiNotificationService.hide(notificationId);

---

Viewport Pane Tailwindcss class

Previously, when targeting the viewport pane to add custom CSS, you likely used group-hover:visible with the viewportPane having a group class.

The naming was confusing as we added more groups, so we renamed it to group/pane. Now you can apply group-hover/pane for better clarity.

---

Header Component

Header Component has been refactored in the @ohif/ui-next package.

Before

function Header({
  children,
  menuOptions,
  isReturnEnabled,
  onClickReturnButton,
  isSticky,
  WhiteLabeling,
  showPatientInfo,
  servicesManager,
  Secondary,
  appConfig,
  ...props
}: withAppTypes): ReactNode

After

function Header({
  children,
  menuOptions,
  isReturnEnabled,
  onClickReturnButton,
  isSticky,
  WhiteLabeling,
  PatientInfo,
  Secondary,
  ...props
}: HeaderProps): ReactNode

The PatientInfo component is now preferred, and the showPatientInfo prop has been removed. The previous method depended on servicesManager, which was cumbersome because the UI shouldn't need to interact with servicesManager.

All the DropDown and Icons are now in the @ohif/ui-next package.

---