fix(Button): redesign of existing Button component for consistency (#3473)

extensions/cornerstone-dicom-rt/src/utils/promptHydrateRT.ts

@@ -1,3 +1,4 @@
+import { ButtonEnums } from '@ohif/ui';
 import hydrateRTDisplaySet from './_hydrateRT';
 
 const RESPONSE = {
@@ -38,12 +39,12 @@ function _askHydrate(uiViewportDialogService, viewportIndex) {
     const message = 'Do you want to open this Segmentation?';
     const actions = [
       {
-        type: 'secondary',
+        type: ButtonEnums.type.secondary,
         text: 'No',
         value: RESPONSE.CANCEL,
       },
       {
-        type: 'primary',
+        type: ButtonEnums.type.primary,
         text: 'Yes',
         value: RESPONSE.HYDRATE_SEG,
       },

extensions/cornerstone-dicom-seg/src/panels/callInputDialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Dialog } from '@ohif/ui';
+import { Input, Dialog, ButtonEnums } from '@ohif/ui';
 
 function callInputDialog(uiDialogService, label, callback) {
   const dialogId = 'enter-segment-label';
@@ -29,8 +29,8 @@ function callInputDialog(uiDialogService, label, callback) {
         noCloseButton: true,
         onClose: () => uiDialogService.dismiss({ id: dialogId }),
         actions: [
-          { id: 'cancel', text: 'Cancel', type: 'primary' },
-          { id: 'save', text: 'Confirm', type: 'secondary' },
+          { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
+          { id: 'save', text: 'Confirm', type: ButtonEnums.type.primary },
         ],
         onSubmit: onSubmitHandler,
         body: ({ value, setValue }) => {

extensions/cornerstone-dicom-seg/src/utils/promptHydrateSEG.ts

@@ -1,3 +1,4 @@
+import { ButtonEnums } from '@ohif/ui';
 import hydrateSEGDisplaySet from './_hydrateSEG';
 
 const RESPONSE = {
@@ -6,11 +7,7 @@ const RESPONSE = {
   HYDRATE_SEG: 5,
 };
 
-function promptHydrateSEG({
-  servicesManager,
-  segDisplaySet,
-  viewportIndex,
-}) {
+function promptHydrateSEG({ servicesManager, segDisplaySet, viewportIndex }) {
   const { uiViewportDialogService } = servicesManager.services;
 
   return new Promise(async function(resolve, reject) {
@@ -36,12 +33,12 @@ function _askHydrate(uiViewportDialogService, viewportIndex) {
     const message = 'Do you want to open this Segmentation?';
     const actions = [
       {
-        type: 'secondary',
+        type: ButtonEnums.type.secondary,
         text: 'No',
         value: RESPONSE.CANCEL,
       },
       {
-        type: 'primary',
+        type: ButtonEnums.type.primary,
         text: 'Yes',
         value: RESPONSE.HYDRATE_SEG,
       },

extensions/cornerstone/src/components/DicomUpload/DicomUpload.tsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import DicomFileUploader from '../../utils/DicomFileUploader';
 import DicomUploadProgress from './DicomUploadProgress';
-import { Button } from '@ohif/ui';
+import { Button, ButtonEnums } from '@ohif/ui';
 import './DicomUpload.css';
 
 type DicomUploadProps = {
@@ -46,12 +46,7 @@ function DicomUpload({
               <Dropzone onDrop={onDrop} noDrag>
                 {({ getRootProps, getInputProps }) => (
                   <div {...getRootProps()}>
-                    <Button
-                      variant="contained"
-                      color="primary"
-                      disabled={false}
-                      onClick={() => {}}
-                    >
+                    <Button disabled={false} onClick={() => {}}>
                       {'Add files'}
                       <input {...getInputProps()} />
                     </Button>
@@ -62,9 +57,7 @@ function DicomUpload({
                 {({ getRootProps, getInputProps }) => (
                   <div {...getRootProps()}>
                     <Button
-                      variant="contained"
-                      color="primaryDark"
-                      border="primaryActive"
+                      type={ButtonEnums.type.secondary}
                       disabled={false}
                       onClick={() => {}}
                     >

extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx

@@ -308,13 +308,7 @@ function DicomUploadProgress({
             } ${
               dicomFileUploaderArr.length > 1 ? 'files' : 'file'
             } completed.`}</span>
-            <Button
-              variant="contained"
-              color="primary"
-              disabled={false}
-              className="ml-auto"
-              onClick={onComplete}
-            >
+            <Button disabled={false} className="ml-auto" onClick={onComplete}>
               {'Close'}
             </Button>
           </>

extensions/cornerstone/src/utils/callInputDialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Dialog } from '@ohif/ui';
+import { Input, Dialog, ButtonEnums } from '@ohif/ui';
 
 /**
  *
@@ -60,8 +60,8 @@ function callInputDialog(
         noCloseButton: true,
         onClose: () => uiDialogService.dismiss({ id: dialogId }),
         actions: [
-          { id: 'cancel', text: 'Cancel', type: 'primary' },
-          { id: 'save', text: 'Save', type: 'secondary' },
+          { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
+          { id: 'save', text: 'Save', type: ButtonEnums.type.primary },
         ],
         onSubmit: onSubmitHandler,
         body: ({ value, setValue }) => {

extensions/default/src/Panels/ActionButtons.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
-import { Button, ButtonGroup } from '@ohif/ui';
+import { LegacyButton, ButtonGroup } from '@ohif/ui';
 
 function ActionButtons({ onExportClick, onCreateReportClick }) {
   const { t } = useTranslation('MeasurementTable');
@@ -10,12 +10,16 @@ function ActionButtons({ onExportClick, onCreateReportClick }) {
   return (
     <React.Fragment>
       <ButtonGroup color="black" size="inherit">
-        <Button className="px-2 py-2 text-base" onClick={onExportClick}>
+        {/* TODO Revisit design of ButtonGroup later - for now use LegacyButton for its children.*/}
+        <LegacyButton className="px-2 py-2 text-base" onClick={onExportClick}>
           {t('Export CSV')}
-        </Button>
-        <Button className="px-2 py-2 text-base" onClick={onCreateReportClick}>
+        </LegacyButton>
+        <LegacyButton
+          className="px-2 py-2 text-base"
+          onClick={onCreateReportClick}
+        >
           {t('Create Report')}
-        </Button>
+        </LegacyButton>
       </ButtonGroup>
     </React.Fragment>
   );

extensions/default/src/Panels/DataSourceSelector.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames';
 import { useNavigate } from 'react-router-dom';
 import { useAppConfig } from '@state';
 
-import { Button } from '@ohif/ui';
+import { Button, ButtonEnums } from '@ohif/ui';
 
 function DataSourceSelector() {
   const [appConfig] = useAppConfig();
@@ -33,7 +33,8 @@ function DataSourceSelector() {
                 <div key={ds.sourceName}>
                   <h1 className="text-white">{ds.friendlyName}</h1>
                   <Button
-                    className={classnames('font-bold', 'ml-2')}
+                    type={ButtonEnums.type.primary}
+                    className={classnames('ml-2')}
                     onClick={() => {
                       navigate({
                         pathname: '/',

extensions/default/src/Panels/PanelMeasurementTable.tsx

@@ -1,7 +1,13 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { utils, ServicesManager } from '@ohif/core';
-import { MeasurementTable, Dialog, Input, useViewportGrid } from '@ohif/ui';
+import {
+  MeasurementTable,
+  Dialog,
+  Input,
+  useViewportGrid,
+  ButtonEnums,
+} from '@ohif/ui';
 import ActionButtons from './ActionButtons';
 import debounce from 'lodash.debounce';
 
@@ -189,9 +195,8 @@ export default function PanelMeasurementTable({
           );
         },
         actions: [
-          // temp: swap button types until colors are updated
-          { id: 'cancel', text: 'Cancel', type: 'primary' },
-          { id: 'save', text: 'Save', type: 'secondary' },
+          { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
+          { id: 'save', text: 'Save', type: ButtonEnums.type.primary },
         ],
         onSubmit: onSubmitHandler,
       },

extensions/default/src/Panels/createReportDialogPrompt.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import React from 'react';
-import { Dialog, Input, Select } from '@ohif/ui';
+import { ButtonEnums, Dialog, Input, Select } from '@ohif/ui';
 
 export const CREATE_REPORT_DIALOG_RESPONSE = {
   CANCEL: 0,
@@ -81,8 +81,8 @@ export default function createReportDialogPrompt(
         noCloseButton: true,
         onClose: _handleClose,
         actions: [
-          { id: 'cancel', text: 'Cancel', type: 'primary' },
-          { id: 'save', text: 'Save', type: 'secondary' },
+          { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
+          { id: 'save', text: 'Save', type: ButtonEnums.type.primary },
         ],
         // TODO: Should be on button press...
         onSubmit: _handleFormSubmit,

extensions/dicom-microscopy/src/utils/callInputDialog.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Dialog } from '@ohif/ui';
+import { Input, Dialog, ButtonEnums } from '@ohif/ui';
 
 /**
  *
@@ -14,7 +14,7 @@ export default function callInputDialog({
   uiDialogService,
   title = 'Annotation',
   defaultValue = '',
-  callback = (value: string, action: string) => {}
+  callback = (value: string, action: string) => {},
 }) {
   const dialogId = 'microscopy-input-dialog';
 
@@ -43,8 +43,8 @@ export default function callInputDialog({
         noCloseButton: true,
         onClose: () => uiDialogService.dismiss({ id: dialogId }),
         actions: [
-          { id: 'cancel', text: 'Cancel', type: 'primary' },
-          { id: 'save', text: 'Save', type: 'secondary' },
+          { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
+          { id: 'save', text: 'Save', type: ButtonEnums.type.primary },
         ],
         onSubmit: onSubmitHandler,
         body: ({ value, setValue }) => {

extensions/measurement-tracking/src/_shared/createReportDialogPrompt.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import React from 'react';
-import { Dialog, Input } from '@ohif/ui';
+import { ButtonEnums, Dialog, Input } from '@ohif/ui';
 import RESPONSE from './PROMPT_RESPONSES';
 
 export default function createReportDialogPrompt(uiDialogService) {
@@ -43,8 +43,8 @@ export default function createReportDialogPrompt(uiDialogService) {
         noCloseButton: true,
         onClose: _handleClose,
         actions: [
-          { id: 'cancel', text: 'Cancel', type: 'primary' },
-          { id: 'save', text: 'Save', type: 'secondary' },
+          { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
+          { id: 'save', text: 'Save', type: ButtonEnums.type.primary },
         ],
         // TODO: Should be on button press...
         onSubmit: _handleFormSubmit,

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptBeginTracking.js

@@ -1,3 +1,5 @@
+import { ButtonEnums } from '@ohif/ui';
+
 const RESPONSE = {
   NO_NEVER: -1,
   CANCEL: 0,
@@ -31,19 +33,19 @@ function _askTrackMeasurements(uiViewportDialogService, viewportIndex) {
     const actions = [
       {
         id: 'prompt-begin-tracking-cancel',
-        type: 'cancel',
+        type: ButtonEnums.type.secondary,
         text: 'No',
         value: RESPONSE.CANCEL,
       },
       {
         id: 'prompt-begin-tracking-no-do-not-ask-again',
-        type: 'secondary',
+        type: ButtonEnums.type.secondary,
         text: 'No, do not ask again',
         value: RESPONSE.NO_NEVER,
       },
       {
         id: 'prompt-begin-tracking-yes',
-        type: 'primary',
+        type: ButtonEnums.type.primary,
         text: 'Yes',
         value: RESPONSE.SET_STUDY_AND_SERIES,
       },

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptHydrateStructuredReport.js

@@ -1,4 +1,5 @@
 import { hydrateStructuredReport } from '@ohif/extension-cornerstone-dicom-sr';
+import { ButtonEnums } from '@ohif/ui';
 
 const RESPONSE = {
   NO_NEVER: -1,
@@ -61,12 +62,12 @@ function _askTrackMeasurements(uiViewportDialogService, viewportIndex) {
       'Do you want to continue tracking measurements for this study?';
     const actions = [
       {
-        type: 'secondary',
+        type: ButtonEnums.type.secondary,
         text: 'No',
         value: RESPONSE.CANCEL,
       },
       {
-        type: 'primary',
+        type: ButtonEnums.type.primary,
         text: 'Yes',
         value: RESPONSE.HYDRATE_REPORT,
       },

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewSeries.js

@@ -1,3 +1,5 @@
+import { ButtonEnums } from '@ohif/ui';
+
 const RESPONSE = {
   NO_NEVER: -1,
   CANCEL: 0,
@@ -38,14 +40,18 @@ function _askShouldAddMeasurements(uiViewportDialogService, viewportIndex) {
     const message =
       'Do you want to add this measurement to the existing report?';
     const actions = [
-      { type: 'cancel', text: 'Cancel', value: RESPONSE.CANCEL },
       {
-        type: 'secondary',
+        type: ButtonEnums.type.secondary,
+        text: 'Cancel',
+        value: RESPONSE.CANCEL,
+      },
+      {
+        type: ButtonEnums.type.primary,
         text: 'Create new report',
         value: RESPONSE.CREATE_REPORT,
       },
       {
-        type: 'primary',
+        type: ButtonEnums.type.primary,
         text: 'Add to existing report',
         value: RESPONSE.ADD_SERIES,
       },

extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/ActionButtons.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 
-import { Button, ButtonGroup } from '@ohif/ui';
+import { Button, ButtonEnums } from '@ohif/ui';
 
 function ActionButtons({ onExportClick, onCreateReportClick, disabled }) {
   const { t } = useTranslation('MeasurementTable');
@@ -10,23 +10,18 @@ function ActionButtons({ onExportClick, onCreateReportClick, disabled }) {
   return (
     <React.Fragment>
       <Button
-        className="text-base px-2 py-2"
-        size="initial"
-        variant={disabled ? 'disabled' : 'outlined'}
-        color="black"
-        border="primaryActive"
         onClick={onExportClick}
         disabled={disabled}
+        type={ButtonEnums.type.secondary}
+        size={ButtonEnums.size.small}
       >
         {t('Export')}
       </Button>
       <Button
-        className="ml-2 px-2 text-base"
-        variant={disabled ? 'disabled' : 'outlined'}
-        size="initial"
-        color="black"
-        border="primaryActive"
+        className="ml-2"
         onClick={onCreateReportClick}
+        type={ButtonEnums.type.secondary}
+        size={ButtonEnums.size.small}
         disabled={disabled}
       >
         {t('Create Report')}

extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx

@@ -6,6 +6,7 @@ import {
   Dialog,
   Input,
   useViewportGrid,
+  ButtonEnums,
 } from '@ohif/ui';
 import { DicomMetadataStore, utils } from '@ohif/core';
 import { useDebounce } from '@hooks';
@@ -217,9 +218,8 @@ function PanelMeasurementTableTracking({ servicesManager, extensionManager }) {
           );
         },
         actions: [
-          // temp: swap button types until colors are updated
-          { id: 'cancel', text: 'Cancel', type: 'primary' },
-          { id: 'save', text: 'Save', type: 'secondary' },
+          { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
+          { id: 'save', text: 'Save', type: ButtonEnums.type.primary },
         ],
         onSubmit: onSubmitHandler,
       },

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx

@@ -6,6 +6,7 @@ import {
   useImageViewer,
   useViewportGrid,
   Dialog,
+  ButtonEnums,
 } from '@ohif/ui';
 import { useTrackedMeasurements } from '../../getContextModule';
 
@@ -507,11 +508,15 @@ function _mapDisplaySets(
                   </div>
                 ),
                 actions: [
-                  { id: 'cancel', text: 'Cancel', type: 'secondary' },
+                  {
+                    id: 'cancel',
+                    text: 'Cancel',
+                    type: ButtonEnums.type.secondary,
+                  },
                   {
                     id: 'yes',
                     text: 'Yes',
-                    type: 'primary',
+                    type: ButtonEnums.type.primary,
                     classes: ['reject-yes-button'],
                   },
                 ],

extensions/tmtv/src/Panels/PanelPetSUV.tsx

@@ -225,9 +225,7 @@ export default function PanelPetSUV({ servicesManager, commandsManager }) {
               value={metadata.SeriesTime || ''}
               onChange={() => {}}
             />
-            <Button color="primary" onClick={updateMetadata}>
-              Reload Data
-            </Button>
+            <Button onClick={updateMetadata}>Reload Data</Button>
           </div>
         </div>
       }

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/ExportReports.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonGroup } from '@ohif/ui';
+import { LegacyButton, ButtonGroup } from '@ohif/ui';
 import { useTranslation } from 'react-i18next';
 
 function ExportReports({ segmentations, tmtvValue, config, commandsManager }) {
@@ -9,8 +9,9 @@ function ExportReports({ segmentations, tmtvValue, config, commandsManager }) {
     <>
       {segmentations?.length ? (
         <div className="flex justify-center mt-4 space-x-2">
+          {/* TODO Revisit design of ButtonGroup later - for now use LegacyButton for its children.*/}
           <ButtonGroup color="black" size="inherit">
-            <Button
+            <LegacyButton
               className="px-2 py-2 text-base"
               disabled={tmtvValue === null}
               onClick={() => {
@@ -22,10 +23,10 @@ function ExportReports({ segmentations, tmtvValue, config, commandsManager }) {
               }}
             >
               {t('Export CSV')}
-            </Button>
+            </LegacyButton>
           </ButtonGroup>
           <ButtonGroup color="black" size="inherit">
-            <Button
+            <LegacyButton
               className="px-2 py-2 text-base"
               onClick={() => {
                 commandsManager.runCommand('createTMTVRTReport');
@@ -33,7 +34,7 @@ function ExportReports({ segmentations, tmtvValue, config, commandsManager }) {
               disabled={tmtvValue === null}
             >
               {t('Create RT Report')}
-            </Button>
+            </LegacyButton>
           </ButtonGroup>
         </div>
       ) : null}

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/PanelROIThresholdSegmentation.tsx

@@ -181,7 +181,6 @@ export default function PanelRoiThresholdSegmentation({
         <div className="overflow-x-hidden overflow-y-auto invisible-scrollbar">
           <div className="flex mx-4 my-4 mb-4 space-x-4">
             <Button
-              color="primary"
               onClick={() => {
                 setLabelmapLoading(true);
                 setTimeout(() => {
@@ -194,9 +193,7 @@ export default function PanelRoiThresholdSegmentation({
             >
               {labelmapLoading ? 'loading ...' : 'New Label'}
             </Button>
-            <Button color="primary" onClick={handleROIThresholding}>
-              Run
-            </Button>
+            <Button onClick={handleROIThresholding}>Run</Button>
           </div>
           <div
             className="flex items-center justify-around h-8 mb-2 border-t outline-none cursor-pointer select-none bg-secondary-dark first:border-0 border-secondary-light"

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/ROIThresholdConfiguration.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Label, Select, Button, ButtonGroup } from '@ohif/ui';
+import { Input, Label, Select, LegacyButton, ButtonGroup } from '@ohif/ui';
 import { useTranslation } from 'react-i18next';
 
 export const ROI_STAT = 'roi_stat';
@@ -38,8 +38,9 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
           />
         </div>
         <div className="w-1/2">
+          {/* TODO Revisit design of ButtonGroup later - for now use LegacyButton for its children.*/}
           <ButtonGroup>
-            <Button
+            <LegacyButton
               size="initial"
               className="px-2 py-2 text-base text-white"
               color="primaryLight"
@@ -47,8 +48,8 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
               onClick={() => runCommand('setStartSliceForROIThresholdTool')}
             >
               {t('Start')}
-            </Button>
-            <Button
+            </LegacyButton>
+            <LegacyButton
               size="initial"
               color="primaryLight"
               variant="outlined"
@@ -56,7 +57,7 @@ function ROIThresholdConfiguration({ config, dispatch, runCommand }) {
               onClick={() => runCommand('setEndSliceForROIThresholdTool')}
             >
               {t('End')}
-            </Button>
+            </LegacyButton>
           </ButtonGroup>
         </div>
       </div>

extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/segmentationEditHandler.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Input, Dialog } from '@ohif/ui';
+import { Input, Dialog, ButtonEnums } from '@ohif/ui';
 
 function segmentationItemEditHandler({ id, servicesManager }) {
   const { segmentationService, uiDialogService } = servicesManager.services;
@@ -44,23 +44,20 @@ function segmentationItemEditHandler({ id, servicesManager }) {
           }
         };
         return (
-          <div className="p-4 bg-primary-dark">
-            <Input
-              autoFocus
-              className="mt-2 bg-black border-primary-main"
-              type="text"
-              containerClassName="mr-2"
-              value={value.label}
-              onChange={onChangeHandler}
-              onKeyPress={onKeyPressHandler}
-            />
-          </div>
+          <Input
+            autoFocus
+            className="bg-black border-primary-main"
+            type="text"
+            containerClassName="mr-2"
+            value={value.label}
+            onChange={onChangeHandler}
+            onKeyPress={onKeyPressHandler}
+          />
         );
       },
       actions: [
-        // temp: swap button types until colors are updated
-        { id: 'cancel', text: 'Cancel', type: 'primary' },
-        { id: 'save', text: 'Save', type: 'secondary' },
+        { id: 'cancel', text: 'Cancel', type: ButtonEnums.type.secondary },
+        { id: 'save', text: 'Save', type: ButtonEnums.type.primary },
       ],
       onSubmit: onSubmitHandler,
     },