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.

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

[DATA GRID] Column header menu #3087

Merged
merged 43 commits into from
Sep 18, 2020
Merged

[DATA GRID] Column header menu #3087

merged 43 commits into from
Sep 18, 2020

Conversation

snide
Copy link
Contributor

@snide snide commented Mar 16, 2020

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

@cla-checker-service
Copy link

cla-checker-service bot commented Jul 20, 2020

💚 CLA has been signed

@kibanamachine
Copy link

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

@snide
Copy link
Contributor Author

snide commented Jul 20, 2020

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

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

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kertal
Copy link
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

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

Copy link
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.

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@kibanamachine
Copy link

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

@chandlerprall
Copy link
Contributor

flaky unit test - jenkins test this

@kibanamachine
Copy link

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

Copy link
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! 🦑

quick changelog cleanup
@kertal kertal merged commit c03ab19 into elastic:master Sep 18, 2020
@kibanamachine
Copy link

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

1 similar comment
@kibanamachine
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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