@patternfly/react-core 4.221.15 → 4.221.16

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.221.16 (2022-06-13)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.221.15 (2022-06-13)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/umd/react-core.min.css

@@ -23396,6 +23396,75 @@ svg.pf-c-spinner.pf-m-xl {
     direction: ltr;
   }
 }
+.pf-l-gallery {
+  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
+  --pf-l-gallery--GridTemplateColumns--min: 250px;
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--max: 1fr;
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
+  --pf-l-gallery--GridTemplateRows: auto;
+  display: grid;
+  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
+  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+}
+
+.pf-l-gallery.pf-m-gutter {
+  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
+}
+
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
+  }
+}
 .pf-l-flex {
   --pf-l-flex--Display: flex;
   --pf-l-flex--FlexWrap: wrap;
@@ -25472,75 +25541,6 @@ svg.pf-c-spinner.pf-m-xl {
     --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
   }
 }
-.pf-l-gallery {
-  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
-  --pf-l-gallery--GridTemplateColumns--min: 250px;
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--max: 1fr;
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
-  --pf-l-gallery--GridTemplateRows: auto;
-  display: grid;
-  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
-  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-}
-
-.pf-l-gallery.pf-m-gutter {
-  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
-}
-
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
-  }
-}
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
-  }
-}
 .pf-l-grid {
   --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
   --pf-l-grid__item--GridColumnStart: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.221.15",
+  "version": "4.221.16",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.72.15",
-    "@patternfly/react-styles": "^4.71.15",
-    "@patternfly/react-tokens": "^4.73.15",
+    "@patternfly/react-icons": "^4.72.16",
+    "@patternfly/react-styles": "^4.71.16",
+    "@patternfly/react-tokens": "^4.73.16",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "7ede2a5922f4ef870dd305ee1df3426e42eb1fe4"
+  "gitHead": "5d2d632484b0028c60bd5f13e970a27216727bd1"
 }

package/src/components/FileUpload/examples/FileUpload.md

@@ -18,42 +18,7 @@ Pressing _Clear_ button triggers `onClearClick` event.
 
 ### Simple text file
 
-```js
-import React from 'react';
-import { FileUpload } from '@patternfly/react-core';
-
-class SimpleTextFileUpload extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { value: '', filename: '', isLoading: false };
-    this.handleFileInputChange = (event, file) => this.setState({ filename: file.name });
-    this.handleTextOrDataChange = value => this.setState({ value });
-    this.handleClear = event => this.setState({ filename: '', value: '' });
-    this.handleFileReadStarted = fileHandle => this.setState({ isLoading: true });
-    this.handleFileReadFinished = fileHandle => this.setState({ isLoading: false });
-  }
-
-  render() {
-    const { value, filename, isLoading } = this.state;
-    return (
-      <FileUpload
-        id="simple-text-file"
-        type="text"
-        value={value}
-        filename={filename}
-        filenamePlaceholder="Drag and drop a file or upload one"
-        onFileInputChange={this.handleFileInputChange}
-        onDataChange={this.handleTextOrDataChange}
-        onTextChange={this.handleTextOrDataChange}
-        onReadStarted={this.handleFileReadStarted}
-        onReadFinished={this.handleFileReadFinished}
-        onClearClick={this.handleClear}
-        isLoading={isLoading}
-        browseButtonText="Upload"
-      />
-    );
-  }
-}
+```ts file="./FileUploadSimpleText.tsx"
 ```
 
 A user can always type instead of selecting a file, but by default, once a user selects a text file from their disk they are not allowed to edit it (to prevent unintended changes to a format-sensitive file). This behavior can be changed with the `allowEditingUploadedText` prop.
@@ -61,43 +26,7 @@ Typing/pasting text in the box will call `onTextChange` with a string, and a str
 
 ### Text file with edits allowed
 
-```js
-import React from 'react';
-import { FileUpload } from '@patternfly/react-core';
-
-class TextFileWithEditsAllowed extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { value: '', filename: '', isLoading: false };
-    this.handleFileInputChange = (event, file) => this.setState({ filename: file.name });
-    this.handleTextOrDataChange = value => this.setState({ value });
-    this.handleClear = event => this.setState({ filename: '', value: '' });
-    this.handleFileReadStarted = fileHandle => this.setState({ isLoading: true });
-    this.handleFileReadFinished = fileHandle => this.setState({ isLoading: false });
-  }
-
-  render() {
-    const { value, filename, isLoading } = this.state;
-    return (
-      <FileUpload
-        id="text-file-with-edits-allowed"
-        type="text"
-        value={value}
-        filename={filename}
-        filenamePlaceholder="Drag and drop a file or upload one"
-        onFileInputChange={this.handleFileInputChange}
-        onDataChange={this.handleTextOrDataChange}
-        onClearClick={this.handleClear}
-        onTextChange={this.handleTextOrDataChange}
-        onReadStarted={this.handleFileReadStarted}
-        onReadFinished={this.handleFileReadFinished}
-        isLoading={isLoading}
-        allowEditingUploadedText
-        browseButtonText="Upload"
-      />
-    );
-  }
-}
+```ts file="./FileUploadTextWithEdits.tsx"
 ```
 
 ### Restricting file size and type
