Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added customizable text control to file input #2417

Merged
merged 7 commits into from
Jun 21, 2023
Merged

feat: added customizable text control to file input #2417

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3e35e03
added customizable text control to file input
werdnanoslen May 25, 2023
e50abbc
renamed to match css
werdnanoslen May 25, 2023
8d6ec01
added test
werdnanoslen May 25, 2023
dc63c28
minor fixes
werdnanoslen Jun 2, 2023
5a07d51
Merge branch 'main' into an-fileinputtext-2399
werdnanoslen Jun 2, 2023
4eba781
Merge branch 'main' into an-fileinputtext-2399
werdnanoslen Jun 6, 2023
0190645
Merge branch 'main' into an-fileinputtext-2399
gidjin Jun 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions src/components/forms/FileInput/FileInput.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,3 +158,15 @@ export const withRefAndCustomHandlers = (
</>
)
}

export const customText = (): React.ReactElement => (
<FormGroup>
<Label htmlFor="file-input-single">La entrada acepta un solo archivo</Label>
<FileInput
id="file-input-single"
name="file-input-single"
dragText="Arrastre el archivo aquí o "
chooseText="elija de una carpeta"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@werdnanoslen FYI There's also error text - still a bit more english in this component looks for "This is not a valid file type.". I just saw this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ah, just missed it. Started a new issue

/>
</FormGroup>
)
15 changes: 14 additions & 1 deletion src/components/forms/FileInput/FileInput.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react'
import { fireEvent, render, screen } from '@testing-library/react'
import { fireEvent, render, screen, within } from '@testing-library/react'
import userEvent from '@testing-library/user-event'

import { FileInput, FileInputRef } from './FileInput'
Expand Down Expand Up @@ -91,6 +91,19 @@ describe('FileInput component', () => {
jest.restoreAllMocks()
})

it('displays custom text when given', () => {
const customProps = {...testProps, dragText: "Custom dragText", chooseText: "Custom chooseText"}
const { getByTestId } = render(<FileInput {...customProps} />)

const dragText = within(getByTestId('file-input-instructions')).getByText(customProps.dragText)
expect(dragText).toBeInTheDocument()
expect(dragText).toHaveClass('usa-file-input__drag-text')

const chooseText = within(getByTestId('file-input-instructions')).getByText(customProps.chooseText)
expect(chooseText).toBeInTheDocument()
expect(chooseText).toHaveClass('usa-file-input__choose')
})

describe('when disabled', () => {
const disabledProps = { ...testProps, disabled: true }
it('the input element is disabled', () => {
Expand Down
11 changes: 8 additions & 3 deletions src/components/forms/FileInput/FileInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import { makeSafeForID } from './utils'
type FileInputProps = {
id: string
name: string
dragText?: string
chooseText?: string
disabled?: boolean
multiple?: boolean
accept?: string
Expand All @@ -33,6 +35,8 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
{
name,
id,
dragText,
chooseText,
disabled,
multiple,
className,
Expand Down Expand Up @@ -82,7 +86,8 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
'has-invalid-file': showError,
})

const dragText = multiple ? 'Drag files here or ' : 'Drag file here or '
const defaultDragText = multiple ? 'Drag files here or ' : 'Drag file here or '
const defaultChooseText = 'choose from folder'

const filePreviews = []
if (files) {
Expand Down Expand Up @@ -189,9 +194,9 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
className={instructionClasses}
aria-hidden="true">
{!hideDragText && (
<span className="usa-file-input__drag-text">{dragText}</span>
<span className="usa-file-input__drag-text">{dragText || defaultDragText}</span>
)}
<span className="usa-file-input__choose">choose from folder</span>
<span className="usa-file-input__choose">{chooseText || defaultChooseText}</span>
</div>
{filePreviews}
<div data-testid="file-input-box" className="usa-file-input__box"></div>
Expand Down