TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Joe Boccanfuso 2023-06-15 12:58:21 -04:00 committed by GitHub
parent 3dce70e624
commit cc73f15c8c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
47 changed files with 738 additions and 397 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
extensions/cornerstone-dicom-rt/src/utils/promptHydrateRT.ts
View File

@ -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,
},

6
extensions/cornerstone-dicom-seg/src/panels/callInputDialog.tsx
View File

@ -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 }) => {

11
extensions/cornerstone-dicom-seg/src/utils/promptHydrateSEG.ts
View File

@ -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,
},

13
extensions/cornerstone/src/components/DicomUpload/DicomUpload.tsx
View File

@ -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={() => {}}
>

8
extensions/cornerstone/src/components/DicomUpload/DicomUploadProgress.tsx
View File

@ -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>
</>

6
extensions/cornerstone/src/utils/callInputDialog.tsx
View File

@ -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 }) => {

14
extensions/default/src/Panels/ActionButtons.tsx
View File

@ -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>
);

5
extensions/default/src/Panels/DataSourceSelector.tsx
View File

@ -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: '/',

13
extensions/default/src/Panels/PanelMeasurementTable.tsx
View File

@ -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,
},

6
extensions/default/src/Panels/createReportDialogPrompt.tsx
View File

@ -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,

8
extensions/dicom-microscopy/src/utils/callInputDialog.tsx
View File

@ -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 }) => {

6
extensions/measurement-tracking/src/_shared/createReportDialogPrompt.tsx
View File

@ -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,

8
extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptBeginTracking.js
View File

@ -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,
},

5
extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptHydrateStructuredReport.js
View File

@ -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,
},

12
extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewSeries.js
View File

@ -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,
},

17
extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/ActionButtons.tsx
View File

@ -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')}

6
extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.tsx
View File

@ -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,
},

9
extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.tsx
View File

@ -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'],
},
],

4
extensions/tmtv/src/Panels/PanelPetSUV.tsx
View File

@ -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>
}

11
extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/ExportReports.tsx
View File

@ -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}

5
extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/PanelROIThresholdSegmentation.tsx
View File

@ -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"

11
extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/ROIThresholdConfiguration.tsx
View File

@ -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>

27
extensions/tmtv/src/Panels/PanelROIThresholdSegmentation/segmentationEditHandler.tsx
View File

@ -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,
},

8
platform/app/cypress/integration/measurement-tracking/OHIFContextMenuCustomization.spec.js
View File

