ohif-viewer/platform/docs/versioned_docs/version-3.11/migration-guide/3p10-to-3p11/ui.md

sidebar_position	sidebar_label	summary
5	UI	Migration guide for OHIF 3.11's UI changes, including the transition from `ViewportActionCornersService` to `ToolbarService` and the introduction of `useToolbar` hook.

New useIconPresentation hook

This section details the introduction of the IconPresentationProvider and useIconPresentation hook, offering an optional way to manage icon size and container styling within the UI.

Key Changes:

• New Context and Hook: Introduction of IconPresentationProvider and useIconPresentation to provide a standardized way to control the size and potentially the container component/props for icons and related interactive elements (like ToolButton).

Migration Steps:

Using the IconPresentationProvider is entirely optional. If you do not wrap your components with this provider, components like ToolButton will continue to use their explicit size prop and default styling.

However, if you wish to centrally manage the presentation of icons within a specific part of your application's component tree, follow these steps:

1. Identify the component subtree: Determine which section of your UI you want to apply consistent icon styling to.

2. Wrap with IconPresentationProvider: Wrap the root of that component subtree with the IconPresentationProvider. Pass the desired size prop. You can also optionally provide a custom IconContainer component and containerProps if you want to change the wrapper around the icon itself (e.g., switching from a Button to a ToolButton or applying specific styling).

   import { IconPresentationProvider, ToolButton } from '@ohif/ui-next';
   
   function MyComponentTree() {
     return (
       // Icons and ToolButtons within this provider will inherit 'large' size
       <IconPresentationProvider size="large">
         {/* Any components inside that consume the context */}
         <ToolButton id="myTool" icon="Circle" tooltip="Draw Circle" />
         {/* ... other components ... */}
       </IconPresentationProvider>
     );
   }
   

3. Consume the context in components (if building custom components): If you are building a custom component that renders an icon and want it to respect the provider's settings, use the useIconPresentation hook within that component. This hook provides the configured size, a calculated CSS class name (className), the specified IconContainer component, and its containerProps.

   import React from 'react';
   import { useIconPresentation, Icons } from '@ohif/ui-next';
   
   function MyCustomIconButton({ iconName, ...rest }) {
     // This hook reads the nearest IconPresentationProvider context
     const { className, IconContainer, containerProps } = useIconPresentation();
   
     // Use the provided IconContainer and its props
     return (
       <IconContainer {...rest} {...containerProps}>
         {/* Use the calculated className for the icon */}
         <Icons.ByName name={iconName} className={className} />
       </IconContainer>
     );
   }
   

   Note: Built-in components like ToolButton in @ohif/ui-next have been updated internally to consume this context automatically if a provider is available.