feat(react/DatePicker): add closeOnSelect prop to automatically close the date picker after a date is selected
#903
Conversation
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
🦋 Changeset detectedLatest commit: 07bca26 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
codiumai-pr-agent-free
bot
added
Enhancement
Documentation
Review effort [1-5]: 2
labels
PR Reviewer Guide 🔍
|
cheton
changed the title
closeOnSelect to automatically dismiss date picker after selectioncloseOnSelect prop to automatically close the date picker after a date is selected
PR Code Suggestions ✨
|
…date picker after selection
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. |
Tonic UI Demo
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## v2 #903 +/- ##
==========================================
+ Coverage 74.91% 78.92% +4.01%
==========================================
Files 378 378
Lines 6166 6168 +2
==========================================
+ Hits 4619 4868 +249
+ Misses 1547 1300 -247
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
|
/ask Enhance the test coverage for the DatePicker component |
Ask❓Enhance the test coverage for the DatePicker components Answer:To enhance the test coverage for the
Here is an example of how you can enhance the test coverage: import { screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { render } from '@tonic-ui/react/test-utils/render';
import {
Box,
DatePicker,
InputAdornment,
InputControl,
Text,
useColorStyle,
} from '@tonic-ui/react/src';
import { CalendarIcon } from '@tonic-ui/react-icons/src';
import * as dateFns from 'date-fns';
import React, { useCallback } from 'react';
describe('DatePicker', () => {
const TestComponent = (props) => {
const [colorStyle] = useColorStyle();
const inputFormat = 'MM/dd/yyyy';
const onChange = jest.fn();
const onError = jest.fn();
const inputError = false;
const value = new Date();
const formatDate = useCallback((date, format) => {
return dateFns.format(date, format);
}, []);
const renderInput = useCallback(({ error, inputProps }) => {
return (
<Box>
<InputControl
{...inputProps}
startAdornment={(
<InputAdornment color={colorStyle.color.secondary}>
<CalendarIcon />
</InputAdornment>
)}
data-testid="date-picker-input"
error={inputError}
placeholder={inputFormat}
/>
{inputError && (
<Text mt="1x" color="red:50">Invalid date</Text>
)}
</Box>
);
}, [colorStyle, inputError, inputFormat]);
return (
<DatePicker
data-testid="date-picker"
closeOnSelect={props.closeOnSelect}
firstDayOfWeek={0}
formatDate={formatDate}
onChange={onChange}
onError={onError}
value={value}
inputFormat={inputFormat}
renderInput={renderInput}
/>
);
};
it('should render correctly', async () => {
const user = userEvent.setup();
const renderOptions = {
useCSSVariables: true,
};
const { container } = render((
<TestComponent closeOnSelect={true} />
), renderOptions);
const datePicker = screen.getByTestId('date-picker');
const datePickerInput = screen.getByTestId('date-picker-input');
// The date picker and date picker input should be in the document
expect(datePicker).toBeInTheDocument();
expect(datePickerInput).toBeInTheDocument();
// Open the date picker
await user.click(datePickerInput);
// The "menu" role should be in the document
expect(await screen.findByRole('menu')).toBeInTheDocument();
expect(container).toMatchSnapshot();
});
it('should close the date picker when a date is selected and closeOnSelect is true', async () => {
const user = userEvent.setup();
render(<TestComponent closeOnSelect={true} />);
const datePickerInput = screen.getByTestId('date-picker-input');
// Open the date picker
await user.click(datePickerInput);
// Select a date
const dateButton = screen.getByText('15'); // Assuming 15th is a selectable date
await user.click(dateButton);
// The "menu" role should not be in the document
expect(screen.queryByRole('menu')).not.toBeInTheDocument();
});
it('should not close the date picker when a date is selected and closeOnSelect is false', async () => {
const user = userEvent.setup();
render(<TestComponent closeOnSelect={false} />);
const datePickerInput = screen.getByTestId('date-picker-input');
// Open the date picker
await user.click(datePickerInput);
// Select a date
const dateButton = screen.getByText('15'); // Assuming 15th is a selectable date
await user.click(dateButton);
// The "menu" role should still be in the document
expect(screen.getByRole('menu')).toBeInTheDocument();
});
// Add more tests for different input formats, firstDayOfWeek, error handling, etc.
});These tests cover the new |
Demo: https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-903/components/date-pickers/date-picker
Action Items:
CalendarandDatePickercomponentsPR Type
Enhancement, Documentation
Description
closeOnSelectprop toDatePickercomponent to automatically close the picker after a date is selected.onCloseinstead ofcloseMenufor better semantics.closeOnSelectstate, toggle functionality, and UI control.closeOnSelectprop in the DatePicker API table.Changes walkthrough 📝
range-picker.js
Add `closeOnSelect` prop and update close handler in range pickerpackages/react-docs/pages/components/date-pickers/date-picker/range-picker.js
closeOnSelectprop toDatePickercomponent.closeMenuwithonClosefor better semantics.usage.js
Add `closeOnSelect` state and UI control in usage examplepackages/react-docs/pages/components/date-pickers/date-picker/usage.js
closeOnSelectstate and toggle functionality.closeOnSelectprop inDatePickercomponent.closeOnSelectin the form.DatePicker.js
Implement `closeOnSelect` prop in DatePicker componentpackages/react/src/date-pickers/DatePicker/DatePicker.js
closeOnSelectprop with default valuefalse.closeOnSelectis true.
index.page.mdx
Document `closeOnSelect` prop in DatePicker APIpackages/react-docs/pages/components/date-pickers/date-picker/index.page.mdx
closeOnSelectprop in DatePicker API table.