Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(protocol-designer): createFileWizard now accommodates MoaM for F… #14818

Merged
merged 4 commits into from
Apr 8, 2024
Merged

feat(protocol-designer): createFileWizard now accommodates MoaM for F… #14818

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5158943
feat(protocol-designer): createFileWizard now accommodates MoaM for F…
jerader Apr 5, 2024
74102a8
clean up code
jerader Apr 5, 2024
d726db5
fix when trash is disabled
jerader Apr 5, 2024
e9d8c16
address feedback
jerader Apr 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 155 additions & 41 deletions protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,48 +15,38 @@ import {
TYPOGRAPHY,
useHoverTooltip,
Tooltip,
DIRECTION_COLUMN,
Box,
} from '@opentrons/components'
import type { StyleProps } from '@opentrons/components'
import type { RobotType } from '@opentrons/shared-data'

const EQUIPMENT_OPTION_STYLE = css`
background-color: ${COLORS.white};
border-radius: ${BORDERS.borderRadius8};
border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};

const ARROW_STYLE = css`
color: ${COLORS.grey50};
cursor: pointer;
&:hover {
background-color: ${COLORS.grey10};
border: 1px ${BORDERS.styleSolid} ${COLORS.grey35};
}

&:focus {
outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
outline-offset: 3px;
color: ${COLORS.black80};
}
`

const EQUIPMENT_OPTION_SELECTED_STYLE = css`
${EQUIPMENT_OPTION_STYLE}
background-color: ${COLORS.blue10};
border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};

const ARROW_STYLE_ACTIVE = css`
color: ${COLORS.blue50};
cursor: pointer;
&:hover {
background-color: ${COLORS.blue10};
border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
color: ${COLORS.black80};
}
`

const EQUIPMENT_OPTION_DISABLED_STYLE = css`
${EQUIPMENT_OPTION_STYLE}
background-color: ${COLORS.white};
border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};

&:hover {
background-color: ${COLORS.white};
border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
}
const ARROW_STYLE_DISABLED = css`
color: ${COLORS.grey50};
`

interface MultiplesProps {
numItems: number
maxItems: number
setValue: (num: number) => void
isDisabled: boolean
}
interface EquipmentOptionProps extends StyleProps {
onClick: React.MouseEventHandler
isSelected: boolean
Expand All @@ -65,6 +55,7 @@ interface EquipmentOptionProps extends StyleProps {
image?: React.ReactNode
showCheckbox?: boolean
disabled?: boolean
multiples?: MultiplesProps
}
export function EquipmentOption(props: EquipmentOptionProps): JSX.Element {
const {
Expand All @@ -75,10 +66,51 @@ export function EquipmentOption(props: EquipmentOptionProps): JSX.Element {
showCheckbox = false,
disabled = false,
robotType,
multiples,
...styleProps
} = props
const { t } = useTranslation('tooltip')
const [targetProps, tooltipProps] = useHoverTooltip()
const { t } = useTranslation(['tooltip', 'shared'])
const [equipmentTargetProps, equipmentTooltipProps] = useHoverTooltip()
const [tempTargetProps, tempTooltipProps] = useHoverTooltip()
const [numMultiples, setNum] = React.useState<number>(0)
jerader marked this conversation as resolved.
Show resolved Hide resolved

const EQUIPMENT_OPTION_STYLE = css`
background-color: ${COLORS.white};
border-radius: ${BORDERS.borderRadius8};
border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};

&:hover {
background-color: ${multiples ? COLORS.white : COLORS.grey10};
border: 1px ${BORDERS.styleSolid}
${multiples ? COLORS.grey30 : COLORS.grey35};
}

&:focus {
outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
outline-offset: 3px;
}
`

const EQUIPMENT_OPTION_SELECTED_STYLE = css`
${EQUIPMENT_OPTION_STYLE}
background-color: ${COLORS.blue10};
border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};

&:hover {
border: 1px ${BORDERS.styleSolid} ${COLORS.blue50};
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2);
}
`

const EQUIPMENT_OPTION_DISABLED_STYLE = css`
${EQUIPMENT_OPTION_STYLE}
background-color: ${COLORS.white};
border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};

&:hover {
border: 1px ${BORDERS.styleSolid} ${COLORS.grey30};
}
`

let equipmentOptionStyle
if (disabled) {
Expand All @@ -102,6 +134,66 @@ export function EquipmentOption(props: EquipmentOptionProps): JSX.Element {
)
} else if (showCheckbox && disabled) {
iconInfo = <Flex width="1.5rem" />
} else if (multiples != null) {
const { numItems, maxItems, isDisabled } = multiples
let upArrowCSS = ARROW_STYLE
jerader marked this conversation as resolved.
Show resolved Hide resolved
if (isDisabled || numItems === maxItems) {
upArrowCSS = ARROW_STYLE_DISABLED
} else if (numItems > 0) {
upArrowCSS = ARROW_STYLE_ACTIVE
}
let downArrowCSS = ARROW_STYLE
jerader marked this conversation as resolved.
Show resolved Hide resolved
if (numItems === 0) {
downArrowCSS = ARROW_STYLE_DISABLED
} else if (numItems > 0) {
downArrowCSS = ARROW_STYLE_ACTIVE
}

iconInfo = (
<Flex
flexDirection={DIRECTION_COLUMN}
gridGap={SPACING.spacing4}
width="1.5rem"
alignItems={ALIGN_CENTER}
>
<Flex
{...tempTargetProps}
data-testid="EquipmentOption_upArrow"
onClick={
numMultiples === 7
? undefined
: () => {
multiples.setValue(numMultiples + 1)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
multiples.setValue(numMultiples + 1)
multiples.setValue(prevNumMultiples => prevNumMultiples + 1)

setNum(numMultiples + 1)
jerader marked this conversation as resolved.
Show resolved Hide resolved
}
}
>
<Icon css={upArrowCSS} size={SPACING.spacing12} name="ot-arrow-up" />
jerader marked this conversation as resolved.
Show resolved Hide resolved
</Flex>
<Flex
data-testid="EquipmentOption_downArrow"
onClick={
numMultiples === 0
? undefined
: () => {
multiples.setValue(numMultiples - 1)
setNum(numMultiples - 1)
jerader marked this conversation as resolved.
Show resolved Hide resolved
}
}
>
<Icon
css={downArrowCSS}
size={SPACING.spacing12}
jerader marked this conversation as resolved.
Show resolved Hide resolved
name="ot-arrow-down"
/>
</Flex>
{isDisabled || numMultiples === 7 ? (
<Tooltip {...tempTooltipProps}>
{t('not_enough_space_for_temp')}
</Tooltip>
) : null}
</Flex>
)
}

return (
Expand All @@ -117,31 +209,53 @@ export function EquipmentOption(props: EquipmentOptionProps): JSX.Element {
: BORDERS.lineBorder
}
borderRadius={BORDERS.borderRadius8}
cursor={disabled ? 'auto' : 'pointer'}
cursor={disabled || multiples != null ? 'auto' : 'pointer'}
backgroundColor={disabled ? COLORS.grey30 : COLORS.transparent}
onClick={disabled ? undefined : onClick}
{...styleProps}
{...targetProps}
{...equipmentTargetProps}
css={equipmentOptionStyle}
>
{iconInfo}
<Flex
css={css`
user-select: none;
`}
justifyContent={JUSTIFY_CENTER}
alignItems={ALIGN_CENTER}
marginRight={SPACING.spacing16}
>
{image}
</Flex>
<Text
as="p"
fontSize={TYPOGRAPHY.fontSizeP}
color={disabled ? COLORS.grey50 : COLORS.black90}
>
{text}
</Text>
<Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
<Text
jerader marked this conversation as resolved.
Show resolved Hide resolved
css={css`
user-select: none;
`}
as="p"
fontSize={TYPOGRAPHY.fontSizeP}
color={disabled ? COLORS.grey50 : COLORS.black90}
>
{text}
</Text>
{multiples != null ? (
<>
<Box borderBottom={BORDERS.lineBorder} data-testid="line" />
<Flex
alignItems={ALIGN_CENTER}
justifyContent={JUSTIFY_CENTER}
fontSize={TYPOGRAPHY.fontSizeP}
gridGap={SPACING.spacing4}
>
<Text>{t('shared:amount')}</Text>
<Text>{multiples.numItems}</Text>
</Flex>
</>
) : null}
</Flex>
</Flex>
{disabled ? (
<Tooltip {...tooltipProps}>
<Tooltip {...equipmentTooltipProps}>
{t(
robotType === FLEX_ROBOT_TYPE
? 'disabled_no_space_additional_items'
Expand Down
5 changes: 0 additions & 5 deletions protocol-designer/src/components/modals/CreateFileWizard/InputField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import {
COLORS,
DIRECTION_COLUMN,
Flex,
RESPONSIVENESS,
SPACING,
TYPOGRAPHY,
DISPLAY_INLINE_BLOCK,
Expand Down Expand Up @@ -60,10 +59,6 @@ function Input(props: InputFieldProps): JSX.Element {
border: 1px ${BORDERS.styleSolid} ${error ? COLORS.red50 : COLORS.grey30};
font-size: ${TYPOGRAPHY.fontSizeP};

@media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
padding: 0;
}

&:active {
border: 1px ${BORDERS.styleSolid} ${COLORS.grey50};
}
Expand Down
Loading
Loading