Skip to content

chore(Popover): Include OUIAProps for Popover #12572

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
+69 −15
Open

chore(Popover): Include OUIAProps for Popover #12572

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
633ea33
chore(Popover): Include OUIAProps for Popover
mshriver Jul 20, 2026
0fee559
Update snapshots for datepicker
mshriver Jul 23, 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
25 changes: 14 additions & 11 deletions ...ges/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ exports[`With popover opened 1`] = `
<input
aria-invalid="false"
aria-label="Date picker"
data-ouia-component-id="OUIA-Generated-TextInputBase-:rq:"
data-ouia-component-id="OUIA-Generated-TextInputBase-:r11:"
data-ouia-component-type="PF6/TextInput"
data-ouia-safe="true"
placeholder="YYYY-MM-DD"
Expand All @@ -37,7 +37,7 @@ exports[`With popover opened 1`] = `
aria-haspopup="dialog"
aria-label="Toggle date picker"
class="pf-v6-c-button pf-m-control"
data-ouia-component-id="OUIA-Generated-Button-control-:rr:"
data-ouia-component-id="OUIA-Generated-Button-control-:r12:"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand All @@ -64,10 +64,13 @@ exports[`With popover opened 1`] = `
</div>
</div>
<div
aria-describedby="popover-pf-:ro:-body"
aria-describedby="popover-pf-:ru:-body"
aria-label=""
aria-modal="true"
class="pf-v6-c-popover pf-m-no-padding pf-m-width-auto pf-m-bottom"
data-ouia-component-id="OUIA-Generated-Popover-:rv:"
data-ouia-component-type="PF6/Popover"
data-ouia-safe="true"
data-popper-escaped="true"
data-popper-placement="bottom"
data-popper-reference-hidden="true"
Expand All @@ -82,7 +85,7 @@ exports[`With popover opened 1`] = `
>
<div
class="pf-v6-c-popover__body"
id="popover-pf-:ro:-body"
id="popover-pf-:ru:-body"
>
<div
class="pf-v6-c-calendar-month"
Expand All @@ -96,7 +99,7 @@ exports[`With popover opened 1`] = `
<button
aria-label="Previous month"
class="pf-v6-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-:rt:"
data-ouia-component-id="OUIA-Generated-Button-plain-:r14:"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -131,14 +134,14 @@ exports[`With popover opened 1`] = `
>
<span
hidden=""
id="hidden-month-span:rs:"
id="hidden-month-span:r13:"
>
Month
</span>
<button
aria-expanded="false"
class="pf-v6-c-menu-toggle"
data-ouia-component-id="OUIA-Generated-MenuToggle-:r10:"
data-ouia-component-id="OUIA-Generated-MenuToggle-:r17:"
data-ouia-component-type="PF6/MenuToggle"
data-ouia-safe="true"
style="width: 140px;"
Expand Down Expand Up @@ -185,7 +188,7 @@ exports[`With popover opened 1`] = `
<input
aria-invalid="false"
aria-label="Select year"
data-ouia-component-id="OUIA-Generated-TextInputBase-:r12:"
data-ouia-component-id="OUIA-Generated-TextInputBase-:r19:"
data-ouia-component-type="PF6/TextInput"
data-ouia-safe="true"
type="number"
Expand All @@ -201,7 +204,7 @@ exports[`With popover opened 1`] = `
<button
aria-label="Next month"
class="pf-v6-c-button pf-m-plain"
data-ouia-component-id="OUIA-Generated-Button-plain-:r13:"
data-ouia-component-id="OUIA-Generated-Button-plain-:r1a:"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
type="button"
Expand Down Expand Up @@ -812,7 +815,7 @@ exports[`disabled date picker 1`] = `
<input
aria-invalid="false"
aria-label="disabled date picker"
data-ouia-component-id="OUIA-Generated-TextInputBase-:r2:"
data-ouia-component-id="OUIA-Generated-TextInputBase-:r3:"
data-ouia-component-type="PF6/TextInput"
data-ouia-safe="true"
disabled=""
Expand All @@ -829,7 +832,7 @@ exports[`disabled date picker 1`] = `
aria-haspopup="dialog"
aria-label="Toggle date picker"
class="pf-v6-c-button pf-m-control"
data-ouia-component-id="OUIA-Generated-Button-control-:r3:"
data-ouia-component-id="OUIA-Generated-Button-control-:r4:"
data-ouia-component-type="PF6/Button"
data-ouia-safe="true"
disabled=""
Expand Down
13 changes: 10 additions & 3 deletions packages/react-core/src/components/Popover/Popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,8 @@ import { PopoverCloseButton } from './PopoverCloseButton';
import { PopoverArrow } from './PopoverArrow';
import popoverMaxWidth from '@patternfly/react-tokens/dist/esm/c_popover_MaxWidth';
import popoverMinWidth from '@patternfly/react-tokens/dist/esm/c_popover_MinWidth';
import { FocusTrap } from '../../helpers';
import { FocusTrap, useSSRSafeId, useOUIAProps, OUIAProps } from '../../helpers';
import { Popper } from '../../helpers/Popper/Popper';
import { useSSRSafeId } from '../../helpers';

