Skip to content

Update document capture file input to display per design specifications#3999

Merged
aduth merged 8 commits intomasterfrom
aduth-file-input-styling
Aug 4, 2020
Merged

Update document capture file input to display per design specifications#3999
aduth merged 8 commits intomasterfrom
aduth-file-input-styling

Conversation

@aduth
Copy link
Contributor

@aduth aduth commented Jul 31, 2020

This pull request seeks to update the FileInput React component introduced to #3978 to appear more stylized and in line with the current design specifications.

Specifically, it adds support for:

  • Assigning a "banner text" to a file input
  • Showing the preview of a single image file as occupying the full width of the container

It brings the design in line with the branded variation:

  • Use updated text labels
  • When no value is assigned, the input appears with a wider, colored border
  • Show the input as proportioned like an ID (this only applies to the specific usage here, not to the FilePicker component broadly)
  • Show the file name in place of "Selected file", since the preview is no longer presented as a list

There are some device-specific considerations:

  • In mobile:
    • The preview heading which shows the file name is not visible
    • The hint text "Drag file here or choose from folder" is not visible

This is intended as a milestone work-in-progress, and does not yet implement:

  • Mobile-specific fields "Take photo or upload a photo", "Retake photo or upload photo"
  • Launching Acuant image capture from mobile devices with capable camera
  • Error handling

Note that mobile detection is performed based on the user agent. You can simulate in this browser using developer tools simulation.

Screen recording:

id-upload mov

cc @anniehirshman-gsa

@aduth aduth force-pushed the aduth-file-input-styling branch from 17f50a7 to 7b73e68 Compare August 3, 2020 13:36
@aduth
Copy link
Contributor Author

aduth commented Aug 3, 2020

Per design feedback from @anniehirshman-gsa , in 6ae77d1 the images will now scale to their natural full width. The primary difference is that the container height may expand or shrink according to the proportions of the image, whereas previously the container would always remain at the fixed "ID-like" proportion, regardless whether a value was assigned or not.

screenshot, natural image width

@aduth
Copy link
Contributor Author

aduth commented Aug 3, 2020

Per design feedback from @anniehirshman-gsa , updated focus and hover styles in 8f8a727 , primarily to ensure that the focus ring appears outside the dashed border.

  Default Hover Focus Hover & Focus
No value no value default no value hover no value focus no value focus and hover
Value value default value hover value focus value focus and hover

Copy link
Contributor

@zachmargolis zachmargolis left a comment

Choose a reason for hiding this comment

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

LGTM

@aduth aduth merged commit 0ab3754 into master Aug 4, 2020
@aduth aduth deleted the aduth-file-input-styling branch August 4, 2020 20:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants