fix/migration 3p11 (#5370)

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

@@ -0,0 +1,60 @@
+---
+sidebar_position: 5
+sidebar_label: UI
+summary: 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).
+
+    ```jsx
+    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`.
+
+    ```jsx
+    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.*