refactor(app): refine file upload, input field components

app/src/atoms/InputField/index.tsx

@@ -203,7 +203,7 @@ function Input(props: InputFieldProps): JSX.Element {
   `
 
   const TITLE_STYLE = css`
-    color: ${hasError ? COLORS.red50 : COLORS.black90};
+    color: ${COLORS.black90};
     padding-bottom: ${SPACING.spacing8};
     text-align: ${textAlign};
     @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {

app/src/molecules/FileUpload/FileUpload.stories.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import testFile from './__tests__/test-file.png'
+import { FileUpload } from '.'
+
+import type { StoryFn, Meta } from '@storybook/react'
+
+const file = new File([testFile], 'a-file-to-test.png')
+const handleClick = (): void => console.log('clicked the file')
+
+export default {
+  title: 'App/Molecules/FileUpload',
+  component: FileUpload,
+} as Meta
+
+const FileUploadTemplate: StoryFn<
+  React.ComponentProps<typeof FileUpload>
+> = args => <FileUpload {...args} />
+
+export const FileUploadComponent = FileUploadTemplate.bind({})
+FileUploadComponent.args = {
+  file,
+  fileError: null,
+  handleClick,
+}
+
+export const FileUploadError = FileUploadTemplate.bind({})
+FileUploadError.args = {
+  file,
+  fileError: 'a terrible file',
+  handleClick,
+}

app/src/molecules/FileUpload/__tests__/FileUpload.test.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { screen } from '@testing-library/react'
+
+import { renderWithProviders } from '../../../__testing-utils__'
+import { i18n } from '../../../i18n'
+import { FileUpload } from '..'
+import testFile from './test-file.png'
+
+const render = (props: React.ComponentProps<typeof FileUpload>) => {
+  return renderWithProviders(<FileUpload {...props} />, {
+    i18nInstance: i18n,
+  })[0]
+}
+
+const handleClick = vi.fn()
+
+describe('FileUpload', () => {
+  let props: React.ComponentProps<typeof FileUpload>
+
+  beforeEach(() => {
+    const file = new File([testFile], 'a-file-to-test.png')
+
+    props = {
+      file,
+      fileError: null,
+      handleClick,
+    }
+  })
+  it('renders file upload', () => {
+    render(props)
+    screen.getByText('a-file-to-test.png')
+    const removeFile = screen.getByLabelText('remove_file')
+    removeFile.click()
+    expect(handleClick).toBeCalled()
+  })
+
+  it('renders file upload error', () => {
+    render({ ...props, fileError: 'oops this is a bad file' })
+    screen.getByText('oops this is a bad file')
+  })
+})

app/src/molecules/FileUpload/index.tsx

@@ -12,6 +12,7 @@ import {
   JUSTIFY_SPACE_BETWEEN,
   SPACING,
   StyledText,
+  truncateString,
 } from '@opentrons/components'
 
 const FILE_UPLOAD_STYLE = css`
@@ -23,6 +24,13 @@ const FILE_UPLOAD_STYLE = css`
 }
 `
 
+const FILE_UPLOAD_FOCUS_VISIBLE = css`
+  &:focus-visible {
+    border-radius: ${BORDERS.borderRadius4};
+    box-shadow: 0 0 0 ${SPACING.spacing2} ${COLORS.blue50};
+  }
+`
+
 interface FileUploadProps {
   file: File
   fileError: string | null
@@ -36,7 +44,11 @@ export function FileUpload({
 }: FileUploadProps): JSX.Element {
   return (
     <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
-      <Btn onClick={handleClick} aria-label="remove_file">
+      <Btn
+        onClick={handleClick}
+        aria-label="remove_file"
+        css={FILE_UPLOAD_FOCUS_VISIBLE}
+      >
         <Flex
           alignItems={ALIGN_CENTER}
           backgroundColor={fileError == null ? COLORS.grey20 : COLORS.red30}
@@ -46,7 +58,7 @@ export function FileUpload({
           padding={SPACING.spacing8}
           css={FILE_UPLOAD_STYLE}
         >
-          <StyledText as="p">{file.name}</StyledText>
+          <StyledText as="p">{truncateString(file.name, 34, 19)}</StyledText>
           <Icon name="close" size="1.5rem" borderRadius="50%" />
         </Flex>
       </Btn>

app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx

@@ -224,7 +224,7 @@ export function FactoryModeSlideout({
           <Controller
             control={control}
             name="factoryModeInput"
-            render={({ field, fieldState }) => (
+            render={({ field }) => (
               <InputField
                 id="factoryModeInput"
                 name="factoryModeInput"
@@ -234,21 +234,16 @@ export function FactoryModeSlideout({
                   clearErrors()
                 }}
                 value={field.value}
-                error={fieldState.error?.message && ' '}
+                error={
+                  errors.factoryModeInput != null
+                    ? errors.factoryModeInput.message
+                    : null
+                }
                 onBlur={field.onBlur}
                 title={t('enter_factory_password')}
               />
             )}
           />
-          {errors.factoryModeInput != null ? (
-            <StyledText
-              as="label"
-              color={COLORS.red50}
-              marginTop={SPACING.spacing4}
-            >
-              {errors.factoryModeInput.message}
-            </StyledText>
-          ) : null}
         </Flex>
       ) : null}
       {currentStep === 2 ? (