Skip to content

chore(Form/FormGroup): Include OUIAProps for Form and FormGroup #12426

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mshriver wants to merge 2 commits into
base: main
Choose a base branch
from
Open

chore(Form/FormGroup): Include OUIAProps for Form and FormGroup #12426

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c27c16d
chore: Include OUIAProps for Form and FormGroup
mshriver May 14, 2026
8ebdf29
Generated snaps from test -u
mshriver May 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 33 additions & 22 deletions packages/react-core/src/components/Form/Form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Expand All @@ -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> = ({
Expand All @@ -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}
Comment on lines +43 to +47
Copy link
Copy Markdown
Author

@mshriver mshriver May 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is true for the main branch and I'd rather not include this change to the props processing behavior in this PR

{...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} />);

Expand Down
12 changes: 10 additions & 2 deletions packages/react-core/src/components/Form/FormGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Expand All @@ -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> = ({
Expand All @@ -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';
Expand All @@ -72,6 +79,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
{...(role && { role })}
{...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` })}
{...props}
{...ouiaProps}
>
{label && (
<div
Expand Down
3 changes: 3 additions & 0 deletions packages/react-core/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ exports[`ActionGroup component should render horizontal form ActionGroup variant
<DocumentFragment>
<form
class="pf-v6-c-form pf-m-horizontal"
data-ouia-component-id="OUIA-Generated-Form-:r0:"
data-ouia-component-type="PF6/Form"
data-ouia-safe="true"
novalidate=""
>
<div
Expand Down
9 changes: 9 additions & 0 deletions packages/react-core/src/components/Form/__tests__/__snapshots__/Form.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ exports[`Form component should render default form variant 1`] = `
<DocumentFragment>
<form
class="pf-v6-c-form"
data-ouia-component-id="OUIA-Generated-Form-:r0:"
data-ouia-component-type="PF6/Form"
data-ouia-safe="true"
novalidate=""
/>
</DocumentFragment>
Expand All @@ -13,6 +16,9 @@ exports[`Form component should render form with limited width 1`] = `
<DocumentFragment>
<form
class="pf-v6-c-form pf-m-limit-width"
data-ouia-component-id="OUIA-Generated-Form-:r2:"
data-ouia-component-type="PF6/Form"
data-ouia-safe="true"
novalidate=""
/>
</DocumentFragment>
Expand All @@ -22,6 +28,9 @@ exports[`Form component should render horizontal form variant 1`] = `
<DocumentFragment>
<form
class="pf-v6-c-form pf-m-horizontal"
data-ouia-component-id="OUIA-Generated-Form-:r1:"
data-ouia-component-type="PF6/Form"
data-ouia-safe="true"
novalidate=""
/>
</DocumentFragment>
Expand Down
30 changes: 30 additions & 0 deletions packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ exports[`FormGroup should render correctly when label is not a string with Child
<DocumentFragment>
<div
class="pf-v6-c-form__group"
data-ouia-component-id="OUIA-Generated-FormGroup-:rm:"
data-ouia-component-type="PF6/FormGroup"
data-ouia-safe="true"
>
<div
class="pf-v6-c-form__group-label"
Expand Down Expand Up @@ -41,6 +44,9 @@ exports[`FormGroup should render default form group variant 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-form__group"
data-ouia-component-id="OUIA-Generated-FormGroup-:r0:"
data-ouia-component-type="PF6/FormGroup"
data-ouia-safe="true"
>
<div
class="pf-v6-c-form__group-label"
Expand Down Expand Up @@ -72,6 +78,9 @@ exports[`FormGroup should render form group variant with node label 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-form__group"
data-ouia-component-id="OUIA-Generated-FormGroup-:r8:"
data-ouia-component-type="PF6/FormGroup"
data-ouia-safe="true"
>
<div
class="pf-v6-c-form__group-label"
Expand Down Expand Up @@ -105,6 +114,9 @@ exports[`FormGroup should render form group variant with required label 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-form__group"
data-ouia-component-id="OUIA-Generated-FormGroup-:r6:"
data-ouia-component-type="PF6/FormGroup"
data-ouia-safe="true"
>
<div
class="pf-v6-c-form__group-label"
Expand Down Expand Up @@ -142,6 +154,9 @@ exports[`FormGroup should render form group variant without label 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-form__group"
data-ouia-component-id="OUIA-Generated-FormGroup-:rk:"
data-ouia-component-type="PF6/FormGroup"
data-ouia-safe="true"
>
<div
class="pf-v6-c-form__group-control"
Expand All @@ -158,6 +173,9 @@ exports[`FormGroup should render form group with additional label info 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-form__group"
data-ouia-component-id="OUIA-Generated-FormGroup-:ra:"
data-ouia-component-type="PF6/FormGroup"
data-ouia-safe="true"
>
<div
class="pf-v6-c-form__group-label pf-m-info"
Expand Down Expand Up @@ -200,10 +218,16 @@ exports[`FormGroup should render horizontal form group variant 1`] = `
<DocumentFragment>
<form
class="pf-v6-c-form pf-m-horizontal"
data-ouia-component-id="OUIA-Generated-Form-:re:"
data-ouia-component-type="PF6/Form"
data-ouia-safe="true"
novalidate=""
>
<div
class="pf-v6-c-form__group"
data-ouia-component-id="OUIA-Generated-FormGroup-:rf:"
data-ouia-component-type="PF6/FormGroup"
data-ouia-safe="true"
>
<div
class="pf-v6-c-form__group-label"
Expand Down Expand Up @@ -236,10 +260,16 @@ exports[`FormGroup should render stacked horizontal form group variant 1`] = `
<DocumentFragment>
<form
class="pf-v6-c-form pf-m-horizontal"
data-ouia-component-id="OUIA-Generated-Form-:rh:"
data-ouia-component-type="PF6/Form"
data-ouia-safe="true"
novalidate=""
>
<div
class="pf-v6-c-form__group"
data-ouia-component-id="OUIA-Generated-FormGroup-:ri:"
data-ouia-component-type="PF6/FormGroup"
data-ouia-safe="true"
>
<div
class="pf-v6-c-form__group-label"
Expand Down
Loading
Loading