@@ -110,58 +39,7 @@ Restricting file sizes and types in this way is for user convenience only, and i
 
 ### Text file with restrictions
 
-```js
-import React from 'react';
-import { FileUpload, Form, FormGroup } from '@patternfly/react-core';
-
-class TextFileUploadWithRestrictions extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { value: '', filename: '', isLoading: false, isRejected: false };
-    this.handleFileInputChange = (event, file) => this.setState({ filename: file.name });
-    this.handleTextOrDataChange = value => this.setState({ value });
-    this.handleClear = event => this.setState({ filename: '', value: '', isRejected: false });
-    this.handleFileRejected = (rejectedFiles, event) => this.setState({ isRejected: true });
-    this.handleFileReadStarted = fileHandle => this.setState({ isLoading: true });
-    this.handleFileReadFinished = fileHandle => this.setState({ isLoading: false });
-  }
-
-  render() {
-    const { value, filename, isLoading, isRejected } = this.state;
-    return (
-      <Form>
-        <FormGroup
-          fieldId="text-file-with-restrictions"
-          helperText="Upload a CSV file"
-          helperTextInvalid="Must be a CSV file no larger than 1 KB"
-          validated={isRejected ? 'error' : 'default'}
-        >
-          <FileUpload
-            id="text-file-with-restrictions"
-            type="text"
-            value={value}
-            filename={filename}
-            filenamePlaceholder="Drag and drop a file or upload one"
-            onFileInputChange={this.handleFileInputChange}
-            onDataChange={this.handleTextOrDataChange}
-            onTextChange={this.handleTextOrDataChange}
-            onClearClick={this.handleClear}
-            onReadStarted={this.handleFileReadStarted}
-            onReadFinished={this.handleFileReadFinished}
-            isLoading={isLoading}
-            dropzoneProps={{
-              accept: '.csv',
-              maxSize: 1024,
-              onDropRejected: this.handleFileRejected
-            }}
-            validated={isRejected ? 'error' : 'default'}
-            browseButtonText="Upload"
-          />
-        </FormGroup>
-      </Form>
-    );
-  }
-}
+```ts file="./FileUploadTextWithRestrictions.tsx"
 ```
 
 ### Other file types
@@ -170,35 +48,7 @@ If no `type` prop is specified, the component will not read files directly. When
 
 ### Simple file of any format
 
-```js
-import React from 'react';
-import { FileUpload } from '@patternfly/react-core';
-
-class SimpleFileUpload extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { value: null, filename: '' };
-    this.handleFileInputChange = (event, file) => {
-      this.setState({ filename: file.name });
-    };
-    this.handleClear = event => this.setState({ filename: '', value: '' });
-  }
-
-  render() {
-    const { value, filename } = this.state;
-    return (
-      <FileUpload
-        id="simple-file"
-        value={value}
-        filename={filename}
-        filenamePlaceholder="Drag and drop a file or upload one"
-        browseButtonText="Upload"
-        onFileInputChange={this.handleFileInputChange}
-        onClearClick={this.handleClear}
-      />
-    );
-  }
-}
+```ts file="./FileUploadSimpleFile.tsx"
 ```
 
 ### Customizing the file preview
