fix(components, protocol-designer): fix well order and tip position a…

…dvanced settings (#16784) Fix styling for advanced settings PositionField and WellsOrderFields components. Adds icons for each ListButton appropriately and reformats text. Adds new icon for well-order Closes RQA-3499
Opentrons · Nov 13, 2024 · 856aa2c · 856aa2c
1 parent bf815bb
commit 856aa2c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 17 deletions.
diff --git a/components/src/icons/icon-data.ts b/components/src/icons/icon-data.ts
@@ -803,6 +803,11 @@ export const ICON_DATA_BY_NAME: Record<
       'M12 22C9.72 22 7.81 21.22 6.29 19.65C4.76 18.08 4 16.13 4 13.8C4 12.13 4.66 10.32 5.99 8.36C7.32 6.4 9.32 4.28 12 2C14.68 4.28 16.69 6.4 18.01 8.36C19.33 10.32 20 12.13 20 13.8C20 16.13 19.24 18.08 17.71 19.65C16.18 21.22 14.28 22 12 22ZM12 20C13.73 20 15.17 19.41 16.3 18.24C17.43 17.07 18 15.59 18 13.8C18 12.58 17.5 11.21 16.49 9.67C15.48 8.14 13.99 6.46 12 4.64C10.02 6.46 8.52 8.13 7.51 9.67C6.5 11.2 6 12.58 6 13.8C6 15.58 6.57 17.06 7.7 18.24C8.83 19.42 10.27 20 12 20Z M8.55 11.42C7.95 12.38 7.63 13.29 7.63 14.12C7.63 15.4 8.05 16.46 8.88 17.32C9.71 18.18 10.75 18.6 12 18.6C13.25 18.6 14.29 18.17 15.12 17.32C15.95 16.46 16.37 15.4 16.37 14.12C16.37 13.29 16.05 12.39 15.45 11.42H8.55Z',
     viewBox: '0 0 24 24',
   },
+  'well-order': {
+    path:
+      'M16.9506 5.10701L13.2894 7.9553C13.1824 8.05084 13 7.983 13 7.84844V5.75H6.81068L15.9627 14.902C16.1772 15.1165 16.2413 15.4391 16.1252 15.7193C16.0092 15.9996 15.7357 16.1823 15.4323 16.1823H5.12116C4.70694 16.1823 4.37116 15.8465 4.37116 15.4323C4.37116 15.0181 4.70694 14.6823 5.12116 14.6823H13.6217L4.46969 5.53033C4.25519 5.31583 4.19103 4.99324 4.30711 4.71299C4.4232 4.43273 4.69668 4.25 5.00002 4.25H13V2.15131C13 2.01675 13.183 1.94947 13.2894 2.04445L16.9506 4.8933C17.0165 4.9521 17.0165 5.04821 16.9506 5.10701Z',
+    viewBox: '0 0 20 20',
+  },
   wifi: {
     path:
       'M3.16848 9.22683C4.91915 7.43693 7.33915 6.33359 9.99973 6.33359C12.6604 6.33359 15.0804 7.43697 16.8311 9.22693L17.9996 8.03818C15.9522 5.95529 13.1239 4.66699 9.99973 4.66699C6.87563 4.66699 4.0473 5.95525 2 8.03809L3.16848 9.22683ZM6.1685 12.2783C7.15141 11.2696 8.51069 10.6495 9.99953 10.6495C11.4886 10.6495 12.848 11.2698 13.8309 12.2787L14.9994 11.0899C13.7199 9.78811 11.9521 8.98291 9.99953 8.98291C8.04712 8.98291 6.27954 9.78795 5 11.0895L6.1685 12.2783ZM10.0002 14.9654C9.6831 14.9654 9.38403 15.1024 9.16876 15.3306L8.00012 14.1417C8.51196 13.6209 9.2191 13.2988 10.0002 13.2988C10.7811 13.2988 11.4881 13.6208 11.9999 14.1414L10.8313 15.3303C10.6161 15.1023 10.3171 14.9654 10.0002 14.9654Z',

diff --git a/protocol-designer/src/assets/localization/en/protocol_steps.json b/protocol-designer/src/assets/localization/en/protocol_steps.json
@@ -50,7 +50,7 @@
     "engage": "<semiBoldText>{{module}}</semiBoldText><text>engaged to</text><tag/>"
   },
   "max_disposal_volume": "Max {{vol}} {{unit}}",
