@patternfly/react-core 4.242.8 → 4.243.1

package/src/components/NumberInput/examples/NumberInputDisabled.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputDisabled: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(100);
+  const minValue = 0;
+  const maxValue = 100;
+
+  const onMinus = () => {
+    const newValue = value - 1;
+    setValue(newValue);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    setValue(Number(target.value));
+  };
+
+  const onPlus = () => {
+    const newValue = value + 1;
+    setValue(newValue);
+  };
+
+  return (
+    <NumberInput
+      value={value}
+      min={minValue}
+      max={maxValue}
+      onMinus={onMinus}
+      onChange={onChange}
+      onPlus={onPlus}
+      inputName="input"
+      inputAriaLabel="number input"
+      minusBtnAriaLabel="minus"
+      plusBtnAriaLabel="plus"
+      unit="%"
+      isDisabled
+    />
+  );
+};

package/src/components/NumberInput/examples/NumberInputUnit.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputUnit: React.FunctionComponent = () => {
+  const [value1, setValue1] = React.useState(90);
+  const [value2, setValue2] = React.useState(Number((1.0).toFixed(2)));
+
+  const onMinus1 = () => setValue1(value1 - 1);
+  const onChange1 = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    setValue1(Number(target.value));
+  };
+  const onPlus1 = () => setValue1(value1 + 1);
+
+  const onMinus2 = () => {
+    const newValue = Number((value2 - 0.01).toFixed(2));
+    setValue2(newValue);
+  };
+  const onChange2 = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    setValue2(Number(target.value));
+  };
+  const onPlus2 = () => {
+    const newValue = Number((value2 + 0.01).toFixed(2));
+    setValue2(newValue);
+  };
+
+  return (
+    <React.Fragment>
+      <NumberInput
+        value={value1}
+        onMinus={onMinus1}
+        onChange={onChange1}
+        onPlus={onPlus1}
+        inputName="input 1"
+        inputAriaLabel="number input 1"
+        minusBtnAriaLabel="minus 1"
+        plusBtnAriaLabel="plus 1"
+        unit="%"
+      />
+      <br />
+      <br />
+      <NumberInput
+        value={value2}
+        onMinus={onMinus2}
+        onChange={onChange2}
+        onPlus={onPlus2}
+        inputName="input 2"
+        inputAriaLabel="number input 2"
+        minusBtnAriaLabel="minus 0.01"
+        plusBtnAriaLabel="plus 0.01"
+        unit="$"
+        unitPosition="before"
+      />
+    </React.Fragment>
+  );
+};

package/src/components/NumberInput/examples/NumberInputUnitThreshold.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputUnitThreshold: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState(0);
+  const minValue = 0;
+  const maxValue = 10;
+
+  const normalizeBetween = (value, min, max) => {
+    if (min !== undefined && max !== undefined) {
+      return Math.max(Math.min(value, max), min);
+    } else if (value <= min) {
+      return min;
+    } else if (value >= max) {
+      return max;
+    }
+    return value;
+  };
+
+  const onMinus = () => {
+    const newValue = normalizeBetween(value - 1, minValue, maxValue);
+    setValue(newValue);
+  };
+
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const newValue = normalizeBetween(isNaN(+target.value) ? 0 : Number(target.value), minValue, maxValue);
+    setValue(newValue);
+  };
+
+  const onPlus = () => {
+    const newValue = normalizeBetween(value + 1, minValue, maxValue);
+    setValue(newValue);
+  };
+
+  return (
+    <React.Fragment>
+      With a minimum value of 0 and maximum value of 10
+      <br />
+      <NumberInput
+        value={value}
+        min={minValue}
+        max={maxValue}
+        onMinus={onMinus}
+        onChange={onChange}
+        onPlus={onPlus}
+        inputName="input"
+        inputAriaLabel="number input"
+        minusBtnAriaLabel="minus"
+        plusBtnAriaLabel="plus"
+        unit="%"
+      />
+    </React.Fragment>
+  );
+};