@@ -207,43 +57,7 @@ Regardless of `type`, the preview area (the TextArea, or any future implementati
 
 ### Custom file preview
 
-```js
-import React from 'react';
-import { FileUpload } from '@patternfly/react-core';
-import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
-
-class CustomPreviewFileUpload extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { value: null, filename: '' };
-    this.handleFileInputChange = (event, file) => {
-      this.setState({ value: file, filename: file.name });
-    };
-    this.handleClear = event => this.setState({ filename: '', value: '' });
-  }
-
-  render() {
-    const { value, filename, isLoading } = this.state;
-    return (
-      <FileUpload
-        id="customized-preview-file"
-        value={value}
-        filename={filename}
-        filenamePlaceholder="Drag and drop a file or upload one"
-        onFileInputChange={this.handleFileInputChange}
-        onClearClick={this.handleClear}
-        hideDefaultPreview
-        browseButtonText="Upload"
-      >
-        {value && (
-          <div className="pf-u-m-md">
-            <FileUploadIcon size="lg" /> Custom preview here for your {value.size}-byte file named {value.name}
-          </div>
-        )}
-      </FileUpload>
-    );
-  }
-}
+```ts file="./FileUploadCustomPreview.tsx"
 ```
 
 ### Bringing your own file browse logic
@@ -254,83 +68,5 @@ Note that the `isLoading` prop is styled to position the spinner dead center abo
 
 ### Custom file upload
 
-```js
-import React from 'react';
-import { FileUploadField, Checkbox } from '@patternfly/react-core';
-
-class CustomFileUpload extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      value: '',
-      filename: false,
-      isClearButtonDisabled: true,
-      isLoading: false,
-      isDragActive: false,
-      hideDefaultPreview: false,
-      children: false,
-      hasPlaceholderText: false
-    };
-    this.handleTextAreaChange = value => {
-      this.setState({ value });
-    };
-  }
-
-  render() {
-    const {
-      value,
-      filename,
-      isClearButtonDisabled,
-      isLoading,
-      isDragActive,
-      hideDefaultPreview,
-      children,
-      hasPlaceholderText
-    } = this.state;
-    return (
-      <div>
-        {['filename', 'isClearButtonDisabled', 'isDragActive', 'isLoading', 'hideDefaultPreview', 'children', 'hasPlaceholderText'].map(
-          stateKey => (
-            <Checkbox
-              key={stateKey}
-              id={stateKey}
-              label={stateKey}
-              aria-label={stateKey}
-              isChecked={this.state[stateKey]}
-              onChange={checked =>
-                this.setState({
-                  [stateKey]: checked,
-                  // See notes above this example
-                  ...(stateKey === 'isLoading' && checked && { hideDefaultPreview: false }),
-                  ...(stateKey === 'hideDefaultPreview' && checked && { isLoading: false })
-                })
-              }
-            />
-          )
-        )}
-        <br />
-        <FileUploadField
-          id="custom-file-upload"
-          type="text"
-          value={value}
-          filename={filename ? 'example-filename.txt' : ''}
-          onTextChange={this.handleTextAreaChange}
-          filenamePlaceholder="Do something custom with this!"
-          onBrowseButtonClick={() => alert('Browse button clicked!')}
-          onClearButtonClick={() => alert('Clear button clicked!')}
-          isClearButtonDisabled={isClearButtonDisabled}
-          isLoading={isLoading}
-          isDragActive={isDragActive}
-          hideDefaultPreview={hideDefaultPreview}
-          browseButtonText="Upload"
-          textAreaPlaceholder={hasPlaceholderText ? "File preview" : ''}
-        >
-          {children && (
-            <div className="pf-u-m-md">(A custom preview of the uploaded file can be passed as children)</div>
-          )}
-        </FileUploadField>
-      </div>
-    );
-  }
-}
+```ts file="./FileUploadCustomUpload.tsx"
 ```

package/src/components/FileUpload/examples/FileUploadCustomPreview.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { FileUpload } from '@patternfly/react-core';
+import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
+
+export const CustomPreviewFileUpload: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(null);
+  const [filename, setFilename] = React.useState('');
+
+  const handleFileInputChange = (
+    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
+    file: File
+  ) => {
+    setValue(file);
+    setFilename(file.name);
+  };
+
+  const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    setFilename('');
+    setValue('');
+  };
+
+  return (
+    <FileUpload
+      id="customized-preview-file"
+      value={value}
+      filename={filename}
+      filenamePlaceholder="Drag and drop a file or upload one"
+      onFileInputChange={handleFileInputChange}
+      onClearClick={handleClear}
+      hideDefaultPreview
+      browseButtonText="Upload"
+    >
+      {value && (
+        <div className="pf-u-m-md">
+          <FileUploadIcon size="lg" /> Custom preview here for your {value.size}-byte file named {value.name}
+        </div>
+      )}
+    </FileUpload>
+  );
+};

