From 9ea79c31e1b68bceaab3c087ea457b399dd6c976 Mon Sep 17 00:00:00 2001
From: smb2268 <sarah.breen@opentrons.com>
Date: Thu, 18 Apr 2024 16:50:08 -0400
Subject: [PATCH] Update StepMeter so that we can make it sticky when scrollbar
 is present

---
 app/src/organisms/QuickTransferFlow/index.tsx | 10 +++++++++-
 components/src/atoms/StepMeter/index.tsx      | 14 ++++++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/app/src/organisms/QuickTransferFlow/index.tsx b/app/src/organisms/QuickTransferFlow/index.tsx
index 48a0a4026d07..b36a0839a58b 100644
--- a/app/src/organisms/QuickTransferFlow/index.tsx
+++ b/app/src/organisms/QuickTransferFlow/index.tsx
@@ -1,7 +1,12 @@
 import * as React from 'react'
 import { useHistory } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Flex, StepMeter, SPACING } from '@opentrons/components'
+import {
+  Flex,
+  StepMeter,
+  SPACING,
+  POSITION_STICKY,
+} from '@opentrons/components'
 import { SmallButton } from '../../atoms/buttons'
 import { ChildNavigation } from '../ChildNavigation'
 import { CreateNewTransfer } from './CreateNewTransfer'
@@ -87,6 +92,9 @@ export const QuickTransferFlow = (): JSX.Element => {
       <StepMeter
         totalSteps={QUICK_TRANSFER_WIZARD_STEPS}
         currentStep={currentStep}
+        position={POSITION_STICKY}
+        top="0"
+        width="1024px"
       />
       {modalContent == null ? (
         <Flex>
diff --git a/components/src/atoms/StepMeter/index.tsx b/components/src/atoms/StepMeter/index.tsx
index 14bbf48c6caa..ec8ec83b892a 100644
--- a/components/src/atoms/StepMeter/index.tsx
+++ b/components/src/atoms/StepMeter/index.tsx
@@ -5,13 +5,15 @@ import { RESPONSIVENESS, SPACING } from '../../ui-style-constants'
 import { COLORS } from '../../helix-design-system'
 import { POSITION_ABSOLUTE, POSITION_RELATIVE } from '../../styles'
 
-interface StepMeterProps {
+import type { StyleProps } from '@opentrons/components'
+
+interface StepMeterProps extends StyleProps {
   totalSteps: number
   currentStep: number | null
 }
 
 export const StepMeter = (props: StepMeterProps): JSX.Element => {
-  const { totalSteps, currentStep } = props
+  const { totalSteps, currentStep, ...styleProps } = props
   const progress = currentStep != null ? currentStep : 0
   const percentComplete = `${
     //    this logic puts a cap at 100% percentComplete which we should never run into
@@ -21,7 +23,7 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => {
   }%`
 
   const StepMeterContainer = css`
-    position: ${POSITION_RELATIVE};
+    position: ${styleProps.position ? styleProps.position : POSITION_RELATIVE};
     height: ${SPACING.spacing4};
     background-color: ${COLORS.grey30};
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
@@ -41,7 +43,11 @@ export const StepMeter = (props: StepMeterProps): JSX.Element => {
   `
 
   return (
-    <Box data-testid="StepMeter_StepMeterContainer" css={StepMeterContainer}>
+    <Box
+      data-testid="StepMeter_StepMeterContainer"
+      css={StepMeterContainer}
+      {...styleProps}
+    >
       <Box data-testid="StepMeter_StepMeterBar" css={StepMeterBar} />
     </Box>
   )