package/src/components/NumberInput/examples/NumberInputVaryingSizes.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { NumberInput } from '@patternfly/react-core';
+
+export const NumberInputVaryingSizes: React.FunctionComponent = () => {
+  const [input1Value, setInput1Value] = React.useState(1);
+  const [input2Value, setInput2Value] = React.useState(1234567890);
+  const [input3Value, setInput3Value] = React.useState(5);
+  const [input4Value, setInput4Value] = React.useState(12345);
+
+  const onChange = (
+    event: React.FormEvent<HTMLInputElement>,
+    updateFunction: React.Dispatch<React.SetStateAction<number>>
+  ) => {
+    const target = event.target as HTMLInputElement;
+    updateFunction(Number(target.value));
+  };
+
+  const onMinus = (value, updateFunction: React.Dispatch<React.SetStateAction<number>>) => {
+    updateFunction(value - 1);
+  };
+
+  const onPlus = (value, updateFunction: React.Dispatch<React.SetStateAction<number>>) => {
+    updateFunction(value + 1);
+  };
+
+  return (
+    <React.Fragment>
+      <NumberInput
+        value={input1Value}
+        onMinus={() => onMinus(input1Value, setInput1Value)}
+        onChange={event => onChange(event, setInput1Value)}
+        onPlus={() => onPlus(input1Value, setInput1Value)}
+        inputName="input1"
+        inputAriaLabel="number input 1"
+        minusBtnAriaLabel="input 2 minus"
+        plusBtnAriaLabel="input 2 plus"
+        widthChars={1}
+      />
+      <br />
+      <br />
+      <NumberInput
+        value={input2Value}
+        onMinus={() => onMinus(input2Value, setInput2Value)}
+        onChange={event => onChange(event, setInput2Value)}
+        onPlus={() => onPlus(input2Value, setInput2Value)}
+        inputName="input2"
+        inputAriaLabel="number input 2"
+        minusBtnAriaLabel="input 2 minus"
+        plusBtnAriaLabel="input 2 plus"
+        widthChars={10}
+      />
+      <br />
+      <br />
+      <NumberInput
+        value={input3Value}
+        onMinus={() => onMinus(input3Value, setInput3Value)}
+        onChange={event => onChange(event, setInput3Value)}
+        onPlus={() => onPlus(input3Value, setInput3Value)}
+        inputName="input3"
+        inputAriaLabel="number input 3"
+        minusBtnAriaLabel="input 3 minus"
+        plusBtnAriaLabel="input 3 plus"
+        widthChars={5}
+      />
+      <br />
+      <br />
+      <NumberInput
+        value={input4Value}
+        onMinus={() => onMinus(input4Value, setInput4Value)}
+        onChange={event => onChange(event, setInput4Value)}
+        onPlus={() => onPlus(input4Value, setInput4Value)}
+        inputName="input4"
+        inputAriaLabel="number input 4"
+        minusBtnAriaLabel="input 4 minus"
+        plusBtnAriaLabel="input 4 plus"
+        widthChars={5}
+      />
+    </React.Fragment>
+  );
+};

package/src/components/NumberInput/examples/{WithStatus.tsx → NumberInputWithStatus.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { NumberInput, ValidatedOptions } from '@patternfly/react-core';
 
-export const WithStatus: React.FunctionComponent = () => {
+export const NumberInputWithStatus: React.FunctionComponent = () => {
   const max = 10;
   const min = 0;
 
@@ -20,8 +20,9 @@ export const WithStatus: React.FunctionComponent = () => {
     validate(newVal);
   };
 
-  const onChange = event => {
-    const newVal = isNaN(event.target.value) ? 5 : Number(event.target.value);
+  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
+    const target = event.target as HTMLInputElement;
+    const newVal = isNaN(+target.value) ? 5 : Number(target.value);
     setValue(newVal);
     validate(newVal);
   };

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();
   });