-
Notifications
You must be signed in to change notification settings - Fork 844
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
[EuiDataGrid] Implement draggable column headers #8015
[EuiDataGrid] Implement draggable column headers #8015
Conversation
@@ -110,6 +115,8 @@ export const EuiDraggable: FunctionComponent<EuiDraggableProps> = ({ | |||
role={ | |||
hasInteractiveChildren | |||
? 'group' | |||
: customDragHandle === 'custom' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The idea here is to provide means to unset the role
for specific use cases. Using customDragHandle=true
for that would have impact on current usages, hence I'm suggesting to add a third custom option as this should not be a default.
The reasoning here is this:
EuiDraggable adds a drag wrapper around its content, which has role="button|group"
- this works for most cases where the drag element should be the interactive/focused element. The impact of this is, that the content of this element is not read as standalone semantic elements. E.g. role="button"
removes additional semantic content and just reads visible text content.
For datagrid column headers we rather want the columnheader
to still be the element to be read via screen readers as it holds all semantic information. Instead we want the draggable accessible information added to the column header instead of the wrapper being read only.
To ensure the columnheader
role element is read, the draggable wrapper needs to have no role that removes the content semantics. Hence the decision to provide means to unset it for this case.
9e23fdd
to
2ccfb4d
Compare
packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_Cell_Actions.png
Outdated
Show resolved
Hide resolved
packages/eui/src-docs/src/views/datagrid/schema_columns/column_dragging.js
Outdated
Show resolved
Hide resolved
packages/eui/src/components/datagrid/body/header/data_grid_header_cell.styles.ts
Outdated
Show resolved
Hide resolved
packages/eui/src/components/datagrid/body/header/data_grid_header_cell.styles.ts
Outdated
Show resolved
Hide resolved
packages/eui/src/components/datagrid/body/header/data_grid_header_row.styles.ts
Outdated
Show resolved
Hide resolved
packages/eui/src/components/datagrid/body/header/data_grid_header_row.tsx
Outdated
Show resolved
Hide resolved
packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx
Outdated
Show resolved
Hide resolved
packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx
Outdated
Show resolved
Hide resolved
141c294
to
deceb15
Compare
b428995
to
45ec4e5
Compare
- 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
- add columnDragDrop control to custom ehader story for testing with interactive headers
- 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
…op wrappers - use a prop instead to determine last column CSS - this was causing infinite grid width rerenders (caught by React 16 Cypress tests) - wasn't happening in our Storybook because we had trailing control columns :sadwoah:
- also being used by the hidden copy logic, so let's just calculate it in one place in the header row and pass a boolean down rather than `visibleColCount`
- remove cache/map - reuse the existing `columnWidths` state/object instead, which essentially already serves as a map - rename `computeColumnWidths` to `getInitialWidths` (more clear, IMO), and update it to not override any already set state via a `== null` check + add tests
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As a heads up my local Docker/Loki setup isn't working so I can't run a final VRT snapshot update to confirm that nothing changed UI-wise - would super appreciate it if you could do that final check here tomorrow.
Otherwise, if CI passes and you don't have any other code changes you'd like to make, I think this is good to go!! 🤞 🎉
💚 Build Succeeded
History
|
@cee-chen I just had a last quick check of the changes and ran the datagrid a last time in screen readers. It works great! Thanks for the great review and collaboration on this! ❤️ I learned a lot working on this 🧠 |
`v97.0.0-backport.0`⏩`v97.2.0` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v97.2.0`](https://github.com/elastic/eui/releases/v97.2.0) - Updated `EuiHeaderLinks` with a new `xxs` gutter size ([#8079](elastic/eui#8079)) **Bug fixes** - Reverted an `EuiDataGrid` regression from [#8015](elastic/eui#8015) which prevented overriding column widths via columns's `initialWidth`s ([#8086](elastic/eui#8086)) ## [`v97.1.0`](https://github.com/elastic/eui/releases/v97.1.0) - Added `columnVisibility.canDragAndDropColumns` on `EuiDataGrid` which enables reordering columns via draggable header cells ([#8015](elastic/eui#8015)) - Updated `EuiHeader`s in dark mode to have a visible border-bottom color ([#8070](elastic/eui#8070)) - Added props `minDate` and `maxDate` on `EuiSuperDatePicker` to support restricting date range selections ([#8071](elastic/eui#8071))
`v97.0.0-backport.0`⏩`v97.2.0` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v97.2.0`](https://github.com/elastic/eui/releases/v97.2.0) - Updated `EuiHeaderLinks` with a new `xxs` gutter size ([elastic#8079](elastic/eui#8079)) **Bug fixes** - Reverted an `EuiDataGrid` regression from [elastic#8015](elastic/eui#8015) which prevented overriding column widths via columns's `initialWidth`s ([elastic#8086](elastic/eui#8086)) ## [`v97.1.0`](https://github.com/elastic/eui/releases/v97.1.0) - Added `columnVisibility.canDragAndDropColumns` on `EuiDataGrid` which enables reordering columns via draggable header cells ([elastic#8015](elastic/eui#8015)) - Updated `EuiHeader`s in dark mode to have a visible border-bottom color ([elastic#8070](elastic/eui#8070)) - Added props `minDate` and `maxDate` on `EuiSuperDatePicker` to support restricting date range selections ([elastic#8071](elastic/eui#8071)) (cherry picked from commit d7c5608)
# Backport This will backport the following commits from `main` to `8.x`: - [Upgrade EUI to v97.2.0 (#196397)](#196397) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Lene Gadewoll","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-18T22:06:35Z","message":"Upgrade EUI to v97.2.0 (#196397)\n\n`v97.0.0-backport.0`⏩`v97.2.0`\r\n\r\n_[Questions? Please see our Kibana upgrade\r\nFAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_\r\n\r\n---\r\n\r\n## [`v97.2.0`](https://github.com/elastic/eui/releases/v97.2.0)\r\n\r\n- Updated `EuiHeaderLinks` with a new `xxs` gutter size\r\n([#8079](https://github.com/elastic/eui/pull/8079))\r\n\r\n**Bug fixes**\r\n\r\n- Reverted an `EuiDataGrid` regression from\r\n[#8015](elastic/eui#8015) which prevented\r\noverriding column widths via columns's `initialWidth`s\r\n([#8086](https://github.com/elastic/eui/pull/8086))\r\n\r\n\r\n## [`v97.1.0`](https://github.com/elastic/eui/releases/v97.1.0)\r\n\r\n- Added `columnVisibility.canDragAndDropColumns` on `EuiDataGrid` which\r\nenables reordering columns via draggable header cells\r\n([#8015](https://github.com/elastic/eui/pull/8015))\r\n- Updated `EuiHeader`s in dark mode to have a visible border-bottom\r\ncolor ([#8070](https://github.com/elastic/eui/pull/8070))\r\n- Added props `minDate` and `maxDate` on `EuiSuperDatePicker` to support\r\nrestricting date range selections\r\n([#8071](https://github.com/elastic/eui/pull/8071))","sha":"d7c5608420caae76d6f307cee26d63c1cd01d381","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","EUI","v9.0.0","backport:version","v8.17.0"],"title":"Upgrade EUI to v97.2.0","number":196397,"url":"https://github.com/elastic/kibana/pull/196397","mergeCommit":{"message":"Upgrade EUI to v97.2.0 (#196397)\n\n`v97.0.0-backport.0`⏩`v97.2.0`\r\n\r\n_[Questions? Please see our Kibana upgrade\r\nFAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_\r\n\r\n---\r\n\r\n## [`v97.2.0`](https://github.com/elastic/eui/releases/v97.2.0)\r\n\r\n- Updated `EuiHeaderLinks` with a new `xxs` gutter size\r\n([#8079](https://github.com/elastic/eui/pull/8079))\r\n\r\n**Bug fixes**\r\n\r\n- Reverted an `EuiDataGrid` regression from\r\n[#8015](elastic/eui#8015) which prevented\r\noverriding column widths via columns's `initialWidth`s\r\n([#8086](https://github.com/elastic/eui/pull/8086))\r\n\r\n\r\n## [`v97.1.0`](https://github.com/elastic/eui/releases/v97.1.0)\r\n\r\n- Added `columnVisibility.canDragAndDropColumns` on `EuiDataGrid` which\r\nenables reordering columns via draggable header cells\r\n([#8015](https://github.com/elastic/eui/pull/8015))\r\n- Updated `EuiHeader`s in dark mode to have a visible border-bottom\r\ncolor ([#8070](https://github.com/elastic/eui/pull/8070))\r\n- Added props `minDate` and `maxDate` on `EuiSuperDatePicker` to support\r\nrestricting date range selections\r\n([#8071](https://github.com/elastic/eui/pull/8071))","sha":"d7c5608420caae76d6f307cee26d63c1cd01d381"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/196397","number":196397,"mergeCommit":{"message":"Upgrade EUI to v97.2.0 (#196397)\n\n`v97.0.0-backport.0`⏩`v97.2.0`\r\n\r\n_[Questions? Please see our Kibana upgrade\r\nFAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_\r\n\r\n---\r\n\r\n## [`v97.2.0`](https://github.com/elastic/eui/releases/v97.2.0)\r\n\r\n- Updated `EuiHeaderLinks` with a new `xxs` gutter size\r\n([#8079](https://github.com/elastic/eui/pull/8079))\r\n\r\n**Bug fixes**\r\n\r\n- Reverted an `EuiDataGrid` regression from\r\n[#8015](elastic/eui#8015) which prevented\r\noverriding column widths via columns's `initialWidth`s\r\n([#8086](https://github.com/elastic/eui/pull/8086))\r\n\r\n\r\n## [`v97.1.0`](https://github.com/elastic/eui/releases/v97.1.0)\r\n\r\n- Added `columnVisibility.canDragAndDropColumns` on `EuiDataGrid` which\r\nenables reordering columns via draggable header cells\r\n([#8015](https://github.com/elastic/eui/pull/8015))\r\n- Updated `EuiHeader`s in dark mode to have a visible border-bottom\r\ncolor ([#8070](https://github.com/elastic/eui/pull/8070))\r\n- Added props `minDate` and `maxDate` on `EuiSuperDatePicker` to support\r\nrestricting date range selections\r\n([#8071](https://github.com/elastic/eui/pull/8071))","sha":"d7c5608420caae76d6f307cee26d63c1cd01d381"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Lene Gadewoll <[email protected]>
- Closes #195769 ## Summary Eui now supports reordering of grid columns by dra&drop elastic/eui#8015 The PR enables this functionality for UnifiedDataTable. ![Nov-01-2024 10-21-49](https://github.com/user-attachments/assets/bc47507c-7b9e-44c2-88d7-5f48f37924cb) ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
…ic#197832) - Closes elastic#195769 ## Summary Eui now supports reordering of grid columns by dra&drop elastic/eui#8015 The PR enables this functionality for UnifiedDataTable. ![Nov-01-2024 10-21-49](https://github.com/user-attachments/assets/bc47507c-7b9e-44c2-88d7-5f48f37924cb) ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios (cherry picked from commit 436405f)
…mns (#197832) (#199111) # Backport This will backport the following commits from `main` to `8.x`: - [[Discover][UnifiedDataTable] Enable drag&drop for grid columns (#197832)](#197832) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Julia Rechkunova","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-06T12:00:49Z","message":"[Discover][UnifiedDataTable] Enable drag&drop for grid columns (#197832)\n\n- Closes https://github.com/elastic/kibana/issues/195769\r\n\r\n## Summary\r\n\r\nEui now supports reordering of grid columns by dra&drop\r\nhttps://github.com/elastic/eui/pull/8015\r\nThe PR enables this functionality for UnifiedDataTable.\r\n\r\n![Nov-01-2024\r\n10-21-49](https://github.com/user-attachments/assets/bc47507c-7b9e-44c2-88d7-5f48f37924cb)\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios","sha":"436405fefbbd834a68df93d8179a5b377e84b614","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:enhancement","Feature:Discover","v9.0.0","Team:DataDiscovery","backport:prev-minor","Feature:UnifiedDataTable"],"title":"[Discover][UnifiedDataTable] Enable drag&drop for grid columns","number":197832,"url":"https://github.com/elastic/kibana/pull/197832","mergeCommit":{"message":"[Discover][UnifiedDataTable] Enable drag&drop for grid columns (#197832)\n\n- Closes https://github.com/elastic/kibana/issues/195769\r\n\r\n## Summary\r\n\r\nEui now supports reordering of grid columns by dra&drop\r\nhttps://github.com/elastic/eui/pull/8015\r\nThe PR enables this functionality for UnifiedDataTable.\r\n\r\n![Nov-01-2024\r\n10-21-49](https://github.com/user-attachments/assets/bc47507c-7b9e-44c2-88d7-5f48f37924cb)\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios","sha":"436405fefbbd834a68df93d8179a5b377e84b614"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/197832","number":197832,"mergeCommit":{"message":"[Discover][UnifiedDataTable] Enable drag&drop for grid columns (#197832)\n\n- Closes https://github.com/elastic/kibana/issues/195769\r\n\r\n## Summary\r\n\r\nEui now supports reordering of grid columns by dra&drop\r\nhttps://github.com/elastic/eui/pull/8015\r\nThe PR enables this functionality for UnifiedDataTable.\r\n\r\n![Nov-01-2024\r\n10-21-49](https://github.com/user-attachments/assets/bc47507c-7b9e-44c2-88d7-5f48f37924cb)\r\n\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere updated or added to match the most common scenarios","sha":"436405fefbbd834a68df93d8179a5b377e84b614"}}]}] BACKPORT--> Co-authored-by: Julia Rechkunova <[email protected]>
…ic#197832) - Closes elastic#195769 ## Summary Eui now supports reordering of grid columns by dra&drop elastic/eui#8015 The PR enables this functionality for UnifiedDataTable. ![Nov-01-2024 10-21-49](https://github.com/user-attachments/assets/bc47507c-7b9e-44c2-88d7-5f48f37924cb) ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios
Summary
closes #7136
This PR implements reordering
EuiDataGrid
columns via draggable column headers.This implementation is opt-in keeping parity with current usages.
Todo
EuiDataGrid
Emotion conversionadd docs update to EUI+ docs (DataGrid content is not yet available, EUI+ is still in need to be fully migrated/released)Changes
canDragAndDropColumns
oncolumnVisibility
prop ofEuiDataGrid
to toggle draggable column headers - default value isfalse
EuiDragDropContext
andEuiDroppable
inEuiGridHeaderRow
to enable a drop zone for all non-control columnsEuiDraggable
inEuiDataGridHeaderCell
to enable draggable column headersusePortal
onEuiDraggable
because it requires reparenting via portal for dragged items to ensure correct positioning of theposition: fixed
element inside a transform (stacking) contextcustomDragHandle
prop value onEuiDraggable
to beboolean | 'custom'
Accessibility
The
Draggable
implementation comes with great accessibility out of the box (adding hints and announcements where needed) BUT for the use case of datagrid headers it was not completely fitting and needed a small adjustment.The expected behavior is, that focussing a column header, we want the
columnheader
role to be read with all its expected labels and attached descriptions.EuiDraggable
currently always added a role on the drag container (button
orgroup
) which will be read instead of the content (effectively losing us semantic information). To solve this we optionally remove the added role on the drag container, which results in the content being read on focus as wanted.This was tested and optimized on Win11 for JAWS and NVDA.
Screen reader output
Screenshots
mouse usage
Screen.Recording.2024-09-10.at.18.01.57.mov
keyboard usage
Screen.Recording.2024-09-10.at.18.05.00.mov
resizing
Screen.Recording.2024-09-10.at.18.06.38.mov
QA
Storybook: https://eui.elastic.co/pr_8015/storybook/?path=/story/tabular-content-euidatagrid--playground&args=columnDragDrop:!true
EUI docs: https://eui.elastic.co/pr_8015/index.html#/tabular-content/data-grid-schema-columns#draggable-columns
columnDragDrop
prop works to en/disable draggable columnsGeneral checklist
Checked in both light and dark modes@default
if default values are missing) and playground togglesChecked Code Sandbox works for any docs examplesIf applicable, added the breaking change issue label (and filled out the breaking change checklist)If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)