diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx index c49e32bda61..3ef4d7d4070 100644 --- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx +++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx @@ -8,7 +8,7 @@ import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-mi import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon'; import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month'; -import { useSSRSafeId } from '../../helpers'; +import { useSSRSafeId, useOUIAProps, OUIAProps } from '../../helpers'; import { isValidDate } from '../../helpers/datetimeUtils'; export enum Weekday { @@ -63,7 +63,7 @@ export interface CalendarFormat { inlineProps?: CalendarMonthInlineProps; } -export interface CalendarProps extends CalendarFormat, Omit, 'onChange'> { +export interface CalendarProps extends CalendarFormat, Omit, 'onChange'>, OUIAProps { /** Additional classes to add to the outer div of the calendar month. */ className?: string; /** Month/year to base other dates around. */ @@ -88,6 +88,10 @@ export interface CalendarProps extends CalendarFormat, Omit HTMLElement) | 'inline'; + /** 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 buildCalendar = (year: number, month: number, weekStart: number, validators: ((date: Date) => boolean)[]) => { @@ -151,8 +155,11 @@ export const CalendarMonth = ({ isDateFocused = false, inlineProps, monthAppendTo = 'inline', + ouiaId, + ouiaSafe = true, ...props }: CalendarProps) => { + const ouiaProps = useOUIAProps(CalendarMonth.displayName, ouiaId, ouiaSafe); const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] .map((monthNum) => new Date(1990, monthNum)) .map(monthFormat); @@ -293,7 +300,7 @@ export const CalendarMonth = ({ const monthFormatted = monthFormat(focusedDate); const calendarToRender = ( -
+