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.

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

USWDS: File Input Documentation #987

Merged
merged 8 commits into from
Jul 7, 2020
Merged

Conversation

jaredcunha
Copy link
Contributor

@jaredcunha jaredcunha commented Jun 25, 2020

Description

Adds documentation for file input

Additional information

Include any of the following (as necessary):

  • Relevant research and support documents

Screen Shot 2020-06-25 at 6 50 42 PM

Before you hit Submit, make sure you’ve done whichever of these applies to you:

  • Follow the 18F Front End Coding Style Guide and Accessibility Guide.
  • Run npm test and make sure the tests for the files you have changed have passed.
  • Run your code through HTML_CodeSniffer and make sure it’s error free.
  • Title your pull request using this format: [Website] - [UI component]: Brief statement describing what this pull request solves.


<h4>When to use the file input</h4>
<ul class="usa-content-list">
<li><strong>Documents are required.</strong> You should only ask users to upload files when it is critical to service delivery.</li>

Choose a reason for hiding this comment

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

You use the word "upload" here but later mention that this component doesn't upload files. Maybe use the word, attach?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good point - better to be precise. I've reworded this "provide"

<h4>When to consider something else</h4>
<ul class="usa-content-list">
<li><strong>Documents are optional.</strong> Don’t ask users to provide documents if you do not require them.</li>
<li><strong>Upload functionality.</strong> The USWDS file input does not currently upload files.</li>
Copy link

@Ben-Judy-Flexion Ben-Judy-Flexion Jun 25, 2020

Choose a reason for hiding this comment

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

This might need some clarification. I think the point we're making is that it doesn't immediately upload when the user selects the file(s.) Or are we saying something different? Perhaps mention what it does do ("attaches files which will be uploaded upon form submission," or something like that.) Why might a developer need immediate upload functionality, though?

Copy link

@Ben-Judy-Flexion Ben-Judy-Flexion Jun 25, 2020

Choose a reason for hiding this comment

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

Maybe another "when to consider something else" case is when the user might want to send very large files.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I've changed this to say that the file input only posts files when the form is submitted. The bold text says "upload in place"

I think regarding the file size, we can say something like "asking for large files" so that we respect data limits or spotty signals.

</ul>
<h4>Usability guidance</h4>
<ul class="usa-content-list">
<li><strong>Allow multiple file formats.</strong> Users won’t have the same software. Allow multiple types of files so user won’t need to download new software.</li>

Choose a reason for hiding this comment

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

I'm not clear on this one. I get that we don't want to be overly restrictive in what file formats can be attached. I just don't understand the point about users not needing to download new software.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I'm wrestling with how to word this. You want to be flexible in what formats to allow. Like, don't require that files be .docx. Some people might use pages, which by default gives a .pages extension

@jaredcunha
Copy link
Contributor Author

jaredcunha commented Jun 25, 2020

@thisisdano This is ready for review. I have a couple of overarching questions about what to put into the guidance as well.

  • Should we mention how this component progressively enhances <input type="file">?
  • Should we talk about how for screen readers, the experience doesn't change?
  • Worth including the note about IE and Edge?
  • How do you feel about the examples above? I can't show what an input looks like with files attached. Maybe I could? I THINK i'd just have to make a small modification to the JS.

@thisisdano thisisdano changed the base branch from master to uswds-2.8.0 July 6, 2020 22:56
@thisisdano thisisdano merged commit e7e9757 into uswds-2.8.0 Jul 7, 2020
@thisisdano thisisdano deleted the 10x-forms/doc-upload branch July 7, 2020 01:19
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.

3 participants