diff --git a/packages/react-core/src/components/Content/examples/Content.md b/packages/react-core/src/components/Content/examples/Content.md index 4b91412d50e..db83b5eb615 100644 --- a/packages/react-core/src/components/Content/examples/Content.md +++ b/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 `` component allows you to establish a block of HTML content and apply simple, built-in styling. `` can be used for any element supported by the `component` property (including `h1` through `h6`, `hr`, `p`, `a`, `small`, `blockquote`, and `pre`). diff --git a/packages/react-core/src/components/TextInputGroup/TextInputGroup.tsx b/packages/react-core/src/components/TextInputGroup/TextInputGroup.tsx index 4201b876ba0..139b4fe7322 100644 --- a/packages/react-core/src/components/TextInputGroup/TextInputGroup.tsx +++ b/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 { /** Content rendered inside the text input group */ @@ -11,8 +12,11 @@ export interface TextInputGroupProps extends React.HTMLProps { 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; } @@ -32,6 +36,7 @@ export const TextInputGroup: React.FunctionComponent = ({ }: TextInputGroupProps) => { const ref = useRef(null); const textInputGroupRef = innerRef || ref; + const hasValidatedModifier = ['success', 'error', 'warning'].includes(validated); return ( @@ -41,7 +46,7 @@ export const TextInputGroup: React.FunctionComponent = ({ styles.textInputGroup, isDisabled && styles.modifiers.disabled, isPlain && styles.modifiers.plain, - validated && styles.modifiers[validated], + hasValidatedModifier && styles.modifiers[validated as 'success' | 'warning' | 'error'], className )} {...props} diff --git a/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx b/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx index 80e3ec17de6..9b9185f75d9 100644 --- a/packages/react-core/src/components/TextInputGroup/TextInputGroupMain.tsx +++ b/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, 'onChange'> { /** Content rendered inside the text input group main div */ @@ -86,7 +86,19 @@ const TextInputGroupMainBase: React.FunctionComponent = 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) => { onChange(event, event.currentTarget.value); @@ -126,7 +138,7 @@ const TextInputGroupMainBase: React.FunctionComponent = {...(ariaControls && { 'aria-controls': ariaControls })} {...inputProps} /> - {validated && {}} + {hasStatusIcon && {}} ); 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 7cc494827fb..241b455f622 100644 --- a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroup.test.tsx +++ b/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(Test); + + 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); 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 3251d7d93bf..6247bece128 100644 --- a/packages/react-core/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx +++ b/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( + + + + ); + + expect(screen.queryByRole('textbox').nextElementSibling).toBeNull(); + }); + it('does not call onChange callback when the input does not change', () => { const onChangeMock = jest.fn();