@patternfly/react-core 4.199.3 → 4.200.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.199.3",
+  "version": "4.200.0",
   "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,16 +34,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.50.3",
-    "@patternfly/react-styles": "^4.49.3",
-    "@patternfly/react-tokens": "^4.51.3",
+    "@patternfly/react-icons": "^4.51.0",
+    "@patternfly/react-styles": "^4.50.0",
+    "@patternfly/react-tokens": "^4.52.0",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.183.1",
+    "@patternfly/patternfly": "4.183.2",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "5ebdd87969330ddee041f3a5b91ef9293be16abd"
+  "gitHead": "ece8d3daaff4df670618823e159fa5eea1b95490"
 }

package/src/components/Avatar/Avatar.tsx

@@ -12,6 +12,8 @@ export interface AvatarProps
   alt: string;
   /** Border to add */
   border?: 'light' | 'dark';
+  /** Size variant of avatar. */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
 }
 
 export const Avatar: React.FunctionComponent<AvatarProps> = ({
@@ -19,6 +21,7 @@ export const Avatar: React.FunctionComponent<AvatarProps> = ({
   src = '',
   alt,
   border,
+  size,
   ...props
 }: AvatarProps) => (
   <img
@@ -26,6 +29,7 @@ export const Avatar: React.FunctionComponent<AvatarProps> = ({
     alt={alt}
     className={css(
       styles.avatar,
+      styles.modifiers[size],
       border === 'light' && styles.modifiers.light,
       border === 'dark' && styles.modifiers.dark,
       className

package/src/components/Avatar/examples/Avatar.md

@@ -10,30 +10,59 @@ import avatarImgDark from './avatarImgDark.svg';
 import './example.css';
 
 ## Examples
+
 ### Basic
+
 ```ts
 import React from 'react';
 import { Avatar } from '@patternfly/react-core';
 import avatarImg from './avatarImg.svg';
 
-<Avatar src={avatarImg} alt="avatar" />
+<Avatar src={avatarImg} alt="avatar" />;
+```
+
+### Size variations
+
+```ts
+import React from 'react';
+import { Avatar } from '@patternfly/react-core';
+import avatarImg from './avatarImg.svg';
+
+<React.Fragment>
+  Small
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="sm" />
+  <br />
+  Medium
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="md" />
+  <br />
+  Large
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="lg" />
+  <br />
+  Extra Large
+  <br />
+  <Avatar src={avatarImg} alt="avatar" size="xl" />
+</React.Fragment>;
 ```
 
 ### Bordered - light
+
 ```ts
 import React from 'react';
 import { Avatar } from '@patternfly/react-core';
 import avatarImg from './img_avatar.svg';
 
-<Avatar src={avatarImg} alt="avatar" border="light" />
+<Avatar src={avatarImg} alt="avatar" border="light" />;
 ```
 
 ### Bordered - dark
+
 ```ts
 import React from 'react';
 import { Avatar } from '@patternfly/react-core';
 import avatarImgDark from './img_avatar-dark.svg';
 
-<Avatar src={avatarImgDark} alt="avatar" border="dark" />
+<Avatar src={avatarImgDark} alt="avatar" border="dark" />;
 ```
-

package/src/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -11,167 +11,55 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 ### Basic
 
-```js
-import React from 'react';
-import { ClipboardCopy } from '@patternfly/react-core';
-
-<ClipboardCopy hoverTip="Copy" clickTip="Copied">This is editable</ClipboardCopy>;
+```ts file="./ClipboardCopyBasic.tsx"
 ```
 
 ### Read Only
 
-```js
-import React from 'react';
-import { ClipboardCopy } from '@patternfly/react-core';
-
-<ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied">This is read-only</ClipboardCopy>;
+```ts file="./ClipboardCopyReadOnly.tsx"
 ```
 
 ### Expanded
 
-```js
-import React from 'react';
-import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
-
-<ClipboardCopy hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion} >
-  Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
-  expansion.
-</ClipboardCopy>;
+```ts file="./ClipboardCopyExpanded.tsx"
 ```
 
 ### Read only expanded
 
-```js
-import React from 'react';
-import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
-
-<ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
-  Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
-  expansion.
-</ClipboardCopy>;
+```ts file="./ClipboardCopyReadOnlyExpanded.tsx"
 ```
 
 ### Read only expanded by default
 
-```js
-import React from 'react';
-import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
-
-<ClipboardCopy isReadOnly isExpanded hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
-  Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
-  expansion.
-</ClipboardCopy>;
+```ts file="./ClipboardCopyReadOnlyExpandedByDefault.tsx"
 ```
 
 ### Expanded with array
 
-```js
-import React from 'react';
-import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
-
-ClipboardCopyArrayOfElements = () => {
-  let text = [
-    'Got a lot of text here,',
-    'need to see all of it?',
-    'Click that arrow on the left side and check out the resulting expansion.'
-  ];
-  return <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>{text.join(' ')}</ClipboardCopy>;
-};
+```ts file="./ClipboardCopyExpandedWithArray.tsx"
 ```
 
 ### JSON object (wrap code with pre)
 
-```js
-import React from 'react';
-import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
-
-<ClipboardCopy isCode hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
-  {`{ "menu": {
-  "id": "file",
-  "value": "File",
-  "popup": {
-    "menuitem": [
-      {"value": "New", "onclick": "CreateNewDoc()"},
-      {"value": "Open", "onclick": "OpenDoc()"},
-      {"value": "Close", "onclick": "CloseDoc()"}
-    ]
-  }
-}} `}
-</ClipboardCopy>;
+```ts file="./ClipboardCopyJSONObject.tsx"
 ```
 
 ### Inline compact
 
-```js
-import React from 'react';
-import { ClipboardCopy } from '@patternfly/react-core';
-
-<ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">2.3.4-2-redhat</ClipboardCopy>;
+```ts file="./ClipboardCopyInlineCompact.tsx"
 ```
 
 ### Inline compact code
 
-```js
-import React from 'react';
-import { ClipboardCopy } from '@patternfly/react-core';
-
-<ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact" isCode>
-  2.3.4-2-redhat
-</ClipboardCopy>;
+```ts file="./ClipboardCopyInlineCompactCode.tsx"
 ```
 
 ### Inline compact with additional action
 
-```js
-import React from 'react';
-import { ClipboardCopy, ClipboardCopyAction, Button } from '@patternfly/react-core';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
-
-<ClipboardCopy
-  hoverTip="Copy"
-  clickTip="Copied"
-  variant="inline-compact"
-  additionalActions={
-    <ClipboardCopyAction>
-      <Button variant="plain" aria-label="Run in web terminal">
-        <PlayIcon aria-hidden />
-      </Button>
-    </ClipboardCopyAction>
-  }
->
-  2.3.4-2-redhat
-</ClipboardCopy>;
+```ts file="./ClipboardCopyInlineCompactWithAdditionalAction.tsx"
 ```
 
 ### Inline compact in sentence
 
-```js
-import React from 'react';
-import { ClipboardCopy } from '@patternfly/react-core';
-
-<React.Fragment>
-  <b>Basic</b>
-  <br />
-  Lorem ipsum {<ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">2.3.4-2-redhat</ClipboardCopy>} dolor sit amet.
-  <br /> <br />
-  <b>Long copy string</b>
-  <br />
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
-  {
-    <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">
-      https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890
-    </ClipboardCopy>
-  }{' '}
-  Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.
-  <br /> <br />
-  <b>Long copy string in block</b>
-  <br />
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
-  {
-    <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact" isBlock>
-      https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890
-    </ClipboardCopy>
-  }{' '}
-  Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.
-</React.Fragment>;
+```ts file="./ClipboardCopyInlineCompactInSentence.tsx"
 ```

package/src/components/ClipboardCopy/examples/ClipboardCopyBasic.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ClipboardCopy } from '@patternfly/react-core';
+
+export const ClipboardCopyBasic: React.FunctionComponent = () => (
+  <ClipboardCopy hoverTip="Copy" clickTip="Copied">
+    This is editable
+  </ClipboardCopy>
+);

package/src/components/ClipboardCopy/examples/ClipboardCopyExpanded.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
+
+export const ClipboardCopyExpanded: React.FunctionComponent = () => (
+  <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+    Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
+    expansion.
+  </ClipboardCopy>
+);

package/src/components/ClipboardCopy/examples/ClipboardCopyExpandedWithArray.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
+
+const text = [
+  'Got a lot of text here,',
+  'need to see all of it?',
+  'Click that arrow on the left side and check out the resulting expansion.'
+];
+
+export const ClipboardCopyExpandedWithArray: React.FunctionComponent = () => (
+  <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+    {text.join(' ')}
+  </ClipboardCopy>
+);

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompact.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ClipboardCopy } from '@patternfly/react-core';
+export const ClipboardCopyInlineCompact: React.FunctionComponent = () => (
+  <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+    2.3.4-2-redhat
+  </ClipboardCopy>
+);

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactCode.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ClipboardCopy } from '@patternfly/react-core';
+
+export const ClipboardCopyInlineCompactCode: React.FunctionComponent = () => (
+  <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact" isCode>
+    2.3.4-2-redhat
+  </ClipboardCopy>
+);

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactInSentence.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ClipboardCopy } from '@patternfly/react-core';
+
+export const ClipboardCopyInlineCompactInSentence: React.FunctionComponent = () => (
+  <React.Fragment>
+    <b>Basic</b>
+    <br />
+    Lorem ipsum{' '}
+    {
+      <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+        2.3.4-2-redhat
+      </ClipboardCopy>
+    }
+    dolor sit amet.
+    <br /> <br />
+    <b>Long copy string</b>
+    <br />
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
+    {
+      <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact">
+        https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890
+      </ClipboardCopy>
+    }{' '}
+    Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.
+    <br /> <br />
+    <b>Long copy string in block</b>
+    <br />
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
+    {
+      <ClipboardCopy hoverTip="Copy" clickTip="Copied" variant="inline-compact" isBlock>
+        https://app.openshift.io/path/sub-path/sub-sub-path/?runtime=quarkus/12345678901234567890/abcdefghijklmnopqrstuvwxyz1234567890
+      </ClipboardCopy>
+    }{' '}
+    Mauris luctus, libero nec dapibus ultricies, urna purus pretium mauris, ullamcorper pharetra lacus nibh vitae enim.
+  </React.Fragment>
+);

package/src/components/ClipboardCopy/examples/ClipboardCopyInlineCompactWithAdditionalAction.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ClipboardCopy, ClipboardCopyAction, Button } from '@patternfly/react-core';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+
+export const ClipboardCopyInlineCompactWithAdditionalAction: React.FunctionComponent = () => (
+  <ClipboardCopy
+    hoverTip="Copy"
+    clickTip="Copied"
+    variant="inline-compact"
+    additionalActions={
+      <ClipboardCopyAction>
+        <Button variant="plain" aria-label="Run in web terminal">
+          <PlayIcon aria-hidden />
+        </Button>
+      </ClipboardCopyAction>
+    }
+  >
+    2.3.4-2-redhat
+  </ClipboardCopy>
+);

package/src/components/ClipboardCopy/examples/ClipboardCopyJSONObject.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
+
+export const ClipboardCopyJSONObject: React.FunctionComponent = () => (
+  <ClipboardCopy isCode hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+    {`{ "menu": {
+    "id": "file",
+    "value": "File",
+    "popup": {
+      "menuitem": [
+        {"value": "New", "onclick": "CreateNewDoc()"},
+        {"value": "Open", "onclick": "OpenDoc()"},
+        {"value": "Close", "onclick": "CloseDoc()"}
+      ]
+    }
+  }} `}
+  </ClipboardCopy>
+);

package/src/components/ClipboardCopy/examples/ClipboardCopyReadOnly.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ClipboardCopy } from '@patternfly/react-core';
+
+export const ClipboardCopyReadOnly: React.FunctionComponent = () => (
+  <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied">
+    This is read-only
+  </ClipboardCopy>
+);

package/src/components/ClipboardCopy/examples/ClipboardCopyReadOnlyExpanded.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
+
+export const ClipboardCopyReadOnlyExpanded: React.FunctionComponent = () => (
+  <ClipboardCopy isReadOnly hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+    Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
+    expansion.
+  </ClipboardCopy>
+);

package/src/components/ClipboardCopy/examples/ClipboardCopyReadOnlyExpandedByDefault.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ClipboardCopy, ClipboardCopyVariant } from '@patternfly/react-core';
+
+export const ClipboardCopyReadOnlyExpandedByDefault: React.FunctionComponent = () => (
+  <ClipboardCopy isReadOnly isExpanded hoverTip="Copy" clickTip="Copied" variant={ClipboardCopyVariant.expansion}>
+    Got a lot of text here, need to see all of it? Click that arrow on the left side and check out the resulting
+    expansion.
+  </ClipboardCopy>
+);

package/src/components/FormSelect/FormSelect.tsx

@@ -23,6 +23,8 @@ export interface FormSelectProps
   isDisabled?: boolean;
   /** Sets the FormSelect required. */
   isRequired?: boolean;
+  /** Use the external file instead of a data URI */
+  isIconSprite?: boolean;
   /** Optional callback for updating when selection loses focus */
   onBlur?: (event: React.FormEvent<HTMLSelectElement>) => void;
   /** Optional callback for updating when selection gets focus */
@@ -52,6 +54,7 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
     validated: 'default',
     isDisabled: false,
     isRequired: false,
+    isIconSprite: false,
     onBlur: (): any => undefined,
     onFocus: (): any => undefined,
     onChange: (): any => undefined,
@@ -63,7 +66,18 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
   };
 
   render() {
-    const { children, className, value, validated, isDisabled, isRequired, ouiaId, ouiaSafe, ...props } = this.props;
+    const {
+      children,
+      className,
+      value,
+      validated,
+      isDisabled,
+      isRequired,
+      isIconSprite,
+      ouiaId,
+      ouiaSafe,
+      ...props
+    } = this.props;
     /* find selected option and get placeholder flag */
     const selectedOption = React.Children.toArray(children).find((option: any) => option.props.value === value) as any;
     const isSelectedPlaceholder = selectedOption && selectedOption.props.isPlaceholder;
@@ -72,6 +86,7 @@ export class FormSelect extends React.Component<FormSelectProps, { ouiaStateId:
         {...props}
         className={css(
           styles.formControl,
+          isIconSprite && styles.modifiers.iconSprite,
           className,
           validated === ValidatedOptions.success && styles.modifiers.success,
           validated === ValidatedOptions.warning && styles.modifiers.warning,

package/src/components/FormSelect/examples/FormSelect.md

@@ -258,3 +258,61 @@ class FormSelectInputGrouped extends React.Component {
   }
 }
 ```
+
+### Icon sprite variant
+
+**Note:** The dropdown toggle icon is applied as a background image to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
+
+```js isBeta
+import React from 'react';
+import { FormSelect, FormSelectOption, FormSelectOptionGroup } from '@patternfly/react-core';
+
+class FormSelectIconSpriteInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: '',
+      validated: ValidatedOptions.default
+    };
+
+    this.onChange = (value, event) => {
+      if (value === '3') {
+        this.setState({ value, validated: ValidatedOptions.success, helperText: 'You chose wisely' });
+      } else if (value === '') {
+        this.setState({ value, validated: ValidatedOptions.warning, helperText: 'You must select a value' });
+      } else {
+        this.setState({
+          value,
+          validated: ValidatedOptions.error,
+          invalidText: 'You must chose Three (thought that was obvious)'
+        });
+      }
+    };
+
+    this.options = [
+      { value: '', label: 'Select a number', disabled: false, isPlaceholder: true },
+      { value: '1', label: 'One', disabled: false, isPlaceholder: false },
+      { value: '2', label: 'Two', disabled: false, isPlaceholder: false },
+      { value: '3', label: 'Three - the only valid option', disabled: false, isPlaceholder: false }
+    ];
+  }
+
+  render() {
+    const { value, validated, helperText, invalidText } = this.state;
+
+    return (
+      <FormSelect
+        validated={validated}
+        isIconSprite
+        value={value}
+        onChange={this.onChange}
+        aria-label="FormSelect Input"
+      >
+        {this.options.map((option, index) => (
+          <FormSelectOption isDisabled={option.disabled} key={index} value={option.value} label={option.label} />
+        ))}
+      </FormSelect>
+    );
+  }
+}
+```

package/src/components/TextArea/TextArea.tsx

@@ -20,6 +20,8 @@ export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onC
   isDisabled?: boolean;
   /** Flag to show if the TextArea is read only. */
   isReadOnly?: boolean;
+  /** Use the external file instead of a data URI */
+  isIconSprite?: boolean;
   /** Flag to modify height based on contents. */
   autoResize?: boolean;
   /** Value to indicate if the textarea is modified to show that validation state.
@@ -46,6 +48,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
     className: '',
     isRequired: false,
     isDisabled: false,
+    isIconSprite: false,
     validated: 'default',
     resizeOrientation: 'both',
     'aria-label': null as string
@@ -86,6 +89,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       validated,
       isRequired,
       isDisabled,
+      isIconSprite,
       isReadOnly,
       resizeOrientation,
       innerRef,
@@ -102,6 +106,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       <textarea
         className={css(
           styles.formControl,
+          isIconSprite && styles.modifiers.iconSprite,
           className,
           resizeOrientation !== TextAreResizeOrientation.both && styles.modifiers[orientation],
           validated === ValidatedOptions.success && styles.modifiers.success,

package/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap

@@ -116,6 +116,7 @@ exports[`validated text area success 1`] = `
     className=""
     innerRef={null}
     isDisabled={false}
+    isIconSprite={false}
     isRequired={false}
     onChange={[MockFunction]}
     required={true}
@@ -148,6 +149,7 @@ exports[`validated text area warning 1`] = `
     className=""
     innerRef={null}
     isDisabled={false}
+    isIconSprite={false}
     isRequired={false}
     onChange={[MockFunction]}
     required={true}

package/src/components/TextArea/examples/TextArea.md

@@ -207,3 +207,46 @@ import { TextArea } from '@patternfly/react-core';
 <TextArea aria-label="auto resizing text area example" autoResize />
 ```
 
+### Icon sprite variants
+
+**Note:** The icons for the success, invalid, calendar, etc. variations in form control elements are applied as background images to the form element. By default, the image URLs for these icons are data URIs. However, there may be cases where data URIs are not ideal, such as in an application with a content security policy that disallows data URIs for security reasons. The `isIconSprite` variation changes the icon source to an external SVG file that serves as a sprite for all of the supported icons.
+
+```js isBeta
+import React from 'react';
+import { TextArea } from '@patternfly/react-core';
+
+IconSpriteTextArea = () => {
+  const [success, setSuccess] = React.useState('');
+  const [warning, setWarning] = React.useState('');
+  const [error, setError] = React.useState('');
+
+  return (
+    <>
+      <TextArea
+        validated={ValidatedOptions.success}
+        isIconSprite
+        type="text"
+        onChange={value => setSuccess(value)}
+        aria-label="success icon sprite text area example"
+      />
+      <br />
+      <br />
+      <TextArea
+        validated={ValidatedOptions.warning}
+        isIconSprite
+        type="text"
+        onChange={value => setWarning(value)}
+        aria-label="warning icon sprite text input example"
+      />
+      <br />
+      <br />
+      <TextArea
+        validated={ValidatedOptions.error}
+        isIconSprite
+        type="text"
+        onChange={value => setError(value)}
+        aria-label="error icon sprite text area example"
+      />
+    </>
+  );
+};