diff --git a/packages/eui-theme-borealis/changelogs/upcoming/9224.md b/packages/eui-theme-borealis/changelogs/upcoming/9224.md new file mode 100644 index 00000000000..de7dfbe2948 --- /dev/null +++ b/packages/eui-theme-borealis/changelogs/upcoming/9224.md @@ -0,0 +1,2 @@ +- Added component token `components.tableFooterBackground` + diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index e95f39b40be..62ce9d39747 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/packages/eui-theme-borealis/src/variables/_components.ts @@ -343,6 +343,7 @@ const component_colors: _EuiThemeComponentColors = { ([backgroundFilledText]) => backgroundFilledText, ['colors.backgroundFilledText'] ), + tableFooterBackground: SEMANTIC_COLORS.shade15, tooltipBackground: dark_background_colors.backgroundBaseSubdued, tooltipBorder: dark_border_colors.borderBaseSubdued, @@ -419,5 +420,6 @@ export const components: _EuiThemeComponents = { ), tableRowBackgroundMarked: SEMANTIC_COLORS.warning140, tableRowBackgroundMarkedHover: SEMANTIC_COLORS.warning130, + tableFooterBackground: SEMANTIC_COLORS.shade135, }, }; diff --git a/packages/eui-theme-common/changelogs/upcoming/9224.md b/packages/eui-theme-common/changelogs/upcoming/9224.md new file mode 100644 index 00000000000..091e2f183cc --- /dev/null +++ b/packages/eui-theme-common/changelogs/upcoming/9224.md @@ -0,0 +1,2 @@ +- Added type for component token `components.tableFooterBackground` + diff --git a/packages/eui-theme-common/src/global_styling/variables/components.ts b/packages/eui-theme-common/src/global_styling/variables/components.ts index ab9a4ab100a..de62c87eacb 100644 --- a/packages/eui-theme-common/src/global_styling/variables/components.ts +++ b/packages/eui-theme-common/src/global_styling/variables/components.ts @@ -142,6 +142,7 @@ export type _EuiThemeComponentColors = { tableRowBackgroundMarked: ColorModeSwitch; tableRowBackgroundMarkedHover: ColorModeSwitch; tableCellSortableIconColor: ColorModeSwitch; + tableFooterBackground: ColorModeSwitch; tooltipBackground: ColorModeSwitch; tooltipBorder: ColorModeSwitch; diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Dark_Mode.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Dark_Mode.png index 0fa5544921f..32f8655569f 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table_Without_Background.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table_Without_Background.png new file mode 100644 index 00000000000..120d2a352dc Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Expanded_Nested_Table_Without_Background.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png index b7954e72274..b5808a7d18e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Large_Expanded_Row.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Large_Expanded_Row.png index 60a489eb18e..774890a3f32 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Large_Expanded_Row.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiBasicTable_Large_Expanded_Row.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Without_Background.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Without_Background.png new file mode 100644 index 00000000000..ecb3c2dfcd3 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTable_Without_Background.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Dark_Mode.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Dark_Mode.png index fce498a899c..0ae1318c7c1 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Dark_Mode.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Dark_Mode.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png index f6c2080d3e0..576e80f1409 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table_Without_Background.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table_Without_Background.png new file mode 100644 index 00000000000..1ac5b36cf9f Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Nested_Table_Without_Background.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Row.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Row.png index bf8fa3a79ef..b3064f0698c 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Row.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Expanded_Row.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png index 5c01d9f536e..971d09e25d7 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_High_Contrast_Mobile.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Large_Expanded_Row.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Large_Expanded_Row.png index 6f7b319e008..9ccdc177034 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Large_Expanded_Row.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Large_Expanded_Row.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Marked_Row.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Marked_Row.png index 56da6474eb5..3566752c649 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Marked_Row.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Marked_Row.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png index 15f6fb50107..459a1646186 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiBasicTable_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png index a622b2c1e39..ba604cc2a21 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiInMemoryTable_Kitchen_Sink.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Without_Background.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Without_Background.png new file mode 100644 index 00000000000..6da4a95694b Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTable_Without_Background.png differ diff --git a/packages/eui/changelogs/upcoming/9224.md b/packages/eui/changelogs/upcoming/9224.md new file mode 100644 index 00000000000..cb9d5a42278 --- /dev/null +++ b/packages/eui/changelogs/upcoming/9224.md @@ -0,0 +1,8 @@ +- Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` +- Added component token `components.tableFooterBackground` +- Updated the color of mobile table header cells to use `colors.textSubdued` + +**Bug fixes** + +- Fixed a visual bug for mobile table action buttons that causes shifting positions when changing color mode ([#8231](https://github.com/elastic/eui/issues/8231)) + diff --git a/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap b/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap index 2ab8dfc19f0..540c9f32461 100644 --- a/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap +++ b/packages/eui/src/components/basic_table/__snapshots__/basic_table.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EuiBasicTable actions custom item actions 1`] = ` @@ -199,7 +199,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin 𐘂𐘂
@@ -831,7 +831,7 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
@@ -270,7 +270,7 @@ exports[`EuiInMemoryTable with items 1`] = ` 𐘂𐘂
diff --git a/packages/eui/src/components/basic_table/basic_table.stories.tsx b/packages/eui/src/components/basic_table/basic_table.stories.tsx index 9f7b99b3d0f..a70aa7cf74b 100644 --- a/packages/eui/src/components/basic_table/basic_table.stories.tsx +++ b/packages/eui/src/components/basic_table/basic_table.stories.tsx @@ -23,6 +23,7 @@ import type { } from './basic_table'; import { EuiBasicTable, EuiBasicTableProps } from './basic_table'; import { EuiIcon } from '../icon'; +import { Pagination } from './pagination_bar'; // Set static seed so that the generated faker data is consistent between page loads faker.seed(8_02_2010); @@ -40,6 +41,7 @@ const meta: Meta> = { // Inherited from EuiTable responsiveBreakpoint: 'm', tableLayout: 'fixed', + hasBackground: true, // set up for easier testing/QA cellProps: { 'data-test-subj': `basic-table-cell`, @@ -52,7 +54,7 @@ const meta: Meta> = { }; moveStorybookControlsToCategory( meta, - ['responsiveBreakpoint', 'tableLayout'], + ['responsiveBreakpoint', 'tableLayout', 'hasBackground'], 'EuiTable props' ); @@ -259,7 +261,7 @@ export const MarkedRow: Story = { })} />`, }, controls: { - include: ['rowProps', 'columns', 'items'], + include: ['rowProps', 'columns', 'items', 'hasBackground'], }, }, args: { @@ -275,7 +277,7 @@ export const MarkedRow: Story = { export const ExpandedRow: Story = { parameters: { controls: { - include: ['columns', 'items', 'itemIdToExpandedRowMap'], + include: ['columns', 'items', 'itemIdToExpandedRowMap', 'hasBackground'], }, }, args: { @@ -295,11 +297,15 @@ export const ExpandedRow: Story = { }, }; +type NestedTableProps = { + hasLeadingIcon?: boolean; + hasBackground?: boolean; +}; + const NestedTable = ({ hasLeadingIcon = false, -}: { - hasLeadingIcon?: boolean; -}) => { + hasBackground = true, +}: NestedTableProps) => { const { euiTheme } = useEuiTheme(); const _items = users.slice(0, 3); @@ -321,6 +327,7 @@ const NestedTable = ({ itemId="id" rowHeader="firstName" columns={_columns} + hasBackground={hasBackground} /> ); }; @@ -328,7 +335,7 @@ const NestedTable = ({ export const ExpandedNestedTable: Story = { parameters: { controls: { - include: ['columns', 'items', 'itemIdToExpandedRowMap'], + include: ['columns', 'items', 'itemIdToExpandedRowMap', 'hasBackground'], }, }, args: { @@ -348,6 +355,32 @@ export const ExpandedNestedTable: Story = { onSelectionChange: action('onSelectionChange'), }, }, + render: function Render({ + itemIdToExpandedRowMap, + hasBackground, + ...rest + }: EuiBasicTableProps) { + // story-only logic to inject hasBackground into nested tables + // do not use in consumer code, set hasBackground directly on the nested table instead + const _itemIdToExpandedRowMap = Object.fromEntries( + Object.entries(itemIdToExpandedRowMap || {}).map(([key, value]) => [ + key, + React.isValidElement(value) + ? React.cloneElement(value, { hasBackground } as NestedTableProps) + : value, + ]) + ); + + return ( + + ); + }, }; export const DarkMode: Story = { @@ -394,6 +427,18 @@ export const LargeExpandedRow: Story = { }, }; +export const ExpandedNestedTableWithoutBackground: Story = { + tags: ['vrt-only'], + args: { + ...ExpandedNestedTable.args, + hasBackground: false, + itemIdToExpandedRowMap: { + 1: , + 3: , + }, + }, +}; + const StatefulPlayground = ({ items, pagination, diff --git a/packages/eui/src/components/basic_table/basic_table.tsx b/packages/eui/src/components/basic_table/basic_table.tsx index 07bd91ddac4..7439747624b 100644 --- a/packages/eui/src/components/basic_table/basic_table.tsx +++ b/packages/eui/src/components/basic_table/basic_table.tsx @@ -520,6 +520,7 @@ export class EuiBasicTable extends Component< tableCaption, rowHeader, tableLayout, + hasBackground, ...rest } = this.props; @@ -541,8 +542,13 @@ export class EuiBasicTable extends Component< } renderTable() { - const { compressed, responsiveBreakpoint, tableLayout, loading } = - this.props; + const { + compressed, + responsiveBreakpoint, + tableLayout, + hasBackground, + loading, + } = this.props; return ( <> @@ -556,6 +562,7 @@ export class EuiBasicTable extends Component< tableLayout={tableLayout} responsiveBreakpoint={responsiveBreakpoint} compressed={compressed} + hasBackground={hasBackground} css={loading && safariLoadingWorkaround} > {this.renderTableCaption()} diff --git a/packages/eui/src/components/basic_table/in_memory_table.stories.tsx b/packages/eui/src/components/basic_table/in_memory_table.stories.tsx index 2292ee5892a..04c9871d42d 100644 --- a/packages/eui/src/components/basic_table/in_memory_table.stories.tsx +++ b/packages/eui/src/components/basic_table/in_memory_table.stories.tsx @@ -35,11 +35,12 @@ const meta: Meta = { // Inherited from EuiTable responsiveBreakpoint: 'm', tableLayout: 'fixed', + hasBackground: true, }, }; moveStorybookControlsToCategory( meta, - ['responsiveBreakpoint', 'tableLayout'], + ['responsiveBreakpoint', 'tableLayout', 'hasBackground'], 'EuiTable props' ); diff --git a/packages/eui/src/components/table/__snapshots__/table.test.tsx.snap b/packages/eui/src/components/table/__snapshots__/table.test.tsx.snap index afca98fa5d7..3bdee57e7ef 100644 --- a/packages/eui/src/components/table/__snapshots__/table.test.tsx.snap +++ b/packages/eui/src/components/table/__snapshots__/table.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiTable renders 1`] = `
diff --git a/packages/eui/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap b/packages/eui/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap index 1dd8c5f1b95..73a8ea95af0 100644 --- a/packages/eui/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap +++ b/packages/eui/src/components/table/__snapshots__/table_footer_cell.test.tsx.snap @@ -5,7 +5,7 @@ exports[`EuiTableFooterCell align defaults to left 1`] = `
({ `, mobile: css` flex-direction: column; - padding: 0; `, }, }); diff --git a/packages/eui/src/components/table/table.stories.tsx b/packages/eui/src/components/table/table.stories.tsx index debd090af61..76aa2e9e822 100644 --- a/packages/eui/src/components/table/table.stories.tsx +++ b/packages/eui/src/components/table/table.stories.tsx @@ -28,6 +28,7 @@ const meta: Meta = { responsiveBreakpoint: 'm', tableLayout: 'fixed', compressed: false, // TODO: Where is this prop even used, and why isn't this documented? + hasBackground: true, }, }; @@ -77,3 +78,12 @@ export const Playground: Story = { ), }; + +export const WithoutBackground: Story = { + ...Playground, + tags: ['vrt-only'], + args: { + ...Playground.args, + hasBackground: false, + }, +}; diff --git a/packages/eui/src/components/table/table.styles.ts b/packages/eui/src/components/table/table.styles.ts index 7a54b1cda2b..a52091accd5 100644 --- a/packages/eui/src/components/table/table.styles.ts +++ b/packages/eui/src/components/table/table.styles.ts @@ -56,7 +56,6 @@ export const euiTableStyles = (euiThemeContext: UseEuiTheme) => { ${logicalCSS('width', '100%')} border: none; border-collapse: collapse; - background-color: ${euiTheme.colors.emptyShade}; `, layout: { fixed: css` @@ -66,6 +65,9 @@ export const euiTableStyles = (euiThemeContext: UseEuiTheme) => { table-layout: auto; `, }, + hasBackground: css` + background-color: ${euiTheme.colors.backgroundBasePlain}; + `, /** * 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. diff --git a/packages/eui/src/components/table/table.tsx b/packages/eui/src/components/table/table.tsx index 4289adbee17..296589b4297 100644 --- a/packages/eui/src/components/table/table.tsx +++ b/packages/eui/src/components/table/table.tsx @@ -16,6 +16,7 @@ import { useIsEuiTableResponsive, EuiTableIsResponsiveContext, } from './mobile/responsive_context'; +import { EuiTableVariantContext } from './table_context'; import { euiTableStyles } from './table.styles'; export interface EuiTableProps @@ -34,8 +35,14 @@ export interface EuiTableProps responsiveBreakpoint?: EuiBreakpointSize | boolean; /** * Sets the table-layout CSS property + * @default 'fixed' */ tableLayout?: 'fixed' | 'auto'; + /** + * Toggle the table's background + * @default true + */ + hasBackground?: boolean; } export const EuiTable: FunctionComponent = ({ @@ -43,6 +50,7 @@ export const EuiTable: FunctionComponent = ({ className, compressed, tableLayout = 'fixed', + hasBackground = true, responsiveBreakpoint, // Default handled by `useIsEuiTableResponsive` ...rest }) => { @@ -56,13 +64,16 @@ export const EuiTable: FunctionComponent = ({ styles.layout[tableLayout], (!compressed || isResponsive) && styles.uncompressed, compressed && !isResponsive && styles.compressed, + hasBackground && styles.hasBackground, isResponsive ? styles.mobile : styles.desktop, ]; return ( - {children} + + {children} +
); diff --git a/packages/eui/src/components/table/table_cells_shared.styles.ts b/packages/eui/src/components/table/table_cells_shared.styles.ts index fd19e243fe5..cba67cb6435 100644 --- a/packages/eui/src/components/table/table_cells_shared.styles.ts +++ b/packages/eui/src/components/table/table_cells_shared.styles.ts @@ -58,10 +58,14 @@ export const euiTableHeaderFooterCellStyles = ( } } `, - euiTableFooterCell: css` - ${sharedStyles} - background-color: ${euiTheme.colors.lightestShade}; - `, + euiTableFooterCell: { + euiTableFooterCell: css` + ${sharedStyles} + `, + hasBackground: css` + background-color: ${euiTheme.components.tableFooterBackground}; + `, + }, }; }; diff --git a/packages/eui/src/components/table/table_context.ts b/packages/eui/src/components/table/table_context.ts new file mode 100644 index 00000000000..0c0ab003279 --- /dev/null +++ b/packages/eui/src/components/table/table_context.ts @@ -0,0 +1,13 @@ +/* + * 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 { createContext } from 'react'; + +export const EuiTableVariantContext = createContext({ + hasBackground: true, +}); diff --git a/packages/eui/src/components/table/table_footer_cell.tsx b/packages/eui/src/components/table/table_footer_cell.tsx index 0273398baa9..edaad7e9445 100644 --- a/packages/eui/src/components/table/table_footer_cell.tsx +++ b/packages/eui/src/components/table/table_footer_cell.tsx @@ -6,7 +6,7 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, TdHTMLAttributes } from 'react'; +import React, { FunctionComponent, TdHTMLAttributes, useContext } from 'react'; import classNames from 'classnames'; import { @@ -19,6 +19,7 @@ import { CommonProps } from '../common'; import { resolveWidthAsStyle } from './utils'; import { EuiTableCellContent } from './_table_cell_content'; import { euiTableHeaderFooterCellStyles } from './table_cells_shared.styles'; +import { EuiTableVariantContext } from './table_context'; export type EuiTableFooterCellProps = CommonProps & TdHTMLAttributes & { @@ -34,17 +35,18 @@ export const EuiTableFooterCell: FunctionComponent = ({ style, ...rest }) => { + const { hasBackground } = useContext(EuiTableVariantContext); + const classes = classNames('euiTableFooterCell', className); const inlineStyles = resolveWidthAsStyle(style, width); const styles = useEuiMemoizedStyles(euiTableHeaderFooterCellStyles); + const cssStyles = [ + styles.euiTableFooterCell.euiTableFooterCell, + hasBackground && styles.euiTableFooterCell.hasBackground, + ]; return ( -
+ {children} diff --git a/packages/eui/src/components/table/table_row.styles.ts b/packages/eui/src/components/table/table_row.styles.ts index 31b876f9541..090cd4ac812 100644 --- a/packages/eui/src/components/table/table_row.styles.ts +++ b/packages/eui/src/components/table/table_row.styles.ts @@ -7,10 +7,15 @@ */ import { css, keyframes } from '@emotion/react'; -import { euiShadow } from '@elastic/eui-theme-common'; +import { euiBorderStyles, euiShadow } from '@elastic/eui-theme-common'; import { UseEuiTheme } from '../../services'; -import { euiCanAnimate, logicalCSS, mathWithUnits } from '../../global_styling'; +import { + euiCanAnimate, + highContrastModeStyles, + logicalCSS, + mathWithUnits, +} from '../../global_styling'; import { cssSupportsHasWithNextSibling } from '../../global_styling/functions/supports'; import { euiTableVariables } from './table.styles'; @@ -45,10 +50,15 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => { ${markedStyles} `, - expanded: css` - background-color: ${rowColors.hover}; - ${expandedAnimationCss} - `, + expanded: { + expanded: css` + ${expandedAnimationCss} + `, + // skipping adding a css class as it's a default style when expanded + hasBackground: ` + background-color: ${rowColors.hover}; + `, + }, clickable: css` &:hover { background-color: ${rowColors.clickable.hover}; @@ -89,11 +99,6 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => { padding: ${cellContentPadding}; ${logicalCSS('margin-bottom', cellContentPadding)} - /* EuiPanel styling */ - ${euiShadow(euiThemeContext, 's', { - borderAllInHighContrastMode: true, - })} - background-color: ${euiTheme.colors.backgroundBasePlain}; border-radius: ${euiTheme.border.radius.medium}; /* :has(+) is not supported in all environments (mainly not in older jsdom versions) @@ -107,6 +112,33 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => { ` )} `, + /* Omitting adding a class via css here as it's a default style on mobile, not a standalone prop-related style. + Adding it separate allows better appliance control via props without the need to override the styles. */ + hasBorder: ` + ${highContrastModeStyles(euiThemeContext, { + // uses pseudo-border to align dimensions with shadows applied by `hasBackground` + none: ` + ${euiBorderStyles(euiThemeContext, { side: 'all' })} + transform: translateZ(0); + `, + preferred: ` + border: ${euiTheme.border.thin} + `, + })} + `, + hasBackground: css` + /* EuiPanel styling */ + ${euiShadow(euiThemeContext, 's', { + borderAllInHighContrastMode: true, + })} + background-color: ${euiTheme.colors.backgroundBasePlain}; + + ${highContrastModeStyles(euiThemeContext, { + none: ` + border: none; + `, + })} + `, selected: css` &, & + .euiTableRow-isExpandedRow { @@ -145,7 +177,7 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => { 'margin-top', mathWithUnits( [cellContentPadding, euiTheme.border.width.thin], - (x, y) => (x + y * 2) * -1 + (x, y) => (x + y) * -1 ) )} /* Padding accounting for the checkbox is already applied via the content */ diff --git a/packages/eui/src/components/table/table_row.tsx b/packages/eui/src/components/table/table_row.tsx index a1aab38a556..99d9492a45d 100644 --- a/packages/eui/src/components/table/table_row.tsx +++ b/packages/eui/src/components/table/table_row.tsx @@ -12,12 +12,14 @@ import React, { KeyboardEvent, KeyboardEventHandler, MouseEventHandler, + useContext, } from 'react'; import classNames from 'classnames'; import { CommonProps } from '../common'; import { keys, useEuiMemoizedStyles } from '../../services'; import { useEuiTableIsResponsive } from './mobile/responsive_context'; +import { EuiTableVariantContext } from './table_context'; import { euiTableRowStyles } from './table_row.styles'; export interface EuiTableRowProps { @@ -68,11 +70,14 @@ export const EuiTableRow: FunctionComponent = ({ ...rest }) => { const isResponsive = useEuiTableIsResponsive(); + const { hasBackground } = useContext(EuiTableVariantContext); const styles = useEuiMemoizedStyles(euiTableRowStyles); const cssStyles = isResponsive ? [ styles.euiTableRow, styles.mobile.mobile, + !hasBackground && styles.mobile.hasBorder, + hasBackground && styles.mobile.hasBackground, isSelected && styles.mobile.selected, isExpandedRow && styles.mobile.expanded, (hasActions === true || isExpandable || isExpandedRow) && @@ -84,7 +89,8 @@ export const EuiTableRow: FunctionComponent = ({ styles.desktop.desktop, onClick && styles.desktop.clickable, isSelected && styles.desktop.selected, - isExpandedRow && styles.desktop.expanded, + isExpandedRow && styles.desktop.expanded.expanded, + isExpandedRow && hasBackground && styles.desktop.expanded.hasBackground, isExpandedRow && hasSelection && styles.desktop.checkboxOffset, ]; diff --git a/packages/eui/src/components/table/table_row_cell.styles.ts b/packages/eui/src/components/table/table_row_cell.styles.ts index 850dc0371a0..00cc96d809b 100644 --- a/packages/eui/src/components/table/table_row_cell.styles.ts +++ b/packages/eui/src/components/table/table_row_cell.styles.ts @@ -99,12 +99,17 @@ export const euiTableRowCellStyles = (euiThemeContext: UseEuiTheme) => { return css` ${this.rightColumnContent} ${logicalCSS('top', mobileSizes.actions.offset)} + + /* Handled here to ensure a stable Emotion style order + See https://github.com/elastic/eui/issues/8231 */ + .euiTableCellContent { + padding: 0; + } `; }, get expander() { return css` ${this.rightColumnContent} - ${logicalCSS('bottom', mobileSizes.actions.offset)} `; }, /** @@ -140,7 +145,7 @@ export const euiTableRowCellStyles = (euiThemeContext: UseEuiTheme) => { }).fontSize}; display: block; - color: ${euiTheme.colors.darkShade}; + color: ${euiTheme.colors.textSubdued}; padding: ${euiTheme.size.s}; /* Pull up cell content closer */ padding-block-end: 0;