add condition to show label and

Opentrons · Oct 7, 2024 · 7661867 · 7661867
1 parent 64c92f0
commit 7661867
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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/...signer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/__tests__/MagnetTools.test.tsx b/...signer/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')