diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/file-upload-multiple.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/file-upload-multiple.md index a5aad56216..2d3ee4bc96 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/file-upload-multiple.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/file-upload-multiple.md @@ -4,6 +4,8 @@ section: components subsection: file-upload --- +import '../components.css'; + A file upload component is commonly found in forms, but can also live as a standalone element. *Note: This component is for both single and multiple file upload scenarios that do not require a text preview. For a single file upload that supports text preview, see the [file upload component](/components/file-upload/simple-file-upload).* @@ -13,7 +15,9 @@ A file upload component is commonly found in forms, but can also live as a stand ### Multiple file upload component -Multiple File Upload +
+ Multiple File Upload +
Most multiple file upload components contain 5 basic elements: @@ -38,7 +42,9 @@ Most multiple file upload components contain 5 basic elements: **Best practices:** -best practices for file upload +
+ Best practices for file upload +
1. **Sizing:** Modify the drop zone to fit your context. For example, when placing the component in forms, align the width of the drop zone to the form fields. @@ -58,23 +64,29 @@ The component can be set to restrict specific file types and sizes according to ### Upload file(s) via the Upload button Users have the option to upload files by clicking the button inside the drop zone. Clicking on the button prompts a file selector dialog to open. Once users select 1 or more files from the dialog, the files will populate below the drop zone on the page. The file(s) may display a loading state before uploading is successfully completed. -file upload using the upload button - +
+ File upload using the upload button +
### Drag and drop file(s) Users have the option to directly upload files by dragging and dropping them into the specified drop zone area. When dragging files into the drop zone area, the drop zone changes color to indicate the active area. Once the cursor hits the drop zone area it changes with a preview of the file(s) users are about to upload. The style of cursor change is rendered by the user's browser. -file upload using drag and drop - +
+ File upload using drag and drop +
### Loading states A file that is being uploaded has 3 distinct states—waiting, in progress and uploaded. -A file that is being uploaded has 3 distinct states +
+ A file that is being uploaded has 3 distinct states +
### Validation When a specific file cannot be uploaded successfully, the corresponding file will show an error state. Error messages should provide clear guidance to help the user resolve the error. -file upload with error state +
+ file upload with error state +
\ No newline at end of file diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/best-practices.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/best-practices.png deleted file mode 100644 index 8c31afac9e..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/best-practices.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/best-practices.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/best-practices.svg new file mode 100644 index 0000000000..a9c96b2ae3 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/best-practices.svg @@ -0,0 +1,176 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/elements.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/elements.png deleted file mode 100644 index 323c14b537..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/elements.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/elements.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/elements.svg new file mode 100644 index 0000000000..7afb480bbd --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/elements.svg @@ -0,0 +1,75 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/loading-states.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/loading-states.png deleted file mode 100644 index 4b246e576c..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/loading-states.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/loading-states.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/loading-states.svg new file mode 100644 index 0000000000..1925e0b84d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/loading-states.svg @@ -0,0 +1,163 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/multi-upload-usage.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/multi-upload-usage.svg new file mode 100644 index 0000000000..e94e93f198 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/multi-upload-usage.svg @@ -0,0 +1,179 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/upload-via-button.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/upload-via-button.png deleted file mode 100644 index be92464e13..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/upload-via-button.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/upload-via-button.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/upload-via-button.svg new file mode 100644 index 0000000000..a93c251b80 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/upload-via-button.svg @@ -0,0 +1,126 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/upload-via-drag-drop.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/upload-via-drag-drop.svg new file mode 100644 index 0000000000..d523a87a7e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/upload-via-drag-drop.svg @@ -0,0 +1,135 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/validation.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/validation.png deleted file mode 100644 index 633fd8ba33..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/validation.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/validation.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/validation.svg new file mode 100644 index 0000000000..2dde168c82 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload-multiple/img/validation.svg @@ -0,0 +1,166 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/Fileupload.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/Fileupload.svg new file mode 100644 index 0000000000..7a585d532a --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/Fileupload.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/Loading.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/Loading.svg new file mode 100644 index 0000000000..5d74647a2e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/Loading.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/file-upload.md b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/file-upload.md index 1d7a7b7bd6..401cc82e5f 100644 --- a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/file-upload.md +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/file-upload.md @@ -4,8 +4,13 @@ section: components subsection: file-upload --- +import '../components.css'; + ## Elements -File Upload + +
+ File Upload +
1. **Label**: Text to inform users about how they can interact with the component. The text should describe that you can either drag and drop a file into the drop zone, or click the button to upload a file. @@ -31,27 +36,35 @@ When the user hovers over the file upload component, a message should appear tel ### Upload complete non-editable -File upload with greyed out text box +
+ File upload with greyed out text box +
Once the file is uploaded, users cannot edit the text displayed. The text box should be greyed out to indicate it cannot be changed. ### Upload complete editable -File Upload with text editable +
+ File Upload with text editable +
Once the file is uploaded, the user can edit the text displayed by clicking within the text box. ### Loading states -File upload with loading symbol +
+ File Upload with loading symbol +
While a file is being uploaded, the waiting icon is displayed. ### Error -File upload with a an error alert +
+ File upload with a an error alert +
When a specific file cannot be uploaded successfully, the corresponding file will show an error state. Error messages should provide clear guidance to help the user resolve the error. diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/FileError.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/FileError.png deleted file mode 100644 index afa4481782..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/FileError.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/FileError.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/FileError.svg new file mode 100644 index 0000000000..deb2571b6d --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/FileError.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Fileupload.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Fileupload.png deleted file mode 100644 index 5ec3b52f6e..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Fileupload.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Fileupload.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Fileupload.svg new file mode 100644 index 0000000000..e1a3b1d98e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Fileupload.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Loading.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Loading.png deleted file mode 100644 index 490b7afa07..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Loading.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Loading.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Loading.svg new file mode 100644 index 0000000000..4c86daf16e --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Loading.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Noneditable.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Noneditable.png deleted file mode 100644 index 70dfacd202..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Noneditable.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Noneditable.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Noneditable.svg new file mode 100644 index 0000000000..761bfc3575 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/Noneditable.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/editable.png b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/editable.png deleted file mode 100644 index 0c74e07eb3..0000000000 Binary files a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/editable.png and /dev/null differ diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/editable.svg b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/editable.svg new file mode 100644 index 0000000000..d13307e553 --- /dev/null +++ b/packages/documentation-site/patternfly-docs/content/design-guidelines/components/file-upload/img/editable.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + +