Skip to content
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] Add new beta rowHeightsOptions.autoBelowLineCount feature flag #8096

Merged
merged 9 commits into from
Oct 25, 2024
8 changes: 8 additions & 0 deletions packages/eui/src/components/datagrid/data_grid_types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1108,6 +1108,14 @@ export interface EuiDataGridRowHeightsOptions {
* Defines the default size for all rows. It can be line count or just height.
*/
defaultHeight?: EuiDataGridRowHeightOption;
/**
* Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
* *max* number of lines (instead of a set number of lines for all rows).
*
* This functionality is in beta and has performance implications;
* we do not yet fully recommend/support it for heavy production usage.
*/
autoBelowLineCount?: boolean;
/**
* Defines the height for a specific row. It can be line count or just height.
*
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export const RowHeightUtils = jest.fn().mockImplementation(() => {

const rowHeightUtilsMock: RowHeightUtilsPublicAPI = {
getHeightType: jest.fn(rowHeightUtils.getHeightType),
isAutoBelowLineCount: jest.fn(() => false),
isAutoHeight: jest.fn(() => false),
setRowHeight: jest.fn(),
pruneHiddenColumnHeights: jest.fn(),
Expand Down
59 changes: 59 additions & 0 deletions packages/eui/src/components/datagrid/utils/row_heights.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,56 @@ describe('RowHeightUtils', () => {
); // 5 * 24 + 6 + 6
});
});

describe('isAutoBelowLineCount', () => {
it('returns true when the feature flag is enabled and a lineCount above 1 exists', () => {
expect(
rowHeightUtils.isAutoBelowLineCount(
{ autoBelowLineCount: true },
{ lineCount: 3 }
)
).toEqual(true);
});

it('returns false if the feature flag is not enabled', () => {
expect(
rowHeightUtils.isAutoBelowLineCount(
{ autoBelowLineCount: false },
{ lineCount: 3 }
)
).toEqual(false);
expect(
rowHeightUtils.isAutoBelowLineCount(undefined, { lineCount: 3 })
).toEqual(false);
});

it('returns false if height type is not lineCount', () => {
expect(
rowHeightUtils.isAutoBelowLineCount({ autoBelowLineCount: true }, 50)
).toEqual(false);
expect(
rowHeightUtils.isAutoBelowLineCount(
{ autoBelowLineCount: true },
'auto'
)
).toEqual(false);
});

it('returns false if lineCount is 1 (treated as single line/undefined)', () => {
expect(
rowHeightUtils.isAutoBelowLineCount(
{ autoBelowLineCount: true },
{ lineCount: 1 }
)
).toEqual(false);
expect(
rowHeightUtils.isAutoBelowLineCount(
{ autoBelowLineCount: true },
undefined
)
).toEqual(false);
});
});
});

describe('auto height utils', () => {
Expand All @@ -240,6 +290,15 @@ describe('RowHeightUtils', () => {
).toEqual(true);
});

it('returns true if the grid if the conditions for `.isAutoBelowLineCount` are met`', () => {
mgadewoll marked this conversation as resolved.
Show resolved Hide resolved
expect(
rowHeightUtils.isAutoHeight(1, {
autoBelowLineCount: true,
defaultHeight: { lineCount: 2 },
})
).toEqual(true);
});

it('returns false otherwise', () => {
expect(
rowHeightUtils.isAutoHeight(1, {
Expand Down
12 changes: 12 additions & 0 deletions packages/eui/src/components/datagrid/utils/row_heights.ts
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,15 @@ export class RowHeightUtils {
return contentHeight + padding * 2;
}

isAutoBelowLineCount(
options?: EuiDataGridRowHeightsOptions,
option?: EuiDataGridRowHeightOption
) {
if (!options?.autoBelowLineCount) return false;
if ((this.getLineCount(option) ?? 0) > 1) return true;
return false;
}

/**
* Auto height utils
*/
Expand All @@ -128,6 +137,9 @@ export class RowHeightUtils {
if (height === AUTO_HEIGHT) {
return true;
}
if (this.isAutoBelowLineCount(rowHeightsOptions, height)) {
return true;
}
return false;
}

Expand Down