ui(components): Adds ToolButton and ToolButtonList to ui-next

extensions/default/src/getToolbarModule.tsx

@@ -3,6 +3,8 @@ import ToolbarLayoutSelectorWithServices from './Toolbar/ToolbarLayoutSelector';
 import ToolbarSplitButtonWithServices from './Toolbar/ToolbarSplitButtonWithServices';
 import ToolbarButtonGroupWithServices from './Toolbar/ToolbarButtonGroupWithServices';
 import { ToolbarButton } from '@ohif/ui';
+import { ToolButton } from '@ohif/ui-next';
+import { ToolButtonList } from '@ohif/ui-next';
 import { ProgressDropdownWithService } from './Components/ProgressDropdownWithService';
 
 const getClassName = isToggled => {
@@ -20,6 +22,14 @@ export default function getToolbarModule({ commandsManager, servicesManager }: w
       name: 'ohif.radioGroup',
       defaultComponent: ToolbarButton,
     },
+    {
+      name: 'ohif.toolButton',
+      defaultComponent: ToolButton,
+    },
+    {
+      name: 'ohif.toolButtonList',
+      defaultComponent: ToolButtonList,
+    },
     {
       name: 'ohif.divider',
       defaultComponent: ToolbarDivider,

modes/longitudinal/src/toolbarButtons.ts

@@ -15,7 +15,7 @@ export const setToolActiveToolbar = {
 const toolbarButtons: Button[] = [
   {
     id: 'MeasurementTools',
-    uiType: 'ohif.splitButton',
+    uiType: 'ohif.toolButtonList',
     props: {
       groupId: 'MeasurementTools',
       // group evaluate to determine which item should move to the top
@@ -110,7 +110,7 @@ const toolbarButtons: Button[] = [
   },
   {
     id: 'Zoom',
-    uiType: 'ohif.radioGroup',
+    uiType: 'ohif.toolButton',
     props: {
       icon: 'tool-zoom',
       label: 'Zoom',
@@ -121,7 +121,7 @@ const toolbarButtons: Button[] = [
   // Window Level
   {
     id: 'WindowLevel',
-    uiType: 'ohif.radioGroup',
+    uiType: 'ohif.toolButton',
     props: {
       icon: 'tool-window-level',
       label: 'Window Level',
@@ -138,7 +138,7 @@ const toolbarButtons: Button[] = [
   // Pan...
   {
     id: 'Pan',
-    uiType: 'ohif.radioGroup',
+    uiType: 'ohif.toolButton',
     props: {
       type: 'tool',
       icon: 'tool-move',
@@ -149,7 +149,7 @@ const toolbarButtons: Button[] = [
   },
   {
     id: 'TrackballRotate',
-    uiType: 'ohif.radioGroup',
+    uiType: 'ohif.toolButton',
     props: {
       type: 'tool',
       icon: 'tool-3d-rotate',
@@ -163,7 +163,7 @@ const toolbarButtons: Button[] = [
   },
   {
     id: 'Capture',
-    uiType: 'ohif.radioGroup',
+    uiType: 'ohif.toolButton',
     props: {
       icon: 'tool-capture',
       label: 'Capture',
@@ -188,7 +188,7 @@ const toolbarButtons: Button[] = [
   },
   {
     id: 'Crosshairs',
-    uiType: 'ohif.radioGroup',
+    uiType: 'ohif.toolButton',
     props: {
       type: 'tool',
       icon: 'tool-crosshair',

platform/docs/src/pages/components-list.tsx

@@ -37,6 +37,8 @@ import {
   CardDescription,
   CardContent,
 } from '../../../ui-next/src/components/Card';
+import ToolButton from '../../../ui-next/src/components/ToolButton/ToolButton';
+import ToolButtonList from '../../../ui-next/src/components/ToolButton/ToolButtonList';
 
 interface ShowcaseRowProps {
   title: string;
@@ -580,6 +582,52 @@ Example code coming soon.
             {/* Render the Toaster component */}
             <Toaster />
           </ShowcaseRow>
+
+          <ShowcaseRow
+            title="ToolButton"
+            description="Used to activate tools or perform single actions"
+            code={`
+// Example usage:
+<ToolButton
+  id="Zoom"
+  icon="zoom" // must exist in your Icons or fallback to 'MissingIcon'
+  label="Zoom"
+  tooltip="Zoom Tool"
+  isActive={false}
+  onInteraction={({ itemId }) => console.log(\`Clicked \${itemId}\`)}
+/>
+  `}
+          >
+            <div className="bg-popover flex h-11 w-[450px] items-center justify-center rounded">
+              <ToolButton
+                id="Zoom"
+                icon="ToolZoom"
+                label="Zoom"
+                tooltip="Zoom"
+                isActive={false}
+                className="bg-primary-dark text-primary-light hover:bg-background hover:text-highlight"
+                onInteraction={({ itemId }) => console.log(`Clicked ${itemId}`)}
+              />
+              <ToolButton
+                id="Zoom"
+                icon="ToolMove"
+                label="Pan"
+                tooltip="Pan"
+                isActive={false}
+                className="bg-primary-dark text-primary-light hover:bg-background hover:text-highlight"
+                onInteraction={({ itemId }) => console.log(`Clicked ${itemId}`)}
+              />
+              <ToolButton
+                id="Zoom"
+                icon="ToolWindowLevel"
+                label="Window Level"
+                tooltip="Window Level"
+                isActive={false}
+                className="bg-primary-dark text-primary-light hover:bg-background hover:text-highlight"
+                onInteraction={({ itemId }) => console.log(`Clicked ${itemId}`)}
+              />
+            </div>
+          </ShowcaseRow>
         </div>
       </div>
     </Layout>

platform/ui-next/src/components/ToolButton/ToolButton.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '../Tooltip';
+import { Icons } from '../Icons';
+import { Button } from '../Button';
+import { cn } from '../../lib/utils';
+
+interface ToolButtonProps {
+  id: string;
+  icon?: string;
+  label?: string;
+  tooltip?: string;
+  isActive?: boolean;
+  commands?: any;
+  onInteraction?: (details: { itemId: string; commands?: any }) => void;
+  className?: string;
+}
+
+function ToolButton(props: ToolButtonProps) {
+  const {
+    id,
+    icon = 'MissingIcon',
+    label,
+    tooltip,
+    isActive = false,
+    commands,
+    onInteraction,
+    className,
+  } = props;
+
+  const IconComponent = Icons[icon] || Icons['MissingIcon'];
+
+  const baseClasses = 'w-10 h-10 !rounded-lg inline-flex items-center justify-center';
+  const defaultClasses = 'bg-transparent text-foreground hover:bg-background hover:text-highlight';
+  const activeClasses = 'bg-highlight text-background hover:!bg-highlight/80';
+  const appliedClasses = isActive
+    ? cn(baseClasses, activeClasses, className)
+    : cn(baseClasses, defaultClasses, className);
+
+  // Click: pass along to parent
+  const handleClick = () => {
+    onInteraction?.({ itemId: id, commands });
+  };
+
+  // Decide what text to show in the tooltip; prefer `tooltip` if available. If not, use `label`.
+  const tooltipText = tooltip || label;
+
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger>
+          <Button
+            className={appliedClasses}
+            onClick={handleClick}
+            variant="ghost"
+            size="icon"
+            aria-pressed={isActive}
+            aria-label={tooltipText || id}
+          >
+            <IconComponent className="h-7 w-7" />
+          </Button>
+        </TooltipTrigger>
+
+        {/* Only render tooltip if we have text to display */}
+        {tooltipText && <TooltipContent side="bottom">{tooltipText}</TooltipContent>}
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+export default ToolButton;

platform/ui-next/src/components/ToolButton/ToolButtonList.tsx

@@ -0,0 +1,120 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '../Button';
+import { Icons } from '../Icons';
+import ToolButton from './ToolButton';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '../DropdownMenu';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../Tooltip';
+import { cn } from '../../lib/utils';
+
+function ToolButtonList({ groupId, primary, items = [], onInteraction, servicesManager }) {
+  const { toolbarService } = servicesManager?.services || {};
+
+  // Handle clicking on a secondary tool from the dropdown.
+  const handleItemClick = useCallback(
+    item => {
+      onInteraction?.({
+        groupId,
+        itemId: item.id,
+        commands: item.commands,
+      });
+    },
+    [groupId, onInteraction]
+  );
+
+  const isActive = !!primary?.isActive;
+
+  return (
+    <div className="flex items-center space-x-1">
+      {/**
+       *    Note: pass along the props that ToolButton needs (including `id`, `icon`,
+       *    `label`, `tooltip`, `isActive`, `commands`, and a callback for `onInteraction`).
+       */}
+      <ToolButton
+        id={primary?.id}
+        icon={primary?.icon}
+        label={primary?.label}
+        tooltip={primary?.tooltip}
+        isActive={isActive}
+        commands={primary?.commands}
+        onInteraction={({ itemId, commands }) => {
+          onInteraction?.({
+            groupId,
+            itemId,
+            commands,
+          });
+        }}
+      />
+
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-primary-foreground hover:bg-primary-dark hover:text-primary-light border-primary inline-flex h-10 w-5 items-center justify-center !rounded-tr-lg !rounded-br-lg !rounded-tl-none !rounded-bl-none border-l bg-transparent"
+            aria-label="Open tool list"
+          >
+            <Icons.ByName
+              name="chevron-down"
+              className="text-primary h-5 w-5"
+            />
+          </Button>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent
+          side="bottom"
+          align="end"
+        >
+          {items.map(item => (
+            <DropdownMenuItem
+              key={item.id}
+              onSelect={() => handleItemClick(item)}
+              className="flex items-center space-x-2"
+            >
+              <Icons.ByName
+                name={item.icon || 'MissingIcon'}
+                className="h-5 w-5"
+              />
+              <span>{item.tooltip || item.label || item.id}</span>
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}
+
+ToolButtonList.propTypes = {
+  groupId: PropTypes.string,
+  primary: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    icon: PropTypes.string,
+    label: PropTypes.string,
+    tooltip: PropTypes.string,
+    isActive: PropTypes.bool,
+    commands: PropTypes.any,
+  }),
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      icon: PropTypes.string,
+      label: PropTypes.string,
+      tooltip: PropTypes.string,
+      isActive: PropTypes.bool,
+      commands: PropTypes.any,
+    })
+  ),
+  onInteraction: PropTypes.func,
+  servicesManager: PropTypes.shape({
+    services: PropTypes.shape({
+      toolbarService: PropTypes.object,
+    }),
+  }),
+};
+
+export default ToolButtonList;

platform/ui-next/src/components/ToolButton/index.ts

@@ -0,0 +1,2 @@
+export { default as ToolButton } from './ToolButton';
+export { default as ToolButtonList } from './ToolButtonList';

platform/ui-next/src/components/index.ts

@@ -90,6 +90,8 @@ import {
   ViewportOverlay,
   ViewportGrid,
 } from './Viewport';
+import { ToolButton } from './ToolButton';
+import { ToolButtonList } from './ToolButton';
 
 export {
   ErrorBoundary,
@@ -204,4 +206,6 @@ export {
   ViewportOverlay,
   ViewportGrid,
   Clipboard,
+  ToolButton,
+  ToolButtonList,
 };

platform/ui-next/src/index.ts

@@ -90,6 +90,8 @@ import {
   ViewportActionCornersLocations,
   ViewportOverlay,
   ViewportGrid,
+  ToolButton,
+  ToolButtonList,
 } from './components';
 import { DataRow } from './components/DataRow';
 
@@ -196,4 +198,6 @@ export {
   ViewportActionCornersLocations,
   ViewportOverlay,
   ViewportGrid,
+  ToolButton,
+  ToolButtonList,
 };