diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx index 08fe93a5c01..4448dd6815c 100644 --- a/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx +++ b/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx @@ -9,6 +9,7 @@ import { GenerateId } from '../../helpers/GenerateId/GenerateId'; import { ClipboardCopyButton } from './ClipboardCopyButton'; import { ClipboardCopyToggle } from './ClipboardCopyToggle'; import { ClipboardCopyExpanded } from './ClipboardCopyExpanded'; +import { getOUIAProps, OUIAProps } from '../../helpers'; export const clipboardCopyFunc = (event: React.ClipboardEvent, text?: React.ReactNode) => { const clipboard = event.currentTarget.parentElement; @@ -32,7 +33,7 @@ export interface ClipboardCopyState { copied: boolean; } -export interface ClipboardCopyProps extends Omit, 'onChange'> { +export interface ClipboardCopyProps extends Omit, 'onChange'>, OUIAProps { /** Additional classes added to the clipboard copy container. */ className?: string; /** Tooltip message to display when hover the copy button */ @@ -86,6 +87,10 @@ export interface ClipboardCopyProps extends Omit children: React.ReactNode; /** Additional actions for inline clipboard copy. Should be wrapped with ClipboardCopyAction. */ additionalActions?: React.ReactNode; + /** 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 class ClipboardCopy extends React.Component { @@ -118,7 +123,8 @@ export class ClipboardCopy extends React.Component undefined, textAriaLabel: 'Copyable input', toggleAriaLabel: 'Show content', - additionalActions: null + additionalActions: null, + ouiaSafe: true }; // eslint-disable-next-line @typescript-eslint/no-unused-vars @@ -168,6 +174,8 @@ export class ClipboardCopy extends React.Component {variant === 'inline-compact' && ( diff --git a/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap b/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap index 615784fe2ca..e88c25bf8e6 100644 --- a/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap +++ b/packages/react-core/src/components/ClipboardCopy/__tests__/Generated/__snapshots__/ClipboardCopy.test.tsx.snap @@ -4,6 +4,8 @@ exports[`ClipboardCopy should match snapshot (auto-generated) 1`] = `
= ({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isOpen = false, - returnList = false + returnList = false, + ouiaId, + ouiaSafe = true }: WizardNavProps) => { + const ouiaProps = useOUIAProps(WizardNav.displayName, ouiaId, ouiaSafe); + const innerList =
    {children}
; if (returnList) { @@ -33,6 +38,7 @@ export const WizardNav: React.FunctionComponent = ({ className={css(styles.wizardNav, isOpen && styles.modifiers.expanded)} aria-label={ariaLabel} aria-labelledby={ariaLabelledBy} + {...ouiaProps} >
    {children}
diff --git a/packages/react-core/src/components/Wizard/WizardNavItem.tsx b/packages/react-core/src/components/Wizard/WizardNavItem.tsx index 311f4a545bf..6b60bd24371 100644 --- a/packages/react-core/src/components/Wizard/WizardNavItem.tsx +++ b/packages/react-core/src/components/Wizard/WizardNavItem.tsx @@ -2,8 +2,9 @@ import * as React from 'react'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Wizard/wizard'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; +import { useOUIAProps, OUIAProps } from '../../helpers'; -export interface WizardNavItemProps { +export interface WizardNavItemProps extends OUIAProps { /** Can nest a WizardNav component for substeps */ children?: React.ReactNode; /** The content to display in the nav item */ @@ -37,8 +38,11 @@ export const WizardNavItem: React.FunctionComponent = ({ href = null, isExpandable = false, id, + ouiaId, + ouiaSafe = true, ...rest }: WizardNavItemProps) => { + const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe); const NavItemComponent = navItemComponent; const [isExpanded, setIsExpanded] = React.useState(false); @@ -82,6 +86,7 @@ export const WizardNavItem: React.FunctionComponent = ({ aria-disabled={isDisabled ? true : null} aria-current={isCurrent && !children ? 'step' : false} {...(isExpandable && { 'aria-expanded': isExpanded })} + {...ouiaProps} > {isExpandable ? ( <> diff --git a/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap b/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap index 28de9d24bca..faa3b5b9ea9 100644 --- a/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap +++ b/packages/react-core/src/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap @@ -6,6 +6,9 @@ exports[`WizardNav should match snapshot (auto-generated) 1`] = ` aria-label="string" aria-labelledby="string" class="pf-c-wizard__nav" + data-ouia-component-id="OUIA-Generated-WizardNav-1" + data-ouia-component-type="PF4/WizardNav" + data-ouia-safe="true" >
    ReactNode diff --git a/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap b/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap index 9a9672aed93..00daf5767e3 100644 --- a/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap +++ b/packages/react-core/src/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap @@ -94,6 +94,9 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `