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

[EuiDataGrid] Implement draggable column headers #8015

Open
wants to merge 29 commits into
base: main
Choose a base branch
from
Open

[EuiDataGrid] Implement draggable column headers #8015

wants to merge 29 commits into from

Commits on Sep 24, 2024

  1. feat: enable draggable datagrid column headers

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    ef457b9 View commit details
    Browse the repository at this point in the history

  2. test: add tests and update snapshots

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    a5350d5 View commit details
    Browse the repository at this point in the history

  3. fix: update datagrid story column order aligning with visibleColumns

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    24f89ec View commit details
    Browse the repository at this point in the history

  4. refactor: ensure focus management for draggable cells 

    - draggable cells prevent onOutsideClick to be triggered, we need to manually update focus to ensure expected behavior

- moves columnResizer element to ensure drag and resize actions stay separate
    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    5841ef7 View commit details
    Browse the repository at this point in the history

  5. test: add test for draggable cell focus behavior

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    af927b6 View commit details
    Browse the repository at this point in the history

  6. fix: ensure expected border and space styles 

    - add columnDragDrop control to custom ehader story for testing with interactive headers
    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    ec8f22c View commit details
    Browse the repository at this point in the history

  7. refactor: ensure accessible screen reader output 

    - ensures the columnheader element is read instead of the wrapping draggable container; this requires the draggable wrapper to not have a role as the default roles button/group remove any semantics from their content when focused which results in the content not fully being read
    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    143bf77 View commit details
    Browse the repository at this point in the history

  8. docs: add EUI docs example

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    4b74b87 View commit details
    Browse the repository at this point in the history

  9. chore: add changelog

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    5827775 View commit details
    Browse the repository at this point in the history

  10. docs: align EUI docs example with other examples

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    1bd8da3 View commit details
    Browse the repository at this point in the history

  11. refactor: use portal for dragged items 

    - this reparenting approach is required due to transform context of datagrid which interfers with the positioning of dragged items
    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    93dac2b View commit details
    Browse the repository at this point in the history

  12. refactor: cleanup 

    - use unique ids

- remove position style override as it's not needed for the reparented/portalled approach
    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    6b2ab80 View commit details
    Browse the repository at this point in the history

  13. refactor: use portal inside datagrid to ensure scoped styles still apply 

    - misc cleanup
    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    d545e25 View commit details
    Browse the repository at this point in the history

  14. test(VRT): update reference images 

    - the changes are only related to the conditionally added gap on header cells
    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    1e6d296 View commit details
    Browse the repository at this point in the history

  15. fix: ensure there is only a single draggable element 

    - prevents error about not finishing drop animation as there were duplicate elements being dragged
    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    9bf48b2 View commit details
    Browse the repository at this point in the history

  16. test: update cypress test to work with portalled draggable cell

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    ff7680a View commit details
    Browse the repository at this point in the history

  17. refactor: add dragging hint only on non-entered header cell 

    - prevents duplicate SR output in entering the cell
    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    69fe8bf View commit details
    Browse the repository at this point in the history

  18. refactor: remove tabindex from drag wrapper for fully custom draggabl… 

    …e elements

- ensure we use the rowing tabindex and don't add additional unwanted tab stops
    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    505ffe0 View commit details
    Browse the repository at this point in the history

  19. refactor: add useCallbacks

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    4abf3db View commit details
    Browse the repository at this point in the history

  20. styles: cleanup

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    66b41e0 View commit details
    Browse the repository at this point in the history

  21. docs: update column dragging example 

    - includes column header with interactive cell content
    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    a63b159 View commit details
    Browse the repository at this point in the history

  22. refactor: dry-out actions styles

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    437445d View commit details
    Browse the repository at this point in the history

  23. test: update snapshots

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    0996e4d View commit details
    Browse the repository at this point in the history

  24. refactor: move column drag prop under columnVisibility

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    06febec View commit details
    Browse the repository at this point in the history

  25. docs(storybook): add column drag story

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    a6ef41f View commit details
    Browse the repository at this point in the history

  26. test(VRT): add reference images

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    28d0564 View commit details
    Browse the repository at this point in the history

  27. refactor: change portal position and fix visual issues 

    - moving dragged item into the body scope to prevent issues due to stacked context. this requires applying styles to the dragged item manually as it's not part of the datagrid style scope

- added some smaller cleanups to ensure correct styles
    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    ebfda92 View commit details
    Browse the repository at this point in the history

  28. test(VRT): update reference images

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    45ec4e5 View commit details
    Browse the repository at this point in the history

  29. chore: update changelog

    @mgadewoll
    mgadewoll committed Sep 24, 2024
    Configuration menu
    Copy the full SHA
    b8c6298 View commit details
    Browse the repository at this point in the history