package/src/components/FileUpload/examples/FileUploadCustomUpload.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import { FileUploadField, Checkbox } from '@patternfly/react-core';
+
+export const CustomPreviewFileUpload: React.FunctionComponent = () => {
+  const properties = [
+    'filename',
+    'isClearButtonDisabled',
+    'isDragActive',
+    'isLoading',
+    'hideDefaultPreview',
+    'children',
+    'hasPlaceholderText'
+  ];
+
+  const [value, setValue] = React.useState('');
+  const [filename, setFilename] = React.useState(false);
+  const [isClearButtonDisabled, setIsClearButtonDisabled] = React.useState(true);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isDragActive, setIsDragActive] = React.useState(false);
+  const [hideDefaultPreview, setHideDefaultPreview] = React.useState(false);
+  const [children, setChildren] = React.useState(false);
+  const [hasPlaceholderText, setHasPlaceholderText] = React.useState(false);
+  const [checkedState, setCheckedState] = React.useState([
+    filename,
+    isClearButtonDisabled,
+    isLoading,
+    isDragActive,
+    hideDefaultPreview,
+    children,
+    hasPlaceholderText
+  ]);
+
+  const handleTextAreaChange = (value: string) => {
+    setValue(value);
+  };
+
+  const handleOnChange = (checked: boolean, stateKey: string, index: number) => {
+    const updatedCheckedState = [...checkedState];
+    switch (stateKey) {
+      case 'filename':
+        checked ? setFilename(true) : setFilename(false);
+        break;
+
+      case 'isClearButtonDisabled':
+        checked ? setIsClearButtonDisabled(true) : setIsClearButtonDisabled(false);
+        break;
+
+      case 'isDragActive':
+        checked ? setIsDragActive(true) : setIsDragActive(false);
+        break;
+
+      case 'isLoading':
+        checked ? setIsLoading(true) : setIsLoading(false);
+        // See notes above this example
+        if (checked) {
+          updatedCheckedState[properties.indexOf('hideDefaultPreview')] = false;
+          setHideDefaultPreview(false);
+        }
+        break;
+
+      case 'hideDefaultPreview':
+        checked ? setHideDefaultPreview(true) : setHideDefaultPreview(false);
+        // See notes above this example
+        if (checked) {
+          updatedCheckedState[properties.indexOf('isLoading')] = false;
+          setIsLoading(false);
+        }
+        break;
+
+      case 'children':
+        checked ? setChildren(true) : setChildren(false);
+        break;
+
+      case 'hasPlaceholderText':
+        checked ? setHasPlaceholderText(true) : setHasPlaceholderText(false);
+        break;
+    }
+    updatedCheckedState[index] = checked;
+    setCheckedState(updatedCheckedState);
+  };
+
+  return (
+    <div>
+      {properties.map((stateKey, index) => (
+        <Checkbox
+          name={stateKey}
+          key={stateKey}
+          id={stateKey}
+          label={stateKey}
+          aria-label={stateKey}
+          isChecked={checkedState[index]}
+          onChange={checked => handleOnChange(checked, stateKey, index)}
+        />
+      ))}
+      <br />
+      <FileUploadField
+        id="custom-file-upload"
+        type="text"
+        value={value}
+        filename={filename ? 'example-filename.txt' : ''}
+        onTextChange={handleTextAreaChange}
+        filenamePlaceholder="Do something custom with this!"
+        onBrowseButtonClick={() => alert('Browse button clicked!')}
+        onClearButtonClick={() => alert('Clear button clicked!')}
+        isClearButtonDisabled={isClearButtonDisabled}
+        isLoading={isLoading}
+        isDragActive={isDragActive}
+        hideDefaultPreview={hideDefaultPreview}
+        browseButtonText="Upload"
+        textAreaPlaceholder={hasPlaceholderText ? 'File preview' : ''}
+      >
+        {children && <div className="pf-u-m-md">(A custom preview of the uploaded file can be passed as children)</div>}
+      </FileUploadField>
+    </div>
+  );
+};

package/src/components/FileUpload/examples/FileUploadSimpleFile.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FileUpload } from '@patternfly/react-core';
+
+export const SimpleFileUpload: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(null);
+  const [filename, setFilename] = React.useState('');
+
+  const handleFileInputChange = (
+    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
+    file: File
+  ) => {
+    setFilename(file.name);
+  };
+
+  const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    setFilename('');
+    setValue('');
+  };
+
+  return (
+    <FileUpload
+      id="simple-file"
+      value={value}
+      filename={filename}
+      filenamePlaceholder="Drag and drop a file or upload one"
+      onFileInputChange={handleFileInputChange}
+      onClearClick={handleClear}
+      browseButtonText="Upload"
+    />
+  );
+};

package/src/components/FileUpload/examples/FileUploadSimpleText.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { FileUpload } from '@patternfly/react-core';
+
+export const SimpleTextFileUpload: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [filename, setFilename] = React.useState('');
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const handleFileInputChange = (
+    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
+    file: File
+  ) => {
+    setFilename(file.name);
+  };
+
+  const handleTextOrDataChange = (value: string) => {
+    setValue(value);
+  };
+
+  const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    setFilename('');
+    setValue('');
+  };
+
+  const handleFileReadStarted = (_fileHandle: File) => {
+    setIsLoading(true);
+  };
+
+  const handleFileReadFinished = (_fileHandle: File) => {
+    setIsLoading(false);
+  };
+
+  return (
+    <FileUpload
+      id="text-file-with-edits-allowed"
+      type="text"
+      value={value}
+      filename={filename}
+      filenamePlaceholder="Drag and drop a file or upload one"
+      onFileInputChange={handleFileInputChange}
+      onDataChange={handleTextOrDataChange}
+      onTextChange={handleTextOrDataChange}
+      onReadStarted={handleFileReadStarted}
+      onReadFinished={handleFileReadFinished}
+      onClearClick={handleClear}
+      isLoading={isLoading}
+      allowEditingUploadedText={false}
+      browseButtonText="Upload"
+    />
+  );
+};

package/src/components/FileUpload/examples/FileUploadTextWithEdits.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { FileUpload } from '@patternfly/react-core';
+
+export const TextFileWithEditsAllowed: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [filename, setFilename] = React.useState('');
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const handleFileInputChange = (
+    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
+    file: File
+  ) => {
+    setFilename(file.name);
+  };
+
+  const handleTextOrDataChange = (value: string) => {
+    setValue(value);
+  };
+
+  const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    setFilename('');
+    setValue('');
+  };
+
+  const handleFileReadStarted = (_fileHandle: File) => {
+    setIsLoading(true);
+  };
+
+  const handleFileReadFinished = (_fileHandle: File) => {
+    setIsLoading(false);
+  };
+
+  return (
+    <FileUpload
+      id="text-file-with-edits-allowed"
+      type="text"
+      value={value}
+      filename={filename}
+      filenamePlaceholder="Drag and drop a file or upload one"
+      onFileInputChange={handleFileInputChange}
+      onDataChange={handleTextOrDataChange}
+      onTextChange={handleTextOrDataChange}
+      onReadStarted={handleFileReadStarted}
+      onReadFinished={handleFileReadFinished}
+      onClearClick={handleClear}
+      isLoading={isLoading}
+      allowEditingUploadedText={true}
+      browseButtonText="Upload"
+    />
+  );
+};

package/src/components/FileUpload/examples/FileUploadTextWithRestrictions.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { FileUpload, Form, FormGroup } from '@patternfly/react-core';
+
+export const TextFileUploadWithRestrictions: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [filename, setFilename] = React.useState('');
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isRejected, setIsRejected] = React.useState(false);
+
+  const handleFileInputChange = (
+    _event: React.ChangeEvent<HTMLInputElement> | React.DragEvent<HTMLElement>,
+    file: File
+  ) => {
+    setFilename(file.name);
+  };
+
+  const handleTextOrDataChange = (value: string) => {
+    setValue(value);
+  };
+
+  const handleClear = (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    setFilename('');
+    setValue('');
+    setIsRejected(false);
+  };
+
+  const handleFileRejected = (_rejectedFiles: File[], _event: React.DragEvent<HTMLElement>) => {
+    setIsRejected(true);
+  };
+
+  const handleFileReadStarted = (_fileHandle: File) => {
+    setIsLoading(true);
+  };
+
+  const handleFileReadFinished = (_fileHandle: File) => {
+    setIsLoading(false);
+  };
+
+  return (
+    <Form>
+      <FormGroup
+        fieldId="text-file-with-restrictions"
+        helperText="Upload a CSV file"
+        helperTextInvalid="Must be a CSV file no larger than 1 KB"
+        validated={isRejected ? 'error' : 'default'}
+      >
+        <FileUpload
+          id="text-file-with-restrictions"
+          type="text"
+          value={value}
+          filename={filename}
+          filenamePlaceholder="Drag and drop a file or upload one"
+          onFileInputChange={handleFileInputChange}
+          onDataChange={handleTextOrDataChange}
+          onTextChange={handleTextOrDataChange}
+          onReadStarted={handleFileReadStarted}
+          onReadFinished={handleFileReadFinished}
+          onClearClick={handleClear}
+          isLoading={isLoading}
+          dropzoneProps={{
+            accept: '.csv',
+            maxSize: 1024,
+            onDropRejected: handleFileRejected
+          }}
+          validated={isRejected ? 'error' : 'default'}
+          browseButtonText="Upload"
+        />
+      </FormGroup>
+    </Form>
+  );
+};