[EuiSuperDatePicker] Add `customQuickSelectRender` prop #6382

breehall · 2022-11-17T21:26:35Z

Summary

Created a new customQuickSelectRender prop that allows consumers to control the order in which the panels within the Quick Select menu are displayed. This is an optional prop that returns the default panels as args. If the prop is not provided, the panels will appear in the default order (Quick Select, Commonly Used Ranges, Recently Used Ranges, and Custom Panels).

Usage

customQuickSelectRender is used by passing in the Quick Select element in their desired order.

customQuickSelectRender={(
      quickSelect,
      commonlyUsedTimes,
      recentlyUsedTimes,
      applyRefreshIntervalPanel,
      customQuickSelectPanels
) => (
   <>
      {customQuickSelectPanels}
      {commonlyUsedTimes}
      {recentlyUsedTimes}
      {quickSelect}
      {applyRefreshIntervalPanel}
   </>
)}

Incidental changes

Converts EuiQuickSelectPopover from a class component to a function component
Fixes an aria-label missing i18n localization, and also makes that label accessible to mouse/sighted users via title as well
Updates quick select popover tests to snapshot rendered components via react-testing-library

QA

General checklist

Checked in Chrome, Safari, Edge, and Firefox
Props have proper autodocs and playground toggles
Added documentation
~~- [ ] Checked Code Sandbox works for any docs examples~~
Added or updated jest and cypress tests
~~- [x] Checked for breaking changes and labeled appropriately~~ No breaking changes
Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

…rDatePicker. This prop allows consumers to control the order in which the panels within the Quick Select menu are displayed. This is an optional prop that returns the panels, but if the prop is not provided, the panels will appear in the default order (Commonly Used Ranges, Recently Used Ranges, and Custom Panels).

kibanamachine · 2022-11-17T21:52:47Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6382/

src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx

…at can be ordered with customQuickSelectRender - Updated cusomQuickSelectRender parameter to accept a single object containing all components that can be reordered

…that can be customized via customQuickSelectRender

…orizontal rules have been removed. Added test cases for customQuickSelectPanels and customQuickSelectRender props

kibanamachine · 2022-11-18T22:38:25Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6382/

kibanamachine · 2022-11-18T23:43:23Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6382/

cee-chen

Documentation feedback pass - will take a short break and review actual source code changes here in a bit

src/components/date_picker/super_date_picker/super_date_picker.tsx

upcoming_changelogs/6382.md

src-docs/src/views/super_date_picker/super_date_picker_example.js

src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx

src-docs/src/views/super_date_picker/super_date_picker_custom_quick_select_custom_order.tsx

src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss

src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx

src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx

src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx

- Removed new lines between test assertions on test cases - Updated change log text - Corrected typo in new docs example

…Picker/QuickSelectOrder Merging in code from main

…table with panel keys and implemented toggles to control each panel in the example.

kibanamachine · 2022-12-15T16:57:53Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6382/

…om border by removing wildcard selectors. Updated Quick Select Popover tests to use RTL render for better debugging

breehall · 2022-12-16T19:32:17Z

Summary of revisions

Removed the EuiFlexItem wrapper from one of the Quick Select panels and improved the Sass used to create the bottom border and padding between panels. This also resolved a styling bug that caused some of the titles and borders to overlap.
Updated the Customizing panel order section within the docs by removing the table with Quick Select panel keys. Instead, there are now switches that toggle each panel. Hopefully this makes it easier to understand how these panels interact.
Updated quick_select_popover tests to render the entire popover with RTL

I believe that's about everything from the last round of QA!

kibanamachine · 2022-12-16T19:46:56Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6382/

- the `apply` verb isn't really useful or meaningful here, so let's remove it - `Panel` isn't a suffix we're using for any other props other than the existing `customQuickSelectPanels` name, so let's keep it succinct + remove unnecessary extra `applyRefreshInterval &&` conditional (it's already checked in the `refreshIntervalElement` definition)

- rename file name to more clearly denote prop being documented, update copy to reflect full usage - remove demo TS and static snippet in favor of a dynamically generated code block that reflects toggle state and demonstrates API/usage more succinctly - clean up toggle display and and labels - add toggle example of completely custom content

…tch existing documentation & props

…g aria i18n + split up the `renderQuickSelectMenuSections` class method into a separate `EuiQuickSelectPanels` sub-component - slightly for code readability, but primarily so our docs can reach in and grab this component and immediately render the quick select content instead of having to open a popover first + fix test snapshots + docs changes: render the quick select content in an `EuiPanel`, remove all logic around actually setting EuiSuperDatePicker date/times, and instead pass in static/mock data (which leaves the focus of the code example on the render prop), and makes it much easier to see how the toggles work without having to open the popover again each time misc docs code cleanup: - remove unnecessary `toggle` fn declarations - just use inline callbacks since they're only used in one place - remove unnecessary ternaries in favor of `&&`

cee-chen

@breehall I ended up doing a few more major tweaks than minor - apologies! I know you're off for the holidays, but please feel free to ping me after if you have any questions about changes made that I didn't cover in commit messages or was vague about.

Here's the final documentation experience, which I'm hoping you'll agree feels a bit more intuitive/helpful to introduce the render prop concept to consumers:

kibanamachine · 2022-12-20T00:37:51Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_6382/

## Summary `[email protected]` ⏩ `[email protected]` --- ## [`72.0.0`](https://github.com/elastic/eui/tree/v72.0.0) - Added the `customQuickSelectRender` render prop to `EuiSuperDatePicker`, which allows customizing the Quick Select popover ([#6382](elastic/eui#6382)) - `EuiFilePicker` styles have been updated to look more like an interactive element. ([#6479](elastic/eui#6479)) - Added a third argument to `EuiSelectable`'s `onChange` callback. The single `option` object that triggered the `onChange` event is now also passed to consumers with its most recent `checked` state ([#6487](elastic/eui#6487)) **Bug fixes** - `EuiTabs` now passes `size` and `expand` to all children using a React context provider. ([#6478](elastic/eui#6478)) - Fixed security warnings caused by `[email protected]` sub-dependency ([#6482](elastic/eui#6482)) **Breaking changes** - Removed `size` and `expand` props from `EuiTab` ([#6478](elastic/eui#6478)) ## [`71.1.0`](https://github.com/elastic/eui/tree/v71.1.0) **Deprecations** - Renamed `EuiPageSideBarProps` to `EuiPageSideBarProps_Deprecated`, to reduce usage/confusion with `EuiPageSidebar` ([#6468](elastic/eui#6468)) Co-authored-by: Kibana Machine <[email protected]>

breehall requested review from cee-chen and chandlerprall November 17, 2022 21:44

cee-chen reviewed Nov 17, 2022

View reviewed changes

src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx Outdated Show resolved Hide resolved

breehall added 3 commits November 18, 2022 09:59

[EuiSuperDatePicker] -Add EuiQuickSelect to the list of components th…

cc095ff

…at can be ordered with customQuickSelectRender - Updated cusomQuickSelectRender parameter to accept a single object containing all components that can be reordered

[EuiSuperDatePicker] - Add refreshInterval to the list of components …

52c3c13

…that can be customized via customQuickSelectRender

[EuiSuperDatePicker] Update snapshots for quickSelectPopover as the h…

e1220a3

…orizontal rules have been removed. Added test cases for customQuickSelectPanels and customQuickSelectRender props

breehall added 2 commits November 18, 2022 18:12

Added documentation for new customQuickSelectRender prop

59daac1

CHANGELOG

6a8fd99

breehall marked this pull request as ready for review November 18, 2022 23:19

breehall requested a review from cee-chen November 18, 2022 23:19