github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[UnifiedDataTable] add row line-height override support (#167725)

Browse source
This commit is contained in:
Paulo Henrique 2023-10-02 13:55:11 -07:00 • committed by GitHub
parent 3f4e53f10a
commit 66b1c7f82d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 35 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

23
packages/kbn-unified-data-table/src/components/data_table.test.tsx
View file

@ -465,4 +465,27 @@ describe('UnifiedDataTable', () => {
expect(grid.hasClass('euiDataGrid--bordersNone')).toBeTruthy();
});
});
describe('rowLineHeightOverride', () => {
it('should render the grid with the default row line height if no rowLineHeightOverride is provided', async () => {
const component = await getComponent({
...getProps(),
});
const gridRowCell = findTestSubject(component, 'dataGridRowCell').first();
expect(gridRowCell.prop('style')).toMatchObject({
lineHeight: '1.6em',
});
});
it('should render the grid with row line height override if rowLineHeightOverride is provided', async () => {
const component = await getComponent({
...getProps(),
rowLineHeightOverride: '24px',
});
const gridRowCell = findTestSubject(component, 'dataGridRowCell').first();
expect(gridRowCell.prop('style')).toMatchObject({
lineHeight: '24px',
});
});
});
});

6
packages/kbn-unified-data-table/src/components/data_table.tsx
View file

@ -287,6 +287,10 @@ export interface UnifiedDataTableProps {
* Optional gridStyle override.
*/
gridStyleOverride?: EuiDataGridStyle;
/**
* Optional row line height override. Default is 1.6em.
*/
rowLineHeightOverride?: string;
}
export const EuiDataGridMemoized = React.memo(EuiDataGrid);
@ -341,6 +345,7 @@ export const UnifiedDataTable = ({
consumer = 'discover',
componentsTourSteps,
gridStyleOverride,
rowLineHeightOverride,
}: UnifiedDataTableProps) => {
const { fieldFormats, toastNotifications, dataViewFieldEditor, uiSettings, storage, data } =
services;
@ -728,6 +733,7 @@ export const UnifiedDataTable = ({
storage,
configRowHeight,
consumer,
rowLineHeight: rowLineHeightOverride,
});
const isRenderComplete = loadingState !== DataLoadingState.loading;

2
packages/kbn-unified-data-table/src/constants.ts
View file

@ -22,7 +22,7 @@ export const ROWS_HEIGHT_OPTIONS = {
single: 0,
default: -1,
};
export const defaultRowLineHeight = '1.6em';
export const defaultMonacoEditorWidth = 370;
export const defaultTimeColumnWidth = 212;
export const kibanaJSON = 'kibana-json';

8
packages/kbn-unified-data-table/src/hooks/use_row_heights_options.ts
View file

@ -15,7 +15,7 @@ import {
getStoredRowHeight,
updateStoredRowHeight,
} from '../utils/row_heights';
import { ROWS_HEIGHT_OPTIONS } from '../constants';
import { defaultRowLineHeight, ROWS_HEIGHT_OPTIONS } from '../constants';
interface UseRowHeightProps {
rowHeightState?: number;
@ -23,6 +23,7 @@ interface UseRowHeightProps {
storage: Storage;
configRowHeight?: number;
consumer: string;
rowLineHeight?: string;
}
/**
@ -57,6 +58,7 @@ export const useRowHeightsOptions = ({
storage,
configRowHeight = ROWS_HEIGHT_OPTIONS.default,
consumer,
rowLineHeight = defaultRowLineHeight,
}: UseRowHeightProps) => {
return useMemo((): EuiDataGridRowHeightsOptions => {
const rowHeightFromLS = getStoredRowHeight(storage, consumer);
@ -79,7 +81,7 @@ export const useRowHeightsOptions = ({
return {
defaultHeight,
lineHeight: '1.6em',
lineHeight: rowLineHeight,
onChange: ({ defaultHeight: newRowHeight }: EuiDataGridRowHeightsOptions) => {
const newSerializedRowHeight = serializeRowHeight(
// pressing "Reset to default" triggers onChange with the same value
@ -89,5 +91,5 @@ export const useRowHeightsOptions = ({
onUpdateRowHeight?.(newSerializedRowHeight);
},
};
}, [storage, consumer, rowHeightState, configRowHeight, onUpdateRowHeight]);
}, [storage, consumer, rowHeightState, rowLineHeight, configRowHeight, onUpdateRowHeight]);
};