Skip to content

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

Open
mshriver wants to merge 2 commits into
patternfly:mainfrom
mshriver:form-ouia
Open

chore(Form/FormGroup): Include OUIAProps for Form and FormGroup#12426
mshriver wants to merge 2 commits into
patternfly:mainfrom
mshriver:form-ouia

Conversation

@mshriver
Copy link
Copy Markdown

@mshriver mshriver commented May 14, 2026

What:

Add OUIAProps support to Form and FormGroup, for better test automation support.

First contribution, believe I've followed contributing guidelines.
Opus/Sonnet used for initial commit and mentioned as co-author.

Tear it up! Thanks for review and consideration.

Summary by CodeRabbit

  • New Features

    • Form component now accepts optional ouiaId (number or string) and ouiaSafe (boolean) properties.
    • FormGroup component now supports the same optional OUIA properties, with ouiaSafe defaulting to true.
  • Documentation

    • Updated OUIA documentation to include Form and FormGroup components.

Review Change Stack

Co-authored-by: Claude <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 14, 2026

Walkthrough

This PR adds OUIA (OpenUI5 Unified API) support to the Form and FormGroup components in PatternFly React Core. Both components now accept optional ouiaId and ouiaSafe props and apply generated OUIA attributes to their root elements. Documentation is updated to reflect these components as OUIA-compliant.

Changes

OUIA Support for Form Components

Layer / File(s) Summary
Form component OUIA integration
packages/react-core/src/components/Form/Form.tsx
FormProps extends with optional ouiaId and ouiaSafe properties. FormBase refactored to destructure OUIA props, call useOUIAProps with component displayName, and spread resulting ouiaProps onto the <form> element alongside existing props, maxWidth, and className handling.
FormGroup component OUIA integration
packages/react-core/src/components/Form/FormGroup.tsx
FormGroupProps extends with optional ouiaId and ouiaSafe properties (default ouiaSafe = true). FormGroup component destructures OUIA props, computes ouiaProps via useOUIAProps, and spreads the result onto the root <div>.
OUIA documentation update
packages/react-core/src/helpers/OUIA/OUIA.md
Form and FormGroup components added to the OUIA-compliant components list for react-core package.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Title check ✅ Passed The PR title accurately summarizes the main change: adding OUIAProps support to Form and FormGroup components.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Warning

Review ran into problems

🔥 Problems

Stopped waiting for pipeline failures after 30000ms. One of your pipelines takes longer than our 30000ms fetch window to run, so review may not consider pipeline-failure results for inline comments if any failures occurred after the fetch window. Increase the timeout if you want to wait longer or run a @coderabbit review after the pipeline has finished.

Tip

💬 Introducing Slack Agent: The best way for teams to turn conversations into code.

Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.

  • Generate code and open pull requests
  • Plan features and break down work
  • Investigate incidents and troubleshoot customer tickets together
  • Automate recurring tasks and respond to alerts with triggers
  • Summarize progress and report instantly

Built for teams:

  • Shared memory across your entire org—no repeating context
  • Per-thread sandboxes to safely plan and execute work
  • Governance built-in—scoped access, auditability, and budget controls

One agent for your entire SDLC. Right inside Slack.

👉 Get started


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@patternfly-build
Copy link
Copy Markdown
Collaborator

patternfly-build commented May 14, 2026

Includes Form and FormGroup

ActionGroup and LoginForm too, as they use Forms
@mshriver mshriver marked this pull request as ready for review May 14, 2026 11:25
Copilot AI review requested due to automatic review settings May 14, 2026 11:25
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Adds Open UI Automation (OUIA) attribute support to the Form and FormGroup components in react-core to improve automated testability, and updates related documentation/tests to reflect the new attributes.

Changes:

  • Add OUIAProps support and useOUIAProps integration to Form and FormGroup.
  • Update OUIA documentation list to include Form and FormGroup.
  • Update relevant Jest snapshots to include the new data-ouia-* attributes.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

Show a summary per file
File Description
packages/react-core/src/helpers/OUIA/OUIA.md Adds Form and FormGroup to the documented list of OUIA-compliant components.
packages/react-core/src/components/Form/Form.tsx Implements OUIA props on the <form> root element.
packages/react-core/src/components/Form/FormGroup.tsx Implements OUIA props on the FormGroup root <div>.
packages/react-core/src/components/LoginPage/tests/snapshots/LoginForm.test.tsx.snap Updates snapshots to include OUIA attributes emitted by Form/FormGroup (and resulting generated IDs).
packages/react-core/src/components/Form/tests/snapshots/Form.test.tsx.snap Updates Form snapshots for new OUIA attributes.
packages/react-core/src/components/Form/tests/snapshots/FormGroup.test.tsx.snap Updates FormGroup snapshots for new OUIA attributes (and nested Form usage in some cases).
packages/react-core/src/components/Form/tests/snapshots/ActionGroup.test.tsx.snap Updates snapshot due to Form now emitting OUIA attributes.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment on lines +43 to +47
[cssMaxWidth.name]: maxWidth,
...props.style
} as React.CSSProperties
})}
{...props}
Copy link
Copy Markdown
Author

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

@mshriver mshriver changed the title Include OUIAProps for Form and FormGroup chore: Include OUIAProps for Form and FormGroup May 14, 2026
@mshriver mshriver changed the title chore: Include OUIAProps for Form and FormGroup chore(Form/FormGroup): Include OUIAProps for Form and FormGroup May 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants