From c27c16dadaede80c353275117764e0919702cea7 Mon Sep 17 00:00:00 2001 From: mshriver Date: Thu, 14 May 2026 13:05:38 +0200 Subject: [PATCH 1/2] chore: Include OUIAProps for Form and FormGroup Co-authored-by: Claude --- .../react-core/src/components/Form/Form.tsx | 55 ++-- .../src/components/Form/FormGroup.tsx | 12 +- .../__snapshots__/Form.test.tsx.snap | 28 -- .../__snapshots__/FormGroup.test.tsx.snap | 269 ------------------ packages/react-core/src/helpers/OUIA/OUIA.md | 2 + 5 files changed, 45 insertions(+), 321 deletions(-) delete mode 100644 packages/react-core/src/components/Form/__tests__/__snapshots__/Form.test.tsx.snap delete mode 100644 packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap 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 && (
-
- -`; - -exports[`Form component should render form with limited width 1`] = ` - - - -`; - -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 deleted file mode 100644 index c2674a41356..00000000000 --- a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap +++ /dev/null @@ -1,269 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`FormGroup should render correctly when label is not a string with Children = Array 1`] = ` - -
-
- -    -
-
- - - -
-
- -`; - -exports[`FormGroup should render default form group variant 1`] = ` - -
-
- -    -
-
- -
-
- -`; - -exports[`FormGroup should render form group variant with node label 1`] = ` - -
-
- -    -
-
- -
-
- -`; - -exports[`FormGroup should render form group variant with required label 1`] = ` - -
-
- -    -
-
- -
-
- -`; - -exports[`FormGroup should render form group variant without label 1`] = ` - -
-
- -
-
- -`; - -exports[`FormGroup should render form group with additional label info 1`] = ` - -
-
-
- -    -
-
- more info -
-
-
- -
-
- -`; - -exports[`FormGroup should render horizontal form group variant 1`] = ` - - -
-
- -    -
-
- -
-
- -
-`; - -exports[`FormGroup should render stacked horizontal form group variant 1`] = ` - -
-
-
- -    -
-
- -
-
-
- -`; diff --git a/packages/react-core/src/helpers/OUIA/OUIA.md b/packages/react-core/src/helpers/OUIA/OUIA.md index 21bb7bf56cf..d971aeb61b2 100644 --- a/packages/react-core/src/helpers/OUIA/OUIA.md +++ b/packages/react-core/src/helpers/OUIA/OUIA.md @@ -57,6 +57,8 @@ component. * [Content](/components/content) * [Dropdown](/components/menus/dropdown) * [DropdownItem](/components/menus/dropdown) +* [Form](/components/forms/form) +* [FormGroup](/components/forms/form) * [FormSelect](/components/forms/form-select) * [Menu](/components/menus/menu) * [Modal](/components/modal) From 8ebdf29b4bf24d2dbd877ce5daa9039f30457d98 Mon Sep 17 00:00:00 2001 From: mshriver Date: Thu, 14 May 2026 13:20:02 +0200 Subject: [PATCH 2/2] Generated snaps from test -u Includes Form and FormGroup ActionGroup and LoginForm too, as they use Forms --- .../__snapshots__/ActionGroup.test.tsx.snap | 3 + .../__snapshots__/Form.test.tsx.snap | 37 +++ .../__snapshots__/FormGroup.test.tsx.snap | 299 ++++++++++++++++++ .../__snapshots__/LoginForm.test.tsx.snap | 52 ++- 4 files changed, 380 insertions(+), 11 deletions(-) create mode 100644 packages/react-core/src/components/Form/__tests__/__snapshots__/Form.test.tsx.snap create mode 100644 packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap index bb52e595478..39e1455c0a4 100644 --- a/packages/react-core/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap +++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap @@ -24,6 +24,9 @@ exports[`ActionGroup component should render horizontal form ActionGroup variant
+ + +`; + +exports[`Form component should render form with limited width 1`] = ` + + + +`; + +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 new file mode 100644 index 00000000000..9c61b9cfb36 --- /dev/null +++ b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap @@ -0,0 +1,299 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`FormGroup should render correctly when label is not a string with Children = Array 1`] = ` + +
+
+ +    +
+
+ + + +
+
+ +`; + +exports[`FormGroup should render default form group variant 1`] = ` + +
+
+ +    +
+
+ +
+
+ +`; + +exports[`FormGroup should render form group variant with node label 1`] = ` + +
+
+ +    +
+
+ +
+
+ +`; + +exports[`FormGroup should render form group variant with required label 1`] = ` + +
+
+ +    +
+
+ +
+
+ +`; + +exports[`FormGroup should render form group variant without label 1`] = ` + +
+
+ +
+
+ +`; + +exports[`FormGroup should render form group with additional label info 1`] = ` + +
+
+
+ +    +
+
+ more info +
+
+
+ +
+
+ +`; + +exports[`FormGroup should render horizontal form group variant 1`] = ` + + +
+
+ +    +
+
+ +
+
+ + +`; + +exports[`FormGroup should render stacked horizontal form group variant 1`] = ` + +
+
+
+ +    +
+
+ +
+
+
+ +`; diff --git a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap index fa88c11b905..ac08539ac72 100644 --- a/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap +++ b/packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap @@ -4,10 +4,16 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `