From 39c45b82623d0a10e184c87d085709efb5811bdc Mon Sep 17 00:00:00 2001 From: koji Date: Mon, 12 Aug 2024 13:01:52 +0900 Subject: [PATCH] refactor(components, app): move MenuList folder to components directory move MenuList folder to components directory close AUTH-629 --- app/src/atoms/MenuList/DropdownMenu.tsx | 10 ++-- .../molecules/InstrumentCard/MenuOverlay.tsx | 4 +- app/src/molecules/InstrumentCard/index.tsx | 8 +-- .../HistoricalProtocolRunOverflowMenu.tsx | 22 ++++---- .../PipetteCard/PipetteOverflowMenu.tsx | 10 ++-- .../organisms/Devices/PipetteCard/index.tsx | 6 +-- .../organisms/Devices/RobotOverflowMenu.tsx | 12 ++--- .../Devices/RobotOverviewOverflowMenu.tsx | 6 +-- .../LabwareCard/CustomLabwareOverflowMenu.tsx | 8 +-- .../ModuleCard/ModuleOverflowMenu.tsx | 10 ++-- app/src/organisms/ModuleCard/hooks.tsx | 3 +- app/src/organisms/ModuleCard/index.tsx | 6 +-- .../organisms/Navigation/NavigationMenu.tsx | 4 +- .../ProtocolLabwareDetails.tsx | 6 +-- .../ProtocolsLanding/ProtocolList.tsx | 4 +- .../ProtocolsLanding/ProtocolOverflowMenu.tsx | 12 ++--- .../ModuleCalibrationOverflowMenu.tsx | 14 +++--- .../CalibrationDetails/OverflowMenu.tsx | 12 ++--- .../RobotSettingsGripperCalibration.tsx | 10 ++-- .../InstrumentDetailOverflowMenu.tsx | 6 +-- app/src/pages/Labware/index.tsx | 4 +- .../ProtocolDashboard/LongPressModal.tsx | 11 ++-- .../QuickTransferDashboard/LongPressModal.tsx | 11 ++-- app/tsconfig.json | 2 +- .../src/atoms/MenuList/MenuItem.stories.tsx | 4 +- .../src/atoms/MenuList/MenuItem.tsx | 12 ++--- .../src/atoms/MenuList/MenuList.stories.tsx | 2 +- .../atoms/MenuList/OverflowBtn.stories.tsx | 2 +- .../src/atoms/MenuList/OverflowBtn.tsx | 5 +- .../MenuList/__tests__/MenuItem.test.tsx | 50 +++++++++++++++++++ .../MenuList/__tests__/MenuList.test.tsx | 3 +- .../MenuList/__tests__/OverflowBtn.test.tsx | 4 +- .../src/atoms/MenuList/index.tsx | 14 +++--- components/src/atoms/index.ts | 3 ++ components/src/hooks/index.ts | 1 + .../src/hooks/useMenuHandleClickOutside.tsx | 3 +- 36 files changed, 187 insertions(+), 117 deletions(-) rename {app => components}/src/atoms/MenuList/MenuItem.stories.tsx (82%) rename {app => components}/src/atoms/MenuList/MenuItem.tsx (86%) rename {app => components}/src/atoms/MenuList/MenuList.stories.tsx (95%) rename {app => components}/src/atoms/MenuList/OverflowBtn.stories.tsx (91%) rename {app => components}/src/atoms/MenuList/OverflowBtn.tsx (91%) create mode 100644 components/src/atoms/MenuList/__tests__/MenuItem.test.tsx rename {app => components}/src/atoms/MenuList/__tests__/MenuList.test.tsx (93%) rename {app => components}/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx (87%) rename {app => components}/src/atoms/MenuList/index.tsx (83%) rename app/src/atoms/MenuList/hooks.tsx => components/src/hooks/useMenuHandleClickOutside.tsx (92%) diff --git a/app/src/atoms/MenuList/DropdownMenu.tsx b/app/src/atoms/MenuList/DropdownMenu.tsx index ebc25f5e7a4..6982dce40e1 100644 --- a/app/src/atoms/MenuList/DropdownMenu.tsx +++ b/app/src/atoms/MenuList/DropdownMenu.tsx @@ -9,17 +9,17 @@ import { Flex, Icon, JUSTIFY_SPACE_BETWEEN, + LegacyStyledText, + MenuItem, + OVERFLOW_AUTO, POSITION_ABSOLUTE, + POSITION_RELATIVE, SPACING, - LegacyStyledText, TYPOGRAPHY, - useOnClickOutside, - POSITION_RELATIVE, useHoverTooltip, - OVERFLOW_AUTO, + useOnClickOutside, } from '@opentrons/components' import { Tooltip } from '../Tooltip' -import { MenuItem } from './MenuItem' /** this is the max height to display 10 items */ const MAX_HEIGHT = 316 diff --git a/app/src/molecules/InstrumentCard/MenuOverlay.tsx b/app/src/molecules/InstrumentCard/MenuOverlay.tsx index 8578523f552..9ad0c35fd51 100644 --- a/app/src/molecules/InstrumentCard/MenuOverlay.tsx +++ b/app/src/molecules/InstrumentCard/MenuOverlay.tsx @@ -1,14 +1,14 @@ import * as React from 'react' import { - Flex, BORDERS, COLORS, DIRECTION_COLUMN, + Flex, + MenuItem, POSITION_ABSOLUTE, } from '@opentrons/components' -import { MenuItem } from '../../atoms/MenuList/MenuItem' import { Divider } from '../../atoms/structure' import type { StyleProps } from '@opentrons/components' diff --git a/app/src/molecules/InstrumentCard/index.tsx b/app/src/molecules/InstrumentCard/index.tsx index 841132b1094..e2a434850d2 100644 --- a/app/src/molecules/InstrumentCard/index.tsx +++ b/app/src/molecules/InstrumentCard/index.tsx @@ -1,8 +1,8 @@ import * as React from 'react' import { - ALIGN_FLEX_START, ALIGN_CENTER, + ALIGN_FLEX_START, BORDERS, Box, COLORS, @@ -10,16 +10,16 @@ import { Flex, InstrumentDiagram, JUSTIFY_CENTER, + LegacyStyledText, + OverflowBtn, POSITION_ABSOLUTE, POSITION_RELATIVE, SPACING, - LegacyStyledText, TYPOGRAPHY, + useMenuHandleClickOutside, } from '@opentrons/components' import flexGripper from '../../assets/images/flex_gripper.png' -import { useMenuHandleClickOutside } from '../../atoms/MenuList/hooks' -import { OverflowBtn } from '../../atoms/MenuList/OverflowBtn' import { MenuOverlay } from './MenuOverlay' import type { InstrumentDiagramProps, StyleProps } from '@opentrons/components' diff --git a/app/src/organisms/Devices/HistoricalProtocolRunOverflowMenu.tsx b/app/src/organisms/Devices/HistoricalProtocolRunOverflowMenu.tsx index b72b70c8bcf..d7bfc61d6d9 100644 --- a/app/src/organisms/Devices/HistoricalProtocolRunOverflowMenu.tsx +++ b/app/src/organisms/Devices/HistoricalProtocolRunOverflowMenu.tsx @@ -4,27 +4,27 @@ import { useTranslation } from 'react-i18next' import { NavLink, useNavigate } from 'react-router-dom' import { + ALIGN_CENTER, + ALIGN_FLEX_END, + Box, + COLORS, + DIRECTION_COLUMN, Flex, Icon, + MenuItem, + OverflowBtn, POSITION_ABSOLUTE, - ALIGN_FLEX_END, - DIRECTION_COLUMN, POSITION_RELATIVE, - COLORS, - useOnClickOutside, - useHoverTooltip, - Box, - SPACING, SIZE_1, - ALIGN_CENTER, + SPACING, + useHoverTooltip, + useMenuHandleClickOutside, + useOnClickOutside, } from '@opentrons/components' import { useDeleteRunMutation } from '@opentrons/react-api-client' import { Divider } from '../../atoms/structure' import { Tooltip } from '../../atoms/Tooltip' -import { useMenuHandleClickOutside } from '../../atoms/MenuList/hooks' -import { OverflowBtn } from '../../atoms/MenuList/OverflowBtn' -import { MenuItem } from '../../atoms/MenuList/MenuItem' import { useRunControls } from '../../organisms/RunTimeControl/hooks' import { useTrackEvent, diff --git a/app/src/organisms/Devices/PipetteCard/PipetteOverflowMenu.tsx b/app/src/organisms/Devices/PipetteCard/PipetteOverflowMenu.tsx index 02f2c1ec8ae..8795924accb 100644 --- a/app/src/organisms/Devices/PipetteCard/PipetteOverflowMenu.tsx +++ b/app/src/organisms/Devices/PipetteCard/PipetteOverflowMenu.tsx @@ -2,16 +2,16 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' import { - Flex, - POSITION_RELATIVE, - POSITION_ABSOLUTE, BORDERS, COLORS, - SPACING, DIRECTION_COLUMN, + Flex, + MenuItem, + POSITION_ABSOLUTE, + POSITION_RELATIVE, + SPACING, } from '@opentrons/components' -import { MenuItem } from '../../../atoms/MenuList/MenuItem' import { Divider } from '../../../atoms/structure' import type { PipetteModelSpecs } from '@opentrons/shared-data' diff --git a/app/src/organisms/Devices/PipetteCard/index.tsx b/app/src/organisms/Devices/PipetteCard/index.tsx index b5a267dac7a..182eb5339b8 100644 --- a/app/src/organisms/Devices/PipetteCard/index.tsx +++ b/app/src/organisms/Devices/PipetteCard/index.tsx @@ -11,17 +11,17 @@ import { DIRECTION_ROW, Flex, InstrumentDiagram, - SPACING, LegacyStyledText, + OverflowBtn, + SPACING, TYPOGRAPHY, + useMenuHandleClickOutside, useOnClickOutside, } from '@opentrons/components' import { OT2_ROBOT_TYPE } from '@opentrons/shared-data' import { usePipetteSettingsQuery } from '@opentrons/react-api-client' import { LEFT } from '../../../redux/pipettes' -import { OverflowBtn } from '../../../atoms/MenuList/OverflowBtn' -import { useMenuHandleClickOutside } from '../../../atoms/MenuList/hooks' import { ChangePipette } from '../../ChangePipette' import { PipetteOverflowMenu } from './PipetteOverflowMenu' import { PipetteSettingsSlideout } from './PipetteSettingsSlideout' diff --git a/app/src/organisms/Devices/RobotOverflowMenu.tsx b/app/src/organisms/Devices/RobotOverflowMenu.tsx index dd9f0e3ad3e..1d5ae5f5e6a 100644 --- a/app/src/organisms/Devices/RobotOverflowMenu.tsx +++ b/app/src/organisms/Devices/RobotOverflowMenu.tsx @@ -5,28 +5,28 @@ import { useDispatch, useSelector } from 'react-redux' import { Link } from 'react-router-dom' import { - Flex, + ALIGN_FLEX_END, BORDERS, COLORS, - POSITION_ABSOLUTE, DIRECTION_COLUMN, + Flex, + MenuItem, + OverflowBtn, + POSITION_ABSOLUTE, POSITION_RELATIVE, - ALIGN_FLEX_END, TYPOGRAPHY, useHoverTooltip, + useMenuHandleClickOutside, } from '@opentrons/components' import { CONNECTABLE, removeRobot } from '../../redux/discovery' import { getRobotUpdateDisplayInfo } from '../../redux/robot-update' -import { OverflowBtn } from '../../atoms/MenuList/OverflowBtn' import { Tooltip } from '../../atoms/Tooltip' import { Divider } from '../../atoms/structure' -import { MenuItem } from '../../atoms/MenuList/MenuItem' import { getTopPortalEl } from '../../App/portal' import { ChooseProtocolSlideout } from '../ChooseProtocolSlideout' import { useCurrentRunId } from '../../resources/runs' import { ConnectionTroubleshootingModal } from './ConnectionTroubleshootingModal' -import { useMenuHandleClickOutside } from '../../atoms/MenuList/hooks' import { useIsRobotBusy } from './hooks' import type { StyleProps } from '@opentrons/components' diff --git a/app/src/organisms/Devices/RobotOverviewOverflowMenu.tsx b/app/src/organisms/Devices/RobotOverviewOverflowMenu.tsx index cb4346d0f75..936ea796b59 100644 --- a/app/src/organisms/Devices/RobotOverviewOverflowMenu.tsx +++ b/app/src/organisms/Devices/RobotOverviewOverflowMenu.tsx @@ -10,16 +10,16 @@ import { COLORS, DIRECTION_COLUMN, Flex, + MenuItem, + OverflowBtn, POSITION_ABSOLUTE, POSITION_RELATIVE, useHoverTooltip, + useMenuHandleClickOutside, useMountEffect, } from '@opentrons/components' import { getTopPortalEl } from '../../App/portal' -import { useMenuHandleClickOutside } from '../../atoms/MenuList/hooks' -import { MenuItem } from '../../atoms/MenuList/MenuItem' -import { OverflowBtn } from '../../atoms/MenuList/OverflowBtn' import { Divider } from '../../atoms/structure' import { Tooltip } from '../../atoms/Tooltip' import { ChooseProtocolSlideout } from '../../organisms/ChooseProtocolSlideout' diff --git a/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx b/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx index ef0a8c0cbf4..5c80bdd2ec6 100644 --- a/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx +++ b/app/src/organisms/LabwareCard/CustomLabwareOverflowMenu.tsx @@ -16,18 +16,18 @@ import { Flex, Icon, JUSTIFY_FLEX_END, + LegacyStyledText, + MenuItem, + Modal, + OverflowBtn, POSITION_ABSOLUTE, POSITION_RELATIVE, SPACING, - Modal, - LegacyStyledText, TYPOGRAPHY, useConditionalConfirm, useOnClickOutside, } from '@opentrons/components' -import { OverflowBtn } from '../../atoms/MenuList/OverflowBtn' -import { MenuItem } from '../../atoms/MenuList/MenuItem' import { Divider } from '../../atoms/structure' import { getTopPortalEl } from '../../App/portal' import { diff --git a/app/src/organisms/ModuleCard/ModuleOverflowMenu.tsx b/app/src/organisms/ModuleCard/ModuleOverflowMenu.tsx index 872927bf170..fe6ce8bfe06 100644 --- a/app/src/organisms/ModuleCard/ModuleOverflowMenu.tsx +++ b/app/src/organisms/ModuleCard/ModuleOverflowMenu.tsx @@ -1,7 +1,13 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' -import { Flex, POSITION_RELATIVE, useHoverTooltip } from '@opentrons/components' +import { + Flex, + MenuItem, + MenuList, + POSITION_RELATIVE, + useHoverTooltip, +} from '@opentrons/components' import { HEATERSHAKER_MODULE_TYPE, @@ -9,9 +15,7 @@ import { TEMPERATURE_MODULE_TYPE, THERMOCYCLER_MODULE_TYPE, } from '@opentrons/shared-data' -import { MenuList } from '../../atoms/MenuList' import { Tooltip } from '../../atoms/Tooltip' -import { MenuItem } from '../../atoms/MenuList/MenuItem' import { useCurrentRunId } from '../../resources/runs' import { useIsFlex, diff --git a/app/src/organisms/ModuleCard/hooks.tsx b/app/src/organisms/ModuleCard/hooks.tsx index 88f5ae69a02..fd6731c65ef 100644 --- a/app/src/organisms/ModuleCard/hooks.tsx +++ b/app/src/organisms/ModuleCard/hooks.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { useCreateLiveCommandMutation } from '@opentrons/react-api-client' import { useTranslation } from 'react-i18next' -import { useHoverTooltip } from '@opentrons/components' +import { MenuItem, useHoverTooltip } from '@opentrons/components' import { HEATERSHAKER_MODULE_TYPE, MAGNETIC_MODULE_TYPE, @@ -9,7 +9,6 @@ import { THERMOCYCLER_MODULE_TYPE, } from '@opentrons/shared-data' import { useMostRecentCompletedAnalysis } from '../LabwarePositionCheck/useMostRecentCompletedAnalysis' -import { MenuItem } from '../../atoms/MenuList/MenuItem' import { Tooltip } from '../../atoms/Tooltip' import { useCurrentRunId } from '../../resources/runs' diff --git a/app/src/organisms/ModuleCard/index.tsx b/app/src/organisms/ModuleCard/index.tsx index c3d78ddf730..93a0afe4f55 100644 --- a/app/src/organisms/ModuleCard/index.tsx +++ b/app/src/organisms/ModuleCard/index.tsx @@ -12,11 +12,13 @@ import { DIRECTION_ROW, Flex, Icon, + LegacyStyledText, ModuleIcon, + OverflowBtn, SPACING, - LegacyStyledText, TYPOGRAPHY, useHoverTooltip, + useMenuHandleClickOutside, useOnClickOutside, } from '@opentrons/components' import { @@ -30,7 +32,6 @@ import { } from '@opentrons/shared-data' import { RUN_STATUS_FINISHING, RUN_STATUS_RUNNING } from '@opentrons/api-client' -import { OverflowBtn } from '../../atoms/MenuList/OverflowBtn' import { getRequestById, PENDING, @@ -42,7 +43,6 @@ import { import { Banner } from '../../atoms/Banner' import { UpdateBanner } from '../../molecules/UpdateBanner' import { SUCCESS_TOAST } from '../../atoms/Toast' -import { useMenuHandleClickOutside } from '../../atoms/MenuList/hooks' import { Tooltip } from '../../atoms/Tooltip' import { useChainLiveCommands } from '../../resources/runs' import { useCurrentRunStatus } from '../RunTimeControl/hooks' diff --git a/app/src/organisms/Navigation/NavigationMenu.tsx b/app/src/organisms/Navigation/NavigationMenu.tsx index 3b4f10752e8..f48bb3c15bb 100644 --- a/app/src/organisms/Navigation/NavigationMenu.tsx +++ b/app/src/organisms/Navigation/NavigationMenu.tsx @@ -10,12 +10,12 @@ import { Flex, Icon, LegacyStyledText, + MenuItem, + MenuList, SPACING, TYPOGRAPHY, } from '@opentrons/components' -import { MenuList } from '../../atoms/MenuList' -import { MenuItem } from '../../atoms/MenuList/MenuItem' import { home, ROBOT } from '../../redux/robot-controls' import { useLights } from '../Devices/hooks' import { getTopPortalEl } from '../../App/portal' diff --git a/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx b/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx index 25e820e76da..a74d33cf76e 100644 --- a/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx +++ b/app/src/organisms/ProtocolDetails/ProtocolLabwareDetails.tsx @@ -9,18 +9,18 @@ import { Flex, Icon, InfoScreen, + MenuItem, + OverflowBtn, POSITION_ABSOLUTE, POSITION_RELATIVE, SPACING, StyledText, + useMenuHandleClickOutside, } from '@opentrons/components' import { getLabwareDefURI } from '@opentrons/shared-data' import { Divider } from '../../atoms/structure' -import { OverflowBtn } from '../../atoms/MenuList/OverflowBtn' -import { MenuItem } from '../../atoms/MenuList/MenuItem' import { getTopPortalEl } from '../../App/portal' import { LabwareDetails } from '../LabwareDetails' -import { useMenuHandleClickOutside } from '../../atoms/MenuList/hooks' import type { LoadLabwareRunTimeCommand } from '@opentrons/shared-data' import type { LabwareDefAndDate } from '../../pages/Labware/hooks' diff --git a/app/src/organisms/ProtocolsLanding/ProtocolList.tsx b/app/src/organisms/ProtocolsLanding/ProtocolList.tsx index 84f498332d2..74cf536b60c 100644 --- a/app/src/organisms/ProtocolsLanding/ProtocolList.tsx +++ b/app/src/organisms/ProtocolsLanding/ProtocolList.tsx @@ -13,11 +13,12 @@ import { Flex, Icon, JUSTIFY_SPACE_BETWEEN, + LegacyStyledText, + MenuItem, Overlay, POSITION_ABSOLUTE, SecondaryButton, SPACING, - LegacyStyledText, TYPOGRAPHY, } from '@opentrons/components' @@ -32,7 +33,6 @@ import { SendProtocolToFlexSlideout } from '../SendProtocolToFlexSlideout' import { ProtocolUploadInput } from './ProtocolUploadInput' import { ProtocolCard } from './ProtocolCard' import { EmptyStateLinks } from './EmptyStateLinks' -import { MenuItem } from '../../atoms/MenuList/MenuItem' import type { StoredProtocolData } from '../../redux/protocol-storage' import type { ProtocolSort } from './hooks' diff --git a/app/src/organisms/ProtocolsLanding/ProtocolOverflowMenu.tsx b/app/src/organisms/ProtocolsLanding/ProtocolOverflowMenu.tsx index 9412939d23f..a38ae589e0f 100644 --- a/app/src/organisms/ProtocolsLanding/ProtocolOverflowMenu.tsx +++ b/app/src/organisms/ProtocolsLanding/ProtocolOverflowMenu.tsx @@ -6,21 +6,21 @@ import { useDispatch } from 'react-redux' import { useNavigate } from 'react-router-dom' import { - Flex, + ALIGN_FLEX_END, BORDERS, COLORS, - POSITION_ABSOLUTE, DIRECTION_COLUMN, + Flex, + MenuItem, + OverflowBtn, + POSITION_ABSOLUTE, POSITION_RELATIVE, - ALIGN_FLEX_END, useConditionalConfirm, + useMenuHandleClickOutside, } from '@opentrons/components' import { FLEX_DISPLAY_NAME, FLEX_ROBOT_TYPE } from '@opentrons/shared-data' import { getTopPortalEl } from '../../App/portal' -import { OverflowBtn } from '../../atoms/MenuList/OverflowBtn' -import { MenuItem } from '../../atoms/MenuList/MenuItem' -import { useMenuHandleClickOutside } from '../../atoms/MenuList/hooks' import { useTrackEvent, ANALYTICS_PROTOCOL_PROCEED_TO_RUN, diff --git a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationOverflowMenu.tsx b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationOverflowMenu.tsx index 4a19f4305ff..b1f1ec75027 100644 --- a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationOverflowMenu.tsx +++ b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/ModuleCalibrationOverflowMenu.tsx @@ -3,21 +3,21 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' import { - Flex, + ALIGN_FLEX_END, COLORS, - POSITION_ABSOLUTE, DIRECTION_COLUMN, + Flex, + MenuItem, + OverflowBtn, + POSITION_ABSOLUTE, POSITION_RELATIVE, - ALIGN_FLEX_END, - useOnClickOutside, useHoverTooltip, + useMenuHandleClickOutside, + useOnClickOutside, } from '@opentrons/components' import { Tooltip } from '../../../atoms/Tooltip' -import { OverflowBtn } from '../../../atoms/MenuList/OverflowBtn' -import { MenuItem } from '../../../atoms/MenuList/MenuItem' import { useChainLiveCommands } from '../../../resources/runs' -import { useMenuHandleClickOutside } from '../../../atoms/MenuList/hooks' import { useRunStatuses } from '../../Devices/hooks' import { getModulePrepCommands } from '../../Devices/getModulePrepCommands' import { ModuleWizardFlows } from '../../ModuleWizardFlows' diff --git a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/OverflowMenu.tsx b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/OverflowMenu.tsx index d6048011a57..ec3d28a2140 100644 --- a/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/OverflowMenu.tsx +++ b/app/src/organisms/RobotSettingsCalibration/CalibrationDetails/OverflowMenu.tsx @@ -4,13 +4,16 @@ import { saveAs } from 'file-saver' import { css } from 'styled-components' import { - Flex, + ALIGN_FLEX_END, BORDERS, COLORS, - POSITION_ABSOLUTE, DIRECTION_COLUMN, + Flex, + MenuItem, + OverflowBtn, + POSITION_ABSOLUTE, POSITION_RELATIVE, - ALIGN_FLEX_END, + useMenuHandleClickOutside, useOnClickOutside, } from '@opentrons/components' import { isFlexPipette, SINGLE_MOUNT_PIPETTES } from '@opentrons/shared-data' @@ -21,9 +24,6 @@ import { } from '@opentrons/react-api-client' import { Divider } from '../../../atoms/structure' -import { OverflowBtn } from '../../../atoms/MenuList/OverflowBtn' -import { MenuItem } from '../../../atoms/MenuList/MenuItem' -import { useMenuHandleClickOutside } from '../../../atoms/MenuList/hooks' import { useTrackEvent, ANALYTICS_CALIBRATION_DATA_DOWNLOADED, diff --git a/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx b/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx index 1c1c6fcb4a1..99c2a85dcb6 100644 --- a/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx +++ b/app/src/organisms/RobotSettingsCalibration/RobotSettingsGripperCalibration.tsx @@ -1,6 +1,7 @@ import * as React from 'react' import { useTranslation } from 'react-i18next' import styled, { css } from 'styled-components' + import { ALIGN_CENTER, ALIGN_FLEX_END, @@ -8,16 +9,17 @@ import { COLORS, DIRECTION_COLUMN, Flex, + LegacyStyledText, + MenuItem, + OverflowBtn, POSITION_ABSOLUTE, POSITION_RELATIVE, SPACING, - LegacyStyledText, TYPOGRAPHY, + useMenuHandleClickOutside, useOnClickOutside, } from '@opentrons/components' -import { useMenuHandleClickOutside } from '../../atoms/MenuList/hooks' -import { OverflowBtn } from '../../atoms/MenuList/OverflowBtn' -import { MenuItem } from '../../atoms/MenuList/MenuItem' + import { GripperWizardFlows } from '../../organisms/GripperWizardFlows' import { formatLastCalibrated } from './CalibrationDetails/utils' import { useIsEstopNotDisengaged } from '../../resources/devices/hooks/useIsEstopNotDisengaged' diff --git a/app/src/pages/InstrumentDetail/InstrumentDetailOverflowMenu.tsx b/app/src/pages/InstrumentDetail/InstrumentDetailOverflowMenu.tsx index 8d0541e041f..494e0f3d18c 100644 --- a/app/src/pages/InstrumentDetail/InstrumentDetailOverflowMenu.tsx +++ b/app/src/pages/InstrumentDetail/InstrumentDetailOverflowMenu.tsx @@ -6,8 +6,10 @@ import { COLORS, Flex, Icon, - SPACING, LegacyStyledText, + MenuItem, + MenuList, + SPACING, TYPOGRAPHY, } from '@opentrons/components' import { @@ -18,8 +20,6 @@ import { } from '@opentrons/shared-data' import { ApiHostProvider } from '@opentrons/react-api-client' -import { MenuList } from '../../atoms/MenuList' -import { MenuItem } from '../../atoms/MenuList/MenuItem' import { PipetteWizardFlows } from '../../organisms/PipetteWizardFlows' import { GripperWizardFlows } from '../../organisms/GripperWizardFlows' import { diff --git a/app/src/pages/Labware/index.tsx b/app/src/pages/Labware/index.tsx index c017e6fdead..842d4d853e3 100644 --- a/app/src/pages/Labware/index.tsx +++ b/app/src/pages/Labware/index.tsx @@ -15,18 +15,18 @@ import { Flex, Icon, JUSTIFY_SPACE_BETWEEN, + LegacyStyledText, Link, + MenuItem, POSITION_ABSOLUTE, PrimaryButton, SecondaryButton, SPACING, - LegacyStyledText, TYPOGRAPHY, useOnClickOutside, } from '@opentrons/components' import { LabwareCreator } from '@opentrons/labware-library' import { ERROR_TOAST, SUCCESS_TOAST } from '../../atoms/Toast' -import { MenuItem } from '../../atoms/MenuList/MenuItem' import { useTrackEvent, ANALYTICS_OPEN_LABWARE_CREATOR_FROM_BOTTOM_OF_LABWARE_LIBRARY_LIST, diff --git a/app/src/pages/ProtocolDashboard/LongPressModal.tsx b/app/src/pages/ProtocolDashboard/LongPressModal.tsx index 8a64bd5db09..5b098a1beb9 100644 --- a/app/src/pages/ProtocolDashboard/LongPressModal.tsx +++ b/app/src/pages/ProtocolDashboard/LongPressModal.tsx @@ -2,12 +2,17 @@ import * as React from 'react' import { useDispatch, useSelector } from 'react-redux' import { useNavigate } from 'react-router-dom' import { useTranslation } from 'react-i18next' -import { Flex, Icon, SPACING, LegacyStyledText } from '@opentrons/components' +import { + Flex, + Icon, + LegacyStyledText, + MenuItem, + MenuList, + SPACING, +} from '@opentrons/components' import { useCreateRunMutation } from '@opentrons/react-api-client' import { MAXIMUM_PINNED_PROTOCOLS } from '../../App/constants' -import { MenuList } from '../../atoms/MenuList' -import { MenuItem } from '../../atoms/MenuList/MenuItem' import { SmallModalChildren } from '../../molecules/OddModal' import { useToaster } from '../../organisms/ToasterOven' import { getPinnedProtocolIds, updateConfigValue } from '../../redux/config' diff --git a/app/src/pages/QuickTransferDashboard/LongPressModal.tsx b/app/src/pages/QuickTransferDashboard/LongPressModal.tsx index 5490cd9e1de..ac45a2cf386 100644 --- a/app/src/pages/QuickTransferDashboard/LongPressModal.tsx +++ b/app/src/pages/QuickTransferDashboard/LongPressModal.tsx @@ -2,12 +2,17 @@ import * as React from 'react' import { useDispatch, useSelector } from 'react-redux' import { useNavigate } from 'react-router-dom' import { useTranslation } from 'react-i18next' -import { Flex, Icon, SPACING, LegacyStyledText } from '@opentrons/components' +import { + Flex, + Icon, + LegacyStyledText, + MenuItem, + MenuList, + SPACING, +} from '@opentrons/components' import { useCreateRunMutation } from '@opentrons/react-api-client' import { MAXIMUM_PINNED_PROTOCOLS } from '../../App/constants' -import { MenuList } from '../../atoms/MenuList' -import { MenuItem } from '../../atoms/MenuList/MenuItem' import { SmallModalChildren } from '../../molecules/OddModal' import { useToaster } from '../../organisms/ToasterOven' import { diff --git a/app/tsconfig.json b/app/tsconfig.json index 1eb90375651..2eeac4d318a 100644 --- a/app/tsconfig.json +++ b/app/tsconfig.json @@ -27,7 +27,7 @@ }, { "path": "../labware-library" - }, + } ], "compilerOptions": { "composite": true, diff --git a/app/src/atoms/MenuList/MenuItem.stories.tsx b/components/src/atoms/MenuList/MenuItem.stories.tsx similarity index 82% rename from app/src/atoms/MenuList/MenuItem.stories.tsx rename to components/src/atoms/MenuList/MenuItem.stories.tsx index d8ccee0d128..9cd281da965 100644 --- a/app/src/atoms/MenuList/MenuItem.stories.tsx +++ b/components/src/atoms/MenuList/MenuItem.stories.tsx @@ -1,10 +1,10 @@ -import { VIEWPORT } from '@opentrons/components' +import { VIEWPORT } from '../../ui-style-constants' import { MenuItem as MenuItemComponent } from './MenuItem' import type { Meta, StoryObj } from '@storybook/react' const meta: Meta = { - title: 'App/Atoms/MenuItem', + title: 'Library/Atoms/MenuItem', component: MenuItemComponent, parameters: VIEWPORT.touchScreenViewport, } diff --git a/app/src/atoms/MenuList/MenuItem.tsx b/components/src/atoms/MenuList/MenuItem.tsx similarity index 86% rename from app/src/atoms/MenuList/MenuItem.tsx rename to components/src/atoms/MenuList/MenuItem.tsx index b1a63aaec09..c42fd087551 100644 --- a/app/src/atoms/MenuList/MenuItem.tsx +++ b/components/src/atoms/MenuList/MenuItem.tsx @@ -1,12 +1,8 @@ import styled from 'styled-components' -import { - SPACING, - COLORS, - TYPOGRAPHY, - ALIGN_CENTER, - RESPONSIVENESS, -} from '@opentrons/components' -import type { StyleProps } from '@opentrons/components' +import { COLORS } from '../../helix-design-system' +import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants' +import { ALIGN_CENTER } from '../../styles' +import type { StyleProps } from '../../primitives' interface ButtonProps extends StyleProps { /** optional isAlert boolean to turn the background red, only seen in ODD */ diff --git a/app/src/atoms/MenuList/MenuList.stories.tsx b/components/src/atoms/MenuList/MenuList.stories.tsx similarity index 95% rename from app/src/atoms/MenuList/MenuList.stories.tsx rename to components/src/atoms/MenuList/MenuList.stories.tsx index 1fa576a631f..18af71f0160 100644 --- a/app/src/atoms/MenuList/MenuList.stories.tsx +++ b/components/src/atoms/MenuList/MenuList.stories.tsx @@ -8,7 +8,7 @@ import type { Meta, StoryObj } from '@storybook/react' const menuBtn = 'example menu btn' const meta: Meta = { - title: 'App/Atoms/MenuList', + title: 'Library/Atoms/MenuList', component: MenuListComponent, args: { onClick: action('clicked'), diff --git a/app/src/atoms/MenuList/OverflowBtn.stories.tsx b/components/src/atoms/MenuList/OverflowBtn.stories.tsx similarity index 91% rename from app/src/atoms/MenuList/OverflowBtn.stories.tsx rename to components/src/atoms/MenuList/OverflowBtn.stories.tsx index 59920dda78f..8397162cb3b 100644 --- a/app/src/atoms/MenuList/OverflowBtn.stories.tsx +++ b/components/src/atoms/MenuList/OverflowBtn.stories.tsx @@ -3,7 +3,7 @@ import { OverflowBtn as OverflowBtnComponent } from './OverflowBtn' import type { Meta, StoryObj } from '@storybook/react' const meta: Meta = { - title: 'App/Atoms/OverflowBtn', + title: 'Library/Atoms/OverflowBtn', component: OverflowBtnComponent, } export default meta diff --git a/app/src/atoms/MenuList/OverflowBtn.tsx b/components/src/atoms/MenuList/OverflowBtn.tsx similarity index 91% rename from app/src/atoms/MenuList/OverflowBtn.tsx rename to components/src/atoms/MenuList/OverflowBtn.tsx index 538e717e20e..86e9c5c683f 100644 --- a/app/src/atoms/MenuList/OverflowBtn.tsx +++ b/components/src/atoms/MenuList/OverflowBtn.tsx @@ -1,6 +1,9 @@ import * as React from 'react' import { css } from 'styled-components' -import { Btn, BORDERS, COLORS, SPACING } from '@opentrons/components' + +import { Btn } from '../../primitives' +import { BORDERS, COLORS } from '../../helix-design-system' +import { SPACING } from '../../ui-style-constants' export const OverflowBtn: ( props: React.ComponentProps, diff --git a/components/src/atoms/MenuList/__tests__/MenuItem.test.tsx b/components/src/atoms/MenuList/__tests__/MenuItem.test.tsx new file mode 100644 index 00000000000..87bfd3c50b1 --- /dev/null +++ b/components/src/atoms/MenuList/__tests__/MenuItem.test.tsx @@ -0,0 +1,50 @@ +import * as React from 'react' +import { describe, it, expect, beforeEach } from 'vitest' +import { screen } from '@testing-library/react' + +import { renderWithProviders } from '../../../testing/utils' +import { COLORS } from '../../../helix-design-system' +import { SPACING, TYPOGRAPHY } from '../../../ui-style-constants' + +import { MenuItem } from '../MenuItem' + +const render = (props: React.ComponentProps) => { + return renderWithProviders()[0] +} + +describe('MenuItem', () => { + let props: React.ComponentProps + + beforeEach(() => { + props = { + children: 'mockMenuItem', + isAlert: false, + } + }) + + it('render button with styles', () => { + render(props) + const menuItem = screen.getByText('mockMenuItem') + expect(menuItem).toHaveStyle(`background-color: ${COLORS.transparent}`) + expect(menuItem).toHaveStyle(`color: ${COLORS.black90}`) + expect(menuItem) + .toHaveStyle(`padding: ${SPACING.spacing8} ${SPACING.spacing12} ${SPACING.spacing8} + ${SPACING.spacing12}`) + expect(menuItem).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`) + }) + + it('render button with styles disabled', () => { + props = { + ...props, + disabled: true, + } + render(props) + const menuItem = screen.getByText('mockMenuItem') + expect(menuItem).toHaveStyle(`background-color: ${COLORS.transparent}`) + expect(menuItem).toHaveStyle(`color: ${COLORS.grey40}`) + expect(menuItem) + .toHaveStyle(`padding: ${SPACING.spacing8} ${SPACING.spacing12} ${SPACING.spacing8} + ${SPACING.spacing12}`) + expect(menuItem).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`) + }) +}) diff --git a/app/src/atoms/MenuList/__tests__/MenuList.test.tsx b/components/src/atoms/MenuList/__tests__/MenuList.test.tsx similarity index 93% rename from app/src/atoms/MenuList/__tests__/MenuList.test.tsx rename to components/src/atoms/MenuList/__tests__/MenuList.test.tsx index 76667e54e2e..3df44913f42 100644 --- a/app/src/atoms/MenuList/__tests__/MenuList.test.tsx +++ b/components/src/atoms/MenuList/__tests__/MenuList.test.tsx @@ -1,7 +1,8 @@ import * as React from 'react' import { describe, it, expect, vi, beforeEach } from 'vitest' import { fireEvent, screen } from '@testing-library/react' -import { renderWithProviders } from '../../../__testing-utils__' + +import { renderWithProviders } from '../../../testing/utils' import { MenuList } from '..' const render = (props: React.ComponentProps) => { diff --git a/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx b/components/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx similarity index 87% rename from app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx rename to components/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx index 4f6da887657..a5b7fab1473 100644 --- a/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx +++ b/components/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx @@ -1,9 +1,9 @@ import * as React from 'react' import { vi, it, expect, describe } from 'vitest' import { fireEvent, screen } from '@testing-library/react' -import { COLORS } from '@opentrons/components' -import { renderWithProviders } from '../../../__testing-utils__' +import { COLORS } from '../../../helix-design-system' +import { renderWithProviders } from '../../../testing/utils' import { OverflowBtn } from '../OverflowBtn' const render = (props: React.ComponentProps) => { diff --git a/app/src/atoms/MenuList/index.tsx b/components/src/atoms/MenuList/index.tsx similarity index 83% rename from app/src/atoms/MenuList/index.tsx rename to components/src/atoms/MenuList/index.tsx index 45e6438fac2..4896d64c43d 100644 --- a/app/src/atoms/MenuList/index.tsx +++ b/components/src/atoms/MenuList/index.tsx @@ -1,14 +1,14 @@ import * as React from 'react' + +import { BORDERS, COLORS } from '../../helix-design-system' import { - COLORS, - POSITION_ABSOLUTE, DIRECTION_COLUMN, - Flex, - SPACING, - BORDERS, JUSTIFY_CENTER, - ModalShell, -} from '@opentrons/components' + POSITION_ABSOLUTE, +} from '../../styles' +import { Flex } from '../../primitives' +import { SPACING } from '../../ui-style-constants' +import { ModalShell } from '../../modals' interface MenuListProps { children: React.ReactNode diff --git a/components/src/atoms/index.ts b/components/src/atoms/index.ts index ee324d2e07e..9b89ccb604a 100644 --- a/components/src/atoms/index.ts +++ b/components/src/atoms/index.ts @@ -3,6 +3,9 @@ export * from './Checkbox' export * from './CheckboxField' export * from './Chip' export * from './ListItem' +export * from './MenuList' +export * from './MenuList/MenuItem' +export * from './MenuList/OverflowBtn' export * from './StepMeter' export * from './StepMeter' export * from './StyledText' diff --git a/components/src/hooks/index.ts b/components/src/hooks/index.ts index 8808efac6b5..6ae0015d1e0 100644 --- a/components/src/hooks/index.ts +++ b/components/src/hooks/index.ts @@ -12,3 +12,4 @@ export * from './useSelectDeckLocation' export * from './useSwipe' export * from './useTimeout' export * from './useToggle' +export * from './useMenuHandleClickOutside' diff --git a/app/src/atoms/MenuList/hooks.tsx b/components/src/hooks/useMenuHandleClickOutside.tsx similarity index 92% rename from app/src/atoms/MenuList/hooks.tsx rename to components/src/hooks/useMenuHandleClickOutside.tsx index dde7ef99bf3..f3e567a25f6 100644 --- a/app/src/atoms/MenuList/hooks.tsx +++ b/components/src/hooks/useMenuHandleClickOutside.tsx @@ -1,5 +1,6 @@ import * as React from 'react' -import { COLORS, Overlay } from '@opentrons/components' +import { COLORS } from '../helix-design-system' +import { Overlay } from '../modals' interface MenuHandleClickOutside { menuOverlay: JSX.Element