fix(protocol-designer): make checked box icon ot-checkbox (#15165)

closes RQA-2707
Opentrons · May 10, 2024 · 498461d · 498461d
1 parent a96add8
commit 498461d
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 8 deletions.
diff --git a/components/src/forms/DeprecatedCheckboxField.tsx b/components/src/forms/DeprecatedCheckboxField.tsx
@@ -62,7 +62,7 @@ export function DeprecatedCheckboxField(
             props.isIndeterminate
               ? 'minus-box'
               : props.value
-              ? 'checkbox-marked'
+              ? 'ot-checkbox'
               : 'checkbox-blank-outline'
           }
           width="100%"

diff --git a/protocol-designer/src/components/lists/TitledStepList.tsx b/protocol-designer/src/components/lists/TitledStepList.tsx
@@ -87,7 +87,7 @@ export function TitledStepList(props: Props): JSX.Element {
   )
 
   const multiSelectIconName = props.selected
-    ? 'checkbox-marked'
+    ? 'ot-checkbox'
     : 'checkbox-blank-outline'
 
   return (

diff --git a/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx b/protocol-designer/src/components/modals/CreateFileWizard/EquipmentOption.tsx
@@ -128,11 +128,11 @@ export function EquipmentOption(props: EquipmentOptionProps): JSX.Element {
     iconInfo = (
       <Icon
         aria-label={`EquipmentOption_${
-          isSelected ? 'checkbox-marked' : 'checkbox-blank-outline'
+          isSelected ? 'ot-checkbox' : 'checkbox-blank-outline'
         }`}
         color={isSelected ? COLORS.blue50 : COLORS.grey50}
         size="1.5rem"
-        name={isSelected ? 'checkbox-marked' : 'checkbox-blank-outline'}
+        name={isSelected ? 'ot-checkbox' : 'checkbox-blank-outline'}
       />
     )
   } else if (showCheckbox && disabled) {

diff --git a/protocol-designer/src/components/modals/CreateFileWizard/__tests__/EquipmentOption.test.tsx b/protocol-designer/src/components/modals/CreateFileWizard/__tests__/EquipmentOption.test.tsx
@@ -67,9 +67,9 @@ describe('EquipmentOption', () => {
     }
     render(props)
     screen.getByText('mockText')
-    expect(
-      screen.getByLabelText('EquipmentOption_checkbox-marked')
-    ).toHaveStyle(`color: ${COLORS.blue50}`)
+    expect(screen.getByLabelText('EquipmentOption_ot-checkbox')).toHaveStyle(
+      `color: ${COLORS.blue50}`
+    )
     expect(screen.getByLabelText('EquipmentOption_flex_mockText')).toHaveStyle(
       `border: ${BORDERS.activeLineBorder}`
     )

diff --git a/protocol-designer/src/components/steplist/MultiSelectToolbar/index.tsx b/protocol-designer/src/components/steplist/MultiSelectToolbar/index.tsx
@@ -159,7 +159,7 @@ export const MultiSelectToolbar = (props: Props): JSX.Element => {
   } = useConditionalConfirm(onDeleteClickAction, true)
 
   const selectProps: ClickableIconProps = {
-    iconName: isAllStepsSelected ? 'checkbox-marked' : 'minus-box',
+    iconName: isAllStepsSelected ? 'ot-checkbox' : 'minus-box',
     tooltipText: isAllStepsSelected ? 'Deselect All' : 'Select All',
     onClick: confirmSelect,
   }