diff --git a/packages/react-core/src/components/Form/Form.tsx b/packages/react-core/src/components/Form/Form.tsx index eae7a974c0f..fdedde6f75d 100644 --- a/packages/react-core/src/components/Form/Form.tsx +++ b/packages/react-core/src/components/Form/Form.tsx @@ -2,8 +2,9 @@ import { forwardRef } from 'react'; import styles from '@patternfly/react-styles/css/components/Form/form'; import { css } from '@patternfly/react-styles'; import cssMaxWidth from '@patternfly/react-tokens/dist/esm/c_form_m_limit_width_MaxWidth'; +import { useOUIAProps, OUIAProps } from '../../helpers'; -export interface FormProps extends Omit, 'ref'> { +export interface FormProps extends Omit, 'ref'>, OUIAProps { /** Anything that can be rendered as Form content. */ children?: React.ReactNode; /** Additional classes added to the Form. */ @@ -16,6 +17,10 @@ export interface FormProps extends Omit, 'ref'> maxWidth?: string; /** @hide Forwarded ref */ innerRef?: React.Ref; + /** Value to overwrite the randomly generated data-ouia-component-id.*/ + ouiaId?: number | string; + /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */ + ouiaSafe?: boolean; } const FormBase: React.FunctionComponent = ({ @@ -25,28 +30,34 @@ const FormBase: React.FunctionComponent = ({ isWidthLimited = false, maxWidth = '', innerRef, + ouiaId, + ouiaSafe = true, ...props -}: FormProps) => ( -
- {children} -
-); +}: FormProps) => { + const ouiaProps = useOUIAProps(Form.displayName, ouiaId, ouiaSafe); + return ( +
+ {children} +
+ ); +}; export const Form = forwardRef((props: FormProps, ref: React.Ref) => ); diff --git a/packages/react-core/src/components/Form/FormGroup.tsx b/packages/react-core/src/components/Form/FormGroup.tsx index 76ebebaaec6..abde71667e0 100644 --- a/packages/react-core/src/components/Form/FormGroup.tsx +++ b/packages/react-core/src/components/Form/FormGroup.tsx @@ -2,9 +2,9 @@ import { Fragment, isValidElement } from 'react'; import styles from '@patternfly/react-styles/css/components/Form/form'; import { ASTERISK } from '../../helpers/htmlConstants'; import { css } from '@patternfly/react-styles'; -import { useSSRSafeId } from '../../helpers'; +import { useSSRSafeId, useOUIAProps, OUIAProps } from '../../helpers'; -export interface FormGroupProps extends Omit, 'label'> { +export interface FormGroupProps extends Omit, 'label'>, OUIAProps { /** Anything that can be rendered as FormGroup content. */ children?: React.ReactNode; /** Additional classes added to the FormGroup. */ @@ -31,6 +31,10 @@ export interface FormGroupProps extends Omit, 'l * radio inputs, or pass in "group" when the form group contains multiple of any other input type. */ role?: string; + /** Value to overwrite the randomly generated data-ouia-component-id.*/ + ouiaId?: number | string; + /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */ + ouiaSafe?: boolean; } export const FormGroup: React.FunctionComponent = ({ @@ -45,8 +49,11 @@ export const FormGroup: React.FunctionComponent = ({ isStack = false, fieldId, role, + ouiaId, + ouiaSafe = true, ...props }: FormGroupProps) => { + const ouiaProps = useOUIAProps(FormGroup.displayName, ouiaId, ouiaSafe); const randomId = useSSRSafeId(); const isGroupOrRadioGroup = role === 'group' || role === 'radiogroup'; const LabelComponent = isGroupOrRadioGroup ? 'span' : 'label'; @@ -72,6 +79,7 @@ export const FormGroup: React.FunctionComponent = ({ {...(role && { role })} {...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` })} {...props} + {...ouiaProps} > {label && (
@@ -13,6 +16,9 @@ exports[`Form component should render form with limited width 1`] = ` @@ -22,6 +28,9 @@ exports[`Form component should render horizontal form variant 1`] = ` diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap index c2674a41356..9c61b9cfb36 100644 --- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap +++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap @@ -4,6 +4,9 @@ exports[`FormGroup should render correctly when label is not a string with Child