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.

Sign up for GitHub

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

Jump to bottom

[EuiSuperDatePicker] Add customQuickSelectRender prop #6382

Merged
merged 16 commits into from
Dec 20, 2022
Merged

[EuiSuperDatePicker] Add customQuickSelectRender prop #6382

merged 16 commits into from
Dec 20, 2022

Conversation

breehall
Copy link
Contributor

@breehall breehall commented Nov 17, 2022 •
edited by cee-chen
Loading

closes #6378

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).

screencap

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

@breehall
[EuiSuperDatePicker] Created the customQuickSelectRender prop EuiSupe…
4aada7e 
…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
Copy link

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

@breehall
[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
@breehall
[EuiSuperDatePicker] - Add refreshInterval to the list of components …
52c3c13 
…that can be customized via customQuickSelectRender
@breehall
[EuiSuperDatePicker] Update snapshots for quickSelectPopover as the h…
e1220a3 
…orizontal rules have been removed. Added test cases for customQuickSelectPanels and customQuickSelectRender props
@kibanamachine
Copy link

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

@breehall breehall marked this pull request as ready for review November 18, 2022 23:19
@breehall breehall requested a review from cee-chen November 18, 2022 23:19
@kibanamachine
Copy link

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

cee-chen
cee-chen reviewed Nov 28, 2022
View reviewed changes
Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

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 Outdated Show resolved Hide resolved
upcoming_changelogs/6382.md Outdated Show resolved Hide resolved
src-docs/src/views/super_date_picker/super_date_picker_example.js Outdated Show resolved Hide resolved
src-docs/src/views/super_date_picker/super_date_picker_example.js Outdated Show resolved Hide resolved
src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx Outdated Show resolved Hide resolved
@breehall
Misc changes:
a01df04 
- Removed new lines between test assertions on test cases
- Updated change log text
- Corrected typo in new docs example
@breehall breehall mentioned this pull request Dec 12, 2022
Closed
@breehall
Merge branch 'main' of https://github.com/breehall/eui into SuperDate…
f5c0ce3 
…Picker/QuickSelectOrder

Merging in code from main
@breehall
Updated documentation for Quick Select Panel reordering. Removed the …
2aa12bd 
…table with panel keys and implemented toggles to control each panel in the example.
@kibanamachine
Copy link

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

@breehall
Revised the styling used to target Quick Select Panels and add a bott…
66430c3 
…om border by removing wildcard selectors. Updated Quick Select Popover tests to use RTL render for better debugging
@breehall
Copy link
Contributor Author

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!

@breehall breehall requested review from cee-chen and removed request for chandlerprall December 16, 2022 19:32
@kibanamachine
Copy link

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

@cee-chen
[minor] fix docblock comment style
481718f
@cee-chen
Merge branch 'main' into SuperDatePicker/QuickSelectOrder
2ad2474
@cee-chen
Name refreshInterval arg more succinctly
7d88507 
- 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)
@cee-chen
Documentation changes
3566552 
- 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
@cee-chen
[naming] Rename commonly/recentUsed from Times to Ranges, to ma…
6c93a67 
…tch existing documentation & props
@cee-chen
Refactor EuiQuickSelectPopover to non-class component(s) + fix missin…
f1db86b 
…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
cee-chen approved these changes Dec 20, 2022
View reviewed changes
Copy link
Contributor

@cee-chen cee-chen left a comment

Choose a reason for hiding this comment

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

@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:

screencap

@cee-chen cee-chen changed the title [EuiSuperDatePicker] Allow Custom Order for Quick Select Panels [EuiSuperDatePicker] Add customQuickSelectRender prop Dec 20, 2022
@cee-chen cee-chen enabled auto-merge (squash) December 20, 2022 00:32
@kibanamachine
Copy link

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

@cee-chen cee-chen merged commit 1e402be into elastic:main Dec 20, 2022
@cee-chen cee-chen mentioned this pull request Dec 20, 2022
Merged
jbudz pushed a commit to elastic/kibana that referenced this pull request Dec 22, 2022
@cee-chen @kibanamachine
Upgrade EUI to v72.0.0 (#147888)
251bdce 
## 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 breehall deleted the SuperDatePicker/QuickSelectOrder branch September 18, 2023 19:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cee-chen cee-chen cee-chen approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Give the option to change the position on the quick select panels of the SuperDatePicker
3 participants
@breehall @kibanamachine @cee-chen