diff --git a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap index 5fd31c9d627..17104f245e4 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -22,12 +22,12 @@ exports[`EuiBasicTable renders (bare-bones) 1`] = ` @@ -197,12 +197,12 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap index 4d786deea65..26b5155ecc4 100644 --- a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap +++ b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap @@ -118,12 +118,12 @@ exports[`EuiInMemoryTable empty array 1`] = `
@@ -227,12 +227,12 @@ exports[`EuiInMemoryTable with items 1`] = `
diff --git a/src/components/basic_table/basic_table.tsx b/src/components/basic_table/basic_table.tsx index 18ef806dbf6..c35e70fb226 100644 --- a/src/components/basic_table/basic_table.tsx +++ b/src/components/basic_table/basic_table.tsx @@ -50,6 +50,7 @@ import { EuiTableRowCellCheckbox, EuiTableSortMobile, } from '../table'; +import { euiTableCaptionStyles } from '../table/table.styles'; import { CollapsedItemActions } from './collapsed_item_actions'; import { ExpandedItemActions } from './expanded_item_actions'; @@ -694,7 +695,7 @@ export class EuiBasicTable extends Component< } return ( - diff --git a/src/components/table/__snapshots__/table.test.tsx.snap b/src/components/table/__snapshots__/table.test.tsx.snap index f95aeb94579..f4028daa048 100644 --- a/src/components/table/__snapshots__/table.test.tsx.snap +++ b/src/components/table/__snapshots__/table.test.tsx.snap @@ -3,7 +3,7 @@ exports[`renders EuiTable 1`] = `
+ {captionElement}
diff --git a/src/components/table/_responsive.scss b/src/components/table/_responsive.scss index 5b11913459f..1cae1afb5bf 100644 --- a/src/components/table/_responsive.scss +++ b/src/components/table/_responsive.scss @@ -22,8 +22,6 @@ @include euiBreakpoint('xs', 's') { .euiTable.euiTable--responsive { - // Not allowing compressed styles in mobile view (for now) - thead { display: none; // Use mobile versions of selecting and filtering instead } diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 1cf0c3422ac..daa30ba4b2c 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -1,32 +1,3 @@ -.euiTable { - @include euiFontSizeS; - @include euiNumberFormat; - - width: 100%; - table-layout: fixed; - border: none; - border-collapse: collapse; - background-color: $euiColorEmptyShade; - - &.euiTable--auto { - table-layout: auto; - } -} - -.euiTableCaption { - position: relative; -} - -// Compressed styles not for mobile -@include euiBreakpoint('m', 'l', 'xl') { - .euiTable--compressed { - .euiTableCellContent { - @include euiFontSizeXS; - padding: $euiTableCellContentPaddingCompressed; - } - } -} - .euiTableFooterCell, .euiTableHeaderCell { @include euiTableCell; @@ -146,8 +117,6 @@ /** * 1. Vertically align all children. - * 2. The padding on this div allows the ellipsis to show if the content is truncated. If - * the padding was on the cell, the ellipsis would be cropped. * 4. Prevent very long single words (e.g. the name of a field in a document) from overflowing * the cell. */ @@ -155,7 +124,6 @@ overflow: hidden; /* 4 */ display: flex; align-items: center; /* 1 */ - padding: $euiTableCellContentPadding; /* 2 */ } .euiTableCellContent__text { diff --git a/src/components/table/table.styles.ts b/src/components/table/table.styles.ts new file mode 100644 index 00000000000..0f34ddb279d --- /dev/null +++ b/src/components/table/table.styles.ts @@ -0,0 +1,68 @@ +/* + * 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 { euiFontSize, euiNumberFormat, logicalCSS } from '../../global_styling'; + +export const euiTableStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + const cellContentPadding = euiTheme.size.s; + const compressedCellContentPadding = euiTheme.size.xs; + + return { + euiTable: css` + ${euiNumberFormat(euiThemeContext)} + ${logicalCSS('width', '100%')} + border: none; + border-collapse: collapse; + background-color: ${euiTheme.colors.emptyShade}; + `, + layout: { + fixed: css` + table-layout: fixed; + `, + auto: css` + table-layout: auto; + `, + }, + /** + * 1. The padding on the `.euiTableCellContent` div allows the ellipsis to show if the + * content is truncated. If the padding was on the cell, the ellipsis would be cropped. + * 2. The `:where()` selector sets the specificity to 0, allowing consumers to more easily + * override our CSS if needed + */ + uncompressed: css` + font-size: ${euiFontSize(euiThemeContext, 's').fontSize}; + line-height: ${euiFontSize(euiThemeContext, 'm').lineHeight}; + + /* 1 & 2 */ + & :where(.euiTableCellContent) { + padding: ${cellContentPadding}; + } + `, + compressed: css` + ${euiFontSize(euiThemeContext, 'xs')} + + /* 1 & 2 */ + & :where(.euiTableCellContent) { + padding: ${compressedCellContentPadding}; + } + `, + }; +}; + +// The table caption needs to not be absolutely positioned, because for some reason +// it causes weird layout issues/double borders when used within a
+// Also needs to be !important to override euiScreenReaderOnly absolute positioning +export const euiTableCaptionStyles = css` + /* stylelint-disable declaration-no-important */ + position: relative !important; +`; diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx index 87feb1a4914..a8087ba7a97 100644 --- a/src/components/table/table.tsx +++ b/src/components/table/table.tsx @@ -8,8 +8,12 @@ import React, { FunctionComponent, TableHTMLAttributes } from 'react'; import classNames from 'classnames'; + +import { useEuiMemoizedStyles, useIsWithinMaxBreakpoint } from '../../services'; import { CommonProps } from '../common'; +import { euiTableStyles } from './table.styles'; + export interface EuiTableProps extends CommonProps, TableHTMLAttributes { @@ -21,11 +25,6 @@ export interface EuiTableProps tableLayout?: 'fixed' | 'auto'; } -const tableLayoutToClassMap: { [tableLayout: string]: string | null } = { - fixed: null, - auto: 'euiTable--auto', -}; - export const EuiTable: FunctionComponent = ({ children, className, @@ -34,18 +33,23 @@ export const EuiTable: FunctionComponent = ({ responsive = true, ...rest }) => { - const classes = classNames( - 'euiTable', - className, - { - 'euiTable--compressed': compressed, - 'euiTable--responsive': responsive, - }, - tableLayoutToClassMap[tableLayout] - ); + // TODO: Make the table responsive breakpoint customizable via prop + const isResponsive = useIsWithinMaxBreakpoint('s') && responsive; + + const classes = classNames('euiTable', className, { + 'euiTable--responsive': responsive, + }); + + const styles = useEuiMemoizedStyles(euiTableStyles); + const cssStyles = [ + styles.euiTable, + styles.layout[tableLayout], + (!compressed || isResponsive) && styles.uncompressed, + compressed && !isResponsive && styles.compressed, + ]; return ( -
+
{children}
);