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

[EuiSuperDatePicker] Support restricted date range #8071

Merged

Conversation

mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Oct 10, 2024

Summary

closes #6021

This PR adds support for minDate and maxDate props on EuiSuperDatePicker.
These props are aligned with the props already in use on EuiDatePicker to ensure a common API.

The restricted range takes absolute and relative dates into account.

Screen.Recording.2024-10-10.at.21.02.08.mov

QA

Storybook: https://eui.elastic.co/pr_8071/storybook/?path=/story/forms-euisuperdatepicker-euisuperdatepicker--restricted-range
EUI docs: https://eui.elastic.co/pr_8071/#/templates/super-date-picker#restricted-range

  • verify the absolute panel dates are properly updated to show disabled and selectable dates based on set date range
  • verify that selected relative dates update the valid/invalid state of the EuiSuperDatePicker correctly (dates outside the range should trigger an invalid state)

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately.
    • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
  • Designer checklist
    • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

@mgadewoll mgadewoll marked this pull request as ready for review October 10, 2024 19:45
@mgadewoll mgadewoll requested a review from a team as a code owner October 10, 2024 19:45
@tkajtoch tkajtoch self-requested a review October 10, 2024 20:02
Copy link
Member

@tkajtoch tkajtoch left a comment

Choose a reason for hiding this comment

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

The changes look and work great!

I noticed something I'd like to improve in the future. The time selector isn't highlighting invalid values, which could create confusion especially when dealing with relatively small date ranges. The same behavior happens in EuiDatePicker, that's why I'm happy to skip it from this PR.

@mgadewoll
Copy link
Contributor Author

mgadewoll commented Oct 11, 2024

I noticed something I'd like to improve in the future. The time selector isn't highlighting invalid values, which could create confusion especially when dealing with relatively small date ranges. The same behavior happens in EuiDatePicker, that's why I'm happy to skip it from this PR.

@tkajtoch I agree. It would be a nice UX improvement to directly show invalid times but it's something we should improve on the EuiDatePicker first and EuiSuperDatePicker simply inherits it as it uses EuiDatePicker under the hood for absolute dates/times 👍

Copy link
Member

@ashokaditya ashokaditya left a comment

Choose a reason for hiding this comment

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

🚀

@tkajtoch tkajtoch merged commit df433c0 into elastic:main Oct 14, 2024
6 checks passed
tkajtoch added a commit to elastic/kibana that referenced this pull request Oct 14, 2024
`v97.0.0`⏩`v97.0.0-backport.0`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

# Backport

This EUI backport adds a single requested change on top of `v97.0.0` to
get it in Kibana before the 8.16 feature freeze:

* elastic/eui#8071

The change can be considered a patch release and shouldn't affect any of
the existing usages of `EuiSuperDatePicker`
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Oct 14, 2024
`v97.0.0`⏩`v97.0.0-backport.0`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

# Backport

This EUI backport adds a single requested change on top of `v97.0.0` to
get it in Kibana before the 8.16 feature freeze:

* elastic/eui#8071

The change can be considered a patch release and shouldn't affect any of
the existing usages of `EuiSuperDatePicker`

(cherry picked from commit e5b0b81)
cee-chen pushed a commit to elastic/kibana that referenced this pull request Oct 18, 2024
`v97.0.0-backport.0`⏩`v97.2.0`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

## [`v97.2.0`](https://github.com/elastic/eui/releases/v97.2.0)

- Updated `EuiHeaderLinks` with a new `xxs` gutter size
([#8079](elastic/eui#8079))

**Bug fixes**

- Reverted an `EuiDataGrid` regression from
[#8015](elastic/eui#8015) which prevented
overriding column widths via columns's `initialWidth`s
([#8086](elastic/eui#8086))


## [`v97.1.0`](https://github.com/elastic/eui/releases/v97.1.0)

- Added `columnVisibility.canDragAndDropColumns` on `EuiDataGrid` which
enables reordering columns via draggable header cells
([#8015](elastic/eui#8015))
- Updated `EuiHeader`s in dark mode to have a visible border-bottom
color ([#8070](elastic/eui#8070))
- Added props `minDate` and `maxDate` on `EuiSuperDatePicker` to support
restricting date range selections
([#8071](elastic/eui#8071))
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Oct 18, 2024
`v97.0.0-backport.0`⏩`v97.2.0`

_[Questions? Please see our Kibana upgrade
FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_

---

## [`v97.2.0`](https://github.com/elastic/eui/releases/v97.2.0)

- Updated `EuiHeaderLinks` with a new `xxs` gutter size
([elastic#8079](elastic/eui#8079))

**Bug fixes**

- Reverted an `EuiDataGrid` regression from
[elastic#8015](elastic/eui#8015) which prevented
overriding column widths via columns's `initialWidth`s
([elastic#8086](elastic/eui#8086))

## [`v97.1.0`](https://github.com/elastic/eui/releases/v97.1.0)

- Added `columnVisibility.canDragAndDropColumns` on `EuiDataGrid` which
enables reordering columns via draggable header cells
([elastic#8015](elastic/eui#8015))
- Updated `EuiHeader`s in dark mode to have a visible border-bottom
color ([elastic#8070](elastic/eui#8070))
- Added props `minDate` and `maxDate` on `EuiSuperDatePicker` to support
restricting date range selections
([elastic#8071](elastic/eui#8071))

(cherry picked from commit d7c5608)
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.

[EuiSuperDatePicker] Allow only certain range of dates
4 participants