Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: Enhancing date-range-picker pages #3107

Merged
merged 9 commits into from
Dec 10, 2024

Conversation

dpitcock
Copy link
Member

@dpitcock dpitcock commented Dec 6, 2024

Description

This adds more controls to the date-range-picker pages so we can toggle on and off features. It also accepts urlParams to toggle the features too so specific functionality can be shared.

The updated pages will make it easier to add additional changes for when there is a granularity prop added to the date-range-picker component

Related links, issue #, if available: n/a

How has this been tested?

Integ tests updated to reflect new urls and utilize params accordingly
Updates to internal Integ Test made to match this package in CR-165057689

Review checklist

The following items are to be evaluated by the author(s) and the reviewer(s).

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

Copy link

codecov bot commented Dec 6, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 96.37%. Comparing base (c0c9f2e) to head (75655f6).
Report is 4 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #3107   +/-   ##
=======================================
  Coverage   96.37%   96.37%           
=======================================
  Files         783      783           
  Lines       22039    22039           
  Branches     7553     7553           
=======================================
  Hits        21241    21241           
  Misses        791      791           
  Partials        7        7           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@dpitcock dpitcock marked this pull request as ready for review December 9, 2024 16:40
@dpitcock dpitcock requested a review from a team as a code owner December 9, 2024 16:40
@dpitcock dpitcock requested review from just-boris and removed request for a team December 9, 2024 16:40
pages/date-range-picker/custom-control.page.tsx Outdated Show resolved Hide resolved
<Link id="focus-dismiss-helper">Focusable element before the date range picker</Link>
<br />
<br />
<ScreenshotArea>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If there is a <ScreenshotArea>, it is likely used in some screenshot tests. Did you clean them up before merging this?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All tests that run against <...>/index.html#/light/date-range-picker/with-default-date and <...>/index.html#/light/date-range-picker/with-default-date-only will continue to run but this time against the same page<...>/index.html#/light/date-range-picker/with-value with params added to load the page with the component as date-only or not?dateOnly=true and ?dateOnly=false. So the same screenshots will exist. However as this PR is merged, the regression tests will see the former as removed, and those after it as new, even though they are visually the same

src/date-range-picker/time-offset.ts Outdated Show resolved Hide resolved
Comment on lines +37 to +49
const monthOnly = false;
const absoluteFormat =
urlParams.absoluteFormat ?? (dateRangePickerDemoDefaults.absoluteFormat as DateRangePickerProps.AbsoluteFormat);
const showRelativeOptions = urlParams.showRelativeOptions ?? dateRangePickerDemoDefaults.showRelativeOptions;
const dateOnly = urlParams.dateOnly ?? dateRangePickerDemoDefaults.dateOnly;
const disabledDates =
(urlParams.disabledDates as DisabledDate) ?? (dateRangePickerDemoDefaults.disabledDates as DisabledDate);
const withDisabledReason = urlParams.withDisabledReason ?? dateRangePickerDemoDefaults.withDisabledReason;
const invalid = urlParams.invalid ?? dateRangePickerDemoDefaults.invalid;
const warning = urlParams.warning ?? dateRangePickerDemoDefaults.warning;
const rangeSelectorMode =
urlParams.rangeSelectorMode ??
(dateRangePickerDemoDefaults.rangeSelectorMode as DateRangePickerProps.RangeSelectorMode);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't it be easier to make all defaults false/undefined, instead of writing this wall of text for every page?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a tradeoff. I understand your approach. While it may seem verbose, using centralized defaults in dateRangePickerDemoDefaults allows us to maintain consistency across multiple pages and easily update default values in one place. This approach reduces the risk of inconsistencies and makes maintenance easier in the long run. It's worth noting that specific initial values can be assigned in place of the defaults if desired for any particular page. Also, not all pages have this 'wall of text,' as many don't allow for changes to as many props, resulting in a more concise implementation on those pages.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other integ tests screenshots added in CR-165057689

@dpitcock dpitcock force-pushed the denpitco-date-range-picker-page-enhancements branch from 088efae to d668377 Compare December 10, 2024 09:47
<Link id="focus-dismiss-helper">Focusable element before the date range picker</Link>
<br />
<br />
<ScreenshotArea>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the ScreenshotArea that will be used to continue testing for both default-date and default-date-only tests when the url with the right params are passed into this page

@dpitcock dpitcock requested a review from just-boris December 10, 2024 12:24
@dpitcock dpitcock added this pull request to the merge queue Dec 10, 2024
Merged via the queue into main with commit d6ee60f Dec 10, 2024
39 checks passed
@dpitcock dpitcock deleted the denpitco-date-range-picker-page-enhancements branch December 10, 2024 15:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants