From ccfcc0e86d0d2546d8dfa878ce19dc5cf502be30 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Mon, 29 Jul 2024 11:46:35 -0400
Subject: [PATCH 1/6] feat(TextInputGroup): added validation support

---
 .../TextInputGroup/TextInputGroup.tsx         |  6 ++++-
 .../TextInputGroup/TextInputGroupIcon.tsx     | 25 +++++++++++++++++++
 .../TextInputGroup/TextInputGroupMain.tsx     |  8 ++++--
 3 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-core/src/components/TextInputGroup/TextInputGroupIcon.tsx

diff --git a/packages/react-core/src/components/TextInputGroup/TextInputGroup.tsx b/packages/react-core/src/components/TextInputGroup/TextInputGroup.tsx
index 1df27886894..9aada1cf24b 100644
--- a/packages/react-core/src/components/TextInputGroup/TextInputGroup.tsx
+++ b/packages/react-core/src/components/TextInputGroup/TextInputGroup.tsx
@@ -11,6 +11,8 @@ export interface TextInputGroupProps extends React.HTMLProps<HTMLDivElement> {
   isDisabled?: boolean;
   /** Flag to indicate the toggle has no border or background */
   isPlain?: boolean;
+  /** Status variant of the text input group. */
+  status?: 'success' | 'warning' | 'error';
   /** @hide A reference object to attach to the input box */
   innerRef?: React.RefObject<any>;
 }
@@ -24,6 +26,7 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
   className,
   isDisabled,
   isPlain,
+  status,
   innerRef,
   ...props
 }: TextInputGroupProps) => {
@@ -31,13 +34,14 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
   const textInputGroupRef = innerRef || ref;
 
   return (
-    <TextInputGroupContext.Provider value={{ isDisabled }}>
+    <TextInputGroupContext.Provider value={{ isDisabled, status }}>
       <div
         ref={textInputGroupRef}
         className={css(
           styles.textInputGroup,
           isDisabled && styles.modifiers.disabled,
           isPlain && styles.modifiers.plain,
+          status && styles.modifiers[status],
           className
         )}
         {...props}
diff --git a/packages/react-core/src/components/TextInputGroup/TextInputGroupIcon.tsx b/packages/react-core/src/components/TextInputGroup/TextInputGroupIcon.tsx
new file mode 100644
index 00000000000..aeed6e0ca75
--- /dev/null
+++ b/packages/react-core/src/components/TextInputGroup/TextInputGroupIcon.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
+import { css } from '@patternfly/react-styles';
+
+export interface TextInputGroupIconProps extends React.HTMLProps<HTMLSpanElement> {
+  /** Content rendered inside the text input group utilities div */
+  children?: React.ReactNode;
+  /** Additional classes applied to the text input group utilities container */
+  className?: string;
+  /** Flag indicating if the icon is a status icon and should inherit status styling. */
+  isStatus?: boolean;
+}
+
+export const TextInputGroupIcon: React.FunctionComponent<TextInputGroupIconProps> = ({
+  children,
+  className,
+  isStatus,
+  ...props
+}: TextInputGroupIconProps) => (
+  <span className={css(styles.textInputGroupIcon, isStatus && styles.modifiers.status, className)} {...props}>
+    {children}
+  </span>
+);
+
+TextInputGroupIcon.displayName = 'TextInputGroupIcon';
diff --git a/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx b/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx
index 268dab37d7e..a77ddec15b1 100644
--- a/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx
+++ b/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 import { css } from '@patternfly/react-styles';
 import { TextInputGroupContext } from './TextInputGroup';
+import { TextInputGroupIcon } from './TextInputGroupIcon';
+import { statusIcons, ValidatedOptions } from '../../helpers';
 
 export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
   /** Content rendered inside the text input group main div */
@@ -78,9 +80,10 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
   inputId,
   ...props
 }: TextInputGroupMainProps) => {
-  const { isDisabled } = React.useContext(TextInputGroupContext);
+  const { isDisabled, status } = React.useContext(TextInputGroupContext);
   const ref = React.useRef(null);
   const textInputGroupInputInputRef = innerRef || ref;
+  const StatusIcon = statusIcons[status === ValidatedOptions.error ? 'danger' : status];
 
   const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
     onChange(event, event.currentTarget.value);
@@ -100,7 +103,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
             id={inputId}
           />
         )}
