fix(protocol-designer): various DQA fixes (#17440)

This PR provides DQA fixes for 8.4.0 alpha.1.

Closes RQA-3929, Closes RQA-3930, Closes RQA-3931, Closes RQA-3933,
Closes RQA-3934

Author: ncdiehl11

components/src/atoms/ListButton/__tests__/ListButton.test.tsx

@@ -25,7 +25,7 @@ describe('ListButton', () => {
   it('should render correct style - noActive', () => {
     render(props)
     const listButton = screen.getByTestId('ListButton_noActive')
-    expect(listButton).toHaveStyle(`backgroundColor: ${COLORS.grey30}`)
+    expect(listButton).toHaveStyle(`backgroundColor: ${COLORS.grey20}`)
   })
   it('should render correct style - connected', () => {
     props.type = 'connected'

components/src/atoms/ListButton/index.tsx

@@ -23,8 +23,8 @@ const LISTBUTTON_PROPS_BY_TYPE: Record<
   { backgroundColor: string; hoverBackgroundColor: string }
 > = {
   noActive: {
-    backgroundColor: COLORS.grey30,
-    hoverBackgroundColor: COLORS.grey35,
+    backgroundColor: COLORS.grey20,
+    hoverBackgroundColor: COLORS.grey30,
   },
   connected: {
     backgroundColor: COLORS.green30,

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

@@ -248,7 +248,7 @@ export function StepFormToolbox(props: StepFormToolboxProps): JSX.Element {
           numErrors,
           stepTypeDisplayName: i18n.format(
             t(`stepType.${formData.stepType}`),
-            'capitalize'
+            'titleCase'
           ),
           t,
         })

protocol-designer/src/pages/Designer/ProtocolSteps/StepForm/StepTools/AbsorbanceReaderTools/Initialization.tsx

@@ -24,6 +24,7 @@ import {
   Tooltip,
   useHoverTooltip,
 } from '@opentrons/components'
+import { LINK_BUTTON_STYLE } from '../../../../../../atoms'
 import {
   ABSORBANCE_READER_MAX_WAVELENGTH_NM,
   ABSORBANCE_READER_MIN_WAVELENGTH_NM,
@@ -244,6 +245,7 @@ function IntializationEditor(props: InitializationEditorProps): JSX.Element {
               text={t('step_edit_form.absorbanceReader.add_wavelength.label')}
               textAlignment="left"
               disabled={numWavelengths === MAX_WAVELENGTHS}
+              iconName="plus"
             />
           </Flex>
         ) : null}
@@ -337,13 +339,12 @@ function WavelengthItem(props: WavelengthItemProps): JSX.Element {
           onClick={() => {
             handleDeleteWavelength(index)
           }}
-          alignSelf={ALIGN_FLEX_END}
           padding={SPACING.spacing4}
+          css={LINK_BUTTON_STYLE}
+          alignSelf={ALIGN_FLEX_END}
+          textDecoration={TEXT_DECORATION_UNDERLINE}
         >
-          <StyledText
-            desktopStyle="bodyDefaultRegular"
-            textDecoration={TEXT_DECORATION_UNDERLINE}
-          >
+          <StyledText desktopStyle="bodyDefaultRegular">
             {t('step_edit_form.absorbanceReader.delete')}
           </StyledText>
         </Btn>

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/AddStepOverflowButton.tsx

@@ -45,7 +45,7 @@ export function AddStepOverflowButton(
         <StyledText desktopStyle="bodyDefaultRegular">
           {i18n.format(
             t(`application:stepType.${stepType}`, stepType),
-            'capitalize'
+            'titleCase'
           )}
         </StyledText>
       </MenuButton>

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/ConnectedStepInfo.tsx

@@ -62,7 +62,7 @@ export function ConnectedStepInfo(props: ConnectedStepInfoProps): JSX.Element {
     setOpenedOverflowMenuId,
     sidebarWidth,
   } = props
-  const { t } = useTranslation('application')
+  const { i18n, t } = useTranslation('application')
   const dispatch = useDispatch<ThunkDispatch<BaseState, any, any>>()
   const stepIds = useSelector(getOrderedStepIds)
   const step = useSelector(stepFormSelectors.getSavedStepForms)[stepId]
@@ -227,7 +227,8 @@ export function ConnectedStepInfo(props: ConnectedStepInfoProps): JSX.Element {
         onMouseEnter={highlightStep}
         iconName={hasError || hasWarnings ? 'alert-circle' : iconName}
         title={`${stepNumber}. ${
-          step.stepName || t(`stepType.${step.stepType}`)
+          i18n.format(step.stepName, 'titleCase') ||
+          t(`stepType.${step.stepType}`)
         }`}
         dragHovered={dragHovered}
         sidebarWidth={sidebarWidth}

protocol-designer/src/pages/Designer/ProtocolSteps/Timeline/__tests__/AddStepButton.test.tsx

@@ -87,7 +87,7 @@ describe('AddStepButton', () => {
     screen.getByText('Mix')
     screen.getByText('Pause')
     screen.getByText('Thermocycler')
-    screen.getByText('Heater-shaker')
+    screen.getByText('Heater-Shaker')
     screen.getByText('Temperature')
     screen.getByText('Magnet')
   })

protocol-designer/src/pages/Designer/ProtocolSteps/__tests__/ProtocolSteps.test.tsx

@@ -115,6 +115,6 @@ describe('ProtocolSteps', () => {
 
   it('renders the current step name', () => {
     render()
-    screen.getByText('Custom pause')
+    screen.getByText('Custom Pause')
   })
 })

protocol-designer/src/pages/Designer/ProtocolSteps/index.tsx

@@ -120,7 +120,7 @@ export function ProtocolSteps(): JSX.Element {
           >
             {currentStep != null && hoveredTerminalItem == null ? (
               <StyledText desktopStyle="headingSmallBold">
-                {i18n.format(currentStep.stepName, 'capitalize')}
+                {i18n.format(currentStep.stepName, 'titleCase')}
               </StyledText>
             ) : null}
             {(hoveredTerminalItem != null || selectedTerminalItem != null) &&