Skip to content

Commit

Permalink
Convert datagrid wrapper styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen committed Sep 4, 2024
1 parent 112ca79 commit e0df28d
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 37 deletions.
24 changes: 12 additions & 12 deletions packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -457,11 +457,11 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
tabindex="-1"
/>
<div
class="euiDataGrid__focusWrap"
class="euiDataGrid__focusWrap emotion-euiDataGrid__focusWrap"
data-focus-lock-disabled="disabled"
>
<div
class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiTestCss"
class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiDataGrid-euiTestCss"
data-test-subj="test subject string"
>
<div
Expand Down Expand Up @@ -576,7 +576,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
<div
aria-label="aria-label"
aria-rowcount="3"
class="euiDataGrid__content"
class="euiDataGrid__content emotion-euiDataGrid__content"
data-test-subj="euiDataGridBody"
id="generated-id"
role="grid"
Expand Down Expand Up @@ -866,11 +866,11 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
tabindex="-1"
/>
<div
class="euiDataGrid__focusWrap"
class="euiDataGrid__focusWrap emotion-euiDataGrid__focusWrap"
data-focus-lock-disabled="disabled"
>
<div
class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiTestCss"
class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiDataGrid-euiTestCss"
data-test-subj="test subject string"
>
<div
Expand Down Expand Up @@ -985,7 +985,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
<div
aria-label="aria-label"
aria-rowcount="3"
class="euiDataGrid__content"
class="euiDataGrid__content emotion-euiDataGrid__content"
data-test-subj="euiDataGridBody"
id="generated-id"
role="grid"
Expand Down Expand Up @@ -1469,11 +1469,11 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
tabindex="-1"
/>
<div
class="euiDataGrid__focusWrap"
class="euiDataGrid__focusWrap emotion-euiDataGrid__focusWrap"
data-focus-lock-disabled="disabled"
>
<div
class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiTestCss"
class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiDataGrid-euiTestCss"
data-test-subj="test subject string"
>
<div
Expand Down Expand Up @@ -1585,7 +1585,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
<div
aria-label="aria-label"
aria-rowcount="3"
class="euiDataGrid__content"
class="euiDataGrid__content emotion-euiDataGrid__content"
data-test-subj="euiDataGridBody"
id="generated-id"
role="grid"
Expand Down Expand Up @@ -1877,11 +1877,11 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
tabindex="-1"
/>
<div
class="euiDataGrid__focusWrap"
class="euiDataGrid__focusWrap emotion-euiDataGrid__focusWrap"
data-focus-lock-disabled="disabled"
>
<div
class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiTestCss"
class="euiDataGrid euiDataGrid--bordersAll euiDataGrid--headerShade euiDataGrid--footerOverline euiDataGrid--rowHoverHighlight euiDataGrid--stickyFooter testClass1 testClass2 emotion-euiDataGrid-euiTestCss"
data-test-subj="test subject string"
>
<div
Expand Down Expand Up @@ -1993,7 +1993,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
<div
aria-label="aria-label"
aria-rowcount="3"
class="euiDataGrid__content"
class="euiDataGrid__content emotion-euiDataGrid__content"
data-test-subj="euiDataGridBody"
id="generated-id"
role="grid"
Expand Down
24 changes: 0 additions & 24 deletions packages/eui/src/components/datagrid/_data_grid.scss
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,10 @@
.euiDataGrid {
display: flex;
flex-direction: column;
align-items: stretch;
overflow: hidden;
height: 100%;
}

.euiDataGrid__content {
flex-grow: 1;
height: 100%;
max-width: 100%;
width: 100%;
overflow: hidden;
z-index: 1; // Sits below the controls above it and pagination below it
position: relative;
background: $euiPageBackgroundColor;
font-feature-settings: 'tnum' 1; // Tabular numbers
}

.euiDataGrid__customRenderBody {
@include euiScrollBar($euiColorDarkShade, $euiColorEmptyShade);
height: 100%;
width: 100%;
overflow: auto;
}

.euiDataGrid__focusWrap {
height: 100%;
}

.euiDataGrid__virtualized {
@include euiScrollBar($euiColorDarkShade, $euiColorEmptyShade);
scroll-padding: 0;
Expand Down
41 changes: 41 additions & 0 deletions packages/eui/src/components/datagrid/data_grid.styles.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

import { css } from '@emotion/react';

import { UseEuiTheme } from '../../services';
import { logicalCSS, logicalSizeCSS } from '../../global_styling';

export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;

return {
euiDataGrid: css`
display: flex;
flex-direction: column;
align-items: stretch;
${logicalCSS('height', '100%')}
overflow: hidden;
`,
// Sits below the controls above it and pagination below it
euiDataGrid__content: css`
z-index: 1;
position: relative;
flex-grow: 1;
${logicalSizeCSS('100%')}
${logicalCSS('max-width', '100%')}
overflow: hidden;
background-color: ${euiTheme.colors.body};
font-feature-settings: 'tnum' 1; /* Tabular numbers */
`,
// Wrapper around EuiDataGrid
euiDataGrid__focusWrap: css`
${logicalCSS('height', '100%')}
`,
};
};
8 changes: 7 additions & 1 deletion packages/eui/src/components/datagrid/data_grid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
VariableSizeGrid as Grid,
GridOnItemsRenderedProps,
} from 'react-window';
import { useGeneratedHtmlId } from '../../services';
import { useGeneratedHtmlId, useEuiMemoizedStyles } from '../../services';
import { useEuiTablePaginationDefaults } from '../table/table_pagination';
import { EuiFocusTrap } from '../focus_trap';
import { EuiI18n, useEuiI18n } from '../i18n';
Expand Down Expand Up @@ -67,6 +67,7 @@ import {
EuiDataGridStyleHeader,
EuiDataGridStyleRowHover,
} from './data_grid_types';
import { euiDataGridStyles } from './data_grid.styles';

// Each gridStyle object above sets a specific CSS select to .euiGrid
const fontSizesToClassMap: { [size in EuiDataGridStyleFontSizes]: string } = {
Expand Down Expand Up @@ -427,15 +428,19 @@ export const EuiDataGrid = memo(
]
);

const styles = useEuiMemoizedStyles(euiDataGridStyles);

return (
<DataGridFocusContext.Provider value={focusContext}>
<DataGridCellPopoverContext.Provider value={cellPopoverContext}>
<DataGridSortedContext.Provider value={sortedContext}>
<EuiFocusTrap
disabled={!isFullScreen}
className="euiDataGrid__focusWrap"
css={styles.euiDataGrid__focusWrap}
>
<div
css={styles.euiDataGrid}
className={classes}
onKeyDown={handleGridKeyDown}
style={isFullScreen ? undefined : { width, height }}
Expand Down Expand Up @@ -475,6 +480,7 @@ export const EuiDataGrid = memo(
ref={contentRef}
onKeyDown={onKeyDown}
data-test-subj="euiDataGridBody"
css={styles.euiDataGrid__content}
className="euiDataGrid__content"
role="grid"
aria-rowcount={rowCount}
Expand Down

0 comments on commit e0df28d

Please sign in to comment.