[EuiSuperDatePicker] Time zone display

[acstll]

Summary

Important

This PR merges into a feature branch

This adds time zone information to the date picker popovers in the EuiSuperDatePicker. Passing the name of the time zone is required. The space where the time zone information is shown can be customized with a render function prop.

Resolves 🔒 https://github.com/elastic/eui-private/issues/440

Why are we making this change?

As part of a series of improvements to EuiSuperDatePicker that should have a positive immediate impact for users.

Screenshots

Figma

Impact to users

🟢 No impact. Setting the timeZoneDisplay prop is needed in order for the info to show. No logic in the component is affected.

QA

• Storybook
• Docs

📘 I'm open to feedback regarding:

• the prop names
• whether the render function (timeZoneCustomDisplayRender) is the best approach for the custom content
  • the requirement, as in the acceptance criteria is: "Optionally add an icon button that links to the settings page where the time zone can be changed"
• anything else is needed for accessibility — I considered nothing specific was needed

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• 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)
  • If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
• 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]

💚 Build Succeeded

• Buildkite Build
• Commit: dcce4f0
• Documentation website
• Storybook

History

• 💚 Build #1857 succeeded 651d787
• 💚 Build #1854 succeeded 1028a20
• 💚 Build #1849 succeeded f51c969
• 💚 Build #1848 succeeded 0237cd1

cc @acstll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: dcce4f0

History

• 💚 Build #5157 succeeded 1028a20
• 💚 Build #5153 succeeded f51c969
• 💔 Build #5152 failed 0237cd1

cc @acstll