Skip to content

Commit eedd8b8

Browse files
mshriverclaude
mshriver
and
claude
authored
chore(Form/FormGroup): Include OUIAProps for Form and FormGroup (#12426)
* chore: Include OUIAProps for Form and FormGroup Co-authored-by: Claude <noreply@anthropic.com> * Generated snaps from test -u Includes Form and FormGroup ActionGroup and LoginForm too, as they use Forms --------- Co-authored-by: Claude <noreply@anthropic.com>
1 parent bd9932f commit eedd8b8

7 files changed

Lines changed: 128 additions & 35 deletions

File tree

‎packages/react-core/src/components/Form/Form.tsx‎

Lines changed: 33 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import { forwardRef } from 'react';
22
import styles from '@patternfly/react-styles/css/components/Form/form';
33
import { css } from '@patternfly/react-styles';
44
import cssMaxWidth from '@patternfly/react-tokens/dist/esm/c_form_m_limit_width_MaxWidth';
5+
import { useOUIAProps, OUIAProps } from '../../helpers';
56

6-
export interface FormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'> {
7+
export interface FormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'>, OUIAProps {
78
/** Anything that can be rendered as Form content. */
89
children?: React.ReactNode;
910
/** Additional classes added to the Form. */
@@ -16,6 +17,10 @@ export interface FormProps extends Omit<React.HTMLProps<HTMLFormElement>, 'ref'>
1617
maxWidth?: string;
1718
/** @hide Forwarded ref */
1819
innerRef?: React.Ref<any>;
20+
/** Value to overwrite the randomly generated data-ouia-component-id.*/
21+
ouiaId?: number | string;
22+
/** 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. */
23+
ouiaSafe?: boolean;
1924
}
2025

2126
const FormBase: React.FunctionComponent<FormProps> = ({
@@ -25,28 +30,34 @@ const FormBase: React.FunctionComponent<FormProps> = ({
2530
isWidthLimited = false,
2631
maxWidth = '',
2732
innerRef,
33+
ouiaId,
34+
ouiaSafe = true,
2835
...props
29-
}: FormProps) => (
30-
<form
31-
noValidate
32-
{...(maxWidth && {
33-
style: {
34-
[cssMaxWidth.name]: maxWidth,
35-
...props.style
36-
} as React.CSSProperties
37-
})}
38-
{...props}
39-
className={css(
40-
styles.form,
41-
isHorizontal && styles.modifiers.horizontal,
42-
(isWidthLimited || maxWidth) && styles.modifiers.limitWidth,
43-
className
44-
)}
45-
ref={innerRef}
46-
>
47-
{children}
48-
</form>
49-
);
36+
}: FormProps) => {
37+
const ouiaProps = useOUIAProps(Form.displayName, ouiaId, ouiaSafe);
38+
return (
39+
<form
40+
noValidate
41+
{...(maxWidth && {
42+
style: {
43+
[cssMaxWidth.name]: maxWidth,
44+
...props.style
45+
} as React.CSSProperties
46+
})}
47+
{...props}
48+
{...ouiaProps}
49+
className={css(
50+
styles.form,
51+
isHorizontal && styles.modifiers.horizontal,
52+
(isWidthLimited || maxWidth) && styles.modifiers.limitWidth,
53+
className
54+
)}
55+
ref={innerRef}
56+
>
57+
{children}
58+
</form>
59+
);
60+
};
5061

5162
export const Form = forwardRef((props: FormProps, ref: React.Ref<any>) => <FormBase innerRef={ref} {...props} />);
5263

‎packages/react-core/src/components/Form/FormGroup.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { Fragment, isValidElement } from 'react';
22
import styles from '@patternfly/react-styles/css/components/Form/form';
33
import { ASTERISK } from '../../helpers/htmlConstants';
44
import { css } from '@patternfly/react-styles';
5-
import { useSSRSafeId } from '../../helpers';
5+
import { useSSRSafeId, useOUIAProps, OUIAProps } from '../../helpers';
66

7-
export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
7+
export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'>, OUIAProps {
88
/** Anything that can be rendered as FormGroup content. */
99
children?: React.ReactNode;
1010
/** Additional classes added to the FormGroup. */
@@ -31,6 +31,10 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
3131
* radio inputs, or pass in "group" when the form group contains multiple of any other input type.
3232
*/
3333
role?: string;
34+
/** Value to overwrite the randomly generated data-ouia-component-id.*/
35+
ouiaId?: number | string;
36+
/** 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. */
37+
ouiaSafe?: boolean;
3438
}
3539