@ -1,5 +1,5 @@
describe('OHIF Context Menu', function () {
beforeEach(function () {
describe('OHIF Context Menu', function() {
beforeEach(function() {
cy.checkStudyRouteInViewer(
'1.2.840.113619.2.5.1762583153.215519.978957063.78'
);
@ -10,10 +10,10 @@ describe('OHIF Context Menu', function () {
cy.resetViewport().wait(50);
});
it('checks context menu customization', function () {
it('checks context menu customization', function() {
// Add length measurement
cy.addLengthMeasurement();
cy.get('[data-cy="prompt-begin-tracking-yes"]').click();
cy.get('[data-cy="prompt-begin-tracking-yes-btn"]').click();
cy.get('[data-cy="measurement-item"]').click();
const [x1, y1] = [150, 100];

2
platform/app/cypress/integration/measurement-tracking/OHIFCornerstoneToolbar.spec.js
View File

@ -113,7 +113,7 @@ describe('OHIF Cornerstone Toolbar', () => {
cy.addLengthMeasurement();
cy.get('[data-cy="viewport-notification"]').should('exist');
cy.get('[data-cy="viewport-notification"]').should('be.visible');
cy.get('[data-cy="prompt-begin-tracking-yes"]').click();
cy.get('[data-cy="prompt-begin-tracking-yes-btn"]').click();
//Verify the measurement exists in the table
cy.get('@measurementsPanel').should('be.visible');

4
platform/app/cypress/integration/measurement-tracking/OHIFMeasurementPanel.spec.js
View File

@ -27,7 +27,7 @@ describe('OHIF Measurement Panel', function() {
cy.addLengthMeasurement();
cy.get('[data-cy="viewport-notification"]').should('exist');
cy.get('[data-cy="viewport-notification"]').should('be.visible');
cy.get('[data-cy="prompt-begin-tracking-yes"]').click();
cy.get('[data-cy="prompt-begin-tracking-yes-btn"]').click();
cy.get('[data-cy="measurement-item"]').click();
cy.get('[data-cy="measurement-item"]')
@ -46,7 +46,7 @@ describe('OHIF Measurement Panel', function() {
it('checks if image would jump when clicked on a measurement item', function() {
// Add length measurement
cy.addLengthMeasurement();
cy.get('[data-cy="prompt-begin-tracking-yes"]').click();
cy.get('[data-cy="prompt-begin-tracking-yes-btn"]').click();
cy.scrollToIndex(13);

9
platform/app/src/routes/WorkList/WorkList.tsx
View File

@ -15,7 +15,7 @@ import { utils, hotkeys, ServicesManager } from '@ohif/core';
import {
Icon,
StudyListExpandedRow,
Button,
LegacyButton,
EmptyStudies,
StudyListTable,
StudyListPagination,
@ -363,16 +363,17 @@ function WorkList({
''}?${query.toString()}`}
// to={`${mode.routeName}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
>
<Button
{/* TODO revisit the completely rounded style of buttons used for launching a mode from the worklist later - for now use LegacyButton*/}
<LegacyButton
rounded="full"
variant={isValidMode ? 'contained' : 'disabled'}
disabled={!isValidMode}
endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
className={classnames('font-medium ', { 'ml-2': !isFirst })}
className={classnames({ 'ml-2': !isFirst })}
onClick={() => {}}
>
{t(`Modes:${mode.displayName}`)}
</Button>
</LegacyButton>
</Link>
);
})}

7
platform/app/tailwind.config.js
View File

@ -74,9 +74,16 @@ module.exports = {
},
customblue: {
10: '#0A163F',
20: '#0B1F54',
30: '#09286e',
40: '#0E307F',
50: '#0F3A94',
80: '#1454D4',
100: '#c4fdff',
200: '#38daff',
300: '#1D204D',
400: '#90A0C1',
},
customgray: {

250
platform/ui/src/components/Button/Button.tsx
View File

@ -1,181 +1,89 @@
import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import * as ButtonEnums from './ButtonEnums';
const baseClasses =
'leading-none font-sans text-center justify-center items-center outline-none transition duration-300 ease-in-out focus:outline-none';
const sizeClasses = {
[ButtonEnums.size.small]: 'h-[26px] text-[13px]',
[ButtonEnums.size.medium]: 'h-[32px] text-[14px]',
};
const layoutClasses =
'box-content inline-flex flex-row items-center justify-center gap-[5px] justify center px-[10px] outline-none rounded';
const baseFontTextClasses =
'leading-[1.2] font-sans text-center whitespace-nowrap';
const fontTextClasses = {
[ButtonEnums.type.primary]: classnames(baseFontTextClasses, 'font-semibold'),
[ButtonEnums.type.secondary]: classnames(baseFontTextClasses, 'font-400'),
};
const baseEnabledEffectClasses =
'transition duration-300 ease-in-out focus:outline-none';
const enabledEffectClasses = {
[ButtonEnums.type.primary]: classnames(
baseEnabledEffectClasses,
'hover:bg-customblue-80 active:bg-customblue-40'
),
[ButtonEnums.type.secondary]: classnames(
baseEnabledEffectClasses,
'hover:bg-customblue-50 active:bg-customblue-20'
),
};
const baseEnabledClasses = 'text-white';
const enabledClasses = {
[ButtonEnums.type.primary]: classnames(
'bg-primary-main',
baseEnabledClasses,
enabledEffectClasses[ButtonEnums.type.primary]
),
[ButtonEnums.type.secondary]: classnames(
'bg-customblue-30',
baseEnabledClasses,
enabledEffectClasses[ButtonEnums.type.secondary]
),
};
const disabledClasses =
'bg-inputfield-placeholder text-common-light cursor-default';
const defaults = {
color: 'default',
disabled: false,
fullWidth: false,
rounded: 'medium',
border: 'none',
size: 'medium',
type: 'button',
variant: 'contained',
};
const roundedClasses = {
none: '',
small: 'rounded',
medium: 'rounded-md',
large: 'rounded-lg',
full: 'rounded-full',
};
const variants = {
text: {
default:
'text-primary-light hover:bg-primary-light hover:text-white active:opacity-80 focus:bg-primary-light focus:text-white',
primary:
'text-primary-main hover:bg-primary-main hover:text-white active:opacity-80 focus:bg-primary-main focus:text-white',
secondary:
'text-secondary-light hover:bg-secondary-light hover:text-white active:opacity-80 focus:bg-secondary-light focus:text-white',
white:
'text-white hover:bg-white hover:text-black active:opacity-80 focus:bg-white focus:text-black',
black:
'text-black hover:bg-black hover:text-white focus:bg-black focus:text-white active:opacity-80',
},
outlined: {
default:
'text-primary-light hover:bg-primary-light hover:text-black focus:text-black focus:bg-primary-light active:opacity-80',
primary:
'text-primary-main hover:opacity-80 active:opacity-100 focus:opacity-80',
secondary:
'text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
translucent:
'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
white:
'text-black hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
black:
'text-white hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
primaryActive:
'text-primary-active hover:opacity-80 active:opacity-100 focus:opacity-80',
primaryLight:
'border bg-transparent border-primary-main text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
},
contained: {
default: 'text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
primary: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
primaryDark:
'text-primary-active hover:opacity-80 active:opacity-100 focus:opacity-80',
secondary:
'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
white: 'text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
black: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
light:
'border text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
},
disabled: {
default: 'cursor-not-allowed opacity-50 text-black',
primary: 'cursor-not-allowed opacity-50 text-white',
secondary: 'cursor-not-allowed opacity-50 text-white',
white: 'cursor-not-allowed opacity-50 text-black',
black: 'cursor-not-allowed opacity-50 text-white',
light: 'cursor-not-allowed opacity-50 border text-black',
},
};
const defaultVariantBackGroundColor = {
text: {
default: '',
primary: '',
secondary: '',
white: '',
black: '',
},
outlined: {
default: 'bg-transparent',
primary: 'bg-transparent',
secondary: 'bg-transparent',
black: 'bg-black',
white: '',
},
contained: {
default: 'bg-primary-light',
primary: 'bg-primary-main',
primaryDark: 'bg-primary-dark',
secondary: 'bg-secondary-light',
white: 'bg-white',
black: 'bg-black',
light: 'bg-primary-light',
},
disabled: {
default: 'bg-primary-light',
primary: 'bg-primary-main',
secondary: 'bg-secondary-light',
white: 'bg-white',
black: 'bg-black',
light: 'bg-primary-light',
},
};
const _getVariantClass = (variant, color, bgColor = null) => {
const defaultBackgroundColor = defaultVariantBackGroundColor[variant][color];
if (!bgColor) {
bgColor = defaultBackgroundColor;
}
return `${variants[variant][color]} ${bgColor}`;
};
const borderClasses = {
none: '',
light: 'border border-primary-light',
primary: 'border border-primary-main',
primaryActive: 'border border-primary-active',
secondary: 'border border-secondary-light',
white: 'border border-white',
black: 'border border-black',
};
const sizeClasses = {
small: 'py-2 px-2 text-sm min-w-md',
medium: 'py-2 px-2 text-lg min-w-md',
large: 'py-2 px-6 text-xl min-w-md',
initial: '',
};
const fullWidthClasses = {
true: 'flex w-full',
false: 'inline-flex',
rounded: 'small',
size: ButtonEnums.size.medium,
type: ButtonEnums.type.primary,
};
const Button = ({
children,
variant = defaults.variant,
color = defaults.color,
border = defaults.border,
size = defaults.size,
rounded = defaults.rounded,
disabled = defaults.disabled,
type = defaults.type,
fullWidth = defaults.fullWidth,
bgColor = null,
startIcon: startIconProp,
endIcon: endIconProp,
name,
className,
onClick,
/** TODO: All possible props should be explicitly defined -- avoid spreading props */
...rest
}) => {
const startIcon = startIconProp && (
<div className="mr-2">
<>
{React.cloneElement(startIconProp, {
className: classnames('w-4 h-4 fill-current'),
})}
</div>
</>
);
const endIcon = endIconProp && (
<div className="ml-2">
<>
{React.cloneElement(endIconProp, {
className: classnames('w-4 h-4 fill-current'),
})}
</div>
</>
);
const buttonElement = useRef(null);
@ -187,12 +95,11 @@ const Button = ({
};
const finalClassName = classnames(
baseClasses,
_getVariantClass(variant, color, bgColor),
borderClasses[border],
roundedClasses[rounded],
layoutClasses,
fontTextClasses[type],
disabled ? disabledClasses : enabledClasses[type],
sizeClasses[size],
fullWidthClasses[fullWidth],
children ? 'min-w-[32px]' : '', // minimum width for buttons with text; icon only button does NOT get a minimum width
className
);
@ -202,9 +109,7 @@ const Button = ({
disabled={disabled}
ref={buttonElement}
onClick={handleOnClick}
type={type}
data-cy={`${name}-btn`}
{...rest}
>
{startIcon}
{children}
@ -214,10 +119,11 @@ const Button = ({
};
Button.defaultProps = {
color: defaults.color,
disabled: false,
children: '',
onClick: () => {},
type: defaults.type,
size: defaults.size,
};
Button.propTypes = {
@ -226,39 +132,11 @@ Button.propTypes = {
/** Callback to be called when the button is clicked */
onClick: PropTypes.func.isRequired,
/** Button size */
size: PropTypes.oneOf(['small', 'medium', 'large', 'initial', 'inherit']),
/** Button corner roundness */
rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
variant: PropTypes.oneOf(['text', 'outlined', 'contained', 'disabled']),
/* color prop must have all the possible keys of variants defined above */
color: PropTypes.oneOf([
'default',
'primary',
'primaryDark',
'primaryActive',
'secondary',
'white',
'black',
'inherit',
'light',
'translucent',
]),
border: PropTypes.oneOf([
'none',
'light',
'default',
'primary',
'primaryActive',
'secondary',
'white',
'black',
]),
/** Whether the button should have full width */
fullWidth: PropTypes.bool,
size: PropTypes.oneOf([ButtonEnums.size.medium, ButtonEnums.size.small]),
/** Whether the button should be disabled */
disabled: PropTypes.bool,
/** Button type */
type: PropTypes.string,
type: PropTypes.oneOf([ButtonEnums.type.primary, ButtonEnums.type.secondary]),
name: PropTypes.string,
/** Button start icon name - if any icon is specified */
startIcon: PropTypes.node,
@ -266,8 +144,6 @@ Button.propTypes = {
endIcon: PropTypes.node,
/** Additional TailwindCSS classnames */
className: PropTypes.string,
/** Background color for the button to override*/
bgColor: PropTypes.string,
};
export default Button;

10
platform/ui/src/components/Button/ButtonEnums.ts Normal file
View File

@ -0,0 +1,10 @@
enum type {
primary = 'primary',
secondary = 'secondary',
}
enum size {
medium = 'medium',
small = 'small',
}
export { type, size };

54
platform/ui/src/components/Button/__stories__/button.stories.mdx
View File

@ -1,4 +1,4 @@
import Button from '../Button';
import Button, {ButtonType, ButtonSize} from '../Button';
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import {
createComponentTemplate,
@ -24,7 +24,7 @@ export const buttonTemplate = createComponentTemplate(Button);
## Overview
You can use the button component to create a button. It can be used in different
ways, the default button is a simple button with a text.
ways, the default button is a simple button with text.
<Canvas>
<Story name="Overview" args={{ children: 'Button', color: 'default' }}>
@ -38,37 +38,29 @@ ways, the default button is a simple button with a text.
## Usage
### Variants
### Types
There can be different variants of buttons: `text`, `outlined`, `contained`, and
`disabled`.
There can be different types of buttons: `primary`, and `secondary`.
<Canvas>
<Story name="Variants">
<Story name="Types">
<div className="flex space-x-2">
<Button variant="text">Text Button</Button>
<Button variant="outlined">Outlined Button</Button>
<Button variant="contained">Contained Button</Button>
<Button variant="disabled">Disabled Button</Button>
<Button type={ButtonType.primary}>Primary Button</Button>
<Button type={ButtonType.secondary}>Secondary Button</Button>
</div>
</Story>
</Canvas>
### Colors
### Sizes
There are different colors for the button: `default`, `primary`, `secondary`,
`white`, `black`, `inherit`, `light`.
There are different sizes for the button: `small`, and `medium`. The size refers
to the button's height.
<Canvas>
<Story name="Colors">
<div className="flex space-x-2">
<Button color="default">Default Button</Button>
<Button color="primary">Primary Button</Button>
<Button color="secondary">Secondary Button</Button>
<Button color="white">White Button</Button>
<Button color="black">Black Button</Button>
<Button color="inherit">Inherit Button</Button>
<Button color="light">Light Button</Button>
<div className="flex items-center space-x-2">
<Button size={ButtonSize.small}>Small Button</Button>
<Button size={ButtonSize.medium}>Medium Button</Button>
</div>
</Story>
</Canvas>
@ -79,19 +71,19 @@ You can mix different props together to create a button.
<Canvas>
<Story name="Custom">
<Button color="secondary" variant="outlined">
Custom Button
<Button type={ButtonType.secondary} size={ButtonSize.small}>
Small, Secondary Button
</Button>
</Story>
</Canvas>
### Disabled
You can disable the button by setting the variant to `disabled`.
You can disable the button by setting the `disabled` property to true.
<Canvas>
<Story name="Disabled">
<Button variant="disabled">Disabled Button</Button>
<Button disabled={true}>Disabled Button</Button>
</Story>
</Canvas>
@ -159,18 +151,6 @@ End Icon is the same as start icon, but for the end of the button.
</Story>
</Canvas>
### Full width
You can make the button full width by setting the `fullWidth` prop to `true`.
<Canvas>
<Story name="Full Width">
<Button fullWidth color="secondary">
Full Width Button
</Button>
</Story>
</Canvas>
## Contribute
<Footer componentRelativePath="Button/__stories__/button.stories.mdx" />

3
platform/ui/src/components/Button/index.js
View File

@ -1,2 +1,5 @@
import Button from './Button';
import * as ButtonEnums from './ButtonEnums';
export { ButtonEnums };
export default Button;

11
platform/ui/src/components/Dialog/Footer.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import Button from '../Button';
import Button, { ButtonEnums } from '../Button';
const Footer = ({ actions, className, onSubmit, value }) => {
const flex = 'flex items-center justify-end';
@ -12,7 +12,6 @@ const Footer = ({ actions, className, onSubmit, value }) => {
<div className={classNames(flex, padding, className)}>
{actions.map((action, index) => {
const isFirst = index === 0;
const isPrimary = action.type === 'primary';
const onClickHandler = event => onSubmit({ action, value, event });
@ -20,9 +19,8 @@ const Footer = ({ actions, className, onSubmit, value }) => {
<Button
key={index}
className={classNames({ 'ml-2': !isFirst }, action.classes)}
color={isPrimary ? 'primary' : undefined}
type={action.type}
onClick={onClickHandler}
style={{ transition: 'all .15s ease', height: 34 }}
>
{action.text}
</Button>
@ -42,7 +40,10 @@ Footer.propTypes = {
id: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
value: PropTypes.any,
type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
type: PropTypes.oneOf([
ButtonEnums.type.primary,
ButtonEnums.type.secondary,
]).isRequired,
classes: PropTypes.arrayOf(PropTypes.string),
})
).isRequired,

273
platform/ui/src/components/LegacyButton/LegacyButton.tsx Normal file
View File

@ -0,0 +1,273 @@
import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
const baseClasses =
'leading-none font-sans text-center justify-center items-center outline-none transition duration-300 ease-in-out focus:outline-none';
const defaults = {
color: 'default',
disabled: false,
fullWidth: false,
rounded: 'medium',
border: 'none',
size: 'medium',
type: 'button',
variant: 'contained',
};
const roundedClasses = {
none: '',
small: 'rounded',
medium: 'rounded-md',
large: 'rounded-lg',
full: 'rounded-full',
};
const variants = {
text: {
default:
'text-primary-light hover:bg-primary-light hover:text-white active:opacity-80 focus:bg-primary-light focus:text-white',
primary:
'text-primary-main hover:bg-primary-main hover:text-white active:opacity-80 focus:bg-primary-main focus:text-white',
secondary:
'text-secondary-light hover:bg-secondary-light hover:text-white active:opacity-80 focus:bg-secondary-light focus:text-white',
white:
'text-white hover:bg-white hover:text-black active:opacity-80 focus:bg-white focus:text-black',
black:
'text-black hover:bg-black hover:text-white focus:bg-black focus:text-white active:opacity-80',
},
outlined: {
default:
'text-primary-light hover:bg-primary-light hover:text-black focus:text-black focus:bg-primary-light active:opacity-80',
primary:
'text-primary-main hover:opacity-80 active:opacity-100 focus:opacity-80',
secondary:
'text-secondary-light hover:opacity-80 active:opacity-100 focus:opacity-80',
translucent:
'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
white:
'text-black hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
black:
'text-white hover:bg-primary-main focus:bg-primary-main hover:border-black focus:border-black',
primaryActive:
'text-primary-active hover:opacity-80 active:opacity-100 focus:opacity-80',
primaryLight:
'border bg-transparent border-primary-main text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
},
contained: {
default: 'text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
primary: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
primaryDark:
'text-primary-active hover:opacity-80 active:opacity-100 focus:opacity-80',
secondary:
'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
white: 'text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
black: 'text-white hover:opacity-80 active:opacity-100 focus:opacity-80',
light:
'border text-black hover:opacity-80 active:opacity-100 focus:opacity-80',
},
disabled: {
default: 'cursor-not-allowed opacity-50 text-black',
primary: 'cursor-not-allowed opacity-50 text-white',
secondary: 'cursor-not-allowed opacity-50 text-white',
white: 'cursor-not-allowed opacity-50 text-black',
black: 'cursor-not-allowed opacity-50 text-white',
light: 'cursor-not-allowed opacity-50 border text-black',
},
};
const defaultVariantBackGroundColor = {
text: {
default: '',
primary: '',
secondary: '',
white: '',
black: '',
},
outlined: {
default: 'bg-transparent',
primary: 'bg-transparent',
secondary: 'bg-transparent',
black: 'bg-black',
white: '',
},
contained: {
default: 'bg-primary-light',
primary: 'bg-primary-main',
primaryDark: 'bg-primary-dark',
secondary: 'bg-secondary-light',
white: 'bg-white',
black: 'bg-black',
light: 'bg-primary-light',
},
disabled: {
default: 'bg-primary-light',
primary: 'bg-primary-main',
secondary: 'bg-secondary-light',
white: 'bg-white',
black: 'bg-black',
light: 'bg-primary-light',
},
};
const _getVariantClass = (variant, color, bgColor = null) => {
const defaultBackgroundColor = defaultVariantBackGroundColor[variant][color];
if (!bgColor) {
bgColor = defaultBackgroundColor;
}
return `${variants[variant][color]} ${bgColor}`;
};
const borderClasses = {
none: '',
light: 'border border-primary-light',
primary: 'border border-primary-main',
primaryActive: 'border border-primary-active',
secondary: 'border border-secondary-light',
white: 'border border-white',
black: 'border border-black',
};
const sizeClasses = {
small: 'py-2 px-2 text-sm min-w-md',
medium: 'py-2 px-2 text-lg min-w-md',
large: 'py-2 px-6 text-xl min-w-md',
initial: '',
};
const fullWidthClasses = {
true: 'flex w-full',
false: 'inline-flex',
};
const LegacyButton = ({
children,
variant = defaults.variant,
color = defaults.color,
border = defaults.border,
size = defaults.size,
rounded = defaults.rounded,
disabled = defaults.disabled,
type = defaults.type,
fullWidth = defaults.fullWidth,
bgColor = null,
startIcon: startIconProp,
endIcon: endIconProp,
name,
className,
onClick,
/** TODO: All possible props should be explicitly defined -- avoid spreading props */
...rest
}) => {
const startIcon = startIconProp && (
<div className="mr-2">
{React.cloneElement(startIconProp, {
className: classnames('w-4 h-4 fill-current'),
})}
</div>
);
const endIcon = endIconProp && (
<div className="ml-2">
{React.cloneElement(endIconProp, {
className: classnames('w-4 h-4 fill-current'),
})}
</div>
);
const buttonElement = useRef(null);
const handleOnClick = e => {
buttonElement.current.blur();
if (!disabled) {
onClick(e);
}
};
const finalClassName = classnames(
baseClasses,
_getVariantClass(variant, color, bgColor),
borderClasses[border],
roundedClasses[rounded],
sizeClasses[size],
fullWidthClasses[fullWidth],
className
);
return (
<button
className={finalClassName}
disabled={disabled}
ref={buttonElement}
onClick={handleOnClick}
type={type}
data-cy={`${name}-btn`}
{...rest}
>
{startIcon}
{children}
{endIcon}
</button>
);
};
LegacyButton.defaultProps = {
color: defaults.color,
disabled: false,
children: '',
onClick: () => {},
};
LegacyButton.propTypes = {
/** What is inside the button, can be text or react component */
children: PropTypes.node,
/** Callback to be called when the button is clicked */
onClick: PropTypes.func.isRequired,
/** Button size */
size: PropTypes.oneOf(['small', 'medium', 'large', 'initial', 'inherit']),
/** Button corner roundness */
rounded: PropTypes.oneOf(['none', 'small', 'medium', 'large', 'full']),
variant: PropTypes.oneOf(['text', 'outlined', 'contained', 'disabled']),
/* color prop must have all the possible keys of variants defined above */
color: PropTypes.oneOf([
'default',
'primary',
'primaryDark',
'primaryActive',
'secondary',
'white',
'black',
'inherit',
'light',
'translucent',
]),
border: PropTypes.oneOf([
'none',
'light',
'default',
'primary',
'primaryActive',
'secondary',
'white',
'black',
]),
/** Whether the button should have full width */
fullWidth: PropTypes.bool,
/** Whether the button should be disabled */
disabled: PropTypes.bool,
/** Button type */
type: PropTypes.string,
name: PropTypes.string,
/** Button start icon name - if any icon is specified */
startIcon: PropTypes.node,
/** Button end icon name - if any icon is specified */
endIcon: PropTypes.node,
/** Additional TailwindCSS classnames */
className: PropTypes.string,
/** Background color for the button to override*/
bgColor: PropTypes.string,
};
export default LegacyButton;

176
platform/ui/src/components/LegacyButton/__stories__/legacyButton.stories.mdx Normal file
View File

@ -0,0 +1,176 @@
import LegacyButton from '../LegacyButton';
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
import {
createComponentTemplate,
createStoryMetaSettings,
} from '../../../storybook/functions/create-component-story';
export const argTypes = {
component: LegacyButton,
title: 'Components/LegacyButton',
};
<Meta title="Components/LegacyButton" component={LegacyButton} />
export const buttonTemplate = createComponentTemplate(LegacyButton);
<Heading title="LegacyButton" componentRelativePath="LegacyButton/LegacyButton.tsx" />
- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Contribute](#contribute)
## Overview
You can use the legacy button component to create a button. It can be used in different
ways, the default button is a simple button with a text.
<Canvas>
<Story name="Overview" args={{ children: 'LegacyButton', color: 'default' }}>
{buttonTemplate.bind({})}
</Story>
</Canvas>
## Props
<ArgsTable of={LegacyButton} />
## Usage
### Variants
There can be different variants of buttons: `text`, `outlined`, `contained`, and
`disabled`.
<Canvas>
<Story name="Variants">
<div className="flex space-x-2">
<LegacyButton variant="text">Text LegacyButton</LegacyButton>
<LegacyButton variant="outlined">Outlined LegacyButton</LegacyButton>
<LegacyButton variant="contained">Contained LegacyButton</LegacyButton>
<LegacyButton variant="disabled">Disabled LegacyButton</LegacyButton>
</div>
</Story>
</Canvas>
### Colors
There are different colors for the legacy button: `default`, `primary`, `secondary`,
`white`, `black`, `inherit`, `light`.
<Canvas>
<Story name="Colors">
<div className="flex space-x-2">
<LegacyButton color="default">Default LegacyButton</LegacyButton>
<LegacyButton color="primary">Primary LegacyButton</LegacyButton>
<LegacyButton color="secondary">Secondary LegacyButton</LegacyButton>
<LegacyButton color="white">White LegacyButton</LegacyButton>
<LegacyButton color="black">Black LegacyButton</LegacyButton>
<LegacyButton color="inherit">Inherit LegacyButton</LegacyButton>
<LegacyButton color="light">Light LegacyButton</LegacyButton>
</div>
</Story>
</Canvas>
### Mixing props
You can mix different props together to create a legacy button.
<Canvas>
<Story name="Custom">
<LegacyButton color="secondary" variant="outlined">
Custom LegacyButton
</LegacyButton>
</Story>
</Canvas>
### Disabled
You can disable the legacy button by setting the variant to `disabled`.
<Canvas>
<Story name="Disabled">
<LegacyButton variant="disabled">Disabled LegacyButton</LegacyButton>
</Story>
</Canvas>
### Start/End Icons
You can add an icon to the start of the legacy button. It accepts an icon component.
<Canvas>
<Story name="Start Icon">
{() => {
// svg icon for github
const Github = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="feather feather-github"
>
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
);
};
return <LegacyButton startIcon={<Github />}>Start Icon LegacyButton</LegacyButton>;
}}
</Story>
</Canvas>
End Icon is the same as start icon, but for the end of the legacy button.
<Canvas>
<Story name="End Icon">
{() => {
// svg icon for github
const Github = () => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="feather feather-github"
>
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
);
};
return (
<LegacyButton startIcon={<Github />} endIcon={<Github />}>
Start and End Icon LegacyButton
</LegacyButton>
);
}}
</Story>
</Canvas>
### Full width
You can make the legacy button full width by setting the `fullWidth` prop to `true`.
<Canvas>
<Story name="Full Width">
<LegacyButton fullWidth color="secondary">
Full Width LegacyButton
</LegacyButton>
</Story>
</Canvas>
## Contribute
<Footer componentRelativePath="LegacyButton/__stories__/legacyButton.stories.mdx" />

2
platform/ui/src/components/LegacyButton/index.js Normal file
View File

@ -0,0 +1,2 @@
import LegacyButton from './LegacyButton';
export default LegacyButton;

11
platform/ui/src/components/LegacyViewportActionBar/LegacyViewportActionBar.tsx
View File

@ -6,7 +6,7 @@ import { StringNumber } from '../../types';
import LegacyPatientInfo from '../LegacyPatientInfo';
import Icon from '../Icon';
import ButtonGroup from '../ButtonGroup';
import Button from '../Button';
import LegacyButton from '../LegacyButton';
import LegacyCinePlayer from '../LegacyCinePlayer';
const LegacyViewportActionBar = ({
@ -104,23 +104,24 @@ const LegacyViewportActionBar = ({
</div>
{showNavArrows && !showCine && (
<div className="mt-2" style={{ pointerEvents: 'all' }}>
{/* TODO Revisit design of ButtonGroup later - for now use LegacyButton for its children.*/}
<ButtonGroup>
<Button
<LegacyButton
size="initial"
className="px-2 py-1 bg-black"
border="light"
onClick={() => onArrowsClick('left')}
>
<Icon name="chevron-left" className="w-4 text-white" />
</Button>
<Button
</LegacyButton>
<LegacyButton
size="initial"
border="light"
className="px-2 py-1 bg-black"
onClick={() => onArrowsClick('right')}
>
<Icon name="chevron-right" className="w-4 text-white" />
</Button>
</LegacyButton>
</ButtonGroup>
</div>
)}

27
platform/ui/src/components/Notification/Notification.tsx
View File

@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import Button from '../Button';
import Button, { ButtonEnums } from '../Button';
import Icon from '../Icon';
const Notification = ({
@ -42,7 +42,7 @@ const Notification = ({
color: 'text-yellow-500',
},
info: {
icon: 'info',
icon: 'notifications-info',
color: 'text-primary-main',
},
success: {
@ -65,24 +65,23 @@ const Notification = ({
return (
<div
ref={notificationRef}
className="flex flex-col p-2 mx-2 mt-2 rounded bg-common-bright"
className="flex flex-col p-2 mx-2 mt-2 border-2 rounded-md border-customblue-10 bg-customblue-400"
data-cy={id}
>
<div className="flex grow">
<Icon name={icon} className={classnames('w-5', color)} />
<span className="ml-2 text-base text-black">{message}</span>
<div className="flex items-center grow">
<Icon name={icon} className={classnames('w-6 h-6', color)} />
<span className="ml-2 text-[13px] text-black">{message}</span>
</div>
<div className="flex justify-end mt-2">
<div className="flex flex-wrap gap-2 justify-end mt-2">
{actions.map((action, index) => {
const isFirst = index === 0;
const isPrimary = action.type === 'primary';
return (
<Button
data-cy={action.id}
name={action.id}
key={index}
className={classnames({ 'ml-2': !isFirst })}
color={isPrimary ? 'primary' : undefined}
type={action.type}
size={action.size || ButtonEnums.size.small}
onClick={() => {
onSubmit(action.value);
}}
@ -108,7 +107,11 @@ Notification.propTypes = {
PropTypes.shape({
text: PropTypes.string.isRequired,
value: PropTypes.any.isRequired,
type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
type: PropTypes.oneOf([
ButtonEnums.type.primary,
ButtonEnums.type.secondary,
]).isRequired,
size: PropTypes.oneOf([ButtonEnums.size.small, ButtonEnums.size.medium]),
})
).isRequired,
onSubmit: PropTypes.func.isRequired,

7
platform/ui/src/components/SidePanel/SidePanel.tsx
View File

@ -13,7 +13,7 @@ import { Swiper, SwiperSlide } from 'swiper/react';
import { PanelService, ServicesManager, Types } from '@ohif/core';
import Button from '../Button';
import LegacyButton from '../LegacyButton';
import Icon from '../Icon';
import IconButton from '../IconButton';
import Tooltip from '../Tooltip';
@ -234,7 +234,8 @@ const SidePanel = ({
}}
data-cy={`side-panel-header-${side}`}
>
<Button
{/* TODO This should be redesigned to not be a button. */}
<LegacyButton
variant="text"
color="inherit"
border="none"
@ -254,7 +255,7 @@ const SidePanel = ({
<span className="text-primary-active">
{tabs.length === 1 && (t(tabs[activeTabIndex].label) as string)}
</span>
</Button>
</LegacyButton>
</div>
{tabs.length > 1 &&
_getMoreThanOneTabLayout(

7
platform/ui/src/components/StudyBrowser/StudyBrowser.tsx
View File

@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
import StudyItem from '../StudyItem';
import ButtonGroup from '../ButtonGroup';
import Button from '../Button';
import LegacyButton from '../LegacyButton';
import ThumbnailList from '../ThumbnailList';
import { StringNumber } from '../../types';
@ -81,6 +81,7 @@ const StudyBrowser = ({
className="flex flex-row items-center justify-center h-16 p-4 border-b w-100 border-secondary-light bg-primary-dark"
data-cy={'studyBrowser-panel'}
>
{/* TODO Revisit design of ButtonGroup later - for now use LegacyButton for its children.*/}
<ButtonGroup variant="outlined" color="secondary" splitBorder={false}>
{tabs.map(tab => {
const { name, label, studies } = tab;
@ -95,7 +96,7 @@ const StudyBrowser = ({
};
const color = classStudyBrowser[`${isActive}`];
return (
<Button
<LegacyButton
key={name}
className={'text-white text-base p-2 min-w-18'}
size="initial"
@ -107,7 +108,7 @@ const StudyBrowser = ({
disabled={isDisabled}
>
{t(label)}
</Button>
</LegacyButton>
);
})}
</ButtonGroup>

7
platform/ui/src/components/StudyListFilter/StudyListFilter.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import Button from '../Button';
import LegacyButton from '../LegacyButton';
import Icon from '../Icon';
import Typography from '../Typography';
import InputGroup from '../InputGroup';
@ -48,8 +48,9 @@ const StudyListFilter = ({
)}
</div>
<div className="flex flex-row">
{/* TODO revisit the completely rounded style of button used for clearing the study list filter - for now use LegacyButton*/}
{isFiltering && (
<Button
<LegacyButton
rounded="full"
variant="outlined"
color="primaryActive"
@ -59,7 +60,7 @@ const StudyListFilter = ({
onClick={clearFilters}
>
{t('ClearFilters')}
</Button>
</LegacyButton>
)}
<Typography
variant="h4"

15
platform/ui/src/components/StudyListPagination/StudyListPagination.tsx
View File

@ -2,7 +2,7 @@ import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next';
import Button from '../Button';
import LegacyButton from '../LegacyButton';
import ButtonGroup from '../ButtonGroup';
import Typography from '../Typography';
import Select from '../Select';
@ -59,8 +59,9 @@ const StudyListPagination = ({
<Typography className="opacity-60 mr-4 text-base">
{t('Page')} {currentPage}
</Typography>
{/* TODO Revisit design of ButtonGroup later - for now use LegacyButton for its children.*/}
<ButtonGroup>
<Button
<LegacyButton
size="initial"
className="px-4 py-2 text-base"
color="translucent"
@ -69,8 +70,8 @@ const StudyListPagination = ({
onClick={() => navigateToPage(1)}
>
{`<<`}
</Button>
<Button
</LegacyButton>
<LegacyButton
size="initial"
className="py-2 px-2 text-base"
color="translucent"
@ -79,8 +80,8 @@ const StudyListPagination = ({
onClick={() => navigateToPage(currentPage - 1)}
>
{t('Previous')}
</Button>
<Button
</LegacyButton>
<LegacyButton
size="initial"
className="py-2 px-4 text-base"
color="translucent"
@ -89,7 +90,7 @@ const StudyListPagination = ({
onClick={() => navigateToPage(currentPage + 1)}
>
{t('Next')}
</Button>
</LegacyButton>
</ButtonGroup>
</div>
</div>

9
platform/ui/src/components/UserPreferences/UserPreferences.tsx
View File

@ -6,6 +6,7 @@ import Select from '../Select';
import Typography from '../Typography';
import Button from '../Button';
import HotkeysPreferences from '../HotkeysPreferences';
import { ButtonEnums } from '../Button';
const UserPreferences = ({
availableLanguages,
@ -104,22 +105,18 @@ const UserPreferences = ({
</Section>
<div className="flex flex-row justify-between">
<Button
variant="outlined"
border="light"
type={ButtonEnums.type.secondary}
onClick={onResetHandler}
disabled={disabled}
>
{t('Reset to Defaults')}
</Button>
<div className="flex flex-row">
<Button variant="outlined" border="light" onClick={onCancelHandler}>
<Button type={ButtonEnums.type.secondary} onClick={onCancelHandler}>
{t('Cancel')}
</Button>
<Button
variant="contained"
disabled={state.isDisabled}
color="light"
border="light"
className="ml-2"
onClick={onSubmitHandler}
>

14
platform/ui/src/components/ViewportDownloadForm/ViewportDownloadForm.tsx
View File

@ -14,7 +14,7 @@ import IconButton from '../IconButton';
import Icon from '../Icon';
import Select from '../Select';
import InputLabelWrapper from '../InputLabelWrapper';
import Button from '../Button';
import Button, { ButtonEnums } from '../Button';
const FILE_TYPE_OPTIONS = [
{
@ -401,13 +401,9 @@ const ViewportDownloadForm = ({
<div className="flex justify-end mt-4">
<Button
data-cy="cancel-btn"
variant="outlined"
size="initial"
color="black"
border="secondary"
name="cancel"
type={ButtonEnums.type.secondary}
onClick={onClose}
className="p-2"
>
{t('Cancel')}
</Button>
@ -415,8 +411,8 @@ const ViewportDownloadForm = ({
className="ml-2"
disabled={hasError}
onClick={downloadImage}
color="primary"
data-cy="download-btn"
type={ButtonEnums.type.primary}
name={'download'}
>
{t('Download')}
</Button>

4
platform/ui/src/components/index.js
View File

@ -1,6 +1,7 @@
import AboutModal from './AboutModal';
import Button from './Button';
import ButtonGroup from './ButtonGroup';
import { ButtonEnums } from './Button';
import ContextMenu from './ContextMenu';
import CinePlayer from './CinePlayer';
import DateRange from './DateRange';
@ -18,6 +19,7 @@ import InputMultiSelect from './InputMultiSelect';
import InputText from './InputText';
import Label from './Label';
import LayoutSelector from './LayoutSelector';
import LegacyButton from './LegacyButton';
import LegacyCinePlayer from './LegacyCinePlayer';
import LegacyViewportActionBar from './LegacyViewportActionBar';
import MeasurementTable from './MeasurementTable';
@ -80,6 +82,7 @@ export {
HotkeysPreferences,
Button,
ButtonGroup,
ButtonEnums,
CheckBox,
CinePlayer,
ContextMenu,
@ -103,6 +106,7 @@ export {
ImageScrollbar,
Label,
LayoutSelector,
LegacyButton,
LegacyCinePlayer,
LegacyViewportActionBar,
LoadingIndicatorProgress,

2
platform/ui/src/index.js
View File

@ -42,6 +42,7 @@ export {
HotkeysPreferences,
Button,
ButtonGroup,
ButtonEnums,
ContextMenu,
CinePlayer,
DateRange,
@ -62,6 +63,7 @@ export {
InputText,
Label,
LayoutSelector,
LegacyButton,
LegacyCinePlayer,
LegacyViewportActionBar,
LoadingIndicatorProgress,

7
platform/ui/tailwind.config.js
View File

@ -63,9 +63,16 @@ module.exports = {
},
customblue: {
10: '#0A163F',
20: '#0B1F54',
30: '#09286e',
40: '#0E307F',
50: '#0F3A94',
80: '#1454D4',
100: '#c4fdff',
200: '#38daff',
300: '#1D204D',
400: '#90A0C1',
},
customgray: {