[EuiBasicTable][EuiDataGrid] Add marked row styling

packages/eui-theme-borealis/changelogs/upcoming/8834.md

@@ -0,0 +1,9 @@
+- Added component tokens:
+  - `dataGridRowBackgroundMarked`
+  - `dataGridRowBackgroundMarkedHover`
+  - `dataGridRowBorderActive`
+  - `dataGridRowBorderHover`
+  - `dataGridRowBorderMarked`
+  - `tableRowBackgroundMarked`
+  - `tableRowBackgroundMarkedHover`
+

packages/eui-theme-borealis/src/variables/_components.ts

@@ -136,6 +136,21 @@ const component_colors: _EuiThemeComponentColors = {
       backgroundBaseInteractiveSelectHover,
     ['colors.backgroundBaseInteractiveSelectHover']
   ),
+  dataGridRowBackgroundMarked: SEMANTIC_COLORS.warning10,
+  dataGridRowBackgroundMarkedHover: SEMANTIC_COLORS.warning20,
+
+  dataGridRowBorderActive: computed(
+    ([borderStrongPrimary]) => borderStrongPrimary,
+    ['colors.borderStrongPrimary']
+  ),
+  dataGridRowBorderHover: computed(
+    ([borderStrongText]) => borderStrongText,
+    ['colors.borderStrongText']
+  ),
+  dataGridRowBorderMarked: computed(
+    ([borderStrongWarning]) => borderStrongWarning,
+    ['colors.borderStrongWarning']
+  ),
 
   dataGridRowStripesBackground: computed(
     ([backgroundBasePlain]) => backgroundBasePlain,
@@ -332,6 +347,8 @@ const component_colors: _EuiThemeComponentColors = {
     ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover,
     ['colors.backgroundBaseInteractiveHover']
   ),
+  tableRowBackgroundMarked: SEMANTIC_COLORS.warning10,
+  tableRowBackgroundMarkedHover: SEMANTIC_COLORS.warning20,
   tableCellSortableIconColor: computed(
     ([backgroundFilledText]) => backgroundFilledText,
     ['colors.backgroundFilledText']
@@ -364,6 +381,9 @@ export const components: _EuiThemeComponents = {
 
     buttonGroupFocusColor: SEMANTIC_COLORS.plainLight,
 
+    dataGridRowBackgroundMarked: SEMANTIC_COLORS.warning140,
+    dataGridRowBackgroundMarkedHover: SEMANTIC_COLORS.warning130,
+
     codeInlineBackground: SEMANTIC_COLORS.shade135,
     codeInlineColor: SEMANTIC_COLORS.assistance60,
     codeStringColor: SEMANTIC_COLORS.accent60,
@@ -405,5 +425,7 @@ export const components: _EuiThemeComponents = {
       ([backgroundBaseInteractiveHover]) => backgroundBaseInteractiveHover,
       ['colors.backgroundBaseInteractiveHover']
     ),
+    tableRowBackgroundMarked: SEMANTIC_COLORS.warning140,
+    tableRowBackgroundMarkedHover: SEMANTIC_COLORS.warning130,
   },
 };

packages/eui-theme-common/changelogs/upcoming/8834.md

@@ -0,0 +1,9 @@
+- Added component token types:
+  - `dataGridRowBackgroundMarked`
+  - `dataGridRowBackgroundMarkedHover`
+  - `dataGridRowBorderActive`
+  - `dataGridRowBorderHover`
+  - `dataGridRowBorderMarked`
+  - `tableRowBackgroundMarked`
+  - `tableRowBackgroundMarkedHover`
+

packages/eui-theme-common/src/global_styling/variables/components.ts

@@ -64,6 +64,11 @@ export type _EuiThemeComponentColors = {
   dataGridRowBackgroundHover: ColorModeSwitch;
   dataGridRowBackgroundSelect: ColorModeSwitch;
   dataGridRowBackgroundSelectHover: ColorModeSwitch;
+  dataGridRowBackgroundMarked: ColorModeSwitch;
+  dataGridRowBackgroundMarkedHover: ColorModeSwitch;
+  dataGridRowBorderActive: ColorModeSwitch;
+  dataGridRowBorderHover: ColorModeSwitch;
+  dataGridRowBorderMarked: ColorModeSwitch;
   dataGridRowStripesBackground: ColorModeSwitch;
   dataGridRowStripesBackgroundHover: ColorModeSwitch;
   dataGridRowStripesBackgroundStriped: ColorModeSwitch;
@@ -136,6 +141,8 @@ export type _EuiThemeComponentColors = {
   tableRowBackgroundSelectedHover: ColorModeSwitch;
   tableRowInteractiveBackgroundHover: ColorModeSwitch;
   tableRowInteractiveBackgroundFocus: ColorModeSwitch;
+  tableRowBackgroundMarked: ColorModeSwitch;
+  tableRowBackgroundMarkedHover: ColorModeSwitch;
   tableCellSortableIconColor: ColorModeSwitch;
 
   tooltipBackground: ColorModeSwitch;

packages/eui/changelogs/upcoming/8834.md

@@ -0,0 +1,10 @@
+- Added marked row styling via the classes `euiDataGridRow--marked` and `euiTableRow--marked` for `EuiDataGrid` and `EuiBasicTable` 
+- Added component tokens:
+  - `dataGridRowBackgroundMarked`
+  - `dataGridRowBackgroundMarkedHover`
+  - `dataGridRowBorderActive`
+  - `dataGridRowBorderHover`
+  - `dataGridRowBorderMarked`
+  - `tableRowBackgroundMarked`
+  - `tableRowBackgroundMarkedHover`
+

packages/eui/src/components/basic_table/basic_table.stories.tsx

@@ -76,7 +76,7 @@ for (let i = 0; i < 5; i++) {
     id: i + 1,
     firstName: faker.person.firstName(),
     lastName: faker.person.lastName(),
-    online: faker.datatype.boolean(),
+    online: i === 0 ? true : faker.datatype.boolean(),
     location: {
       city: faker.location.city(),
       country: faker.location.country(),
@@ -248,6 +248,29 @@ export const Playground: Story = {
   render: (args: EuiBasicTableProps<User>) => <StatefulPlayground {...args} />,
 };
 
+export const MarkedRow: Story = {
+  ...Playground,
+  parameters: {
+    codeSnippet: {
+      snippet: `
+      <EuiBasicTable rowProps={(user: User) => ({
+        className: user.online ? 'euiTableRow--marked' : '',
+      })}  />`,
+    },
+    controls: {
+      include: ['rowProps', 'columns', 'items'],
+    },
+  },
+  args: {
+    ...Playground.args,
+    rowProps: (user: User) => ({
+      className: user.online ? 'euiTableRow--marked' : '',
+      onClick: () => {},
+    }),
+  },
+  render: (args: EuiBasicTableProps<User>) => <StatefulPlayground {...args} />,
+};
+
 export const ExpandedRow: Story = {
   parameters: {
     controls: {

packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.ts

@@ -16,8 +16,9 @@ import {
 } from '../../../../global_styling';
 
 export const euiDataGridCellOutlineStyles = ({ euiTheme }: UseEuiTheme) => {
-  const focusColor = euiTheme.colors.borderStrongPrimary;
-  const hoverColor = euiTheme.colors.borderStrongText;
+  const focusColor = euiTheme.components.dataGridRowBorderActive;
+  const hoverColor = euiTheme.components.dataGridRowBorderHover;
+  const markedColor = euiTheme.components.dataGridRowBorderMarked;
   const outlineWidth = euiTheme.border.width.thick;
   const borderRadius = mathWithUnits(
     euiTheme.border.radius.medium,
@@ -53,6 +54,18 @@ export const euiDataGridCellOutlineStyles = ({ euiTheme }: UseEuiTheme) => {
         border-color: ${hoverColor};
       }
     `,
+    markedColor,
+    // marked styles are used in `data_grid.styles.ts`
+    markedStyles: `
+      &::after {
+        border-color: ${markedColor};
+      }
+
+      .euiDataGridRowCell__actions {
+        background-color: ${markedColor};
+        border-color: ${markedColor};
+      }
+    `,
   };
 };
 
@@ -84,6 +97,7 @@ export const euiDataGridCellOutlineSelectors = (parentSelector = '&') => {
       show: is(selectors(hover, focus, isOpen, isEntered)),
       hover: hoverNot(selectors(focus, focusWithin, isOpen)),
       focusTrapped: _(isEntered),
+      marked: is(selectors(focus, isOpen)),
     },
 
     actions: {

packages/eui/src/components/datagrid/data_grid.styles.ts

@@ -16,6 +16,10 @@ import {
   mathWithUnits,
 } from '../../global_styling';
 import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
+import {
+  euiDataGridCellOutlineSelectors,
+  euiDataGridCellOutlineStyles,
+} from './body/cell/data_grid_cell.styles';
 
 export const euiDataGridVariables = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -47,6 +51,7 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme, highContrastMode } = euiThemeContext;
   const { cellPadding, lineHeight, fontSize } =
     euiDataGridVariables(euiThemeContext);
+  const { outline: outlineSelectors } = euiDataGridCellOutlineSelectors();
 
   const borderColors = {
     default: highContrastMode
@@ -79,13 +84,30 @@ export const euiDataGridStyles = (euiThemeContext: UseEuiTheme) => {
         background-color: ${euiTheme.components.dataGridRowBackgroundHover};
       }
 
-      /* The euiDataGridRow--selected class is not used internally,
-       * it's there for convenience, to be used by consumers */
+      /* The euiDataGridRow--selected and euiDataGridRow--marked classes are not used internally,
+       * they're there for convenience, to be used by consumers */
 
       *:where(& .euiDataGridRow--selected) {
         background-color: ${euiTheme.components.dataGridRowBackgroundSelect};
       }
 
+      *:where(& .euiDataGridRow--marked) {
+        background-color: ${euiTheme.components.dataGridRowBackgroundMarked};
+
+        &:hover {
+          background-color: ${euiTheme.components
+            .dataGridRowBackgroundMarkedHover};
+        }
+
+        /* class duplication to ensure default styles are overriden based on specificity
+        (marked styles are defined here instead of the cell styles due to the scope of the marked row class) */
+        .euiDataGridRowCell.euiDataGridRowCell {
+          ${outlineSelectors.marked} {
+            ${euiDataGridCellOutlineStyles(euiThemeContext).markedStyles}
+          }
+        }
+      }
+
       *:where(
           &.euiDataGrid--rowHoverHighlight .euiDataGridRow--selected:hover
         ) {

packages/eui/src/components/datagrid/data_grid_styles.stories.tsx

@@ -62,6 +62,32 @@ export const Playground: Story = {
 };
 enableFunctionToggleControls(Playground, ['onChange']);
 
+export const MarkedRow: Story = {
+  parameters: {
+    codeSnippet: {
+      snippet: `
+        <EuiDataGrid gridStyle={{
+          rowClasses: {
+            1: 'euiDataGridRow--marked',
+          },
+        }} />
+      `,
+    },
+    controls: { sort: 'none' },
+  },
+  args: {
+    ...Playground.args,
+    stripes: false,
+    rowClasses: {
+      1: 'euiDataGridRow--marked',
+    },
+  },
+  render: (gridStyle: EuiDataGridStyle) => (
+    <StatefulDataGrid {...storyArgs} gridStyle={gridStyle} />
+  ),
+};
+enableFunctionToggleControls(MarkedRow, ['onChange']);
+
 /**
  * VRT only
  */

packages/eui/src/components/table/table_row.styles.ts

@@ -24,14 +24,26 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
   const { cellContentPadding, mobileSizes, checkboxSize } =
     euiTableVariables(euiThemeContext);
 
+  const markedStyles = `
+    :where(&.euiTableRow--marked):hover {
+      background-color: ${rowColors.marked.hover};
+    }
+  `;
+
   return {
-    euiTableRow: css``,
+    euiTableRow: css`
+      :where(&.euiTableRow--marked) {
+        background-color: ${rowColors.marked.background};
+      }
+    `,
 
     desktop: {
       desktop: css`
         &:hover {
           background-color: ${rowColors.hover};
         }
+
+        ${markedStyles}
       `,
       expanded: css`
         background-color: ${rowColors.hover};
@@ -43,14 +55,16 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
           cursor: pointer;
         }
 
+        ${markedStyles}
+
         &:focus {
           background-color: ${rowColors.clickable.focus};
         }
       `,
       selected: css`
         &,
         & + .euiTableRow-isExpandedRow {
-          background-color: ${rowColors.selected.color};
+          background-color: ${rowColors.selected.background};
         }
 
         &:hover,
@@ -96,7 +110,7 @@ export const euiTableRowStyles = (euiThemeContext: UseEuiTheme) => {
       selected: css`
         &,
         & + .euiTableRow-isExpandedRow {
-          background-color: ${rowColors.selected.color};
+          background-color: ${rowColors.selected.background};
         }
       `,
       /**
@@ -179,11 +193,15 @@ const _expandedRowAnimation = ({ euiTheme }: UseEuiTheme) => {
 const _rowColorVariables = ({ euiTheme }: UseEuiTheme) => ({
   hover: euiTheme.components.tableRowBackgroundHover,
   selected: {
-    color: euiTheme.components.tableRowBackgroundSelected,
+    background: euiTheme.components.tableRowBackgroundSelected,
     hover: euiTheme.components.tableRowBackgroundSelectedHover,
   },
   clickable: {
     hover: euiTheme.components.tableRowInteractiveBackgroundHover,
     focus: euiTheme.components.tableRowInteractiveBackgroundFocus,
   },
+  marked: {
+    background: euiTheme.components.tableRowBackgroundMarked,
+    hover: euiTheme.components.tableRowBackgroundMarkedHover,
+  },
 });

packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts

@@ -191,6 +191,26 @@ const component_colors: _EuiThemeComponentColors = {
     ([highlight]) => highlight,
     ['colors.highlight']
   ),
+  dataGridRowBackgroundMarked: computed(
+    ([highlight]) => highlight,
+    ['colors.highlight']
+  ),
+  dataGridRowBackgroundMarkedHover: computed(
+    ([highlight]) => highlight,
+    ['colors.highlight']
+  ),
+  dataGridRowBorderActive: computed(
+    ([borderStrongPrimary]) => borderStrongPrimary,
+    ['colors.borderStrongPrimary']
+  ),
+  dataGridRowBorderHover: computed(
+    ([borderStrongText]) => borderStrongText,
+    ['colors.borderStrongText']
+  ),
+  dataGridRowBorderMarked: computed(
+    ([borderStrongPrimary]) => borderStrongPrimary,
+    ['colors.borderStrongPrimary']
+  ),
   dataGridRowStripesBackground: computed(
     ([emptyShade]) => emptyShade,
     ['colors.emptyShade']
@@ -404,6 +424,14 @@ const component_colors: _EuiThemeComponentColors = {
     ([primary]) => transparentize(primary, 0.1),
     ['colors.primary']
   ),
+  tableRowBackgroundMarked: computed(
+    ([highlight]) => highlight,
+    ['colors.highlight']
+  ),
+  tableRowBackgroundMarkedHover: computed(
+    ([highlight]) => highlight,
+    ['colors.highlight']
+  ),
   tableCellSortableIconColor: computed(
     ([emptyShade, subduedText]) => {
       const color = tint(subduedText, 0.9);