refactor(components, app): rename input field in components (#15964)

* refactor(components, app): rename input field in components
Opentrons · Aug 12, 2024 · 3c48aa1 · 3c48aa1
1 parent c3e9087
commit 3c48aa1
Show file tree

Hide file tree

Showing 18 changed files with 46 additions and 46 deletions.
diff --git a/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/TextField.tsx b/app/src/organisms/Devices/RobotSettings/ConnectNetwork/ConnectModal/TextField.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 
 import {
-  InputField,
+  LegacyInputField,
   DeprecatedCheckboxField,
   INPUT_TYPE_TEXT,
   INPUT_TYPE_PASSWORD,
@@ -37,7 +37,7 @@ export const TextField = (props: TextFieldProps): JSX.Element => {
 
   return (
     <FormRow label={label} labelFor={id}>
-      <InputField
+      <LegacyInputField
         {...{ className, type, id, name, value, error, onChange, onBlur }}
       />
       {isPassword && (

diff --git a/components/src/forms/InputField.stories.tsx b/components/src/forms/InputField.stories.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Box, SIZE_6 } from '@opentrons/components'
 
-import { InputField as InputFieldComponent } from './InputField'
+import { LegacyInputField as InputFieldComponent } from './LegacyInputField'
 
 import type { Story, Meta } from '@storybook/react'
 

diff --git a/components/src/forms/InputField.tsx → components/src/forms/LegacyInputField.tsx b/components/src/forms/InputField.tsx → components/src/forms/LegacyInputField.tsx
@@ -8,7 +8,7 @@ export const INPUT_TYPE_PASSWORD: 'password' = 'password'
 
 // TODO: Ian 2018-09-14 remove 'label' prop when IngredientPropertiesForm gets updated
 
-export interface InputFieldProps {
+export interface LegacyInputFieldProps {
   /** field is disabled if value is true */
   disabled?: boolean
   /** change handler */
@@ -54,10 +54,10 @@ export interface InputFieldProps {
 }
 
 /**
- * @deprecated Use `InputField` in App/atoms instead
+ * @deprecated Use `InputField`
  */
 
-export function InputField(props: InputFieldProps): JSX.Element {
+export function LegacyInputField(props: LegacyInputFieldProps): JSX.Element {
   const error = props.error != null
   const labelClass = cx(styles.form_field, props.className, {
     [styles.error]: error,
@@ -88,7 +88,7 @@ export function InputField(props: InputFieldProps): JSX.Element {
 }
 
 // TODO(mc, 2018-02-21): maybe simplify further and split out?
-function Input(props: InputFieldProps): JSX.Element {
+function Input(props: LegacyInputFieldProps): JSX.Element {
   const error = props.error != null
   const value = props.isIndeterminate ? '' : props.value ?? ''
   const placeHolder = props.isIndeterminate ? '-' : props.placeholder

diff --git a/components/src/forms/index.ts b/components/src/forms/index.ts
@@ -1,7 +1,7 @@
 export * from './DeprecatedCheckboxField'
 export * from './DropdownField'
 export * from './FormGroup'
-export * from './InputField'
+export * from './LegacyInputField'
 export * from './RadioGroup'
 export * from './Select'
 export * from './SelectField'

diff --git a/labware-library/src/labware-creator/components/TextField.tsx b/labware-library/src/labware-creator/components/TextField.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react'
 import { Field } from 'formik'
-import { InputField } from '@opentrons/components'
+import { LegacyInputField } from '@opentrons/components'
 import { reportFieldEdit } from '../analyticsUtils'
 import { getIsHidden } from '../formSelectors'
 import { getLabel } from '../fields'
-import type { InputFieldProps } from '@opentrons/components'
+import type { LegacyInputFieldProps } from '@opentrons/components'
 import type { LabwareFields } from '../fields'
 import type { FieldProps } from 'formik'
 import fieldStyles from './fieldStyles.module.css'
@@ -13,9 +13,9 @@ interface Props {
   name: keyof LabwareFields
   label?: string
   placeholder?: string
-  caption?: InputFieldProps['caption']
+  caption?: LegacyInputFieldProps['caption']
   inputMasks?: Array<(prevValue: string, update: string) => string>
-  units?: InputFieldProps['units']
+  units?: LegacyInputFieldProps['units']
 }
 
 // NOTE(Ian 2019-07-23): per-field hide-when-autofilled is not yet necessary,
@@ -44,7 +44,7 @@ export const TextField = (props: Props): JSX.Element => {
           <div className={fieldStyles.field_wrapper}>
             <label className={fieldStyles.field_label}>
               {label ?? getLabel(props.name, form.values as LabwareFields)}
-              <InputField
+              <LegacyInputField
                 name={field.name}
                 value={field.value}
                 caption={caption}

diff --git a/protocol-designer/src/components/EditableTextField.tsx b/protocol-designer/src/components/EditableTextField.tsx
@@ -1,6 +1,6 @@
 // TODO: Ian 2018-10-30 if we like this, add it to components library
 import * as React from 'react'
-import { ClickOutside, Icon, InputField } from '@opentrons/components'
+import { ClickOutside, Icon, LegacyInputField } from '@opentrons/components'
 import styles from './editableTextField.module.css'
 
 interface Props {
@@ -53,7 +53,7 @@ export function EditableTextField(props: Props): JSX.Element {
             onSubmit={handleFormSubmit}
             ref={ref}
           >
-            <InputField
+            <LegacyInputField
               autoFocus
               value={transientValue}
               onChange={updateValue}

diff --git a/protocol-designer/src/components/FilePage.tsx b/protocol-designer/src/components/FilePage.tsx
@@ -13,7 +13,7 @@ import {
   InstrumentGroup,
   OutlineButton,
   DeprecatedPrimaryButton,
-  InputField,
+  LegacyInputField,
 } from '@opentrons/components'
 import { resetScrollElements } from '../ui/steps/utils'
 import { EditModulesCard } from './modules'
@@ -149,7 +149,7 @@ export const FilePage = (): JSX.Element => {
                 control={control}
                 name="protocolName"
                 render={({ field }) => (
-                  <InputField
+                  <LegacyInputField
                     placeholder="Untitled"
                     name="protocolName"
                     value={protocolName}
@@ -170,7 +170,7 @@ export const FilePage = (): JSX.Element => {
                 control={control}
                 name="author"
                 render={({ field }) => (
-                  <InputField
+                  <LegacyInputField
                     name="author"
                     value={author}
                     onChange={field.onChange}
@@ -191,7 +191,7 @@ export const FilePage = (): JSX.Element => {
               control={control}
               name="description"
               render={({ field }) => (
-                <InputField
+                <LegacyInputField
                   name="description"
                   value={description}
                   onChange={field.onChange}

diff --git a/protocol-designer/src/components/LiquidPlacementForm/LiquidPlacementForm.tsx b/protocol-designer/src/components/LiquidPlacementForm/LiquidPlacementForm.tsx
@@ -11,7 +11,7 @@ import {
   FormGroup,
   OutlineButton,
   DeprecatedPrimaryButton,
-  InputField,
+  LegacyInputField,
 } from '@opentrons/components'
 import styles from './LiquidPlacementForm.module.css'
 import formStyles from '../forms/forms.module.css'
@@ -212,7 +212,7 @@ export const LiquidPlacementForm = (): JSX.Element | null => {
                 required: true,
               }}
               render={({ field }) => (
-                <InputField
+                <LegacyInputField
                   name="volume"
                   units={t('application:units.microliter')}
                   value={volume}

diff --git a/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx b/protocol-designer/src/components/LiquidsPage/LiquidEditForm.tsx
@@ -8,7 +8,7 @@ import {
   Card,
   DeprecatedCheckboxField,
   FormGroup,
-  InputField,
+  LegacyInputField,
   OutlineButton,
   DeprecatedPrimaryButton,
   Flex,
@@ -133,7 +133,7 @@ export function LiquidEditForm(props: LiquidEditFormProps): JSX.Element {
                 control={control}
                 name="name"
                 render={({ field }) => (
-                  <InputField
+                  <LegacyInputField
                     name="name"
                     error={
                       touchedFields.name != null ? errors.name?.message : null
@@ -153,7 +153,7 @@ export function LiquidEditForm(props: LiquidEditFormProps): JSX.Element {
                 control={control}
                 name="description"
                 render={({ field }) => (
-                  <InputField
+                  <LegacyInputField
                     name="description"
                     value={description}
                     onChange={field.onChange}

diff --git a/protocol-designer/src/components/StepEditForm/fields/FlowRateField/FlowRateInput.tsx b/protocol-designer/src/components/StepEditForm/fields/FlowRateField/FlowRateInput.tsx
@@ -6,7 +6,7 @@ import {
   AlertModal,
   FormGroup,
   RadioGroup,
-  InputField,
+  LegacyInputField,
   Flex,
   useHoverTooltip,
   Tooltip,
@@ -147,7 +147,7 @@ export const FlowRateInput = (props: FlowRateInputProps): JSX.Element => {
   }
 
   const FlowRateInputField = (
-    <InputField
+    <LegacyInputField
       disabled={disabled}
       caption={rangeDescription}
       error={errorMessage}
@@ -215,7 +215,7 @@ export const FlowRateInput = (props: FlowRateInputProps): JSX.Element => {
     <>
       {flowRateType === 'blowout' ? (
         <Flex {...targetProps}>
-          <InputField
+          <LegacyInputField
             className={className || stepFormStyles.small_field}
             disabled={disabled}
             isIndeterminate={isIndeterminate}
@@ -229,7 +229,7 @@ export const FlowRateInput = (props: FlowRateInputProps): JSX.Element => {
         </Flex>
       ) : (
         <FormGroup label={label || DEFAULT_LABEL} disabled={disabled}>
-          <InputField
+          <LegacyInputField
             className={className || stepFormStyles.small_field}
             disabled={disabled}
             isIndeterminate={isIndeterminate}

diff --git a/protocol-designer/src/components/StepEditForm/fields/ProfileItemRows.tsx b/protocol-designer/src/components/StepEditForm/fields/ProfileItemRows.tsx
@@ -4,7 +4,7 @@ import { useDispatch } from 'react-redux'
 import cx from 'classnames'
 import {
   Icon,
-  InputField,
+  LegacyInputField,
   OutlineButton,
   Tooltip,
   useConditionalConfirm,
@@ -270,7 +270,7 @@ const ProfileField = (props: ProfileFieldProps): JSX.Element => {
   }
   return (
     <div className={styles.step_input_wrapper}>
-      <InputField
+      <LegacyInputField
         className={cx(styles.step_input, className)}
         error={errorToShow}
         units={units}

diff --git a/protocol-designer/src/components/StepEditForm/fields/TextField.tsx b/protocol-designer/src/components/StepEditForm/fields/TextField.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { InputField } from '@opentrons/components'
+import { LegacyInputField } from '@opentrons/components'
 import type { FieldProps } from '../types'
 
 type TextFieldProps = FieldProps & {
@@ -20,7 +20,7 @@ export const TextField = (props: TextFieldProps): JSX.Element => {
   } = props
 
   return (
-    <InputField
+    <LegacyInputField
       {...otherProps}
       error={errorToShow}
       onBlur={onFieldBlur}

diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionModal.tsx b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/TipPositionModal.tsx
@@ -6,7 +6,7 @@ import {
   AlertModal,
   DIRECTION_COLUMN,
   Flex,
-  InputField,
+  LegacyInputField,
   RadioGroup,
   SPACING,
   LegacyStyledText,
@@ -245,7 +245,7 @@ export const TipPositionModal = (
         <LegacyStyledText as="label" paddingLeft={SPACING.spacing24}>
           {t('tip_position.field_titles.x_position')}
         </LegacyStyledText>
-        <InputField
+        <LegacyInputField
           caption={t('tip_position.caption', {
             min: roundedXMin,
             max: roundedXMax,
@@ -267,7 +267,7 @@ export const TipPositionModal = (
         <LegacyStyledText as="label" paddingLeft={SPACING.spacing24}>
           {t('tip_position.field_titles.y_position')}
         </LegacyStyledText>
-        <InputField
+        <LegacyInputField
           caption={t('tip_position.caption', {
             min: roundedYMin,
             max: roundedYMax,
@@ -285,7 +285,7 @@ export const TipPositionModal = (
         <LegacyStyledText as="label" paddingLeft={SPACING.spacing24}>
           {t('tip_position.field_titles.z_position')}
         </LegacyStyledText>
-        <InputField
+        <LegacyInputField
           caption={t('tip_position.caption', {
             min: minMmFromBottom,
             max: maxMmFromBottom,

diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/ZTipPositionModal.tsx b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/ZTipPositionModal.tsx
@@ -7,7 +7,7 @@ import {
   Flex,
   HandleKeypress,
   Icon,
-  InputField,
+  LegacyInputField,
   OutlineButton,
   RadioGroup,
 } from '@opentrons/components'
@@ -160,7 +160,7 @@ export function ZTipPositionModal(props: ZTipPositionModalProps): JSX.Element {
   }
 
   const TipPositionInputField = !isDefault && (
-    <InputField
+    <LegacyInputField
       caption={t('tip_position.caption', {
         min: minMm,
         max: maxMm,

diff --git a/protocol-designer/src/components/StepEditForm/fields/TipPositionField/index.tsx b/protocol-designer/src/components/StepEditForm/fields/TipPositionField/index.tsx
@@ -6,7 +6,7 @@ import {
   Flex,
   FormGroup,
   Icon,
-  InputField,
+  LegacyInputField,
   Tooltip,
   useHoverTooltip,
 } from '@opentrons/components'
@@ -185,7 +185,7 @@ export function TipPositionField(props: TipPositionFieldProps): JSX.Element {
             />
           </Flex>
         ) : (
-          <InputField
+          <LegacyInputField
             disabled={disabled}
             className={stepFormStyles.small_field}
             readOnly

diff --git a/protocol-designer/src/components/StepEditForm/fields/TipWellSelectionField/index.tsx b/protocol-designer/src/components/StepEditForm/fields/TipWellSelectionField/index.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { createPortal } from 'react-dom'
-import { FormGroup, InputField } from '@opentrons/components'
+import { FormGroup, LegacyInputField } from '@opentrons/components'
 import { getPipetteEntities } from '../../../../step-forms/selectors'
 import { getNozzleType } from '../../utils'
 import { getMainPagePortalEl } from '../../../portals/MainPageModalPortal'
@@ -68,7 +68,7 @@ export function TipWellSelectionField(
         label={t('step_edit_form.wellSelectionLabel.wells')}
         className={styles.small_field}
       >
-        <InputField
+        <LegacyInputField
           readOnly
           error={errorToShow}
           name={name}

diff --git a/...col-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionField.tsx b/...col-designer/src/components/StepEditForm/fields/WellSelectionField/WellSelectionField.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { createPortal } from 'react-dom'
 import { useDispatch, useSelector } from 'react-redux'
 import { useTranslation } from 'react-i18next'
-import { FormGroup, InputField } from '@opentrons/components'
+import { FormGroup, LegacyInputField } from '@opentrons/components'
 import { COLUMN } from '@opentrons/shared-data'
 import {
   actions as stepsActions,
@@ -80,7 +80,7 @@ export const WellSelectionField = (props: Props): JSX.Element => {
       : t('step_edit_form.wellSelectionLabel.wells')
   return (
     <FormGroup label={label} disabled={disabled} className={styles.small_field}>
-      <InputField
+      <LegacyInputField
         readOnly
         name={name}
         value={primaryWellCount ?? null}

diff --git a/protocol-designer/src/components/modals/MoreOptionsModal.tsx b/protocol-designer/src/components/modals/MoreOptionsModal.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import {
   FormGroup,
-  InputField,
+  LegacyInputField,
   LegacyModal,
   OutlineButton,
 } from '@opentrons/components'
@@ -54,7 +54,7 @@ export function MoreOptionsModal(props: Props): JSX.Element {
           label={t('form:step_edit_form.field.step_name.label')}
           className={styles.form_group}
         >
-          <InputField
+          <LegacyInputField
             onChange={makeHandleChange('stepName')}
             value={String(formData.stepName)}
           />