From 7d640c0c1766311f31137f3f275e5e73b925e42a Mon Sep 17 00:00:00 2001 From: Constance Date: Thu, 17 Mar 2022 13:59:42 -0700 Subject: [PATCH] [EuiDataGrid] Enforce a cell popover if cell actions are present (#5710) * [misc setup] refactor cell actions unit tests to use mock component - this allows us to `component.find()` by the 'MockAction' name, which future unit tests will be using to determine the # of actions rendered * Misc docs cleanup - Add intro paragraph to cell popovers page, explaining the UX purpose of the expansion popover - Fix incorrect cellActions example in main datagrid doc - Fix variable casing on source code * Force cell isExpandable to evaluate as true if cellActions exist + add more comments/documentation to note this behavior since I missed it the first time + simplify hasCellActions to just use isExpandable, now that isExpandable accounts for cellActions * Add changelog entry --- src-docs/src/views/datagrid/_snippets.tsx | 14 +++--- .../cell_popover_is_expandable.tsx | 2 +- .../datagrid_cell_popover_example.js | 23 +++++++--- .../cells_popovers/datagrid_cells_example.js | 24 ++++++++++ .../datagrid/body/data_grid_cell.test.tsx | 12 +++++ .../datagrid/body/data_grid_cell.tsx | 8 ++-- .../body/data_grid_cell_actions.test.tsx | 44 ++++++------------- .../datagrid/body/data_grid_cell_actions.tsx | 10 +++-- upcoming_changelogs/5710.md | 1 + 9 files changed, 83 insertions(+), 55 deletions(-) create mode 100644 upcoming_changelogs/5710.md diff --git a/src-docs/src/views/datagrid/_snippets.tsx b/src-docs/src/views/datagrid/_snippets.tsx index 428426876f8..fb0d3384e6c 100644 --- a/src-docs/src/views/datagrid/_snippets.tsx +++ b/src-docs/src/views/datagrid/_snippets.tsx @@ -15,16 +15,12 @@ inMemory={{ level: 'sorting' }}`, actions: { showMoveLeft: false, showMoveRight: false }, // doesn't show move actions in column header schema: 'franchise', // custom schema later defined under schemaDetectors cellActions: [ // provides one additional cell action that triggers an alert once clicked - { - label: 'test', - iconType: 'heart', - callback: ()=> alert('test') - } - ] - } + ({ Component }) => alert('test')}>Custom action, + ], + }, ]}`, columnVisibility: `columnVisibility={{ - visibleColumns: ['A', 'C'], + visibleColumns: ['A'], setVisibleColumns: () => {}, }}`, leadingControlColumns: `leadingControlColumns={[ @@ -61,7 +57,7 @@ inMemory={{ level: 'sorting' }}`, onChangeItemsPerPage: () => {}, }}`, sorting: `sorting={{ - columns: [{ id: 'C', direction: 'asc' }], + columns: [{ id: 'A', direction: 'asc' }], onSort: () => {}, }}`, toolbarVisibility: `toolbarVisibility={{ diff --git a/src-docs/src/views/datagrid/cells_popovers/cell_popover_is_expandable.tsx b/src-docs/src/views/datagrid/cells_popovers/cell_popover_is_expandable.tsx index 499b457423f..994ed4148f5 100644 --- a/src-docs/src/views/datagrid/cells_popovers/cell_popover_is_expandable.tsx +++ b/src-docs/src/views/datagrid/cells_popovers/cell_popover_is_expandable.tsx @@ -28,7 +28,7 @@ const columns: EuiDataGridColumn[] = [ }, { id: 'lastName', - isExpandable: false, + isExpandable: false, // Overridden by the fact that cellActions is set cellActions, }, { diff --git a/src-docs/src/views/datagrid/cells_popovers/datagrid_cell_popover_example.js b/src-docs/src/views/datagrid/cells_popovers/datagrid_cell_popover_example.js index 9d6e6c323ab..2b28bac56a2 100644 --- a/src-docs/src/views/datagrid/cells_popovers/datagrid_cell_popover_example.js +++ b/src-docs/src/views/datagrid/cells_popovers/datagrid_cell_popover_example.js @@ -4,7 +4,7 @@ import { GuideSectionTypes } from '../../../components'; import { EuiCode, EuiCallOut, EuiSpacer } from '../../../../../src'; import IsDetailsPopover from './cell_popover_is_details'; -const IsDetailsPopoverSource = require('!!raw-loader!./cell_popover_is_details'); +const isDetailsPopoverSource = require('!!raw-loader!./cell_popover_is_details'); import RenderCellPopover from './cell_popover_rendercellpopover'; const renderCellPopoverSource = require('!!raw-loader!./cell_popover_rendercellpopover'); @@ -19,7 +19,6 @@ import { } from '!!prop-loader!../../../../../src/components/datagrid/data_grid_types'; export const DataGridCellPopoverExample = { - title: 'Data grid cell popovers', sections: [ { title: 'Conditionally customizing cell popover content', @@ -48,7 +47,7 @@ export const DataGridCellPopoverExample = { source: [ { type: GuideSectionTypes.TSX, - code: IsDetailsPopoverSource, + code: isDetailsPopoverSource, }, ], props: { @@ -137,10 +136,10 @@ export const DataGridCellPopoverExample = { text: ( <>

- Popovers can sometimes be unnecessary for short form content. In the - example below we've turned them off by setting{' '} - isExpandable=false on specific{' '} - columns. + Popovers can sometimes be unnecessary for short form content, and + can be disabled by setting columns.isExpandable{' '} + to false. In the example below, we've turned + off expansion on the suffix column.

To set isExpandable at a per-cell level instead @@ -149,6 +148,16 @@ export const DataGridCellPopoverExample = { example conditionally disables the expansion popover for boolean cells that are 'false'.

+ + If columns.cellActions is defined,{' '} + isExpandable will always be forced to true. This + ensures that keyboard and screen reader users have access to all + cell actions. + ), demo: , diff --git a/src-docs/src/views/datagrid/cells_popovers/datagrid_cells_example.js b/src-docs/src/views/datagrid/cells_popovers/datagrid_cells_example.js index b0e2b83a0eb..c5e7bff6f9f 100644 --- a/src-docs/src/views/datagrid/cells_popovers/datagrid_cells_example.js +++ b/src-docs/src/views/datagrid/cells_popovers/datagrid_cells_example.js @@ -1,4 +1,5 @@ import React, { Fragment } from 'react'; +import { Link } from 'react-router-dom'; import { GuideSectionTypes } from '../../../components'; import { @@ -7,6 +8,7 @@ import { EuiCallOut, EuiBasicTable, EuiSpacer, + EuiText, EuiListGroupItem, } from '../../../../../src'; @@ -27,6 +29,28 @@ import { export const DataGridCellsExample = { title: 'Data grid cells & popovers', + intro: ( + +

+ Data grid cells are rendered using the{' '} + renderCellValue prop. This prop accepts a function + which is treated as a React component behind the scenes. This means the + data grid passes cell-specific props (e.g. row index, column/schema + info, etc.) to your render function, which can ouput anything from a + string to any JSX element. +

+

+ Each data grid cell will automatically render an expand action button + and an expansion popover ( + + which can be disabled + + ). For cells with overflowing or truncated content, this expansion + popover helps display the full amount of content, or can be customized + to show extra details. +

+ + ), sections: [ { source: [ diff --git a/src/components/datagrid/body/data_grid_cell.test.tsx b/src/components/datagrid/body/data_grid_cell.test.tsx index 4355fd8dffc..31ca2e5e20e 100644 --- a/src/components/datagrid/body/data_grid_cell.test.tsx +++ b/src/components/datagrid/body/data_grid_cell.test.tsx @@ -391,6 +391,18 @@ describe('EuiDataGridCell', () => { }); describe('isExpandable', () => { + it('always returns true if column.cellActions exists', () => { + const component = mount( +