From 766186745fc462d736ab0658a85b9fa2fa41bddf Mon Sep 17 00:00:00 2001
From: shiyaochen <shiyaochen@admins-MacBook-Pro.local>
Date: Mon, 7 Oct 2024 12:32:55 -0400
Subject: [PATCH] add condition to show label and

---
 components/src/organisms/Toolbox/index.tsx    |  1 -
 .../src/assets/localization/en/form.json      |  2 +-
 .../forms/__tests__/MagnetForm.test.tsx       |  2 +-
 .../ToggleExpandStepFormField/index.tsx       | 23 +++++++++++--------
 .../StepForm/StepTools/MagnetTools/index.tsx  |  1 +
 .../StepTools/__tests__/MagnetTools.test.tsx  |  2 +-
 6 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/components/src/organisms/Toolbox/index.tsx b/components/src/organisms/Toolbox/index.tsx
index 1a6cb435a9e..566bcf1e4bf 100644
--- a/components/src/organisms/Toolbox/index.tsx
+++ b/components/src/organisms/Toolbox/index.tsx
@@ -119,7 +119,6 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
             </Flex>
           </Flex>
         </Flex>
-        <Box borderBottom={`1px solid ${COLORS.grey30}`} />
         <Box
           padding={childrenPadding}
           flex="1 1 auto"
diff --git a/protocol-designer/src/assets/localization/en/form.json b/protocol-designer/src/assets/localization/en/form.json
index aaa000a1668..65267079c30 100644
--- a/protocol-designer/src/assets/localization/en/form.json
+++ b/protocol-designer/src/assets/localization/en/form.json
@@ -97,7 +97,7 @@
         "pickUp": "pick up tip"
       },
       "magnetAction": {
-        "label": "Magnet action",
+        "label": "Magnet state",
         "options": {
           "disengage": "Disengage",
           "engage": "Engage"
diff --git a/protocol-designer/src/components/StepEditForm/forms/__tests__/MagnetForm.test.tsx b/protocol-designer/src/components/StepEditForm/forms/__tests__/MagnetForm.test.tsx
index 198f2c68bd2..d844ef132a7 100644
--- a/protocol-designer/src/components/StepEditForm/forms/__tests__/MagnetForm.test.tsx
+++ b/protocol-designer/src/components/StepEditForm/forms/__tests__/MagnetForm.test.tsx
@@ -78,7 +78,7 @@ describe('MagnetForm', () => {
     screen.getByText('magnet')
     screen.getByText('module')
     screen.getByText('mock name')
-    screen.getByText('Magnet action')
+    screen.getByText('Magnet state')
     const engage = screen.getByText('Engage')
     screen.getByText('Disengage')
     fireEvent.click(engage)
diff --git a/protocol-designer/src/molecules/ToggleExpandStepFormField/index.tsx b/protocol-designer/src/molecules/ToggleExpandStepFormField/index.tsx
index 3bdfdd662ce..ed57de37f3b 100644
--- a/protocol-designer/src/molecules/ToggleExpandStepFormField/index.tsx
+++ b/protocol-designer/src/molecules/ToggleExpandStepFormField/index.tsx
@@ -23,6 +23,7 @@ interface ToggleExpandStepFormFieldProps extends FieldProps {
   toggleUpdateValue: (value: unknown) => void
   toggleValue: unknown
   caption?: string
+  islabel?: boolean
 }
 export function ToggleExpandStepFormField(
   props: ToggleExpandStepFormFieldProps
@@ -37,6 +38,7 @@ export function ToggleExpandStepFormField(
     toggleUpdateValue,
     toggleValue,
     caption,
+    islabel,
     ...restProps
   } = props
 
@@ -59,19 +61,22 @@ export function ToggleExpandStepFormField(
         <Flex justifyContent={JUSTIFY_SPACE_BETWEEN} alignItems={ALIGN_CENTER}>
           <StyledText desktopStyle="bodyDefaultRegular">{title}</StyledText>
           <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing4}>
-          <StyledText
+            {islabel ? (
+              <StyledText
                 desktopStyle="bodyDefaultRegular"
                 color={COLORS.grey60}
               >
                 {isSelected ? onLabel : offLabel}
-          </StyledText>
-          <ToggleButton
-            onClick={() => {
-              onToggleUpdateValue()
-            }}
-            label={isSelected ? onLabel : offLabel}
-            toggledOn={isSelected}
-          />
+              </StyledText>
+            ) : null}
+
+            <ToggleButton
+              onClick={() => {
+                onToggleUpdateValue()
+              }}
+              label={isSelected ? onLabel : offLabel}
+              toggledOn={isSelected}
+            />
           </Flex>
         </Flex>
         <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing10}>
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MagnetTools/index.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MagnetTools/index.tsx
index 7f7afd9702a..a99965a6c7e 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MagnetTools/index.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/MagnetTools/index.tsx
@@ -88,6 +88,7 @@ export function MagnetTools(props: StepFormProps): JSX.Element {
             'form:step_edit_form.field.magnetAction.options.disengage'
           )}
           caption={engageHeightCaption}
+          islabel={true}
         />
       </Flex>
     </Flex>
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx
index 968c523977e..5efba0925e9 100644
--- a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx
+++ b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx
@@ -83,7 +83,7 @@ describe('MagnetTools', () => {
     render(props)
     screen.getByText('Module')
     screen.getByText('mock name')
-    screen.getByText('Magnet action')
+    screen.getByText('Magnet state')
     screen.getByLabelText('Engage')
     const toggleButton = screen.getByRole('switch')
     screen.getByText('Engage height')