diff --git a/components/src/atoms/MenuList/MenuItem.tsx b/components/src/atoms/MenuList/MenuItem.tsx index cd34c7c7f44..94857fc56dd 100644 --- a/components/src/atoms/MenuList/MenuItem.tsx +++ b/components/src/atoms/MenuList/MenuItem.tsx @@ -16,6 +16,8 @@ export const MenuItem = styled.button` padding: ${SPACING.spacing8} ${SPACING.spacing12} ${SPACING.spacing8} ${SPACING.spacing12}; border: ${props => (props.border != null ? props.border : 'inherit')}; + border-radius: ${props => + props.borderRadius != null ? props.borderRadius : 'inherit'}; &:hover { background-color: ${COLORS.blue10}; diff --git a/protocol-designer/src/pages/Designer/DeckSetup/SlotOverflowMenu.tsx b/protocol-designer/src/pages/Designer/DeckSetup/SlotOverflowMenu.tsx index b29d3b90dfa..22786dd7531 100644 --- a/protocol-designer/src/pages/Designer/DeckSetup/SlotOverflowMenu.tsx +++ b/protocol-designer/src/pages/Designer/DeckSetup/SlotOverflowMenu.tsx @@ -1,19 +1,17 @@ import { useTranslation } from 'react-i18next' import { useState } from 'react' -import styled from 'styled-components' import { useDispatch, useSelector } from 'react-redux' import { useNavigate } from 'react-router-dom' import { BORDERS, COLORS, - CURSOR_AUTO, - CURSOR_POINTER, DIRECTION_COLUMN, + Divider, Flex, + MenuItem, NO_WRAP, POSITION_ABSOLUTE, RobotCoordsForeignDiv, - SPACING, StyledText, useOnClickOutside, } from '@opentrons/components' @@ -168,7 +166,7 @@ export function SlotOverflowMenu( nestedLabwareOnSlot == null) || nestedLabwareOnSlot != null - const showEditAndLiquidsBtns = + const canRenameLabwareAndEditLiquids = (labwareOnSlot != null && !isLabwareAnAdapter && !isLabwareTiprack && @@ -180,7 +178,7 @@ export function SlotOverflowMenu( : TOP_SLOT_Y_POSITION if (showDuplicateBtn && !ROBOT_BOTTOM_HALF_SLOTS.includes(location)) { - position += showEditAndLiquidsBtns + position += canRenameLabwareAndEditLiquids ? TOP_SLOT_Y_POSITION_ALL_BUTTONS : TOP_SLOT_Y_POSITION_2_BUTTONS } @@ -233,7 +231,7 @@ export function SlotOverflowMenu( e.stopPropagation() }} > - { addEquipment(location) setShowMenuList(false) @@ -244,38 +242,37 @@ export function SlotOverflowMenu( ? t(isOffDeckLocation ? 'add_labware' : 'add_hw_lw') : t(isOffDeckLocation ? 'edit_labware' : 'edit_hw_lw')} - - {showEditAndLiquidsBtns ? ( - <> - { - setShowNickNameModal(true) - e.preventDefault() - e.stopPropagation() - }} - > - - {t('rename_lab')} - - - { - if (nestedLabwareOnSlot != null) { - dispatch(openIngredientSelector(nestedLabwareOnSlot.id)) - } else if (labwareOnSlot != null) { - dispatch(openIngredientSelector(labwareOnSlot.id)) - } - navigate('/liquids') - }} - > - - {selectionHasLiquids ? t('edit_liquid') : t('add_liquid')} - - - + + {canRenameLabwareAndEditLiquids ? ( + { + setShowNickNameModal(true) + e.preventDefault() + e.stopPropagation() + }} + > + + {t('rename_lab')} + + ) : null} + { + if (nestedLabwareOnSlot != null) { + dispatch(openIngredientSelector(nestedLabwareOnSlot.id)) + } else if (labwareOnSlot != null) { + dispatch(openIngredientSelector(labwareOnSlot.id)) + } + navigate('/liquids') + }} + disabled={!canRenameLabwareAndEditLiquids} + > + + {selectionHasLiquids ? t('edit_liquid') : t('add_liquid')} + + {showDuplicateBtn ? ( - { if ( labwareOnSlot != null && @@ -292,9 +289,10 @@ export function SlotOverflowMenu( {t('duplicate')} - + ) : null} - + { if (matchingLabware != null) { @@ -310,7 +308,7 @@ export function SlotOverflowMenu( {t(isOffDeckLocation ? 'clear_labware' : 'clear_slot')} - + ) @@ -334,19 +332,3 @@ export function SlotOverflowMenu( slotOverflowBody ) } - -const MenuButton = styled.button` - background-color: ${COLORS.transparent}; - border-radius: inherit; - cursor: ${CURSOR_POINTER}; - padding: ${SPACING.spacing8} ${SPACING.spacing12}; - border: none; - border-radius: inherit; - &:hover { - background-color: ${COLORS.blue10}; - } - &:disabled { - color: ${COLORS.grey40}; - cursor: ${CURSOR_AUTO}; - } -` diff --git a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SlotOverflowMenu.test.tsx b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SlotOverflowMenu.test.tsx index 42c9c026d70..2ba0d4df60f 100644 --- a/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SlotOverflowMenu.test.tsx +++ b/protocol-designer/src/pages/Designer/DeckSetup/__tests__/SlotOverflowMenu.test.tsx @@ -108,7 +108,7 @@ describe('SlotOverflowMenu', () => { expect(vi.mocked(deleteDeckFixture)).toHaveBeenCalled() expect(props.setShowMenuList).toHaveBeenCalled() }) - it('renders 2 buttons when there is nothing on the slot', () => { + it('renders 3 buttons when there is nothing on the slot', () => { props.location = 'A1' render(props) fireEvent.click( @@ -116,7 +116,10 @@ describe('SlotOverflowMenu', () => { ) expect(props.addEquipment).toHaveBeenCalled() expect(props.setShowMenuList).toHaveBeenCalled() - expect(screen.getAllByRole('button')).toHaveLength(2) + expect(screen.getAllByRole('button')).toHaveLength(3) + expect(screen.getByRole('button', { name: 'Add liquid' })).toBeDisabled() + expect(screen.getByRole('button', { name: 'Clear slot' })).toBeDisabled() + screen.getByTestId('divider') }) it('renders Edit liquid button when there is liquid on the labware', () => { vi.mocked(labwareIngredSelectors.getLiquidsByLabwareId).mockReturnValue({