From 5039aa34cd4ebc66ac874fbfe496eedd46f3793e Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Mon, 10 Oct 2022 13:33:22 -0400 Subject: [PATCH 1/2] feat(Wizard,ClipboardCopy): add OUIA props to WizardNav, WizardNavItem, ClipboardCopy --- .../ClipboardCopy/ClipboardCopy.tsx | 9 +++- .../__snapshots__/ClipboardCopy.test.tsx.snap | 2 + .../ClipboardCopy/examples/ClipboardCopy.md | 1 + .../src/components/Wizard/WizardNav.tsx | 10 +++- .../src/components/Wizard/WizardNavItem.tsx | 7 ++- .../__snapshots__/WizardNav.test.tsx.snap | 3 ++ .../__snapshots__/WizardNavItem.test.tsx.snap | 3 ++ .../__snapshots__/Wizard.test.tsx.snap | 48 +++++++++++++++++++ .../src/components/Wizard/examples/Wizard.md | 9 ++-- 9 files changed, 83 insertions(+), 9 deletions(-) diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx index 08fe93a5c01..2f1a3db6d82 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 */ @@ -118,7 +119,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 +170,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`] = `