chore(TextInputGroup): Added default as an option for validated

Author: tlabaj

packages/react-core/src/components/Content/examples/Content.md

@@ -2,7 +2,7 @@
 id: Content
 section: components
 cssPrefix: pf-v6-c-content
-propComponents: ['Content']
+propComponents: ['Content', 'ContentVariants']
 ---
 
 The `<Content>` component allows you to establish a block of HTML content and apply simple, built-in styling. `<Content>` can be used for any element supported by the `component` property (including `h1` through `h6`, `hr`, `p`, `a`, `small`, `blockquote`, and `pre`).

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

@@ -1,6 +1,7 @@
 import { createContext, useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 import { css } from '@patternfly/react-styles';
+import { ValidatedOptions } from '../../helpers/constants';
 
 export interface TextInputGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the text input group */
@@ -11,8 +12,11 @@ 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. */
-  validated?: 'success' | 'warning' | 'error';
+  /** Value to indicate if the text input group is modified to show that validation state.
+   * If set to success, warning, or error, the group will show that state.
+   * If set to default, no validation styling is applied (use to clear a prior validation state).
+   */
+  validated?: 'success' | 'warning' | 'error' | 'default' | ValidatedOptions;
   /** @hide A reference object to attach to the input box */
   innerRef?: React.RefObject<any>;
 }
@@ -32,6 +36,7 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
 }: TextInputGroupProps) => {
   const ref = useRef(null);
   const textInputGroupRef = innerRef || ref;
+  const hasValidatedModifier = ['success', 'error', 'warning'].includes(validated);
 
   return (
     <TextInputGroupContext.Provider value={{ isDisabled, validated }}>
@@ -41,7 +46,7 @@ export const TextInputGroup: React.FunctionComponent<TextInputGroupProps> = ({
           styles.textInputGroup,
           isDisabled && styles.modifiers.disabled,
           isPlain && styles.modifiers.plain,
-          validated && styles.modifiers[validated],
+          hasValidatedModifier && styles.modifiers[validated as 'success' | 'warning' | 'error'],
           className
         )}
         {...props}

packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-
 import { css } from '@patternfly/react-styles';
 import { TextInputGroupContext } from './TextInputGroup';
 import { TextInputGroupIcon } from './TextInputGroupIcon';
-import { statusIcons, ValidatedOptions } from '../../helpers';
+import { statusIcons } from '../../helpers';
 
 export interface TextInputGroupMainProps extends Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
   /** Content rendered inside the text input group main div */
@@ -86,7 +86,19 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
   const { isDisabled, validated } = useContext(TextInputGroupContext);
   const ref = useRef(null);
   const textInputGroupInputInputRef = innerRef || ref;
-  const StatusIcon = statusIcons[validated === ValidatedOptions.error ? 'danger' : validated];
+  const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
+  const StatusIcon = (() => {
+    if (!hasStatusIcon) {
+      return undefined;
+    }
+    if (validated === 'error') {
+      return statusIcons.danger;
+    }
+    if (validated === 'success') {
+      return statusIcons.success;
+    }
+    return statusIcons.warning;
+  })();
 
   const handleChange = (event: React.FormEvent<HTMLInputElement>) => {
     onChange(event, event.currentTarget.value);
@@ -126,7 +138,7 @@ const TextInputGroupMainBase: React.FunctionComponent<TextInputGroupMainProps> =
           {...(ariaControls && { 'aria-controls': ariaControls })}
           {...inputProps}
         />
-        {validated && <TextInputGroupIcon isStatus>{<StatusIcon />}</TextInputGroupIcon>}
+        {hasStatusIcon && <TextInputGroupIcon isStatus>{<StatusIcon />}</TextInputGroupIcon>}
       </span>
     </div>
   );

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

@@ -72,6 +72,16 @@ describe('TextInputGroup', () => {
     expect(inputGroup).toHaveClass(styles.modifiers.error);
   });
 
+  it('does not apply validation modifiers when validated="default"', () => {
+    render(<TextInputGroup validated="default">Test</TextInputGroup>);
+
+    const inputGroup = screen.getByText('Test');
+
+    expect(inputGroup).not.toHaveClass(styles.modifiers.success);
+    expect(inputGroup).not.toHaveClass(styles.modifiers.warning);
+    expect(inputGroup).not.toHaveClass(styles.modifiers.error);
+  });
+
   it('passes isDisabled=false to children via a context when isDisabled prop is not passed', () => {
     const TestComponent: React.FunctionComponent = () => {
       const context = useContext(TextInputGroupContext);

packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -251,6 +251,16 @@ describe('TextInputGroupMain', () => {
     expect(screen.getByRole('textbox').nextElementSibling).toHaveClass(styles.modifiers.status);
   });
 
+  it('does not render a status icon when validated is default', () => {
+    render(
+      <TextInputGroupContext.Provider value={{ validated: 'default' }}>
+        <TextInputGroupMain />
+      </TextInputGroupContext.Provider>
+    );
+
+    expect(screen.queryByRole('textbox').nextElementSibling).toBeNull();
+  });
+
   it('does not call onChange callback when the input does not change', () => {
     const onChangeMock = jest.fn();