-        {icon && <span className={css(styles.textInputGroupIcon)}>{icon}</span>}
+        {icon && <TextInputGroupIcon>{icon}</TextInputGroupIcon>}
         <input
           ref={textInputGroupInputInputRef}
           type={type}
@@ -119,6 +122,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
           {...(isExpanded !== undefined && { 'aria-expanded': isExpanded })}
           {...(ariaControls && { 'aria-controls': ariaControls })}
         />
+        {status && <TextInputGroupIcon isStatus>{<StatusIcon aria-hidden="true" />}</TextInputGroupIcon>}
       </span>
     </div>
   );

From 45577b728d6c7b053f056f08506258b298806200 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Mon, 29 Jul 2024 14:10:30 -0400
Subject: [PATCH 2/6] Added example

---
 .../TextInputGroup/examples/TextInputGroup.md | 12 ++++
 .../examples/TextInputGroupValidation.tsx     | 64 +++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 packages/react-core/src/components/TextInputGroup/examples/TextInputGroupValidation.tsx

diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md
index 0dbf2094410..22d6193021a 100644
--- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md
+++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md
@@ -13,19 +13,31 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 ### Basic
 
 ```ts file="./TextInputGroupBasic.tsx"
+
 ```
 
 ### Disabled
 
 ```ts file="./TextInputGroupDisabled.tsx"
+
 ```
 
 ### Utilities and icon
 
 ```ts file="./TextInputGroupUtilitiesAndIcon.tsx"
+
+```
+
+### With validation
+
+You can add validation to a `<TextInputGroup>` by passing the `status` property with a value of either "success", "warning", or "error".
+
+```ts file="./TextInputGroupValidation.tsx"
+
 ```
 
 ### Filters
 
 ```ts file="./TextInputGroupFilters.tsx"
+
 ```
diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupValidation.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupValidation.tsx
new file mode 100644
index 00000000000..7ad87b95134
--- /dev/null
+++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupValidation.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import {
+  TextInputGroup,
+  TextInputGroupMain,
+  TextInputGroupUtilities,
+  Button,
+  ValidatedOptions,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+export const TextInputGroupValidation: React.FunctionComponent = () => {
+  const [successValue, setSuccessValue] = React.useState('Success validation');
+  const [warningValue, setWarningValue] = React.useState('Warning validation with icon at start');
+  const [errorValue, setErrorValue] = React.useState('Error validation with icon at start and utilities');
+
+  /** show the input clearing button only when the input is not empty */
+  const showClearButton = !!errorValue;
+
+  /** render the utilities component only when a component it contains is being rendered */
+  const showUtilities = showClearButton;
+
+  /** callback for clearing the text input */
+  const clearInput = () => {
+    setErrorValue('');
+  };
+
+  return (
+    <Flex direction={{ default: 'column' }} rowGap={{ default: 'rowGapSm' }}>
+      <FlexItem>
+        <TextInputGroup status={ValidatedOptions.success}>
+          <TextInputGroupMain value={successValue} onChange={(_event, value) => setSuccessValue(value)} />
+        </TextInputGroup>
+      </FlexItem>
+      <FlexItem>
+        <TextInputGroup status={ValidatedOptions.warning}>
+          <TextInputGroupMain
+            icon={<SearchIcon />}
+            value={warningValue}
+            onChange={(_event, value) => setWarningValue(value)}
+          />
+        </TextInputGroup>
+      </FlexItem>
+      <FlexItem>
+        <TextInputGroup status={ValidatedOptions.error}>
+          <TextInputGroupMain
+            icon={<SearchIcon />}
+            value={errorValue}
+            onChange={(_event, value) => setErrorValue(value)}
+          />
+          {showUtilities && (
+            <TextInputGroupUtilities>
+              {showClearButton && (
+                <Button variant="plain" onClick={clearInput} aria-label="Clear button and input" icon={<TimesIcon />} />
+              )}
+            </TextInputGroupUtilities>
+          )}
+        </TextInputGroup>
+      </FlexItem>
+    </Flex>
+  );
+};

From bc33066e76422adaa36bad4224ecf5c40529b3e2 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Mon, 29 Jul 2024 14:19:22 -0400
Subject: [PATCH 3/6] Added unit tests

---
 .../__tests__/TextInputGroup.test.tsx         | 30 ++++++++++++++++---
 .../__tests__/TextInputGroupMain.test.tsx     | 10 +++++++
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx
index 3f9ba1fe0ed..0dbf3b96252 100644
--- a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx
+++ b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx
@@ -34,20 +34,42 @@ describe('TextInputGroup', () => {
     expect(inputGroup).toHaveClass('custom-class');
   });
 
-  it('does not render with the pf-m-disabled class when not disabled', () => {
+  it(`does not render with the ${styles.modifiers.disabled} class when not disabled`, () => {
     render(<TextInputGroup>Test</TextInputGroup>);
 
     const inputGroup = screen.getByText('Test');
 
-    expect(inputGroup).not.toHaveClass('pf-m-disabled');
+    expect(inputGroup).not.toHaveClass(styles.modifiers.disabled);
   });
 
-  it('renders with the pf-m-disabled class when disabled', () => {
+  it(`renders with the ${styles.modifiers.disabled} class when disabled`, () => {
     render(<TextInputGroup isDisabled>Test</TextInputGroup>);
 
     const inputGroup = screen.getByText('Test');
 
-    expect(inputGroup).toHaveClass('pf-m-disabled');
+    expect(inputGroup).toHaveClass(styles.modifiers.disabled);
+  });
+
+  it(`renders with class ${styles.modifiers.success} when status="success"`, () => {
+    render(<TextInputGroup status="success">Test</TextInputGroup>);
+
+    const inputGroup = screen.getByText('Test');
+
+    expect(inputGroup).toHaveClass(styles.modifiers.success);
+  });
+  it(`renders with class ${styles.modifiers.warning} when status="warning"`, () => {
+    render(<TextInputGroup status="warning">Test</TextInputGroup>);
+
+    const inputGroup = screen.getByText('Test');
+
+    expect(inputGroup).toHaveClass(styles.modifiers.warning);
+  });
+  it(`renders with class ${styles.modifiers.error} when status="error"`, () => {
+    render(<TextInputGroup status="error">Test</TextInputGroup>);
+
+    const inputGroup = screen.getByText('Test');
+
+    expect(inputGroup).toHaveClass(styles.modifiers.error);
   });
 
   it('passes isDisabled=false to children via a context when isDisabled prop is not passed', () => {
diff --git a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx
index 0cfa3e0299c..931c9672978 100644
--- a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx
+++ b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx
@@ -242,6 +242,16 @@ describe('TextInputGroupMain', () => {
     expect(hintInput).toBeVisible();
   });
 
+  it(`Renders status icon with class ${styles.modifiers.status} when a status prop is passed`, () => {
+    render(
+      <TextInputGroupContext.Provider value={{ status: 'success' }}>
+        <TextInputGroupMain />
+      </TextInputGroupContext.Provider>
+    );
+
+    expect(screen.getByRole('textbox').nextElementSibling).toHaveClass(styles.modifiers.status);
+  });
+
   it('does not call onChange callback when the input does not change', () => {
     const onChangeMock = jest.fn();
 

From b490abd2515d0a2352489c9c1bd19abaf525ce0b Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Mon, 12 Aug 2024 11:34:25 -0400
Subject: [PATCH 4/6] Updated example name

---
 .../components/TextInputGroup/examples/TextInputGroup.md    | 6 +++---
 ...nputGroupValidation.tsx => TextInputGroupWithStatus.tsx} | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/react-core/src/components/TextInputGroup/examples/{TextInputGroupValidation.tsx => TextInputGroupWithStatus.tsx} (97%)

diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md
index 22d6193021a..256ebf5b15d 100644
--- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md
+++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md
@@ -28,11 +28,11 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 ```
 
-### With validation
+### With status
 
-You can add validation to a `<TextInputGroup>` by passing the `status` property with a value of either "success", "warning", or "error".
+You can add a status to a `<TextInputGroup>` by passing the `status` property with a value of either "success", "warning", or "error".
 
-```ts file="./TextInputGroupValidation.tsx"
+```ts file="./TextInputGroupWithStatus.tsx"
 
 ```
 
diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupValidation.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx
similarity index 97%
rename from packages/react-core/src/components/TextInputGroup/examples/TextInputGroupValidation.tsx
rename to packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx
index 7ad87b95134..053dfbd4fe2 100644
--- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupValidation.tsx
+++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx
@@ -11,7 +11,7 @@ import {
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
-export const TextInputGroupValidation: React.FunctionComponent = () => {
+export const TextInputGroupWithStatus: React.FunctionComponent = () => {
   const [successValue, setSuccessValue] = React.useState('Success validation');
   const [warningValue, setWarningValue] = React.useState('Warning validation with icon at start');
   const [errorValue, setErrorValue] = React.useState('Error validation with icon at start and utilities');

From 85e96bb969f7f7e8bbd424571bcc86a21685b3f2 Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 10 Sep 2024 11:05:30 -0400
Subject: [PATCH 5/6] Updated verbiage in example

---
 .../TextInputGroup/examples/TextInputGroupWithStatus.tsx    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx
index 053dfbd4fe2..c3724b7e894 100644
--- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx
+++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx
@@ -13,8 +13,10 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 export const TextInputGroupWithStatus: React.FunctionComponent = () => {
   const [successValue, setSuccessValue] = React.useState('Success validation');
-  const [warningValue, setWarningValue] = React.useState('Warning validation with icon at start');
-  const [errorValue, setErrorValue] = React.useState('Error validation with icon at start and utilities');
+  const [warningValue, setWarningValue] = React.useState('Warning validation with custom non-status icon at start');
+  const [errorValue, setErrorValue] = React.useState(
+    'Error validation with custom non-status icon at start and utilities'
+  );
 
   /** show the input clearing button only when the input is not empty */
   const showClearButton = !!errorValue;

From 03df4ce698ef58a820fa884d80dff6aa5e2e669b Mon Sep 17 00:00:00 2001
From: Eric Olkowski <thatblindgeye@gmail.com>
Date: Tue, 10 Sep 2024 13:10:01 -0400
Subject: [PATCH 6/6] Updated status prop to validated to match other
 components

---
 .../src/components/TextInputGroup/TextInputGroup.tsx |  8 ++++----
 .../components/TextInputGroup/TextInputGroupMain.tsx |  6 +++---
 .../TextInputGroup/__tests__/TextInputGroup.test.tsx | 12 ++++++------
 .../__tests__/TextInputGroupMain.test.tsx            |  4 ++--
 .../TextInputGroup/examples/TextInputGroup.md        |  4 ++--
 .../examples/TextInputGroupWithStatus.tsx            |  6 +++---
 6 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/react-core/src/components/TextInputGroup/TextInputGroup.tsx b/packages/react-core/src/components/TextInputGroup/TextInputGroup.tsx
index 9aada1cf24b..13fab93e0fc 100644
--- a/packages/react-core/src/components/TextInputGroup/TextInputGroup.tsx
+++ b/packages/react-core/src/components/TextInputGroup/TextInputGroup.tsx
@@ -12,7 +12,7 @@ export interface TextInputGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Flag to indicate the toggle has no border or background */
   isPlain?: boolean;
   /** Status variant of the text input group. */
-  status?: 'success' | 'warning' | 'error';
+  validated?: 'success' | 'warning' | 'error';
   /** @hide A reference object to attach to the input box */
   innerRef?: React.RefObject<any>;
 }
@@ -26,7 +26,7 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
   className,
   isDisabled,
   isPlain,
-  status,
+  validated,
   innerRef,
   ...props
 }: TextInputGroupProps) => {
@@ -34,14 +34,14 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
   const textInputGroupRef = innerRef || ref;
 
   return (
-    <TextInputGroupContext.Provider value={{ isDisabled, status }}>
+    <TextInputGroupContext.Provider value={{ isDisabled, validated }}>
       <div
         ref={textInputGroupRef}
         className={css(
           styles.textInputGroup,
           isDisabled && styles.modifiers.disabled,
           isPlain && styles.modifiers.plain,
-          status && styles.modifiers[status],
+          validated && styles.modifiers[validated],
           className
         )}
         {...props}
diff --git a/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx b/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx
index a77ddec15b1..cc7542ea4a5 100644
--- a/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx
+++ b/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx
@@ -80,10 +80,10 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
   inputId,
   ...props
 }: TextInputGroupMainProps) => {
-  const { isDisabled, status } = React.useContext(TextInputGroupContext);
+  const { isDisabled, validated } = React.useContext(TextInputGroupContext);
   const ref = React.useRef(null);
   const textInputGroupInputInputRef = innerRef || ref;
-  const StatusIcon = statusIcons[status === ValidatedOptions.error ? 'danger' : status];
+  const StatusIcon = statusIcons[validated === ValidatedOptions.error ? 'danger' : validated];
 
   const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
     onChange(event, event.currentTarget.value);
@@ -122,7 +122,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
           {...(isExpanded !== undefined && { 'aria-expanded': isExpanded })}
           {...(ariaControls && { 'aria-controls': ariaControls })}
         />
-        {status && <TextInputGroupIcon isStatus>{<StatusIcon aria-hidden="true" />}</TextInputGroupIcon>}
+        {validated && <TextInputGroupIcon isStatus>{<StatusIcon aria-hidden="true" />}</TextInputGroupIcon>}
       </span>
     </div>
   );
diff --git a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx
index 0dbf3b96252..f4c06d3e72c 100644
--- a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx
+++ b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx
@@ -50,22 +50,22 @@ describe('TextInputGroup', () => {
     expect(inputGroup).toHaveClass(styles.modifiers.disabled);
   });
 
-  it(`renders with class ${styles.modifiers.success} when status="success"`, () => {
-    render(<TextInputGroup status="success">Test</TextInputGroup>);
+  it(`renders with class ${styles.modifiers.success} when validated="success"`, () => {
+    render(<TextInputGroup validated="success">Test</TextInputGroup>);
 
     const inputGroup = screen.getByText('Test');
 
     expect(inputGroup).toHaveClass(styles.modifiers.success);
   });
-  it(`renders with class ${styles.modifiers.warning} when status="warning"`, () => {
-    render(<TextInputGroup status="warning">Test</TextInputGroup>);
+  it(`renders with class ${styles.modifiers.warning} when validated="warning"`, () => {
+    render(<TextInputGroup validated="warning">Test</TextInputGroup>);
 
     const inputGroup = screen.getByText('Test');
 
     expect(inputGroup).toHaveClass(styles.modifiers.warning);
   });
-  it(`renders with class ${styles.modifiers.error} when status="error"`, () => {
-    render(<TextInputGroup status="error">Test</TextInputGroup>);
+  it(`renders with class ${styles.modifiers.error} when validated="error"`, () => {
+    render(<TextInputGroup validated="error">Test</TextInputGroup>);
 
     const inputGroup = screen.getByText('Test');
 
diff --git a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx
index 931c9672978..34747a047b0 100644
--- a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx
+++ b/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx
@@ -242,9 +242,9 @@ describe('TextInputGroupMain', () => {
     expect(hintInput).toBeVisible();
   });
 
-  it(`Renders status icon with class ${styles.modifiers.status} when a status prop is passed`, () => {
+  it(`Renders status icon with class ${styles.modifiers.status} when a validated prop is passed`, () => {
     render(
-      <TextInputGroupContext.Provider value={{ status: 'success' }}>
+      <TextInputGroupContext.Provider value={{ validated: 'success' }}>
         <TextInputGroupMain />
       </TextInputGroupContext.Provider>
     );
diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md
index 256ebf5b15d..3d3cc5ebced 100644
--- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md
+++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md
@@ -28,9 +28,9 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
 ```
 
-### With status
+### With validation
 
-You can add a status to a `<TextInputGroup>` by passing the `status` property with a value of either "success", "warning", or "error".
+You can add a validation status to a `<TextInputGroup>` by passing the `validated` property with a value of either "success", "warning", or "error".
 
 ```ts file="./TextInputGroupWithStatus.tsx"
 
diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx
index c3724b7e894..9e8ee8c1a17 100644
--- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx
+++ b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx
@@ -32,12 +32,12 @@ export const TextInputGroupWithStatus: React.FunctionComponent = () => {
   return (
     <Flex direction={{ default: 'column' }} rowGap={{ default: 'rowGapSm' }}>
       <FlexItem>
-        <TextInputGroup status={ValidatedOptions.success}>
+        <TextInputGroup validated={ValidatedOptions.success}>
           <TextInputGroupMain value={successValue} onChange={(_event, value) => setSuccessValue(value)} />
         </TextInputGroup>
       </FlexItem>
       <FlexItem>
-        <TextInputGroup status={ValidatedOptions.warning}>
+        <TextInputGroup validated={ValidatedOptions.warning}>
           <TextInputGroupMain
             icon={<SearchIcon />}
             value={warningValue}
@@ -46,7 +46,7 @@ export const TextInputGroupWithStatus: React.FunctionComponent = () => {
         </TextInputGroup>
       </FlexItem>
       <FlexItem>
-        <TextInputGroup status={ValidatedOptions.error}>
+        <TextInputGroup validated={ValidatedOptions.error}>
           <TextInputGroupMain
             icon={<SearchIcon />}
             value={errorValue}