3640
export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
@@ -45,8 +49,11 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
4549
isStack = false,
4650
fieldId,
4751
role,
52+
ouiaId,
53+
ouiaSafe = true,
4854
...props
4955
}: FormGroupProps) => {
56+
const ouiaProps = useOUIAProps(FormGroup.displayName, ouiaId, ouiaSafe);
5057
const randomId = useSSRSafeId();
5158
const isGroupOrRadioGroup = role === 'group' || role === 'radiogroup';
5259
const LabelComponent = isGroupOrRadioGroup ? 'span' : 'label';
@@ -72,6 +79,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
7279
{...(role && { role })}
7380
{...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` })}
7481
{...props}
82+
{...ouiaProps}
7583
>
7684
{label && (
7785
<div

‎packages/react-core/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,9 @@ exports[`ActionGroup component should render horizontal form ActionGroup variant
2424
<DocumentFragment>
2525
<form
2626
class="pf-v6-c-form pf-m-horizontal"
27+
data-ouia-component-id="OUIA-Generated-Form-:r0:"
28+
data-ouia-component-type="PF6/Form"
29+
data-ouia-safe="true"
2730
novalidate=""
2831
>
2932
<div

‎packages/react-core/src/components/Form/__tests__/__snapshots__/Form.test.tsx.snap‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ exports[`Form component should render default form variant 1`] = `
44
<DocumentFragment>
55
<form
66
class="pf-v6-c-form"
7+
data-ouia-component-id="OUIA-Generated-Form-:r0:"
8+
data-ouia-component-type="PF6/Form"
9+
data-ouia-safe="true"
710
novalidate=""
811
/>
912
</DocumentFragment>
@@ -13,6 +16,9 @@ exports[`Form component should render form with limited width 1`] = `
1316
<DocumentFragment>
1417
<form
1518
class="pf-v6-c-form pf-m-limit-width"
19+
data-ouia-component-id="OUIA-Generated-Form-:r2:"
20+
data-ouia-component-type="PF6/Form"
21+
data-ouia-safe="true"
1622
novalidate=""
1723
/>
1824
</DocumentFragment>
@@ -22,6 +28,9 @@ exports[`Form component should render horizontal form variant 1`] = `
2228
<DocumentFragment>
2329
<form
2430
class="pf-v6-c-form pf-m-horizontal"
31+
data-ouia-component-id="OUIA-Generated-Form-:r1:"
32+
data-ouia-component-type="PF6/Form"
33+
data-ouia-safe="true"
2534
novalidate=""
2635
/>
2736
</DocumentFragment>

‎packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,9 @@ exports[`FormGroup should render correctly when label is not a string with Child
44
<DocumentFragment>
55
<div
66
class="pf-v6-c-form__group"
7+
data-ouia-component-id="OUIA-Generated-FormGroup-:rm:"
8+
data-ouia-component-type="PF6/FormGroup"
9+
data-ouia-safe="true"
710
>
811
<div
912
class="pf-v6-c-form__group-label"
@@ -41,6 +44,9 @@ exports[`FormGroup should render default form group variant 1`] = `
4144
<DocumentFragment>
4245
<div
4346
class="pf-v6-c-form__group"
47+
data-ouia-component-id="OUIA-Generated-FormGroup-:r0:"
48+
data-ouia-component-type="PF6/FormGroup"
49+
data-ouia-safe="true"
4450
>
4551
<div
4652
class="pf-v6-c-form__group-label"
@@ -72,6 +78,9 @@ exports[`FormGroup should render form group variant with node label 1`] = `
7278
<DocumentFragment>
7379
<div
7480
class="pf-v6-c-form__group"
81+
data-ouia-component-id="OUIA-Generated-FormGroup-:r8:"
82+
data-ouia-component-type="PF6/FormGroup"
83+
data-ouia-safe="true"
7584
>
7685
<div
7786
class="pf-v6-c-form__group-label"
@@ -105,6 +114,9 @@ exports[`FormGroup should render form group variant with required label 1`] = `
105114
<DocumentFragment>
106115
<div
107116
class="pf-v6-c-form__group"
117+
data-ouia-component-id="OUIA-Generated-FormGroup-:r6:"
118+
data-ouia-component-type="PF6/FormGroup"
119+
data-ouia-safe="true"
108120
>
109121
<div
110122
class="pf-v6-c-form__group-label"
@@ -142,6 +154,9 @@ exports[`FormGroup should render form group variant without label 1`] = `
142154
<DocumentFragment>
143155
<div
144156
class="pf-v6-c-form__group"
157+
data-ouia-component-id="OUIA-Generated-FormGroup-:rk:"
158+
data-ouia-component-type="PF6/FormGroup"
159+
data-ouia-safe="true"
145160
>
146161
<div
147162
class="pf-v6-c-form__group-control"
@@ -158,6 +173,9 @@ exports[`FormGroup should render form group with additional label info 1`] = `
158173
<DocumentFragment>
159174
<div
160175
class="pf-v6-c-form__group"
176+
data-ouia-component-id="OUIA-Generated-FormGroup-:ra:"
177+
data-ouia-component-type="PF6/FormGroup"
178+
data-ouia-safe="true"
161179
>
162180
<div
163181
class="pf-v6-c-form__group-label pf-m-info"
@@ -200,10 +218,16 @@ exports[`FormGroup should render horizontal form group variant 1`] = `
200218
<DocumentFragment>
201219
<form
202220
class="pf-v6-c-form pf-m-horizontal"
221+
data-ouia-component-id="OUIA-Generated-Form-:re:"
222+
data-ouia-component-type="PF6/Form"
223+
data-ouia-safe="true"
203224
novalidate=""
204225
>
205226
<div
206227
class="pf-v6-c-form__group"
228+
data-ouia-component-id="OUIA-Generated-FormGroup-:rf:"
229+
data-ouia-component-type="PF6/FormGroup"
230+
data-ouia-safe="true"
207231
>
208232
<div
209233
class="pf-v6-c-form__group-label"
@@ -236,10 +260,16 @@ exports[`FormGroup should render stacked horizontal form group variant 1`] = `
236260
<DocumentFragment>
237261
<form
238262
class="pf-v6-c-form pf-m-horizontal"
263+
data-ouia-component-id="OUIA-Generated-Form-:rh:"
264+
data-ouia-component-type="PF6/Form"
265+
data-ouia-safe="true"
239266
novalidate=""
240267
>
241268
<div
242269
class="pf-v6-c-form__group"
270+
data-ouia-component-id="OUIA-Generated-FormGroup-:ri:"
271+
data-ouia-component-type="PF6/FormGroup"
272+
data-ouia-safe="true"
243273
>
244274
<div
245275
class="pf-v6-c-form__group-label"

0 commit comments

Comments
 (0)