[EuiDataGrid] Row height switcher should override `rowHeights` + add reset button by cee-chen · Pull Request #5428 · elastic/eui

cee-chen · 2021-12-01T17:02:29Z

Summary

closes #5411

Per the above discussion/design decisions, this PR now:

Causes the row height UI control to unset/override any specific rowHeights (ee1469d)
Adds a 'Reset to default' button which allows reverting user changes to the display selector to the original props passed in by developers (9eca2e3)

Before

before.mp4

After

after.mp4

Checklist

~~- [ ] Check against all themes for compatibility in both light and dark modes~~
- [ ] Checked in mobile
- [ ] 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

~~- [ ] Checked for breaking changes and labeled appropriately~~

Checked for accessibility including keyboard-only and screenreader modes
A changelog entry exists and is marked appropriately

+ lineCount changes to also unset rowHeights overrides

+ improve snippet label

- to allow for testing - also since this is documented behavior, I don't know if need this in the actual example anymore - but if people prefer it, I can revert this commit

- to help focus more on rowHeightsOptions and more easily provide a bare minimum example

cee-chen · 2021-12-01T17:28:52Z

Sorry for force pushes (found a bug!), this is ready for review now with before/after screencaps!

kibanamachine · 2021-12-01T17:54:29Z

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

cchaos

💟 Before, I do a full review, is it possible to display the reset button only if the user has changed the configurations?

…to datagrid-rowheights-override

kibanamachine · 2021-12-02T17:58:10Z

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

cee-chen · 2021-12-02T17:58:19Z

Sure - 9b70058

kibanamachine · 2021-12-02T18:23:16Z

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

cchaos

🙌 Works wonderfully. Just a visual suggestion.

src/components/datagrid/controls/display_selector.tsx

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

cchaos · 2021-12-02T22:31:28Z

Jenkins, test this

cee-chen · 2021-12-02T23:31:39Z

Whoops, thanks for catching that!

cee-chen · 2021-12-02T23:31:49Z

jenkins test this

src/components/datagrid/controls/display_selector.tsx

cchaos · 2021-12-03T16:30:39Z

And those components need to be imported...lol

09:42:18 ERROR in components/datagrid/controls/display_selector.tsx:365:14
09:42:18 TS2304: Cannot find name 'EuiFlexGroup'.
09:42:18     363 |         {showResetButton && (
09:42:18     364 |           <EuiPopoverFooter>
09:42:18   > 365 |             <EuiFlexGroup justifyContent="flexEnd" responsive={false}>
09:42:18         |              ^^^^^^^^^^^^
09:42:18     366 |               <EuiFlexItem>
09:42:18     367 |                 <EuiButtonEmpty
09:42:18     368 |                   flush="both"

cee-chen · 2021-12-03T17:01:47Z

🤦‍♀️ HAHA sorry I definitely should have opened this in VSCode instead of just committing the suggestion. Doing so now!

kibanamachine · 2021-12-03T17:35:11Z

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

src/components/datagrid/controls/display_selector.tsx

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

kibanamachine · 2021-12-03T19:45:00Z

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

cchaos

I need to stop being lazy and just push you a commit 😆 . Pushing a fix to get it to align to the right instead of left. Other than that the rest of the design code LGTM!

cee-chen · 2021-12-03T20:57:26Z

🤦‍♀️ Haha sorry, i definitely should have done the same. Thanks Caroline!

kibanamachine · 2021-12-03T21:15:08Z

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

cee-chen · 2021-12-03T22:26:38Z

Preview looks good, merging

…5415) * [EuiDataGrid] Toolbar UI layout reorganization (#5334) * [EuiDataGrid] Add extra left prepend position to the `additionalControls` API (#5394) * [EuiDataGrid] Add rowHeightSwitcher logic + API change (#5372) * [EuiDataGrid] Add `onChange` callbacks for display selector changes (#5424) * [EuiDataGrid] Row height switcher should override `rowHeights` + add reset button (#5428) * [EuiDataGrid] improve height calculation (#5447) Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> Co-authored-by: Chandler Prall <chandler.prall@gmail.com>

cee-chen requested a review from cchaos December 1, 2021 17:02

cee-chen force-pushed the datagrid-rowheights-override branch from fe81de3 to 37f3640 Compare December 1, 2021 17:12

cee-chen added 5 commits December 1, 2021 09:19

Unset specific rowHeights when using the row height switcher

ee1469d

+ lineCount changes to also unset rowHeights overrides

Fix rowHeights snippet to actually include rowHeights

e5c1a6c

+ improve snippet label

[??] Remove toolbarVisibility.showDisplaySelector configs

8630d40

- to allow for testing - also since this is documented behavior, I don't know if need this in the actual example anymore - but if people prefer it, I can revert this commit

[Misc documentation cleanup] Remove unrequired props from snippets

e0e18df

- to help focus more on rowHeightsOptions and more easily provide a bare minimum example

Add reset to initial state button/logic

9eca2e3

cee-chen force-pushed the datagrid-rowheights-override branch from 37f3640 to 9eca2e3 Compare December 1, 2021 17:19

cee-chen mentioned this pull request Dec 1, 2021

[EuiDataGrid] Add onChange callbacks for display selector changes #5424

Merged

4 tasks

cee-chen mentioned this pull request Dec 1, 2021

[EuiDataGrid] Feature: toolbar reorganization and row height control #5415

Merged

10 tasks

cchaos reviewed Dec 2, 2021

View reviewed changes

cee-chen added 2 commits December 2, 2021 09:31

Merge branch 'feat/datagrid/toolbar-reorg-and-row-height-switcher' in…

95d10c4

…to datagrid-rowheights-override

[PR feedback] Conditionally render reset button

9b70058

cchaos reviewed Dec 2, 2021

View reviewed changes

src/components/datagrid/controls/display_selector.tsx Show resolved Hide resolved

[PR feedback] Right align button

875444d

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

cchaos reviewed Dec 3, 2021

View reviewed changes

src/components/datagrid/controls/display_selector.tsx Outdated Show resolved Hide resolved

Fix closing tag

a1441d8

fix imports

ee576d0

cee-chen requested a review from cchaos December 3, 2021 17:06

cchaos reviewed Dec 3, 2021

View reviewed changes

src/components/datagrid/controls/display_selector.tsx Outdated Show resolved Hide resolved

Update src/components/datagrid/controls/display_selector.tsx

f7b3a92

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>

No grow

9b95476

cchaos approved these changes Dec 3, 2021

View reviewed changes

cee-chen merged commit cedee33 into elastic:feat/datagrid/toolbar-reorg-and-row-height-switcher Dec 3, 2021

cee-chen deleted the datagrid-rowheights-override branch December 3, 2021 22:26

cee-chen mentioned this pull request Dec 3, 2021

[EuiDataGrid] How should the row height switcher toolbar control handle rowHeights overrides? #5411

Closed

thompsongl mentioned this pull request Dec 9, 2021

Upgrade EUI to v43.1.1 elastic/kibana#120935

Merged

1 task

Conversation

cee-chen commented Dec 1, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Before

After

Checklist

Uh oh!

cee-chen commented Dec 1, 2021

Uh oh!

kibanamachine commented Dec 1, 2021

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

kibanamachine commented Dec 2, 2021

Uh oh!

cee-chen commented Dec 2, 2021

Uh oh!

kibanamachine commented Dec 2, 2021

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cchaos commented Dec 2, 2021

Uh oh!

cee-chen commented Dec 2, 2021

Uh oh!

cee-chen commented Dec 2, 2021

Uh oh!

Uh oh!

cchaos commented Dec 3, 2021

Uh oh!

cee-chen commented Dec 3, 2021

Uh oh!

kibanamachine commented Dec 3, 2021

Uh oh!

Uh oh!

kibanamachine commented Dec 3, 2021

Uh oh!

cchaos left a comment

Choose a reason for hiding this comment

Uh oh!

cee-chen commented Dec 3, 2021

Uh oh!

kibanamachine commented Dec 3, 2021

Uh oh!

cee-chen commented Dec 3, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

cee-chen commented Dec 1, 2021 •

edited

Loading