fix(protocol-designer, step-generation): update prewet behavior in PD

protocol-designer/src/assets/localization/en/tooltip.json

@@ -65,7 +65,7 @@
       "newLocation": "New location to move the selected labware",
       "nozzles": "Partial pickup requires a tip rack directly on the deck. Full rack pickup requires the Flex 96 Tip Rack Adapter.",
       "pipette": "Select the pipette you want to use",
-      "preWetTip": "Pre-wet by aspirating and dispensing 2/3 of the tip’s max volume",
+      "preWetTip": "Pre-wet by aspirating and dispensing the total aspiration volume",
       "setTemperature": "Select the temperature to set your module to",
       "wells": "Select wells",
       "volume": "Volume to dispense in each well"

protocol-designer/src/molecules/ToggleStepFormField/index.tsx

@@ -1,5 +1,6 @@
 import {
   ALIGN_CENTER,
+  Check,
   COLORS,
   DIRECTION_COLUMN,
   Flex,
@@ -16,12 +17,13 @@
 interface ToggleStepFormFieldProps {
   title: string
   isSelected: boolean
-  onLabel: string
-  offLabel: string
   toggleUpdateValue: (value: unknown) => void
   toggleValue: unknown
   tooltipContent: string | null
-  isDisabled: boolean
+  isDisabled?: boolean
+  onLabel?: string
+  offLabel?: string
+  toggleElement?: 'toggle' | 'checkbox'
 }
 export function ToggleStepFormField(
   props: ToggleStepFormFieldProps
@@ -34,34 +36,32 @@
     toggleUpdateValue,
     toggleValue,
     tooltipContent,
-    isDisabled,
+    isDisabled = false,
+    toggleElement = 'toggle',
   } = props
   const [targetProps, tooltipProps] = useHoverTooltip()
 
   return (
     <>
       <ListButton
         type="noActive"
-        padding={SPACING.spacing12}
+        padding={SPACING.spacing16}
         onClick={() => {
           if (!isDisabled) {
             toggleUpdateValue(!toggleValue)
           }
         }}
         disabled={isDisabled}
       >
-        {tooltipContent != null ? (
-          <Tooltip tooltipProps={tooltipProps}>{tooltipContent}</Tooltip>
-        ) : null}
-
-        <Flex width="100%" flexDirection={DIRECTION_COLUMN} {...targetProps}>
+        <Flex width="100%" flexDirection={DIRECTION_COLUMN}>
           <Flex
             justifyContent={JUSTIFY_SPACE_BETWEEN}
             alignItems={ALIGN_CENTER}
           >
             <StyledText
               desktopStyle="bodyDefaultRegular"
               color={isDisabled ? COLORS.grey40 : COLORS.black90}
+              {...targetProps}
             >
               {title}
             </StyledText>
@@ -72,15 +72,21 @@
               >
                 {isSelected ? onLabel : offLabel}
               </StyledText>
-              <ToggleButton
-                disabled={isDisabled}
-                label={isSelected ? onLabel : offLabel}
-                toggledOn={isSelected}
-              />
+              {toggleElement === 'toggle' ? (
+                <ToggleButton
+                  label={isSelected ? onLabel : offLabel}
+                  toggledOn={isSelected}
+                />
+              ) : (
+                <Check color={COLORS.blue50} isChecked={isSelected} />
+              )}
             </Flex>
           </Flex>
         </Flex>
       </ListButton>
+      {tooltipContent != null ? (
+        <Tooltip tooltipProps={tooltipProps}>{tooltipContent}</Tooltip>
+      ) : null}
     </>
   )
 }

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/LabwareField.tsx

@@ -31,6 +31,7 @@
       onExit={() => {
         dispatch(hoverSelection({ id: null, text: null }))
       }}
+      width="100%"
     />
   )
 }

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepFormToolbox.tsx

@@ -360,6 +360,7 @@
             </StyledText>
           </Flex>
         }
+        width="21.875rem"
       >
         <div
           ref={toolsComponentRef}

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MoveLiquidTools/index.tsx

@@ -27,6 +27,7 @@
 import {
   CheckboxExpandStepFormField,
   InputStepFormField,
+  ToggleStepFormField,
 } from '../../../../../../molecules'
 import {
   BlowoutLocationField,
@@ -398,15 +399,16 @@
           {t('protocol_steps:advanced_settings')}
         </StyledText>
         {tab === 'aspirate' ? (
-          <CheckboxExpandStepFormField
+          <ToggleStepFormField
             title={i18n.format(
               t('form:step_edit_form.field.preWetTip.label'),
               'capitalize'
             )}
-            checkboxValue={propsForFields.preWetTip.value}
-            isChecked={propsForFields.preWetTip.value === true}
-            checkboxUpdateValue={propsForFields.preWetTip.updateValue}
-            tooltipText={propsForFields.preWetTip.tooltipContent}
+            toggleValue={propsForFields.preWetTip.value}
+            isSelected={propsForFields.preWetTip.value === true}
+            toggleUpdateValue={propsForFields.preWetTip.updateValue}
+            toggleElement="checkbox"
+            tooltipContent={propsForFields.preWetTip.tooltipContent ?? null}
           />
         ) : null}
         <CheckboxExpandStepFormField