From 8479b41c3cf4040b5cef68fe9a306a05aa4017ed Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 29 Oct 2024 14:35:32 -0700 Subject: [PATCH] Remove EuiDataGrid docs callout mdx nested within bullet points - just use sub-bullet-points instead --- .../tabular_content/data_grid_advanced.mdx | 21 ++++------------- .../data_grid_cells_and_popovers.mdx | 23 +++++-------------- 2 files changed, 11 insertions(+), 33 deletions(-) diff --git a/packages/website/docs/components/tabular_content/data_grid_advanced.mdx b/packages/website/docs/components/tabular_content/data_grid_advanced.mdx index 3e6e41af325..54237e9fc8b 100644 --- a/packages/website/docs/components/tabular_content/data_grid_advanced.mdx +++ b/packages/website/docs/components/tabular_content/data_grid_advanced.mdx @@ -9,22 +9,11 @@ id: tabular_content_data_grid_advanced For advanced use cases, and particularly for data grids that manage associated modals/flyouts and need to manually control their grid cell popovers & focus states, we expose certain internal methods via the `ref` prop of **EuiDataGrid**. These methods are: -* `setIsFullScreen(isFullScreen)` - controls the fullscreen state of the data grid. Accepts a true/false boolean flag. - -* `setFocusedCell({ rowIndex, colIndex })` - focuses the specified cell in the grid. - - :::warning Using this method is an accessibility requirement if your data grid toggles a modal or flyout. - - - - - Your modal or flyout should restore focus into the grid on close to prevent keyboard or screen reader users from being stranded. - - ::: - -* `openCellPopover({ rowIndex, colIndex })` - opens the specified cell's popover contents. - -* `closeCellPopover()` - closes any currently open cell popover. +* `setIsFullScreen(isFullScreen)` - controls the fullscreen state of the data grid. Accepts a true/false boolean flag. +* `setFocusedCell({ rowIndex, colIndex })` - focuses the specified cell in the grid. + * Using this method is an **accessibility requirement** if your data grid toggles a modal or flyout. Your modal or flyout should restore focus into the grid on close to prevent keyboard or screen reader users from being stranded. +* `openCellPopover({ rowIndex, colIndex })` - opens the specified cell's popover contents. +* `closeCellPopover()` - closes any currently open cell popover. :::note Handling cell location diff --git a/packages/website/docs/components/tabular_content/data_grid_cells_and_popovers.mdx b/packages/website/docs/components/tabular_content/data_grid_cells_and_popovers.mdx index 2c240efaf57..35a1340ad3f 100644 --- a/packages/website/docs/components/tabular_content/data_grid_cells_and_popovers.mdx +++ b/packages/website/docs/components/tabular_content/data_grid_cells_and_popovers.mdx @@ -404,23 +404,12 @@ If you want complete control over the rendering of the entire cell popover, use To make falling back to atoms of the default cell popover easier, several props are passed to your custom `renderCellPopover` function: -* `children` - the direct JSX output of the cell's returned `renderCellValue`. It can be used (e.g.) if you want a custom wrapper or cell actions, but default popover content. - -* `cellContentsElement` - a direct reference to the cell's HTML content node, which allows accessing the cell's `innerText` for cases where raw non-JSX text is useful (e.g. copying). - -* `cellActions` - the direct JSX output of the default popover footer and buttons. Use this prop if you want custom popover content but default cell actions.:::warning Using custom cell actions - - - - - If deliberately leaving out the default `cellActions`, you **must** re-implement your cell actions in the popover in some form. Leaving out cell actions available in the cell but not in the popover introduces UX inconsistencies and will confuse the end user. - - ::: - -* `DefaultCellPopover` - the default popover component. Use this component if you only want custom popover content for certain schemas or columns and default popover rendering for other cells. - -* `setCellPopoverProps` - this callback is passed to allow customizing the cell expansion popover. Accepts any prop that `EuiPopover` accepts, except for `button` & `closePopover`, which is controlled by the data grid. - +* `children` - the direct JSX output of the cell's returned `renderCellValue`. It can be used (e.g.) if you want a custom wrapper or cell actions, but default popover content. +* `cellContentsElement` - a direct reference to the cell's HTML content node, which allows accessing the cell's `innerText` for cases where raw non-JSX text is useful (e.g. copying). +* `cellActions` - the direct JSX output of the default popover footer and buttons. Use this prop if you want custom popover content but default cell actions. + * If deliberately leaving out the default `cellActions`, you **must** re-implement your cell actions in the popover in some form. Leaving out cell actions available in the cell but not in the popover introduces UX inconsistencies and will confuse the end user. +* `DefaultCellPopover` - the default popover component. Use this component if you only want custom popover content for certain schemas or columns and default popover rendering for other cells. +* `setCellPopoverProps` - this callback is passed to allow customizing the cell expansion popover. Accepts any prop that `EuiPopover` accepts, except for `button` & `closePopover`, which is controlled by the data grid. Take a look at the below example's demo code to see the above props in action.