Include OUIAProps for Form and FormGroup

Co-authored-by: Claude <noreply@anthropic.com>

Author: mshriver

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<React.HTMLProps<HTMLFormElement>, 'ref'> {
+export interface FormProps extends Omit<React.HTMLProps<HTMLFormElement>, '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<React.HTMLProps<HTMLFormElement>, 'ref'>
   maxWidth?: string;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
+  /** 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<FormProps> = ({
@@ -25,28 +30,34 @@ const FormBase: React.FunctionComponent<FormProps> = ({
   isWidthLimited = false,
   maxWidth = '',
   innerRef,
+  ouiaId,
+  ouiaSafe = true,
   ...props
-}: FormProps) => (
-  <form
-    noValidate
-    {...(maxWidth && {
-      style: {
-        [cssMaxWidth.name]: maxWidth,
-        ...props.style
-      } as React.CSSProperties
-    })}
-    {...props}
-    className={css(
-      styles.form,
-      isHorizontal && styles.modifiers.horizontal,
-      (isWidthLimited || maxWidth) && styles.modifiers.limitWidth,
-      className
-    )}
-    ref={innerRef}
-  >
-    {children}
-  </form>
-);
+}: FormProps) => {
+  const ouiaProps = useOUIAProps(Form.displayName, ouiaId, ouiaSafe);
+  return (
+    <form
+      noValidate
+      {...(maxWidth && {
+        style: {
+          [cssMaxWidth.name]: maxWidth,
+          ...props.style
+        } as React.CSSProperties
+      })}
+      {...props}
+      {...ouiaProps}
+      className={css(
+        styles.form,
+        isHorizontal && styles.modifiers.horizontal,
+        (isWidthLimited || maxWidth) && styles.modifiers.limitWidth,
+        className
+      )}
+      ref={innerRef}
+    >
+      {children}
+    </form>
+  );
+};
 
 export const Form = forwardRef((props: FormProps, ref: React.Ref<any>) => <FormBase innerRef={ref} {...props} />);
 

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<React.HTMLProps<HTMLDivElement>, 'label'> {
+export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, '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<React.HTMLProps<HTMLDivElement>, '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<FormGroupProps> = ({
@@ -45,8 +49,11 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   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<FormGroupProps> = ({
       {...(role && { role })}
       {...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` })}
       {...props}
+      {...ouiaProps}
     >
       {label && (
         <div