export enum PopoverPosition {
auto = 'auto',
Expand All @@ -35,7 +34,7 @@ export enum PopoverPosition {
* that has a property specifically for passing in popover properties.
*/

export interface PopoverProps {
export interface PopoverProps extends OUIAProps {
/** Text announced by screen reader when alert severity variant is set to indicate
* severity level.
*/
Expand Down Expand Up @@ -211,6 +210,10 @@ export interface PopoverProps {
withFocusTrap?: boolean;
/** The z-index of the popover. */
zIndex?: number;
/** 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 alertStyle = {
Expand Down Expand Up @@ -272,12 +275,15 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
hasNoPadding = false,
hasAutoWidth = false,
elementToFocus,
ouiaId,
ouiaSafe = true,
...rest
}: PopoverProps) => {
// could make this a prop in the future (true | false | 'toggle')
// const hideOnClick = true;
const generatedId = useSSRSafeId();
const uniqueId = id || generatedId;
const ouiaProps = useOUIAProps(Popover.displayName, ouiaId, ouiaSafe);
const triggerManually = isVisible !== null;
const [visible, setVisible] = useState(false);
const [focusTrapActive, setFocusTrapActive] = useState(Boolean(propWithFocusTrap));
Expand Down Expand Up @@ -473,6 +479,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
maxWidth: hasCustomMaxWidth ? maxWidth : null
}}
{...rest}
{...ouiaProps}
>
<PopoverArrow />
<PopoverContent>
Expand Down
45 changes: 44 additions & 1 deletion packages/react-core/src/components/Popover/__tests__/Popover.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { StrictMode } from 'react';
import { render } from '@testing-library/react';
import { render, screen } from '@testing-library/react';
import { Popover, PopoverPosition } from '../Popover';

test('popover renders close-button, header and body', () => {
Expand All @@ -9,6 +9,7 @@ test('popover renders close-button, header and body', () => {
position="top"
isVisible
hideOnOutsideClick
ouiaId="ouia-id"
headerContent={<div>Popover Header</div>}
bodyContent={
<div>
Expand Down Expand Up @@ -114,3 +115,45 @@ test('popover renders in strict mode', () => {
expect(consoleError).not.toHaveBeenCalled();
expect(asFragment()).toMatchSnapshot();
});

test('Renders with custom ouiaId', () => {
render(
<Popover isVisible ouiaId="test-id" headerContent={<div>Popover Header</div>} bodyContent={<div>Popover body</div>}>
<div>Toggle Popover</div>
</Popover>
);
expect(screen.getByRole('dialog')).toHaveAttribute('data-ouia-component-id', 'test-id');
});

test('Renders with expected ouia component type', () => {
render(
<Popover isVisible ouiaId="test-id" headerContent={<div>Popover Header</div>} bodyContent={<div>Popover body</div>}>
<div>Toggle Popover</div>
</Popover>
);
expect(screen.getByRole('dialog')).toHaveAttribute('data-ouia-component-type', 'PF6/Popover');
});

test('Renders with ouiaSafe defaulting to true', () => {
render(
<Popover isVisible ouiaId="test-id" headerContent={<div>Popover Header</div>} bodyContent={<div>Popover body</div>}>
<div>Toggle Popover</div>
</Popover>
);
expect(screen.getByRole('dialog')).toHaveAttribute('data-ouia-safe', 'true');
});

test('Renders with ouiaSafe=false when specified', () => {
render(
<Popover
isVisible
ouiaId="test-id"
ouiaSafe={false}
headerContent={<div>Popover Header</div>}
bodyContent={<div>Popover body</div>}
>
<div>Toggle Popover</div>
</Popover>
);
expect(screen.getByRole('dialog')).toHaveAttribute('data-ouia-safe', 'false');
});
1 change: 1 addition & 0 deletions packages/react-core/src/helpers/OUIA/OUIA.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ component.
* [NavExpandable](/components/navigation)
* [NavItem](/components/navigation)
* [Pagination](/components/pagination)
* [Popover](/components/popover)
* [Radio](/components/forms/radio)
* [Select](/components/menus/select)
* [Switch](/components/switch)
Expand Down
Loading