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 = ( -
+
+
+
+
+
+ + +
+
+
+
+ + + +
+
+
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + Sunday + + + + + Monday + + + + + Tuesday + + + + + Wednesday + + + + + Thursday + + + + + Friday + + + + + Saturday + + +
+ + + + + + + + + + + + + +
+ + + + + + + + + + + + + +
+ + + + + + + + + + + + + +
+ + + + + + + + + + + + + +
+ + + + + + + + + + + + + +
+
+ +`; diff --git a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap index 1cbdedbbac2..a10fb31aee7 100644 --- a/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap +++ b/packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap @@ -86,6 +86,9 @@ exports[`With popover opened 1`] = ` >