fix(app): fix InputField stories for RQA-2667 (#15090)

* fix(app): fix InputField stories for RQA-2667

app/src/atoms/InputField/InputField.stories.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react'
-import { Flex, SPACING, VIEWPORT } from '@opentrons/components'
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  SPACING,
+  StyledText,
+  VIEWPORT,
+} from '@opentrons/components'
 import { InputField as InputFieldComponent } from './index'
 import type { Meta, StoryObj } from '@storybook/react'
 
@@ -9,6 +15,13 @@ const meta: Meta<typeof InputFieldComponent> = {
   title: 'App/Atoms/InputField',
   component: InputFieldComponent,
   parameters: VIEWPORT.touchScreenViewport,
+  argTypes: {
+    units: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
 }
 
 export default meta
@@ -17,22 +30,23 @@ type Story = StoryObj<typeof InputFieldComponent>
 export const InputField: Story = args => {
   const [value, setValue] = React.useState(args.value)
   return (
-    <Flex padding={SPACING.spacing16} width="100%">
+    <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+      <StyledText as="h4">{'Input title'}</StyledText>
       <InputFieldComponent
         {...args}
         value={value}
+        width="100%"
         onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
           setValue(e.target.value)
         }}
-        units={args.type !== 'number' ? undefined : args.units}
+        units={args.units ? 'rem' : undefined}
       />
     </Flex>
   )
 }
 
 InputField.args = {
   value: 200,
-  units: 'rpm',
   type: 'number',
   caption: 'example caption',
   max: 200,
@@ -56,10 +70,9 @@ export const InputFieldWithError: Story = args => {
 }
 
 InputFieldWithError.args = {
-  units: 'C',
   type: 'number',
   caption: 'example caption',
-  max: 10,
+  max: 200,
   min: 10,
-  error: 'input does not equal 10',
+  error: 'input is not in the range',
 }