-  "mix_times": "Mix repititions",
+  "mix_times": "Mix repetitions",
   "mix_volume": "Mix volume",
   "mix": "Mix",
   "mix_step": "<text>Mixing</text><tag/><text>{{times}} times in</text><semiBoldText>{{wells}} of {{labware}}</semiBoldText>",
@@ -138,5 +138,5 @@
   "volume_per_well": "Volume per well",
   "well_name": "Well {{wellName}}",
   "well_order_title": "{{prefix}} well order",
-  "well_position": "Well position (x,y,z): "
+  "well_position": "Well position: X {{x}} Y {{y}} Z {{z}} (mm)"
 }
diff --git a/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/PositionField.tsx b/protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/PositionField.tsx
@@ -2,9 +2,11 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import {
+  ALIGN_CENTER,
   COLORS,
   DIRECTION_COLUMN,
   Flex,
+  Icon,
   InputField,
   ListButton,
   SPACING,
@@ -173,20 +175,22 @@ export function PositionField(props: PositionFieldProps): JSX.Element {
             onClick={() => {
               handleOpen(true)
             }}
+            gridGap={SPACING.spacing8}
+            alignItems={ALIGN_CENTER}
           >
+            <Icon name="tip-position" size="1.25rem" />
             <StyledText desktopStyle="bodyDefaultRegular">
-              {t('protocol_steps:well_position')}
-              {`${
-                propsForFields[xField].value != null
-                  ? Number(propsForFields[xField].value)
-                  : 0
-              }${t('units.millimeter')}, 
-                  ${
-                    propsForFields[yField].value != null
-                      ? Number(propsForFields[yField].value)
-                      : 0
-                  }${t('units.millimeter')},
-                  ${mmFromBottom ?? 0}${t('units.millimeter')}`}
+              {t('protocol_steps:well_position', {
+                x:
+                  propsForFields[xField].value != null
+                    ? Number(propsForFields[xField].value)
+                    : 0,
+                y:
+                  propsForFields[yField].value != null
+                    ? Number(propsForFields[yField].value)
+                    : 0,
+                z: mmFromBottom ?? 0,
+              })}
             </StyledText>
           </ListButton>
         </Flex>

diff --git a/...ocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/WellsOrderField.tsx b/...ocol-designer/src/pages/Designer/ProtocolSteps/StepForm/PipetteFields/WellsOrderField.tsx
@@ -9,6 +9,8 @@ import {
   SPACING,
   DIRECTION_COLUMN,
   COLORS,
+  Icon,
+  ALIGN_CENTER,
 } from '@opentrons/components'
 import { WellOrderModal } from '../../../../../organisms'
 import type { WellOrderOption } from '../../../../../form-types'
@@ -73,11 +75,14 @@ export function WellsOrderField(props: WellsOrderFieldProps): JSX.Element {
           type="noActive"
           width="100%"
           padding={SPACING.spacing12}
+          gridGap={SPACING.spacing8}
+          alignItems={ALIGN_CENTER}
         >
+          <Icon name="well-order" size="1.25rem" />
           <StyledText desktopStyle="bodyDefaultRegular">
-            {t(`step_edit_form.field.well_order.option.${firstValue}`)}
-            {', '}
-            {t(`step_edit_form.field.well_order.option.${secondValue}`)}
+            {`${t(`step_edit_form.field.well_order.option.${firstValue}`)}, ${t(
+              `step_edit_form.field.well_order.option.${secondValue}`
+            )}`}
           </StyledText>
         </ListButton>
       </Flex>