feat: migrate icons to ui-next (#4606)
This commit is contained in:
Alireza authored and GitHub committed
1 parent
e93a9c70c5
commit
4e2ae32874
967 files changed
+9222
-10948
No files matched your search
@@ -1,7 +1,7 @@
|
||||
---
|
||||
id: 3p8-to-3p9
|
||||
title: 3.8 -> 3.9
|
||||
sidebar_position: 1
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,238 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
sidebar_label: Icons
|
||||
---
|
||||
|
||||
## Migration Guide: Icon Component Updates
|
||||
|
||||
### General Overview
|
||||
|
||||
This migration involves changes to how icons are used within the OHIF platform. The core change is the move to a new icon component library, `@ohif/ui-next`, which provides more flexibility and a more consistent naming convention for icons.
|
||||
|
||||
**Key Changes:**
|
||||
|
||||
1. **New Icon Library:** The primary change is the shift from using `<Icon>` from `@ohif/ui` to using the new `Icons` component from `@ohif/ui-next`.
|
||||
2. **`AbcDef` Naming Convention:** The new library uses a `AbcDef` (PascalCase) naming convention for the icons. For instance, `status-alert` is now `StatusAlert`.
|
||||
3. **Legacy Fallback:** To ease the transition, a legacy fallback has been provided using `Icons.ByName`. This allows you to continue using the old `name="status-alert"` format but is not the recommended way moving forward.
|
||||
4. **Direct Icon Component Access:** The recommended approach is to use `Icons.StatusAlert` instead of `<Icons.ByName name="status-alert"/>` this way will make code more clear and readable.
|
||||
|
||||
### Migration Strategies
|
||||
|
||||
You have two ways to approach the migration:
|
||||
|
||||
1. **Recommended Approach (Gradual Adoption):**
|
||||
* Start by updating your codebase to use the `Icons.Method` for the new icon naming convention.
|
||||
* For example, replace `<Icon name="status-alert" />` with `<Icons.StatusAlert />`.
|
||||
* This ensures your code is aligned with the new standard and provides optimal compatibility in the future.
|
||||
* This method can be rolled out in phases.
|
||||
|
||||
2. **Legacy Fallback Approach (Temporary):**
|
||||
* If a full migration is not immediately feasible, you can use the legacy fallback temporarily:
|
||||
* Replace `<Icon name="status-alert" />` with `<Icons.ByName name="status-alert" />`.
|
||||
* This option allows you to complete the migration with minimal disruption to the old code
|
||||
* However, it is highly recommended to move towards the `Icons.Method` approach to take advantage of all the new library offers and have a cleaner code base.
|
||||
|
||||
**Recommendation:** We strongly recommend using the *Recommended Approach* for a more maintainable and consistent codebase going forward.
|
||||
|
||||
### Specific Changes (Code Examples)
|
||||
|
||||
Here are some specific examples based on the diff you provided, illustrating both the legacy fallback and recommended approach:
|
||||
|
||||
**Example 1: Status Icons in `_getStatusComponent.tsx`**
|
||||
|
||||
**Old Code (`@ohif/ui`):**
|
||||
|
||||
```jsx
|
||||
import { Icon, Tooltip } from '@ohif/ui';
|
||||
|
||||
// ...
|
||||
case true:
|
||||
StatusIcon = () => <Icon name="status-alert" />;
|
||||
break;
|
||||
case false:
|
||||
StatusIcon = () => (
|
||||
<Icon
|
||||
className="text-aqua-pale"
|
||||
name="status-untracked"
|
||||
/>
|
||||
);
|
||||
break;
|
||||
//...
|
||||
|
||||
```
|
||||
|
||||
**Legacy Fallback Approach (`Icons.ByName`):**
|
||||
|
||||
```jsx
|
||||
import { Tooltip } from '@ohif/ui';
|
||||
import { Icons } from '@ohif/ui-next';
|
||||
|
||||
// ...
|
||||
case true:
|
||||
StatusIcon = () => <Icons.ByName name="status-alert" />;
|
||||
break;
|
||||
case false:
|
||||
StatusIcon = () => (
|
||||
<Icons.ByName
|
||||
className="text-aqua-pale"
|
||||
name="status-untracked"
|
||||
/>
|
||||
);
|
||||
break;
|
||||
//...
|
||||
```
|
||||
|
||||
**Recommended Approach (`Icons.StatusAlert`, `Icons.StatusUntracked`):**
|
||||
|
||||
```jsx
|
||||
import { Tooltip } from '@ohif/ui';
|
||||
import { Icons } from '@ohif/ui-next';
|
||||
|
||||
// ...
|
||||
case true:
|
||||
StatusIcon = () => <Icons.StatusAlert />;
|
||||
break;
|
||||
case false:
|
||||
StatusIcon = () => (
|
||||
<Icons.StatusUntracked
|
||||
className="text-aqua-pale"
|
||||
/>
|
||||
);
|
||||
break;
|
||||
//...
|
||||
```
|
||||
|
||||
|
||||
**Example 5: Icon usage in `WorkList.tsx`**
|
||||
|
||||
**Old Code (`@ohif/ui`):**
|
||||
|
||||
```jsx
|
||||
<Icon
|
||||
name="group-layers"
|
||||
```
|
||||
**Recommended Approach (`Icons.GroupLayers`):**
|
||||
|
||||
```jsx
|
||||
<Icons.GroupLayers
|
||||
```
|
||||
```jsx
|
||||
<Icons.ByName
|
||||
className="!h-[20px] !w-[20px] text-black"
|
||||
name={isValidMode ? 'launch-arrow' : 'launch-info'}
|
||||
/>
|
||||
```
|
||||
**Recommended Approach (`Icons.LaunchArrow`, `Icons.LaunchInfo`):**
|
||||
|
||||
```jsx
|
||||
isValidMode ? (
|
||||
<Icons.LaunchArrow className="!h-[20px] !w-[20px] text-black" />
|
||||
) : (
|
||||
<Icons.LaunchInfo className="!h-[20px] !w-[20px] text-black" />
|
||||
)
|
||||
```
|
||||
|
||||
|
||||
### Detailed Renaming Table
|
||||
|
||||
| Old Icon Name | New Icon Component Name | Example Usage (`Icons.`) | Notes |
|
||||
| :------------------------------ | :------------------------------------------ | :--------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `status-alert` | `StatusAlert` | `Icons.StatusAlert` | |
|
||||
| `status-untracked` | `StatusUntracked` | `Icons.StatusUntracked` | |
|
||||
| `status-locked` | `StatusLocked` | `Icons.StatusLocked` | |
|
||||
| `icon-transferring` | `IconTransferring` | `Icons.IconTransferring` | |
|
||||
| `icon-alert-small` | `Alert` | `Icons.Alert` | |
|
||||
| `icon-alert-outline` | `AlertOutline` | `Icons.AlertOutline` | |
|
||||
| `icon-status-alert` | `Alert` | `Icons.Alert` | |
|
||||
| `action-new-dialog` | `ActionNewDialog` | `Icons.ActionNewDialog` | |
|
||||
| `VolumeRendering` | `VolumeRendering` | `Icons.VolumeRendering` | |
|
||||
| `chevron-left` | `ChevronClosed` | `Icons.ChevronClosed` | Use when arrow direction needs to point left |
|
||||
| `chevron-down` | `ChevronOpen` | `Icons.ChevronOpen` | Use when arrow direction needs to point down |
|
||||
| `launch-arrow` | `LaunchArrow` | `Icons.LaunchArrow` | |
|
||||
| `launch-info` | `LaunchInfo` | `Icons.LaunchInfo` | |
|
||||
| `group-layers` | `GroupLayers` | `Icons.GroupLayers` | |
|
||||
| `icon-upload` | `Upload` | `Icons.Upload` | |
|
||||
| `icon-search` | `Search` | `Icons.Search` | |
|
||||
| `icon-clear-field` | `Clear` | `Icons.Clear` | |
|
||||
| `icon-add` | `Add` | `Icons.Add` | |
|
||||
| `icon-close` | `Close` | `Icons.Close` | |
|
||||
| `icon-pause` | `Pause` | `Icons.Pause` | |
|
||||
| `icon-play` | `Play` | `Icons.Play` | |
|
||||
| `icon-multiple-patients` | `MultiplePatients` | `Icons.MultiplePatients` | |
|
||||
| `icon-settings` | `Settings` | `Icons.Settings` | |
|
||||
| `icon-more-menu` | `More` | `Icons.More` | |
|
||||
| `content-prev` | `ContentPrev` | `Icons.ContentPrev` | |
|
||||
| `content-next` | `ContentNext` | `Icons.ContentNext` | |
|
||||
| `checkbox-checked` | `CheckBoxChecked` | `Icons.CheckBoxChecked` | |
|
||||
| `checkbox-unchecked` | `CheckBoxUnchecked` | `Icons.CheckBoxUnchecked` | |
|
||||
| `checkbox-default` | `CheckBoxUnchecked` | `Icons.CheckBoxUnchecked` | |
|
||||
|`checkbox-active`| `CheckBoxChecked`| `Icons.CheckBoxChecked`| |
|
||||
| `sorting-active-up` | `SortingAscending` | `Icons.SortingAscending` | |
|
||||
| `sorting-active-down` | `SortingDescending` | `Icons.SortingDescending` | |
|
||||
| `sorting` | `Sorting` | `Icons.Sorting` | |
|
||||
|`link` | `Link` | `Icons.Link` | |
|
||||
|`unlink` | `Link` | `Icons.Link` | |
|
||||
|`info-action` | `Info` | `Icons.Info` | |
|
||||
|`database` | `Database`| `Icons.Database`| |
|
||||
|`tool-3d-rotate`| `Tool3DRotate`| `Icons.Tool3DRotate`| |
|
||||
|`tool-angle`| `ToolAngle`| `Icons.ToolAngle`| |
|
||||
|`tool-annotate`| `ToolAnnotate`| `Icons.ToolAnnotate`| |
|
||||
|`tool-bidirectional`| `ToolBidirectional`| `Icons.ToolBidirectional`| |
|
||||
|`tool-calibration`| `ToolCalibrate`| `Icons.ToolCalibrate`| |
|
||||
|`tool-capture`| `ToolCapture`| `Icons.ToolCapture`| |
|
||||
|`tool-cine`| `ToolCine`| `Icons.ToolCine`| |
|
||||
|`tool-circle`| `ToolCircle`| `Icons.ToolCircle`| |
|
||||
|`tool-cobb-angle`| `ToolCobbAngle`| `Icons.ToolCobbAngle`| |
|
||||
|`tool-create-threshold`| `ToolCreateThreshold` | `Icons.ToolCreateThreshold` | |
|
||||
|`tool-crosshair`| `ToolCrosshair`| `Icons.ToolCrosshair`| |
|
||||
|`dicom-tag-browser`| `ToolDicomTagBrowser` | `Icons.ToolDicomTagBrowser` | |
|
||||
|`tool-flip-horizontal`| `ToolFlipHorizontal` | `Icons.ToolFlipHorizontal` | |
|
||||
|`tool-freehand-polygon`| `ToolFreehandPolygon`| `Icons.ToolFreehandPolygon`| |
|
||||
|`tool-freehand-roi`| `ToolFreehandRoi` | `Icons.ToolFreehandRoi`| |
|
||||
|`tool-freehand`| `ToolFreehand`| `Icons.ToolFreehand`| |
|
||||
|`tool-fusion-color`| `ToolFusionColor`| `Icons.ToolFusionColor`| |
|
||||
|`tool-invert`| `ToolInvert`| `Icons.ToolInvert`| |
|
||||
|`tool-layout-default`| `ToolLayoutDefault`| `Icons.ToolLayoutDefault`| |
|
||||
|`tool-length`| `ToolLength`| `Icons.ToolLength`| |
|
||||
|`tool-magnetic-roi`| `ToolMagneticRoi` | `Icons.ToolMagneticRoi`| |
|
||||
|`tool-magnify`| `ToolMagnify`| `Icons.ToolMagnify`| |
|
||||
|`tool-measure-ellipse`| `ToolMeasureEllipse`| `Icons.ToolMeasureEllipse`| |
|
||||
|`tool-more-menu`| `ToolMoreMenu`| `Icons.ToolMoreMenu`| |
|
||||
|`tool-move`| `ToolMove`| `Icons.ToolMove`| |
|
||||
|`tool-polygon`| `ToolPolygon`| `Icons.ToolPolygon`| |
|
||||
|`tool-quick-magnify`| `ToolQuickMagnify` | `Icons.ToolQuickMagnify` | |
|
||||
|`tool-rectangle`| `ToolRectangle` | `Icons.ToolRectangle` | |
|
||||
|`tool-referenceLines`| `ToolReferenceLines`| `Icons.ToolReferenceLines`| |
|
||||
|`tool-reset`| `ToolReset`| `Icons.ToolReset`| |
|
||||
|`tool-rotate-right`| `ToolRotateRight`| `Icons.ToolRotateRight`| |
|
||||
|`tool-seg-brush`| `ToolSegBrush`| `Icons.ToolSegBrush`| |
|
||||
|`tool-seg-eraser`| `ToolSegEraser`| `Icons.ToolSegEraser`| |
|
||||
|`tool-seg-shape`| `ToolSegShape` | `Icons.ToolSegShape`| |
|
||||
|`tool-seg-threshold`| `ToolSegThreshold` | `Icons.ToolSegThreshold` | |
|
||||
|`tool-spline-roi`| `ToolSplineRoi`| `Icons.ToolSplineRoi`| |
|
||||
|`tool-stack-image-sync`| `ToolStackImageSync`| `Icons.ToolStackImageSync`| |
|
||||
|`tool-stack-scroll`| `ToolStackScroll` | `Icons.ToolStackScroll`| |
|
||||
|`tool-toggle-dicom-overlay`| `ToolToggleDicomOverlay`| `Icons.ToolToggleDicomOverlay`| |
|
||||
|`tool-ultrasound-bidirectional`| `ToolUltrasoundBidirectional`| `Icons.ToolUltrasoundBidirectional`| |
|
||||
|`tool-window-level`| `ToolWindowLevel`| `Icons.ToolWindowLevel`| |
|
||||
|`tool-window-region`| `ToolWindowRegion`| `Icons.ToolWindowRegion`| |
|
||||
|`tool-zoom` | `ToolZoom` | `Icons.ToolZoom`| |
|
||||
| `tool-layout` | `ToolLayout` | `Icons.ToolLayout` | |
|
||||
|`icon-tool-eraser`| `ToolEraser` | `Icons.ToolEraser`| |
|
||||
|`icon-tool-brush`| `ToolBrush`| `Icons.ToolBrush`| |
|
||||
|`icon-tool-threshold`| `ToolThreshold` | `Icons.ToolThreshold` | |
|
||||
|`icon-tool-shape`| `ToolShape`| `Icons.ToolShape` | |
|
||||
|`icon-color-lut`| `IconColorLUT` | `Icons.IconColorLUT` | |
|
||||
| `viewport-window-level`|`ViewportWindowLevel`|`Icons.ViewportWindowLevel`| |
|
||||
|`notifications-info`| `NotificationInfo`| `Icons.NotificationInfo`| |
|
||||
|`layout-advanced-3d-four-up` | `LayoutAdvanced3DFourUp` | `Icons.LayoutAdvanced3DFourUp` | |
|
||||
|`layout-advanced-3d-main` | `LayoutAdvanced3DMain` | `Icons.LayoutAdvanced3DMain` | |
|
||||
|`layout-advanced-3d-only` | `LayoutAdvanced3DOnly` | `Icons.LayoutAdvanced3DOnly`| |
|
||||
|`layout-advanced-3d-primary` | `LayoutAdvanced3DPrimary` | `Icons.LayoutAdvanced3DPrimary` | |
|
||||
|`layout-advanced-axial-primary` |`LayoutAdvancedAxialPrimary`| `Icons.LayoutAdvancedAxialPrimary` | |
|
||||
|`layout-advanced-mpr`| `LayoutAdvancedMPR` | `Icons.LayoutAdvancedMPR` | |
|
||||
|`layout-common-1x1` | `LayoutCommon1x1` | `Icons.LayoutCommon1x1` | |
|
||||
|`layout-common-1x2` | `LayoutCommon1x2`|`Icons.LayoutCommon1x2`| |
|
||||
|`layout-common-2x2` | `LayoutCommon2x2`|`Icons.LayoutCommon2x2` | |
|
||||
|`layout-common-2x3` | `LayoutCommon2x3`| `Icons.LayoutCommon2x3`| |
|
||||
|`illustration-investigational-use`|`InvestigationalUse`|`Icons.InvestigationalUse`| |
|
||||
@@ -0,0 +1,6 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
sidebar_label: 3.9 -> 3.10 beta
|
||||
---
|
||||
|
||||
# Migration Guide
|
||||
Reference in new issue
Block a user