diff --git a/app/src/assets/localization/en/device_settings.json b/app/src/assets/localization/en/device_settings.json index 78d23493234..e7e21e013b0 100644 --- a/app/src/assets/localization/en/device_settings.json +++ b/app/src/assets/localization/en/device_settings.json @@ -294,7 +294,7 @@ "update_robot_software": "Update robot software manually with a local file (.zip)", "updating": "Updating", "update_requires_restarting_robot": "Updating the robot software requires restarting the robot", - "upload_custom_logo_description": "Upload a logo for the robot to display during boot up. If no file is uploaded, we will display an anonymous logo.", + "upload_custom_logo_description": "Upload a logo for the robot to display during boot up.", "upload_custom_logo_dimensions": "The logo must fit within dimensions 1024 x 600 and be a PNG file (.png).", "upload_custom_logo": "Upload custom logo", "usage_settings": "Usage Settings", diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx index f891b580c6c..bab6dc8d864 100644 --- a/app/src/atoms/InputField/index.tsx +++ b/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} { diff --git a/app/src/molecules/FileUpload/FileUpload.stories.tsx b/app/src/molecules/FileUpload/FileUpload.stories.tsx new file mode 100644 index 00000000000..63a5336ad43 --- /dev/null +++ b/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 +> = 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, +} diff --git a/app/src/molecules/FileUpload/__tests__/FileUpload.test.tsx b/app/src/molecules/FileUpload/__tests__/FileUpload.test.tsx new file mode 100644 index 00000000000..3e14d809631 --- /dev/null +++ b/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) => { + return renderWithProviders(, { + i18nInstance: i18n, + })[0] +} + +const handleClick = vi.fn() + +describe('FileUpload', () => { + let props: React.ComponentProps + + 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') + }) +}) diff --git a/app/src/molecules/FileUpload/__tests__/test-file.png b/app/src/molecules/FileUpload/__tests__/test-file.png new file mode 100644 index 00000000000..4ce03c4f10d Binary files /dev/null and b/app/src/molecules/FileUpload/__tests__/test-file.png differ diff --git a/app/src/molecules/FileUpload/index.tsx b/app/src/molecules/FileUpload/index.tsx index 5e0fa7b0017..92779241a3e 100644 --- a/app/src/molecules/FileUpload/index.tsx +++ b/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 ( - + - {file.name} + {truncateString(file.name, 34, 19)} diff --git a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx index 1f615e76bc5..8a01e6a0c56 100644 --- a/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx +++ b/app/src/organisms/Devices/RobotSettings/AdvancedTab/AdvancedTabSlideouts/FactoryModeSlideout.tsx @@ -224,7 +224,7 @@ export function FactoryModeSlideout({ ( + render={({ field }) => ( )} /> - {errors.factoryModeInput != null ? ( - - {errors.factoryModeInput.message} - - ) : null} ) : null} {currentStep === 2 ? (