feat(NumberInput): add status validate icons

packages/react-core/src/components/InputGroup/InputGroup.tsx

@@ -31,9 +31,11 @@ export const InputGroup: React.FunctionComponent<InputGroupProps> = ({
     <div ref={inputGroupRef} className={css(styles.inputGroup, className)} {...props}>
       {idItem
         ? React.Children.map(children, (child: any) =>
-            formCtrls.includes(child.type.displayName)
-              ? React.cloneElement(child, { 'aria-describedby': idItem.props.id })
-              : child
+            !formCtrls.includes(child.type.displayName) || child.props['aria-describedby']
+              ? child
+              : React.cloneElement(child, {
+                  'aria-describedby': child.props['aria-describedby'] === '' ? undefined : idItem.props.id
+                })
           )
         : children}
     </div>

packages/react-core/src/components/InputGroup/__tests__/InputGroup.test.tsx

@@ -20,4 +20,34 @@ describe('InputGroup', () => {
     );
     expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'button-id');
   });
+
+  test('wont add aria-describedby to form-control if describedby is empty string', () => {
+    // In this test, TextInput is a form-control component and Button is not.
+    // If Button has an id props, this should be used in aria-describedby, but this
+    // example has an empty aria-describedby to prevent that from happening.
+    render(
+      <InputGroup>
+        <TextInput value="some data" aria-describedby="" aria-label="some text" />
+        <Button id="button-id">
+          hello
+        </Button>
+      </InputGroup>
+    );
+    expect(screen.getByLabelText('some text')).not.toHaveAttribute('aria-describedby');
+  });
+
+  test('wont override aria-describedby in form-control if describedby has value', () => {
+    // In this test, TextInput is a form-control component and Button is not.
+    // If Button has an id props, this should be used in aria-describedby, but this
+    // example has a predefined aria-describedby to prevent that from happening
+    render(
+      <InputGroup>
+        <TextInput value="some data" aria-describedby="myself" aria-label="some text" />
+        <Button id="button-id">
+          hello
+        </Button>
+      </InputGroup>
+    );
+    expect(screen.getByLabelText('some text')).toHaveAttribute('aria-describedby', 'myself');
+  });
 });

packages/react-core/src/components/NumberInput/NumberInput.tsx

@@ -5,7 +5,8 @@ import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import { InputGroup } from '../InputGroup';
 import { Button, ButtonProps } from '../Button';
-import { KEY_CODES } from '../../helpers';
+import { KEY_CODES, ValidatedOptions } from '../../helpers';
+import { TextInput } from '../TextInput';
 
 export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
   /** Value of the number input */
@@ -16,6 +17,10 @@ export interface NumberInputProps extends React.HTMLProps<HTMLDivElement> {
   widthChars?: number;
   /** Indicates the whole number input should be disabled */
   isDisabled?: boolean;
+  /** Value to indicate if the input is modified to show that validation state
+   * @beta
+   */
+  validated?: 'default' | 'error' | 'warning' | 'success' | ValidatedOptions;
   /** Callback for the minus button */
   onMinus?: (event: React.MouseEvent, name?: string) => void;
   /** Callback for the text input changing */
@@ -66,6 +71,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
   className,
   widthChars,
   isDisabled = false,
+  validated = ValidatedOptions.default,
   onMinus = () => {},
   onChange,
   onBlur,
@@ -99,7 +105,7 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
 
   return (
     <div
-      className={css(styles.numberInput, className)}
+      className={css(styles.numberInput, validated !== 'default' && styles.modifiers.status, className)}
       {...(widthChars && {
         style: {
           '--pf-c-number-input--c-form-control--width-chars': widthChars,
@@ -121,18 +127,18 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
             <MinusIcon aria-hidden="true" />
           </span>
         </Button>
-        <input
-          className={css(styles.formControl)}
+        <TextInput
           type="number"
           value={value}
           name={inputName}
           aria-label={inputAriaLabel}
-          {...(isDisabled && { disabled: isDisabled })}
-          {...(onChange && { onChange })}
+          {...(isDisabled && { isDisabled })}
+          {...(onChange && { onChange: (value, event) => onChange(event) })}
           onBlur={handleBlur}
-          {...(!onChange && { readOnly: true })}
-          {...inputProps}
+          {...(!onChange && { isReadOnly: true })}
           onKeyDown={keyDownHandler}
+          validated={validated}
+          {...inputProps}
         />
         <Button
           variant="control"

packages/react-core/src/components/NumberInput/__tests__/NumberInput.test.tsx

@@ -9,6 +9,21 @@ describe('numberInput', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test('renders success validated', () => {
+    const { asFragment } = render(<NumberInput validated='success' />);
+    expect(asFragment()).toMatchSnapshot();
+  })
+
+  test('renders error validated', () => {
+    const { asFragment } = render(<NumberInput validated='error' />);
+    expect(asFragment()).toMatchSnapshot();
+  })
+
+  test('renders warning validated', () => {
+    const { asFragment } = render(<NumberInput validated='warning' />);
+    expect(asFragment()).toMatchSnapshot();
+  })
+
   test('renders value', () => {
     const { asFragment } = render(<NumberInput value={90} />);
     expect(asFragment()).toMatchSnapshot();
@@ -54,6 +69,7 @@ describe('numberInput', () => {
       <NumberInput
         value={5}
         onMinus={jest.fn()}
+        inputProps={{ 'aria-describedby': '' }}
         minusBtnProps={{ id: 'minus-id' }}
         onPlus={jest.fn()}
         plusBtnProps={{ id: 'plus-id' }}