Skip to content

Commit

Permalink
content edit
Browse files Browse the repository at this point in the history
  • Loading branch information
laurenmrice committed Aug 6, 2020
1 parent 5accf26 commit a61f9f3
Showing 1 changed file with 11 additions and 19 deletions.
30 changes: 11 additions & 19 deletions src/pages/components/file-uploader/usage.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ uploader.

| Type | Way it works |
| ----------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
| [File uploader(default)](#file uploader) | Upload one or more files by clicking an action button that prompts a file selection dialog. |
| [Drag and drop file uploader](#drag and drop file uploader) | Drag and drop selected files directly into a drop zone area to upload. |
| [File uploader(default)](#file-uploader) | Upload one or more files by clicking an action button that prompts a file selection dialog. |
| [Drag and drop file uploader](#drag-and-drop-file-uploader) | Drag and drop selected files directly into a drop zone area to upload. |

### When to use

Expand Down Expand Up @@ -144,7 +144,7 @@ uploader.

## Formatting

#### Anatomy
### Anatomy

<Row>
<Column colLg={8}>
Expand Down Expand Up @@ -249,7 +249,7 @@ element.
### Further guidance

For further content guidance, see Carbon's
[content guidelines](notion://www.notion.so/guidelines/content/general).
[content guidelines](https://www.carbondesignsystem.com/guidelines/content/overview).

### Loading states

Expand All @@ -266,7 +266,7 @@ uploaded.

### Interactions

**Mouse**
#### Mouse

Moving your mouse anywhere within the bounds of the drop zone area with an
attached file will enable you to drop it inside of the area and begin to upload.
Expand All @@ -291,7 +291,7 @@ To remove an uploaded file, click the "x” (or close) icon.

#### Keyboard

Upload button or drop zone:
####Upload button or drop zone:

- The file uploader button or drop zone can be activated by pressing `Space` or
`Enter`.
Expand All @@ -300,7 +300,7 @@ Upload button or drop zone:
- After the file selection dialog closes, focus should retain the user’s point
of rgard and return to the element that invoked it.

Uploaded file:
####Uploaded file:

- Pressing `Tab` shifts focus to the “x” icon.
- Pressing `Space` or `Enter` while the "x" icon is in focus will delete the
Expand All @@ -315,13 +315,6 @@ Uploaded file:
- NVDA: Users can copy code by pressing `Space` while the copy button has screen
reader focus.

## Removing files

Developers will use JavaScript to inject a “close” button on each file that is
selected to be uploaded. It's up to the developer to code the logic for removing
these files individually. However, keep in mind that this kind of editing isn't
supported natively in the browser.

### Validation

When a specific file cannot be uploaded successfully it will show an error
Expand All @@ -343,7 +336,10 @@ file, you can alternatively use an inline error notification.
## File uploader

A file uploader traditionally uploads one or more files by clicking an action
button that prompts a file selection dialog.
button that prompts a file selection dialog. Once you have selected one or more
files from the dialog, the selected files will populate below the file uploader
on the page. Your file may temporarily display a loading state before uploading
has been successfully completed.

<Row>
<Column colLg={12}>
Expand All @@ -353,10 +349,6 @@ button that prompts a file selection dialog.
</Column>
</Row>

Once you have selected one or more files from the dialog, the selected files
will populate below the file uploader on the page. Your file may temporarily
display a loading state before uploading has been successfully completed.

## Drag and drop file uploader

Drag and drop file uploaders are used to directly upload files by dragging and
Expand Down

0 comments on commit a61f9f3

Please sign in to comment.