Skip to content

Commit 08dc865

Browse files
gefguEric Olkowski
authored andcommitted
feat: add ouia support to dropdown next
1 parent f0a87ba commit 08dc865

File tree

2 files changed

+26
-8
lines changed

2 files changed

+26
-8
lines changed

packages/react-core/src/next/components/Dropdown/Dropdown.tsx

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import React from 'react';
22
import { css } from '@patternfly/react-styles';
33
import { Menu, MenuContent, MenuProps } from '../../../components/Menu';
44
import { Popper } from '../../../helpers/Popper/Popper';
5+
import { useOUIAProps, OUIAProps } from '../../../helpers';
56

6-
export interface DropdownProps extends MenuProps {
7+
export interface DropdownProps extends MenuProps, OUIAProps {
78
/** Anything which can be rendered in a dropdown. */
89
children?: React.ReactNode;
910
/** Classes applied to root element of dropdown. */
@@ -25,6 +26,10 @@ export interface DropdownProps extends MenuProps {
2526
minWidth?: string;
2627
/** @hide Forwarded ref */
2728
innerRef?: React.Ref<any>;
29+
/** Value to overwrite the randomly generated data-ouia-component-id.*/
30+
ouiaId?: number | string;
31+
/** 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. */
32+
ouiaSafe?: boolean;
2833
}
2934

3035
const DropdownBase: React.FunctionComponent<DropdownProps> = ({
@@ -38,11 +43,14 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
3843
isScrollable,
3944
minWidth,
4045
innerRef,
46+
ouiaId,
47+
ouiaSafe = true,
4148
...props
4249
}: DropdownProps) => {
4350
const localMenuRef = React.useRef<HTMLDivElement>();
4451
const toggleRef = React.useRef<HTMLButtonElement>();
4552
const containerRef = React.useRef<HTMLDivElement>();
53+
const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
4654

4755
const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
4856
React.useEffect(() => {
@@ -104,7 +112,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
104112
</Menu>
105113
);
106114
return (
107-
<div ref={containerRef}>
115+
<div ref={containerRef} {...ouiaProps}>
108116
<Popper
109117
trigger={toggle(toggleRef)}
110118
removeFindDomNode
Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,34 @@
11
import React from 'react';
22
import { css } from '@patternfly/react-styles';
33
import { MenuItemProps, MenuItem } from '../../../components/Menu';
4+
import { useOUIAProps, OUIAProps } from '../../../helpers';
45

5-
export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'> {
6+
export interface DropdownItemProps extends Omit<MenuItemProps, 'ref'>, OUIAProps {
67
/** Anything which can be rendered in a dropdown item */
78
children?: React.ReactNode;
89
/** Classes applied to root element of dropdown item */
910
className?: string;
1011
/** Description of the dropdown item */
1112
description?: React.ReactNode;
13+
/** Value to overwrite the randomly generated data-ouia-component-id.*/
14+
ouiaId?: number | string;
15+
/** 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. */
16+
ouiaSafe?: boolean;
1217
}
1318

1419
export const DropdownItem: React.FunctionComponent<MenuItemProps> = ({
1520
children,
1621
className,
1722
description,
23+
ouiaId,
24+
ouiaSafe,
1825
...props
19-
}: DropdownItemProps) => (
20-
<MenuItem className={css(className)} description={description} {...props}>
21-
{children}
22-
</MenuItem>
23-
);
26+
}: DropdownItemProps) => {
27+
const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
28+
return (
29+
<MenuItem className={css(className)} description={description} {...ouiaProps} {...props}>
30+
{children}
31+
</MenuItem>
32+
);
33+
};
2434
DropdownItem.displayName = 'DropdownItem';

0 commit comments

Comments
 (0)