Skip to content

Commit

Permalink
refactor(protocol-designer): a few style fixes with modal size and al…
Browse files Browse the repository at this point in the history 
…ert text (#14683)

closes RQA-2520 RQA-2521 RQA-2525 RQA-2523 RQA-2528
  • Loading branch information
@jerader
jerader authored Mar 19, 2024
1 parent b2e9b7b commit a3cda0b
Show file tree
Hide file tree
Showing 5 changed files with 75 additions and 66 deletions.
10 changes: 7 additions & 3 deletions protocol-designer/src/components/StepEditForm/forms/MagnetForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,9 @@ export const MagnetForm = (props: StepFormProps): JSX.Element => {
{...propsForFields.magnetAction}
options={[
{
name: t('step_edit_form.field.magnetAction.options.engage'),
name: t(
'form:step_edit_form.field.magnetAction.options.engage'
),
value: 'engage',
},
]}
Expand All @@ -68,15 +70,17 @@ export const MagnetForm = (props: StepFormProps): JSX.Element => {
{...propsForFields.magnetAction}
options={[
{
name: t('step_edit_form.field.magnetAction.options.disengage'),
name: t(
'form:step_edit_form.field.magnetAction.options.disengage'
),
value: 'disengage',
},
]}
/>
</FormGroup>
{magnetAction === 'engage' && (
<FormGroup
label={t('step_edit_form.field.engageHeight.label')}
label={t('form:step_edit_form.field.engageHeight.label')}
className={styles.magnet_form_group}
>
<TextField
Expand Down
1 change: 1 addition & 0 deletions protocol-designer/src/components/StepEditForm/forms/MoveLabwareForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export const MoveLabwareForm = (props: StepFormProps): JSX.Element => {
{...propsForFields.useGripper}
disabled={!isGripperAttached}
label={t('form:step_edit_form.field.useGripper.label')}
tooltipContent={null}
/>
</FormGroup>
</div>
Expand Down
2 changes: 1 addition & 1 deletion protocol-designer/src/components/modals/CreateFileWizard/PipetteTipsTile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,7 +276,7 @@ function PipetteTipsField(props: PipetteTipsFieldProps): JSX.Element | null {
backgroundColor={COLORS.grey35}
padding={SPACING.spacing8}
border={BORDERS.lineBorder}
borderRadius={BORDERS.borderRadiusFull}
borderRadius={BORDERS.borderRadius16}
>
<Text
as="h4"
Expand Down
126 changes: 65 additions & 61 deletions protocol-designer/src/components/modals/EditModulesModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,9 +180,13 @@ export const EditModulesModal = (props: EditModulesModalProps): JSX.Element => {
// TODO(jr, 8/31/23): this is a bit hacky since the TCGEN2 slot is only B1 instead of B1 and A1
// so we have to manually check if slot A1 has issues as well as looking at selectedSlot
// this probably deserves a more elegant refactor
(selectedModel === THERMOCYCLER_MODULE_V2 && hasSlotIssue('A1')) ||
hasSlotIssue(selectedSlot)
selectedModel === THERMOCYCLER_MODULE_V2 &&
hasSlotIssue('A1')
) {
errors.selectedSlot = t('module_placement.SLOT_OCCUPIED_TC.body', {
selectedSlot,
})
} else if (hasSlotIssue(selectedSlot)) {
errors.selectedSlot = t('module_placement.SLOT_OCCUPIED.body', {
selectedSlot,
})
Expand Down Expand Up @@ -342,68 +346,68 @@ const EditModulesModalComponent = (
height="3.125rem"
alignItems={ALIGN_CENTER}
>
<Flex gridGap={SPACING.spacing8}>
<FormGroup label="Model">
<Box width="4rem">
<ModelDropdown
fieldName="selectedModel"
tabIndex={0}
options={getModuleOptionsForRobotType(
MODELS_FOR_MODULE_TYPE[moduleType],
robotType
<Flex justifyContent={JUSTIFY_SPACE_BETWEEN} width="100%">
<Flex flexDirection={DIRECTION_ROW} gridGap={SPACING.spacing8}>
<FormGroup label="Model">
<Box width="4rem">
<ModelDropdown
fieldName="selectedModel"
tabIndex={0}
options={getModuleOptionsForRobotType(
MODELS_FOR_MODULE_TYPE[moduleType],
robotType
)}
field={field}
fieldState={fieldState}
/>
</Box>
</FormGroup>
{showSlotOption && (
<>
{!enableSlotSelection && (
<Tooltip {...tooltipProps}>{slotOptionTooltip}</Tooltip>
)}
field={field}
fieldState={fieldState}
/>
</Box>
</FormGroup>
{showSlotOption && (
<>
{!enableSlotSelection && (
<Tooltip {...tooltipProps}>{slotOptionTooltip}</Tooltip>
)}

<Box {...targetProps} height="3.125rem">
<FormGroup label="Position">
<Box
width={robotType === FLEX_ROBOT_TYPE ? '8rem' : '18rem'}
>
<Controller
name="selectedSlot"
control={control}
render={({ field, fieldState }) => (
<SlotDropdown
fieldName="selectedSlot"
options={getAllModuleSlotsByType(
moduleType,
robotType
)}
disabled={!enableSlotSelection}
tabIndex={1}
field={field}
fieldState={fieldState}
/>
)}
/>
</Box>
</FormGroup>
</Box>
</>
)}
<Box {...targetProps} height="3.125rem">
<FormGroup label="Position">
<Box
width={robotType === FLEX_ROBOT_TYPE ? '8rem' : '18rem'}
>
<Controller
name="selectedSlot"
control={control}
render={({ field, fieldState }) => (
<SlotDropdown
fieldName="selectedSlot"
options={getAllModuleSlotsByType(
moduleType,
robotType
)}
disabled={!enableSlotSelection}
tabIndex={1}
field={field}
fieldState={fieldState}
/>
)}
/>
</Box>
</FormGroup>
</Box>
</>
)}
</Flex>
<Box>
{slotIssue ? (
<PDAlert
alertType="warning"
title={t('alert:module_placement.SLOT_OCCUPIED.title')}
// TODO(Jr, 3/18/24): add decription back: validation.selectedSlot
// when we fix designs in the future
description={''}
/>
) : null}
</Box>
</Flex>
<Box>
{slotIssue ? (
<PDAlert
alertType="warning"
title={
robotType === OT2_ROBOT_TYPE
? t('alert:module_placement.SLOT_OCCUPIED.title')
: validation.selectedSlot
}
description={''}
/>
) : null}
</Box>
</Flex>

{robotType === OT2_ROBOT_TYPE ? (
Expand Down
2 changes: 1 addition & 1 deletion protocol-designer/src/components/modals/FilePipettesModal/FilePipettesModal.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@

.new_file_modal {
line-height: 1.5;
height: 100%;
max-height: 100%;
padding: 2rem;
min-height: 38rem;

Expand Down

0 comments on commit a3cda0b

Please sign in to comment.