@patternfly/react-core 4.199.5 → 4.200.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.199.5",
+  "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,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.50.5",
-    "@patternfly/react-styles": "^4.49.5",
-    "@patternfly/react-tokens": "^4.51.5",
+    "@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",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "f31fca2c9a852fedd657b7e10fd7bf203849cac2"
+  "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/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"
+      />
+    </>
+  );
+};

package/src/components/TextInput/TextInput.tsx

@@ -65,6 +65,8 @@ export interface TextInputProps
   onBlur?: (event?: any) => void;
   /** icon variant */
   iconVariant?: 'calendar' | 'clock' | 'search';
+  /** Use the external file instead of a data URI */
+  isIconSprite?: boolean;
   /** Custom icon url to set as the input's background-image */
   customIconUrl?: string;
   /** Dimensions for the custom icon set as the input's background-size */
@@ -84,6 +86,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
     validated: 'default' as 'success' | 'warning' | 'error' | 'default',
     isDisabled: false,
     isReadOnly: false,
+    isIconSprite: false,
     type: TextInputTypes.text,
     isLeftTruncated: false,
     onChange: (): any => undefined,
@@ -170,6 +173,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
       isReadOnly,
       isRequired,
       isDisabled,
+      isIconSprite,
       iconVariant,
       customIconUrl,
       customIconDimensions,
@@ -193,6 +197,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
         onBlur={this.onBlur}
         className={css(
           styles.formControl,
+          isIconSprite && styles.modifiers.iconSprite,
           validated === ValidatedOptions.success && styles.modifiers.success,
           validated === ValidatedOptions.warning && styles.modifiers.warning,
           ((iconVariant && iconVariant !== 'search') || customIconUrl) && styles.modifiers.icon,

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

@@ -90,6 +90,7 @@ exports[`validated text input success 1`] = `
     className=""
     innerRef={null}
     isDisabled={false}
+    isIconSprite={false}
     isLeftTruncated={false}
     isReadOnly={false}
     isRequired={false}
@@ -133,6 +134,7 @@ exports[`validated text input success 2`] = `
     className=""
     innerRef={null}
     isDisabled={false}
+    isIconSprite={false}
     isLeftTruncated={false}
     isReadOnly={false}
     isRequired={false}

package/src/components/TextInput/examples/TextInput.md

@@ -6,7 +6,9 @@ propComponents: ['TextInput']
 ---
 
 ## Examples
+
 ### Basic
+
 ```js
 import React from 'react';
 import { TextInput } from '@patternfly/react-core';
@@ -139,37 +141,112 @@ TextInputSelectAll = () => {
 ```
 
 ### Icon variants
+
 ```js
 import React from 'react';
 import { TextInput } from '@patternfly/react-core';
 
-class SimpleTextInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      calendar: '',
-      clock: '',
-      custom: ''
-    };
-    this.handleTextInputChange = (value, field) => {
-      this.setState({ [field]: value });
-    };
-  }
+SimpleTextInput = () => {
+  const [calendar, setCalendar] = React.useState('');
+  const [clock, setClock] = React.useState('');
+  const [custom, setCustom] = React.useState('');
 
-  render() {
-    const { calendar, clock, custom } = this.state;
+  return (
+    <>
+      <TextInput
+        value={calendar}
+        type="text"
+        iconVariant="calendar"
+        onChange={value => setCalendar(value)}
+        aria-label="text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={clock}
+        type="text"
+        iconVariant="clock"
+        onChange={value => setClock(value)}
+        aria-label="text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={custom}
+        type="text"
+        customIconDimensions="24px 24px"
+        customIconUrl='data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E'
+        onChange={value => setCustom(value)}
+        aria-label="text input example"
+      />
+    </>
+  );
+};
+```
 
-    return (
-      <>
-        <TextInput value={calendar} type="text" iconVariant='calendar' onChange={(value) => this.handleTextInputChange(value, "calendar")} aria-label="text input example" />
-        <br />
-        <br />
-        <TextInput value={clock} type="text" iconVariant='clock' onChange={(value) => this.handleTextInputChange(value, "clock")} aria-label="text input example" />
-        <br />
-        <br />
-        <TextInput value={custom} type="text" customIconDimensions='24px 24px' customIconUrl='data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%23a18fff" d="M158.87.15c-16.16-1.52-31.2 8.42-35.33 24.12l-14.81 56.27c187.62 5.49 314.54 130.61 322.48 317l56.94-15.78c15.72-4.36 25.49-19.68 23.62-35.9C490.89 165.08 340.78 17.32 158.87.15zm-58.47 112L.55 491.64a16.21 16.21 0 0 0 20 19.75l379-105.1c-4.27-174.89-123.08-292.14-299.15-294.1zM128 416a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm48-152a32 32 0 1 1 32-32 32 32 0 0 1-32 32zm104 104a32 32 0 1 1 32-32 32 32 0 0 1-32 32z"/%3E%3C/svg%3E' onChange={(value) => this.handleTextInputChange(value, "custom")} aria-label="text input example" />
-      </>
-    );
-  }
-}
+### 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 { TextInput } from '@patternfly/react-core';
+
+IconSpriteTextInputs = () => {
+  const [success, setSuccess] = React.useState('');
+  const [warning, setWarning] = React.useState('');
+  const [error, setError] = React.useState('');
+  const [calendar, setCalendar] = React.useState('');
+  const [clock, setClock] = React.useState('');
+
+  return (
+    <>
+      <TextInput
+        validated={ValidatedOptions.success}
+        isIconSprite
+        type="text"
+        onChange={value => setSuccess(value)}
+        aria-label="success icon sprite text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        validated={ValidatedOptions.warning}
+        isIconSprite
+        type="text"
+        onChange={value => setWarning(value)}
+        aria-label="warning icon sprite text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        validated={ValidatedOptions.error}
+        isIconSprite
+        type="text"
+        onChange={value => setError(value)}
+        aria-label="error icon sprite text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={calendar}
+        isIconSprite
+        type="text"
+        iconVariant="calendar"
+        onChange={value => setCalendar(value)}
+        aria-label="calendar icon sprite text input example"
+      />
+      <br />
+      <br />
+      <TextInput
+        value={clock}
+        isIconSprite
+        type="text"
+        iconVariant="clock"
+        onChange={value => setClock(value)}
+        aria-label="clock icon sprite text input example"
+      />
+    </>
+  );
+};
 ```