diff --git a/app/src/atoms/InputField/InputField.stories.tsx b/app/src/atoms/InputField/InputField.stories.tsx index e9038a9700b..677c6c1b048 100644 --- a/app/src/atoms/InputField/InputField.stories.tsx +++ b/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 = { title: 'App/Atoms/InputField', component: InputFieldComponent, parameters: VIEWPORT.touchScreenViewport, + argTypes: { + units: { + control: { + type: 'boolean', + }, + }, + }, } export default meta @@ -17,14 +30,16 @@ type Story = StoryObj export const InputField: Story = args => { const [value, setValue] = React.useState(args.value) return ( - + + {'Input title'} ) => { setValue(e.target.value) }} - units={args.type !== 'number' ? undefined : args.units} + units={args.units ? 'rem' : undefined} /> ) @@ -32,7 +47,6 @@ export const InputField: Story = args => { 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', }