Skip to content

[DATA GRID] Column header menu#3087

Merged
kertal merged 43 commits intoelastic:masterfrom
snide:grid/menus
Sep 18, 2020
Merged

[DATA GRID] Column header menu#3087
kertal merged 43 commits intoelastic:masterfrom
snide:grid/menus

Conversation

@snide
Copy link
Copy Markdown
Contributor

@snide snide commented Mar 16, 2020 •
edited by kertal
Loading

Summary

Add column header menu with actions providing direct access to the following functionality:

  • Hide column
  • Sort schema asc
  • Sort schema desc
  • Move left
  • Move right

Furthermore it allows you add custom actions
Fixes #2461

image

Checklist

  • Check against all themes for compatibility in both light and dark modes
  • Checked in mobile
  • Checked in IE11 and Firefox
  • Props have proper autodocs
  • Added documentation examples
  • Added or updated jest 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

@snide snide mentioned this pull request May 12, 2020
Closed
@cla-checker-service
Copy link
Copy Markdown

cla-checker-service bot commented Jul 20, 2020 •
edited
Loading

💚 CLA has been signed

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Jul 20, 2020

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

@snide
Copy link
Copy Markdown
Contributor Author

snide commented Jul 20, 2020

@kertal asked me to reset this PR since we had a git snafu.

@wylieconlon wylieconlon mentioned this pull request Jul 20, 2020
Closed
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Jul 20, 2020

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Jul 21, 2020

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Jul 21, 2020

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Jul 23, 2020

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

@kertal kertal self-assigned this Aug 3, 2020
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Aug 6, 2020

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

@kertal kertal mentioned this pull request Aug 6, 2020
Closed
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Aug 22, 2020

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Aug 24, 2020

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

kertal
kertal reviewed Aug 24, 2020
View reviewed changes
@kertal
Copy link
Copy Markdown
Member

kertal commented Sep 15, 2020

We should not be putting onClick events onto non-interactable elements like divs. I would assume you'd want to wrap the contents of the cell with a plain <button> element and then we can style it with CSS to maintain it's visual.

@cchaos thx, did that, ready for checking if there are more CSS adaptions necessary

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 15, 2020

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

kertal
kertal reviewed Sep 15, 2020
View reviewed changes
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 15, 2020

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 15, 2020

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

chandlerprall
chandlerprall suggested changes Sep 17, 2020
View reviewed changes
Copy link
Copy Markdown
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

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

The change making the header cell a button appears to have broken the close-popover-on-click functionality

persistent_popover

Looks like setIsPopoverOpen is called with false, but then React bubbles the click event back up to the cell's button and re-opens the popover.

While working with it I've encountered a problem in Chrome, use the mouse to expand a header cell menu, click on another one, check lot's of errors in console:

I'm going to take my pending focus trap changes and test them here to see if it is the culprit behind those maximum call stack errors.

kertal
kertal reviewed Sep 17, 2020
View reviewed changes
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 17, 2020

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 18, 2020

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

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 18, 2020

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

kertal
kertal reviewed Sep 18, 2020
View reviewed changes
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 18, 2020

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

@chandlerprall
Copy link
Copy Markdown
Contributor

chandlerprall commented Sep 18, 2020

flaky unit test - jenkins test this

@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 18, 2020

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

chandlerprall
chandlerprall approved these changes Sep 18, 2020
View reviewed changes
Copy link
Copy Markdown
Contributor

@chandlerprall chandlerprall left a comment

Choose a reason for hiding this comment

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

Yessssss! Nice cleanup. Changes LGTM, tested in all the places many times 😄 Ship it! 🦑

@chandlerprall
Update CHANGELOG.md
a3075ae 
quick changelog cleanup
@kertal kertal merged commit c03ab19 into elastic:master Sep 18, 2020
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 18, 2020

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

1 similar comment
@kibanamachine
Copy link
Copy Markdown

kibanamachine commented Sep 19, 2020

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

@sulemanof sulemanof mentioned this pull request Sep 22, 2020
Merged
7 tasks
@chandlerprall chandlerprall mentioned this pull request Sep 29, 2020
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@andreadelrio andreadelrio andreadelrio left review comments

+2 more reviewers

@kertal kertal kertal left review comments

@chandlerprall chandlerprall chandlerprall approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@kertal kertal

Labels

data grid

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[DATA GRID] Provide a clickable header menu for built in / custom actions

7 participants

@snide @kibanamachine @chandlerprall @kertal @walterra @cchaos @andreadelrio