@patternfly/react-core 4.242.8 → 4.243.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.242.8",
+  "version": "4.243.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",
@@ -44,16 +44,16 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.92.4",
-    "@patternfly/react-styles": "^4.91.4",
-    "@patternfly/react-tokens": "^4.93.4",
+    "@patternfly/react-icons": "^4.92.5",
+    "@patternfly/react-styles": "^4.91.5",
+    "@patternfly/react-tokens": "^4.93.5",
     "focus-trap": "6.9.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.216.0",
+    "@patternfly/patternfly": "4.217.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "13e7bc690a3e25b2a6c14b2a4fef153fff2b70cb"
+  "gitHead": "51b287699eb4b522491b3ade19a8d16b68b5b4da"
 }

package/src/components/DatePicker/DatePicker.tsx

@@ -120,7 +120,9 @@ const DatePickerBase = (
     setPristine(!value);
   }, [value]);
 
-  const setError = (date: Date) => setErrorText(validators.map(validator => validator(date)).join('\n') || '');
+  const setError = (date: Date) => {
+    setErrorText(validators.map(validator => validator(date)).join('\n') || '');
+  };
 
   const onTextInput = (value: string) => {
     setValue(value);
@@ -236,7 +238,7 @@ const DatePickerBase = (
               isDisabled={isDisabled}
               aria-label={ariaLabel}
               placeholder={placeholder}
-              validated={errorText ? 'error' : 'default'}
+              validated={errorText.trim() ? 'error' : 'default'}
               value={value}
               onChange={onTextInput}
               onBlur={onInputBlur}

package/src/components/DatePicker/__tests__/DatePicker.test.tsx

@@ -1,8 +1,29 @@
-import { render } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
 import { DatePicker } from '../DatePicker';
 import React from 'react';
+import userEvent from '@testing-library/user-event';
 
 test('disabled date picker', () => {
   const { asFragment } = render(<DatePicker value="2020-11-20" isDisabled aria-label="disabled date picker" />);
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Date picker with multiple validators does not show invalid icon on valid input', async () => {
+  const user = userEvent.setup();
+
+  const rangeValidator = (date: Date) => {
+    return '';
+  };
+
+  const rangeValidatorB = (date: Date) => {
+    return '';
+  };
+
+  render(<DatePicker value="2020-03-17" validators={[rangeValidator, rangeValidatorB]} />);
+
+  await user.click(screen.getByRole('textbox'));
+
+  await user.click(document.body);
+
+  expect(screen.getByRole('textbox')).not.toBeInvalid();
+});

package/src/components/TextArea/TextArea.tsx

@@ -11,33 +11,40 @@ export enum TextAreResizeOrientation {
   both = 'both'
 }
 
+export enum TextAreaReadOnlyVariant {
+  default = 'default',
+  plain = 'plain'
+}
+
 export interface TextAreaProps extends Omit<HTMLProps<HTMLTextAreaElement>, 'onChange' | 'ref'> {
-  /** Additional classes added to the TextArea. */
+  /** Additional classes added to the text area. */
   className?: string;
-  /** Flag to show if the TextArea is required. */
+  /** Flag to show if the text area is required. */
   isRequired?: boolean;
-  /** Flag to show if the TextArea is disabled. */
+  /** Flag to show if the text area is disabled. */
   isDisabled?: boolean;
-  /** Flag to show if the TextArea is read only. */
+  /** @deprecated Use readOnlyVariant instead. Flag to show if the text area is read only. */
   isReadOnly?: boolean;
+  /** Read only variant. */
+  readOnlyVariant?: 'default' | 'plain';
   /** 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.
-   * If set to success, textarea will be modified to indicate valid state.
-   * If set to error, textarea will be modified to indicate error state.
+  /** Value to indicate if the text area is modified to show that validation state.
+   * If set to success, text area will be modified to indicate valid state.
+   * If set to error, text area will be modified to indicate error state.
    */
   validated?: 'success' | 'warning' | 'error' | 'default';
-  /** Value of the TextArea. */
+  /** Value of the text area. */
   value?: string | number;
-  /** A callback for when the TextArea value changes. */
+  /** A callback for when the text area value changes. */
   onChange?: (value: string, event: React.ChangeEvent<HTMLTextAreaElement>) => void;
   /** Sets the orientation to limit the resize to */
   resizeOrientation?: 'horizontal' | 'vertical' | 'both';
-  /** Custom flag to show that the TextArea requires an associated id or aria-label. */
+  /** Custom flag to show that the text area requires an associated id or aria-label. */
   'aria-label'?: string;
-  /** A reference object to attach to the textarea. */
+  /** A reference object to attach to the text area. */
   innerRef?: React.RefObject<any>;
 }
 
@@ -105,9 +112,9 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
       isDisabled,
       isIconSprite,
       isReadOnly,
+      readOnlyVariant,
       resizeOrientation,
       innerRef,
-      readOnly,
       disabled,
       /* eslint-disable @typescript-eslint/no-unused-vars */
       autoResize,
@@ -121,6 +128,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
         className={css(
           styles.formControl,
           isIconSprite && styles.modifiers.iconSprite,
+          readOnlyVariant === 'plain' && styles.modifiers.plain,
           className,
           resizeOrientation !== TextAreResizeOrientation.both && styles.modifiers[orientation],
           validated === ValidatedOptions.success && styles.modifiers.success,
@@ -131,7 +139,7 @@ export class TextAreaBase extends React.Component<TextAreaProps> {
         aria-invalid={validated === ValidatedOptions.error}
         required={isRequired}
         disabled={isDisabled || disabled}
-        readOnly={isReadOnly || readOnly}
+        readOnly={!!readOnlyVariant || isReadOnly}
         ref={innerRef || this.inputRef}
         {...props}
       />

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

@@ -12,7 +12,7 @@ const props = {
 };
 
 describe('TextArea', () => {
-  test('textarea input passes value and event to onChange handler', async () => {
+  test('textarea passes value and event to onChange handler', async () => {
     const user = userEvent.setup();
 
     render(<TextAreaBase {...props} value="" aria-label="test textarea" />);
@@ -21,27 +21,41 @@ describe('TextArea', () => {
     expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
   });
 
-  test('simple text input', () => {
+  test('simple text area', () => {
     const { asFragment } = render(<TextArea {...props} aria-label="simple textarea" />);
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('disabled text input using isDisabled', () => {
+  test('disabled text area using isDisabled', () => {
     const { asFragment } = render(<TextArea {...props} aria-label="is disabled textarea" isDisabled />);
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('disabled text input using disabled', () => {
+  test('disabled text area using disabled', () => {
     const { asFragment } = render(<TextArea {...props} aria-label="disabled textarea" disabled />);
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('read only text input using isReadOnly', () => {
+  test('read only text area using isReadOnly', () => {
     const { asFragment } = render(<TextArea {...props} aria-label="is read only textarea" isReadOnly />);
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('read only text input using readOnly', () => {
+  test('read only text area using default readOnlyVariant', () => {
+    const { asFragment } = render(
+      <TextArea {...props} aria-label="is default read only textarea" readOnlyVariant="default" />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('read only text area using plain readOnlyVariant', () => {
+    const { asFragment } = render(
+      <TextArea {...props} aria-label="is plain read only textarea" readOnlyVariant="plain" />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('read only text area using readOnly', () => {
     const { asFragment } = render(<TextArea {...props} aria-label="read only textarea" readOnly />);
     expect(asFragment()).toMatchSnapshot();
   });

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`TextArea disabled text input using disabled 1`] = `
+exports[`TextArea disabled text area using disabled 1`] = `
 <DocumentFragment>
   <textarea
     aria-invalid="false"
@@ -13,7 +13,7 @@ exports[`TextArea disabled text input using disabled 1`] = `
 </DocumentFragment>
 `;
 
-exports[`TextArea disabled text input using isDisabled 1`] = `
+exports[`TextArea disabled text area using isDisabled 1`] = `
 <DocumentFragment>
   <textarea
     aria-invalid="false"
@@ -39,7 +39,20 @@ exports[`TextArea horizontally resizable text area 1`] = `
 </DocumentFragment>
 `;
 
-exports[`TextArea read only text input using isReadOnly 1`] = `
+exports[`TextArea read only text area using default readOnlyVariant 1`] = `
+<DocumentFragment>
+  <textarea
+    aria-invalid="false"
+    aria-label="is default read only textarea"
+    class="pf-c-form-control"
+    readonly=""
+  >
+    test textarea
+  </textarea>
+</DocumentFragment>
+`;
+
+exports[`TextArea read only text area using isReadOnly 1`] = `
 <DocumentFragment>
   <textarea
     aria-invalid="false"
@@ -52,7 +65,20 @@ exports[`TextArea read only text input using isReadOnly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`TextArea read only text input using readOnly 1`] = `
+exports[`TextArea read only text area using plain readOnlyVariant 1`] = `
+<DocumentFragment>
+  <textarea
+    aria-invalid="false"
+    aria-label="is plain read only textarea"
+    class="pf-c-form-control pf-m-plain"
+    readonly=""
+  >
+    test textarea
+  </textarea>
+</DocumentFragment>
+`;
+
+exports[`TextArea read only text area using readOnly 1`] = `
 <DocumentFragment>
   <textarea
     aria-invalid="false"
@@ -65,7 +91,7 @@ exports[`TextArea read only text input using readOnly 1`] = `
 </DocumentFragment>
 `;
 
-exports[`TextArea simple text input 1`] = `
+exports[`TextArea simple text area 1`] = `
 <DocumentFragment>
   <textarea
     aria-invalid="false"

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

@@ -223,6 +223,36 @@ import { TextArea } from '@patternfly/react-core';
 <TextArea aria-label="disabled text area example" isDisabled />;
 ```
 
+### Read only
+
+```js
+import React from 'react';
+import { Checkbox, TextArea } from '@patternfly/react-core';
+
+const ReadOnlyTextArea = () => {
+  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
+
+  return (
+    <React.Fragment>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          id="isPlain"
+          key="isPlain"
+          label="Plain read only variant"
+          isChecked={isPlainChecked}
+          onChange={checked => setIsPlainChecked(checked)}
+        />
+      </div>
+      <TextArea
+        aria-label="read only text area example"
+        value="read only text area example"
+        readOnlyVariant={isPlainChecked ? 'plain' : 'default'}
+      />
+    </React.Fragment>
+  );
+};
+```
+
 ### Auto resizing
 
 ```js

package/src/components/TextInput/TextInput.tsx

@@ -20,25 +20,31 @@ export enum TextInputTypes {
   url = 'url'
 }
 
+export enum TextInputReadOnlyVariant {
+  default = 'default',
+  plain = 'plain'
+}
+
 export interface TextInputProps
   extends Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'onFocus' | 'onBlur' | 'disabled' | 'ref'>,
     OUIAProps {
-  /** Additional classes added to the TextInput. */
+  /** Additional classes added to the text input. */
   className?: string;
-  /** Flag to show if the input is disabled. */
+  /** Flag to show if the text input is disabled. */
   isDisabled?: boolean;
-  /** Flag to show if the input is read only. */
+  /** @deprecated Use readOnlyVariant instead. Flag to show if the text input is read only. */
   isReadOnly?: boolean;
-  /** Flag to show if the input is required. */
+  /** Read only variant. */
+  readOnlyVariant?: 'plain' | 'default';
   isRequired?: boolean;
-  /** Value to indicate if the input is modified to show that validation state.
-   * If set to success, input will be modified to indicate valid state.
-   * If set to error,  input will be modified to indicate error state.
+  /** Value to indicate if the text input is modified to show that validation state.
+   * If set to success, text input will be modified to indicate valid state.
+   * If set to error, text input will be modified to indicate error state.
    */
   validated?: 'success' | 'warning' | 'error' | 'default';
-  /** A callback for when the input value changes. */
+  /** A callback for when the text input value changes. */
   onChange?: (value: string, event: React.FormEvent<HTMLInputElement>) => void;
-  /** Type that the input accepts. */
+  /** Type that the text input accepts. */
   type?:
     | 'text'
     | 'date'
@@ -51,25 +57,25 @@ export interface TextInputProps
     | 'tel'
     | 'time'
     | 'url';
-  /** Value of the input. */
+  /** Value of the text input. */
   value?: string | number;
-  /** Aria-label. The input requires an associated id or aria-label. */
+  /** Aria-label. The text input requires an associated id or aria-label. */
   'aria-label'?: string;
-  /** A reference object to attach to the input box. */
+  /** A reference object to attach to the text input box. */
   innerRef?: React.RefObject<any>;
   /** Trim text on left */
   isLeftTruncated?: boolean;
-  /** Callback function when input is focused */
+  /** Callback function when text input is focused */
   onFocus?: (event?: any) => void;
-  /** Callback function when input is blurred (focus leaves) */
+  /** Callback function when text input is blurred (focus leaves) */
   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 */
+  /** Custom icon url to set as the text input's background-image */
   customIconUrl?: string;
-  /** Dimensions for the custom icon set as the input's background-size */
+  /** Dimensions for the custom icon set as the text input's background-size */
   customIconDimensions?: string;
 }
 
@@ -169,8 +175,9 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
       onFocus,
       onBlur,
       isLeftTruncated,
-      /* eslint-enable @typescript-eslint/no-unused-vars */
       isReadOnly,
+      readOnly,
+      readOnlyVariant,
       isRequired,
       isDisabled,
       isIconSprite,
@@ -198,6 +205,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
         className={css(
           styles.formControl,
           isIconSprite && styles.modifiers.iconSprite,
+          readOnlyVariant === 'plain' && styles.modifiers.plain,
           validated === ValidatedOptions.success && styles.modifiers.success,
           validated === ValidatedOptions.warning && styles.modifiers.warning,
           ((iconVariant && iconVariant !== 'search') || customIconUrl) && styles.modifiers.icon,
@@ -210,7 +218,7 @@ export class TextInputBase extends React.Component<TextInputProps, TextInputStat
         aria-invalid={props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error}
         required={isRequired}
         disabled={isDisabled}
-        readOnly={isReadOnly}
+        readOnly={!!readOnlyVariant || isReadOnly || readOnly}
         ref={innerRef || this.inputRef}
         {...((customIconUrl || customIconDimensions) && { style: customIconStyle })}
         {...getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)}

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

@@ -31,8 +31,22 @@ describe('TextInput', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('readonly text input', () => {
-    const { asFragment } = render(<TextInput isReadOnly value="read only" aria-label="readonly text input" />);
+  test('read only text input using isReadOnly', () => {
+    const { asFragment } = render(<TextInput isReadOnly value="read only" aria-label="read only text input" />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('default read only text input', () => {
+    const { asFragment } = render(
+      <TextInput readOnlyVariant="default" value="read only default" aria-label="default read only text input" />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  test('plain read only text input', () => {
+    const { asFragment } = render(
+      <TextInput readOnlyVariant="plain" value="read only plain" aria-label="plain read only text input" />
+    );
     expect(asFragment()).toMatchSnapshot();
   });
 

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

@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`TextInput default read only text input 1`] = `
+<DocumentFragment>
+  <input
+    aria-invalid="false"
+    aria-label="default read only text input"
+    class="pf-c-form-control"
+    data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+    data-ouia-component-type="PF4/TextInput"
+    data-ouia-safe="true"
+    readonly=""
+    type="text"
+    value="read only default"
+  />
+</DocumentFragment>
+`;
+
 exports[`TextInput disabled text input 1`] = `
 <DocumentFragment>
   <input
@@ -22,7 +38,7 @@ exports[`TextInput invalid text input 1`] = `
     aria-invalid="true"
     aria-label="invalid text input"
     class="pf-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-5"
+    data-ouia-component-id="OUIA-Generated-TextInputBase-7"
     data-ouia-component-type="PF4/TextInput"
     data-ouia-safe="true"
     type="text"
@@ -31,11 +47,27 @@ exports[`TextInput invalid text input 1`] = `
 </DocumentFragment>
 `;
 
-exports[`TextInput readonly text input 1`] = `
+exports[`TextInput plain read only text input 1`] = `
+<DocumentFragment>
+  <input
+    aria-invalid="false"
+    aria-label="plain read only text input"
+    class="pf-c-form-control pf-m-plain"
+    data-ouia-component-id="OUIA-Generated-TextInputBase-6"
+    data-ouia-component-type="PF4/TextInput"
+    data-ouia-safe="true"
+    readonly=""
+    type="text"
+    value="read only plain"
+  />
+</DocumentFragment>
+`;
+
+exports[`TextInput read only text input using isReadOnly 1`] = `
 <DocumentFragment>
   <input
     aria-invalid="false"
-    aria-label="readonly text input"
+    aria-label="read only text input"
     class="pf-c-form-control"
     data-ouia-component-id="OUIA-Generated-TextInputBase-4"
     data-ouia-component-type="PF4/TextInput"
@@ -68,7 +100,7 @@ exports[`TextInput validated text input error 1`] = `
     aria-invalid="true"
     aria-label="validated text input"
     class="pf-c-form-control"
-    data-ouia-component-id="OUIA-Generated-TextInputBase-8"
+    data-ouia-component-id="OUIA-Generated-TextInputBase-10"
     data-ouia-component-type="PF4/TextInput"
     data-ouia-safe="true"
     type="text"

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

@@ -80,9 +80,30 @@ constructor(props) {
 
 ```js
 import React from 'react';
-import { TextInput } from '@patternfly/react-core';
+import { Checkbox, TextInput } from '@patternfly/react-core';
+
+const ReadOnlyTextArea = () => {
+  const [isPlainChecked, setIsPlainChecked] = React.useState(false);
 
-<TextInput value="read only text input example" type="text" isReadOnly aria-label="readonly input example" />;
+  return (
+    <React.Fragment>
+      <div style={{ marginBottom: '12px' }}>
+        <Checkbox
+          id="isPlain"
+          key="isPlain"
+          label="Plain read only variant"
+          isChecked={isPlainChecked}
+          onChange={checked => setIsPlainChecked(checked)}
+        />
+      </div>
+      <TextInput
+        aria-label="read only text input example"
+        value="read only text input example"
+        readOnlyVariant={isPlainChecked ? 'plain' : 'default'}
+      />
+    </React.Fragment>
+  );
+};
 ```
 
 ### Invalid