From 2ccfb4d8023f45d2d4e691aaf4213113796be77b Mon Sep 17 00:00:00 2001 From: Lene Gadewoll Date: Fri, 13 Sep 2024 13:51:20 +0200 Subject: [PATCH] refactor: use portal inside datagrid to ensure scoped styles still apply - misc cleanup --- .../datagrid/body/data_grid_body_custom.tsx | 2 ++ .../datagrid/body/data_grid_body_virtualized.tsx | 1 + .../body/header/data_grid_header_cell.styles.ts | 7 +++---- .../body/header/data_grid_header_cell.test.tsx | 1 + .../datagrid/body/header/data_grid_header_cell.tsx | 14 +++++++++++++- .../body/header/data_grid_header_row.styles.ts | 2 +- .../body/header/data_grid_header_row.test.tsx | 1 + .../datagrid/body/header/data_grid_header_row.tsx | 7 ++++--- .../eui/src/components/datagrid/data_grid_types.ts | 1 + 9 files changed, 27 insertions(+), 9 deletions(-) diff --git a/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx b/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx index ca7346a6fd4..27bb8e67c4e 100644 --- a/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx +++ b/packages/eui/src/components/datagrid/body/data_grid_body_custom.tsx @@ -52,6 +52,7 @@ export const EuiDataGridBodyCustomRender: FunctionComponent< gridStyles, className, columnDragDrop, + wrapperRef, }) => { /** * Columns & widths @@ -107,6 +108,7 @@ export const EuiDataGridBodyCustomRender: FunctionComponent< schemaDetectors, gridStyles, columnDragDrop, + wrapperRef, }); const { footerRow } = useDataGridFooter({ diff --git a/packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx b/packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx index cbf2b9e31f1..5c87c26bc9d 100644 --- a/packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx +++ b/packages/eui/src/components/datagrid/body/data_grid_body_virtualized.tsx @@ -202,6 +202,7 @@ export const EuiDataGridBodyVirtualized: FunctionComponent schemaDetectors, gridStyles, columnDragDrop, + wrapperRef, }); const { footerRow, footerRowHeight } = useDataGridFooter({ diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.styles.ts b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.styles.ts index 0ce48cf1433..1e35489e733 100644 --- a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.styles.ts +++ b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.styles.ts @@ -62,8 +62,8 @@ export const euiDataGridHeaderCellStyles = (euiThemeContext: UseEuiTheme) => { } `, euiDataGridHeaderCellDraggable: css` - // override internal styling from @hello-pangea/dnd to ensure positioning - ${logicalCSS('top', '0 !important;')} + /* override internal styling from @hello-pangea/dnd to ensure positioning */ + ${logicalCSS('top', '0 !important')} display: 'flex'; ${logicalCSS('width', '100%')} `, @@ -73,11 +73,10 @@ export const euiDataGridHeaderCellStyles = (euiThemeContext: UseEuiTheme) => { align-items: center; gap: ${euiTheme.size.xs}; border-radius: ${euiTheme.border.radius.small}; - // font-weight: $euiFontWeightBold; outline: none; svg { - flex: 0 0 auto; // Ensure icon doesn't shrink + flex: 0 0 auto; /* Ensure icon doesn't shrink */ display: flex; align-items: center; justify-content: center; diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.test.tsx b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.test.tsx index f78462dc37c..34ca6ad8278 100644 --- a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.test.tsx +++ b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.test.tsx @@ -46,6 +46,7 @@ describe('EuiDataGridHeaderCell', () => { setColumnWidth: jest.fn(), setVisibleColumns: jest.fn(), switchColumnPos: jest.fn(), + wrapperRef: { current: null }, }; it('renders', () => { diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx index b37a7cd4dfd..4ab244a4cda 100644 --- a/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx +++ b/packages/eui/src/components/datagrid/body/header/data_grid_header_cell.tsx @@ -57,6 +57,7 @@ export const EuiDataGridHeaderCell: FunctionComponent { const { id, display, displayAsText, displayHeaderCellProps } = column; const title = displayAsText || id; @@ -346,7 +347,18 @@ export const EuiDataGridHeaderCell: FunctionComponent{content} : content; + return isDragging ? ( + + {content} + + ) : ( + content + ); }} diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_row.styles.ts b/packages/eui/src/components/datagrid/body/header/data_grid_header_row.styles.ts index 4535dc4ae3c..79f91b29ec8 100644 --- a/packages/eui/src/components/datagrid/body/header/data_grid_header_row.styles.ts +++ b/packages/eui/src/components/datagrid/body/header/data_grid_header_row.styles.ts @@ -50,7 +50,7 @@ export const euiDataGridHeaderStyles = (euiThemeContext: UseEuiTheme) => { shade: css` background-color: ${euiTheme.colors.lightestShade}; - // ensure correct background on drag + /* ensure correct background on drag */ .euiDataGridHeaderCellDraggable .euiDataGridHeaderCell { background-color: ${euiTheme.colors.lightestShade}; } diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_row.test.tsx b/packages/eui/src/components/datagrid/body/header/data_grid_header_row.test.tsx index 1b1048abdf6..3bf983b5933 100644 --- a/packages/eui/src/components/datagrid/body/header/data_grid_header_row.test.tsx +++ b/packages/eui/src/components/datagrid/body/header/data_grid_header_row.test.tsx @@ -21,6 +21,7 @@ describe('EuiDataGridHeaderRow', () => { setVisibleColumns: jest.fn(), switchColumnPos: jest.fn(), gridStyles: { header: 'shade' as const }, + wrapperRef: { current: null }, }; it('renders', () => { diff --git a/packages/eui/src/components/datagrid/body/header/data_grid_header_row.tsx b/packages/eui/src/components/datagrid/body/header/data_grid_header_row.tsx index 51e5e51175a..bf119e95e50 100644 --- a/packages/eui/src/components/datagrid/body/header/data_grid_header_row.tsx +++ b/packages/eui/src/components/datagrid/body/header/data_grid_header_row.tsx @@ -8,11 +8,9 @@ import classnames from 'classnames'; import React, { forwardRef, memo, useContext, useMemo } from 'react'; - -import { useEuiMemoizedStyles } from '../../../../services'; import { OnDragEndResponder } from '@hello-pangea/dnd'; -import { useGeneratedHtmlId } from '../../../../services'; +import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../../../services'; import { EuiDragDropContext, EuiDroppable } from '../../../drag_and_drop'; import { DataGridFocusContext } from '../../utils/focus'; import { @@ -40,6 +38,7 @@ const EuiDataGridHeaderRow = memo( schema, schemaDetectors, gridStyles, + wrapperRef, columnDragDrop, ...rest } = props; @@ -94,6 +93,7 @@ const EuiDataGridHeaderRow = memo( schema={schema} schemaDetectors={schemaDetectors} columnDragDrop={columnDragDrop} + wrapperRef={wrapperRef} /> )), [ @@ -108,6 +108,7 @@ const EuiDataGridHeaderRow = memo( setVisibleColumns, sorting, switchColumnPos, + wrapperRef, ] ); diff --git a/packages/eui/src/components/datagrid/data_grid_types.ts b/packages/eui/src/components/datagrid/data_grid_types.ts index 0d8d229d092..2fddd32d845 100644 --- a/packages/eui/src/components/datagrid/data_grid_types.ts +++ b/packages/eui/src/components/datagrid/data_grid_types.ts @@ -142,6 +142,7 @@ export interface EuiDataGridHeaderRowPropsSpecificProps { setColumnWidth: (columnId: string, width: number) => void; setVisibleColumns: (columnId: string[]) => void; switchColumnPos: (colFromId: string, colToId: string) => void; + wrapperRef: MutableRefObject; gridStyles: EuiDataGridStyle; columnDragDrop?: boolean; }