fix(app): address DQA for labware stacking work (#16028)

Provide various design fixes following DQA for labware stacking. Closes RQA-3017, RQA-3023
Opentrons · Aug 15, 2024 · 434f445 · 434f445
1 parent b48a96c
commit 434f445
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 30 deletions.
diff --git a/app/src/molecules/ToggleGroup/useToggleGroup.tsx b/app/src/molecules/ToggleGroup/useToggleGroup.tsx
@@ -6,16 +6,15 @@ import {
   Flex,
   SPACING,
   PrimaryButton,
+  StyledText,
 } from '@opentrons/components'
 import { useTrackEvent } from '../../redux/analytics'
 
 const BUTTON_GROUP_STYLES = css`
-  border-radius: ${BORDERS.borderRadius8};
-  margin-top: -1px;
   width: fit-content;
 
   button {
-    height: 36px;
+    height: auto;
     width: auto;
     font-weight: 400;
     font-size: 14px;
@@ -57,16 +56,14 @@ const BUTTON_GROUP_STYLES = css`
 `
 
 const ACTIVE_STYLE = css`
-  padding-left: ${SPACING.spacing8};
-  padding-right: ${SPACING.spacing8};
+  padding: ${SPACING.spacing8};
   background-color: ${COLORS.blue50};
   color: ${COLORS.white};
   pointer-events: none;
 `
 
 const DEFAULT_STYLE = css`
-  padding-left: ${SPACING.spacing8};
-  padding-right: ${SPACING.spacing8};
+  padding: ${SPACING.spacing8};
   background-color: ${COLORS.white};
   color: ${COLORS.black90};
   border: 1px ${COLORS.grey30} solid;
@@ -107,15 +104,15 @@ export const useToggleGroup = (
         onClick={handleLeftClick}
         data-testid="useToggleGroup_leftButton"
       >
-        {left}
+        <StyledText desktopStyle="bodyDefaultRegular">{left}</StyledText>
       </PrimaryButton>
       <PrimaryButton
         css={selectedValue === right ? ACTIVE_STYLE : DEFAULT_STYLE}
         key={right}
         onClick={handleRightClick}
         data-testid="useToggleGroup_rightButton"
       >
-        {right}
+        <StyledText desktopStyle="bodyDefaultRegular">{right}</StyledText>
       </PrimaryButton>
     </Flex>,
   ]

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareListItem.tsx
@@ -268,7 +268,7 @@ export function LabwareListItem(
 
   return (
     <LabwareRow>
-      <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing2}>
+      <Flex alignItems={ALIGN_CENTER} gridGap={SPACING.spacing2} width="5rem">
         {slotInfo != null && isFlex ? (
           <DeckInfoLabel deckLabel={slotInfo} />
         ) : (
@@ -283,7 +283,7 @@ export function LabwareListItem(
           <DeckInfoLabel iconName="stacked" />
         ) : null}
       </Flex>
-      <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing16}>
+      <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing12}>
         {nestedLabwareInfo != null &&
         nestedLabwareInfo?.sharedSlotId === slotInfo ? (
           <>
@@ -305,7 +305,7 @@ export function LabwareListItem(
                 </StyledText>
               </Flex>
             </Flex>
-            <Divider />
+            <Divider marginY="0" />
           </>
         ) : null}
         <Flex>
@@ -328,7 +328,7 @@ export function LabwareListItem(
         </Flex>
         {moduleDisplayName != null ? (
           <>
-            <Divider />
+            <Divider marginY="0" />
             <Flex
               justifyContent={JUSTIFY_SPACE_BETWEEN}
               flexDirection={DIRECTION_ROW}

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareStackModal.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/LabwareStackModal.tsx
@@ -113,7 +113,7 @@ export const LabwareStackModal = (
       onOutsideClick={closeModal}
       header={{
         title: (
-          <Flex gridGap={SPACING.spacing4}>
+          <Flex gridGap={SPACING.spacing8}>
             <DeckInfoLabel
               deckLabel={isModuleThermocycler ? thermocyclerLocation : slotName}
             />

diff --git a/app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareList.tsx b/app/src/organisms/Devices/ProtocolRun/SetupLabware/SetupLabwareList.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
 import {
   DIRECTION_COLUMN,
   Flex,
@@ -17,13 +16,6 @@ import type { ModuleRenderInfoForProtocol } from '../../hooks'
 import type { ModuleTypesThatRequireExtraAttention } from '../utils/getModuleTypesThatRequireExtraAttention'
 import type { LabwareSetupItem } from '../../../../pages/Protocols/utils'
 
-const HeaderRow = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 5.2fr 5.3fr;
-  grid-gap: ${SPACING.spacing16};
-  padding-left: ${SPACING.spacing24};
-  padding-top: ${SPACING.spacing20};
-`
 interface SetupLabwareListProps {
   attachedModuleInfo: { [moduleId: string]: ModuleRenderInfoForProtocol }
   commands: RunTimeCommand[]
@@ -46,14 +38,22 @@ export function SetupLabwareList(
       gridGap={SPACING.spacing4}
       marginBottom={SPACING.spacing16}
     >
-      <HeaderRow>
-        <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
+      <Flex
+        gridGap={SPACING.spacing16}
+        paddingLeft={SPACING.spacing24}
+        paddingTop={SPACING.spacing20}
+      >
+        <StyledText
+          width="5rem"
+          desktopStyle="bodyDefaultRegular"
+          color={COLORS.grey60}
+        >
           {t('location')}
         </StyledText>
         <StyledText desktopStyle="bodyDefaultRegular" color={COLORS.grey60}>
           {t('labware_name')}
         </StyledText>
-      </HeaderRow>
+      </Flex>
       {allItems.map((labwareItem, index) => {
         const labwareOnAdapter = allItems.find(
           item =>

diff --git a/app/src/organisms/ProtocolSetupLabware/index.tsx b/app/src/organisms/ProtocolSetupLabware/index.tsx
@@ -541,8 +541,6 @@ function RowLabware({
       ? matchedModule.attachedModuleMatch
       : null
 
-  const matchedModuleType = matchedModule?.attachedModuleMatch?.moduleType
-
   let slotName: string = ''
   let location: JSX.Element | string | null = null
   if (initialLocation === 'offDeck') {
@@ -555,11 +553,10 @@ function RowLabware({
   } else if ('addressableAreaName' in initialLocation) {
     slotName = initialLocation.addressableAreaName
     location = <DeckInfoLabel deckLabel={initialLocation.addressableAreaName} />
-  } else if (matchedModuleType != null && matchedModule?.slotName != null) {
-    slotName = matchedModule.slotName
+  } else if (labware.moduleLocation != null) {
     location = (
       <>
-        <DeckInfoLabel deckLabel={matchedModule?.slotName} />
+        <DeckInfoLabel deckLabel={labware.moduleLocation.slotName} />
       </>
     )
   } else if ('labwareId' in initialLocation) {