Update StepMeter so that we can make it sticky when scrollbar is present

Opentrons · Apr 18, 2024 · 9ea79c3 · 9ea79c3
1 parent c185959
commit 9ea79c3
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git 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
@@ -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>
   )