diff --git a/.changeset/eighty-files-clean.md b/.changeset/eighty-files-clean.md new file mode 100644 index 00000000000..3a62613e03b --- /dev/null +++ b/.changeset/eighty-files-clean.md @@ -0,0 +1,5 @@ +--- +'@talend/react-components': minor +--- + +TDOPS-448 - Enhance date picker controls to reduce number of clicks needed diff --git a/packages/components/src/DateTimePickers/DateRange/Picker/__snapshots__/Picker.component.test.js.snap b/packages/components/src/DateTimePickers/DateRange/Picker/__snapshots__/Picker.component.test.js.snap index 4208752f08f..954e5bb8718 100644 --- a/packages/components/src/DateTimePickers/DateRange/Picker/__snapshots__/Picker.component.test.js.snap +++ b/packages/components/src/DateTimePickers/DateRange/Picker/__snapshots__/Picker.component.test.js.snap @@ -26,16 +26,146 @@ exports[`DateRange.Picker should render 1`] = `
- +
+ +
+
+ + +
+
{ await user.click(screen.getByText('onSelectMonth')); // then - const props = JSON.parse(screen.getByTestId('MonthYearView').getAttribute('data-props')); - expect(props.selectedMonthIndex).toBe(5); + const props = JSON.parse(screen.getByTestId('DateView').getAttribute('data-props')); + expect(props.calendar.monthIndex).toBe(5); }); it('should switch to new year from monthYear picker', async () => { diff --git a/packages/components/src/DateTimePickers/views/DateView/DateView.component.js b/packages/components/src/DateTimePickers/views/DateView/DateView.component.js index e30f06396d7..c63635ee214 100644 --- a/packages/components/src/DateTimePickers/views/DateView/DateView.component.js +++ b/packages/components/src/DateTimePickers/views/DateView/DateView.component.js @@ -32,6 +32,7 @@ class DateView extends PureComponent { onTitleClick: PropTypes.func.isRequired, onSelectMonthYear: PropTypes.func.isRequired, onSelectDate: PropTypes.func.isRequired, + onSelectYear: PropTypes.func.isRequired, selectedDate: PropTypes.instanceOf(Date), startDate: PropTypes.instanceOf(Date), endDate: PropTypes.instanceOf(Date), @@ -84,11 +85,12 @@ class DateView extends PureComponent { year={this.props.calendar.year} button={{ 'aria-label': t('DATEPICKER_TO_MONTH_YEAR', { - defaultValue: 'Switch to month-and-year view', + defaultValue: 'Switch to month view', }), onClick: this.props.onTitleClick, tabIndex: this.props.allowFocus ? 0 : -1, }} + onSelectYear={this.props.onSelectYear} /> ), rightElement: ( diff --git a/packages/components/src/DateTimePickers/views/DateView/DateView.test.js b/packages/components/src/DateTimePickers/views/DateView/DateView.test.js index 92c9ad8adfa..8be92679d39 100644 --- a/packages/components/src/DateTimePickers/views/DateView/DateView.test.js +++ b/packages/components/src/DateTimePickers/views/DateView/DateView.test.js @@ -51,7 +51,7 @@ describe('DateView', () => { expect(onTitleClick).not.toHaveBeenCalled(); // when - await user.click(screen.getByLabelText('Switch to month-and-year view')); + await user.click(screen.getByLabelText('Switch to month view')); // then expect(onTitleClick).toHaveBeenCalled(); @@ -71,10 +71,7 @@ describe('DateView', () => { onTitleClick={jest.fn()} />, ); - expect(screen.getByLabelText('Switch to month-and-year view')).toHaveAttribute( - 'tabIndex', - '-1', - ); + expect(screen.getByLabelText('Switch to month view')).toHaveAttribute('tabIndex', '-1'); // when rerender( @@ -92,7 +89,7 @@ describe('DateView', () => { ); // then - expect(screen.getByLabelText('Switch to month-and-year view')).toHaveAttribute('tabIndex', '0'); + expect(screen.getByLabelText('Switch to month view')).toHaveAttribute('tabIndex', '0'); }); test.each([ diff --git a/packages/components/src/DateTimePickers/views/DateView/__snapshots__/DateView.test.js.snap b/packages/components/src/DateTimePickers/views/DateView/__snapshots__/DateView.test.js.snap index 15524dd988b..79d62ec1379 100644 --- a/packages/components/src/DateTimePickers/views/DateView/__snapshots__/DateView.test.js.snap +++ b/packages/components/src/DateTimePickers/views/DateView/__snapshots__/DateView.test.js.snap @@ -37,16 +37,156 @@ exports[`DateView should render 1`] = `
- +
+ +
+
+ + +
+
; - } - return (
- {monthLabel} + {isButton ? ( + + ) : ( + {monthLabel} + )}
props => (
)); @@ -19,10 +21,11 @@ describe('HeaderTitle', () => { render(); // Then - const btn = screen.getByRole('button'); - expect(btn).toBeVisible(); - expect(btn).toHaveAttribute('aria-label', 'September 2012'); - expect(btn).toHaveAttribute('data-foo', 'whateverValue'); - expect(btn).toHaveTextContent('September 2012'); + const yearBtn = screen.getByRole('button', { name: '2012' }); + expect(yearBtn).toBeVisible(); + + const monthBtn = screen.getByRole('button', { name: 'September' }); + expect(monthBtn).toBeVisible(); + expect(monthBtn).toHaveAttribute('data-foo', 'whateverValue'); }); }); diff --git a/packages/components/src/DateTimePickers/views/HeaderTitle/__snapshots__/HeaderTitle.test.js.snap b/packages/components/src/DateTimePickers/views/HeaderTitle/__snapshots__/HeaderTitle.test.js.snap index 8a75e0361c4..84eaea9fd75 100644 --- a/packages/components/src/DateTimePickers/views/HeaderTitle/__snapshots__/HeaderTitle.test.js.snap +++ b/packages/components/src/DateTimePickers/views/HeaderTitle/__snapshots__/HeaderTitle.test.js.snap @@ -8,7 +8,7 @@ exports[`HeaderTitle should render a span and ActionDropdown 1`] = ` class="theme-month" > September diff --git a/packages/faceted-search/src/components/Badges/BadgeDate/__snapshots__/BadgeDateForm.component.test.js.snap b/packages/faceted-search/src/components/Badges/BadgeDate/__snapshots__/BadgeDateForm.component.test.js.snap index 8a0d767dee5..d6d18de86d4 100644 --- a/packages/faceted-search/src/components/Badges/BadgeDate/__snapshots__/BadgeDateForm.component.test.js.snap +++ b/packages/faceted-search/src/components/Badges/BadgeDate/__snapshots__/BadgeDateForm.component.test.js.snap @@ -71,16 +71,156 @@ exports[`BadgeDateForm should mount a badge and change date 1`] = `
- +
+ +
+
+ + +
+
- +
+ +
+
+ + +
+