Support group header hover and regular bg (#927)

* feat: support group header hover and regular bg

* chore: remove storybook override

* Fix merge conflicts

* Revert

* Update implementation

* Minor change

---------

Co-authored-by: lukasmasuch <[email protected]>

Author: rferreira98

packages/core/API.md

@@ -371,6 +371,8 @@ The data grid uses the `Theme` provided to the DataEditer in the `theme` prop. T
 | bgHeader              | string              | --gdg-bg-header               | The header background color                                                                       |
 | bgHeaderHasFocus      | string              | --gdg-bg-header-has           | The header background color when its column contains the selected cell                            |
 | bgHeaderHovered       | string              | --gdg-bg-header-hovered       | The header background color when it is hovered                                                    |
+| bgGroupHeader         | string \| undefined | --gdg-bg-group-header         | The group header background color, if none provided the `bgHeader` is used instead.               |
+| bgGroupHeaderHovered  | string \| undefined | --gdg-bg-group-header-hovered | The group header background color when it is hovered, if none provided the `bgHeaderHovered` is used instead. |
 | bgBubble              | string              | --gdg-bg-bubble               | The background color used in bubbles                                                              |
 | bgBubbleSelected      | string              | --gdg-bg-bubble-selected      | The background color used in bubbles when the cell is selected                                    |
 | bgSearchResult        | string              | --gdg-bg-search-result        | The background color used for cells which match the search string                                 |

packages/core/src/common/styles.ts

@@ -17,6 +17,8 @@ export function makeCSSStyle(theme: Theme): Record<string, string> {
         "--gdg-fg-icon-header": theme.fgIconHeader,
         "--gdg-text-header": theme.textHeader,
         "--gdg-text-group-header": theme.textGroupHeader ?? theme.textHeader,
+        "--gdg-bg-group-header": theme.bgGroupHeader ?? theme.bgHeader,
+        "--gdg-bg-group-header-hovered": theme.bgGroupHeaderHovered ?? theme.bgHeaderHovered,
         "--gdg-text-header-selected": theme.textHeaderSelected,
         "--gdg-bg-cell": theme.bgCell,
         "--gdg-bg-cell-medium": theme.bgCellMedium,
@@ -60,6 +62,8 @@ export interface Theme {
     fgIconHeader: string;
     textHeader: string;
     textGroupHeader?: string;
+    bgGroupHeader?: string;
+    bgGroupHeaderHovered?: string;
     textHeaderSelected: string;
     bgCell: string;
     bgCellMedium: string;

packages/core/src/docs/08-theming.stories.tsx

@@ -254,7 +254,9 @@ The global theme is provided by the DataEditor by default and can be overriden b
 | bgIconHeader | --gdg-bg-icon-header | string | The background color for header icons |
 | fgIconHeader | --gdg-fg-icon-header | string | The foreground color for header icons |
 | textHeader | --gdg-text-header | string | The header text color |
-| textGroupHeader | --gdg-text-group-header | string \\| undefined | The group header text color, if none provided the \`textHeader\` is used instead. |
+| bgGroupHeader | --gdg-bg-group-header | string | The group header background color, if none provided the \`bgHeader\` is used instead. |
+| bgGroupHeaderHovered | --gdg-bg-group-header-hovered | string | The group header background color when it is hovered, if none provided the \`bgHeaderHovered\` is used instead. |
+| textGroupHeader | --gdg-text-group-header | string | The group header text color, if none provided the \`textHeader\` is used instead. |
 | textHeaderSelected | --gdg-text-header-selected | string | The text color used for selected headers |
 | bgCell | --gdg-bg-cell | string | The primary background color of the data grid. |
 | bgCellMedium | --gdg-bg-cell-medium | string | Used for disabled or otherwise off colored cells. |
@@ -281,10 +283,10 @@ If an option is missing from any theme it will be filled in with the default the
             </Marked>
             <Highlight>
                 {`
-return <DataEditor 
+return <DataEditor
         theme={{
           bgCell: "#F2F9FF"
-        }} 
+        }}
         getCellContent={getContent} columns={columns} rows={data.length} />
 `}
             </Highlight>
@@ -376,7 +378,7 @@ const getContent = React.useCallback((cell: Item): GridCell => {
             textDark: "#FF0000",
         }
     }
-    
+
     const d = getDataForCell(col, row);
     return {
         kind: GridCellKind.Text,

packages/core/src/internal/data-grid/render/data-grid-render.header.ts

@@ -5,14 +5,14 @@ import type { HoverValues } from "../animation-manager.js";
 import type { CellSet } from "../cell-set.js";
 import { withAlpha } from "../color-parser.js";
 import type { SpriteManager, SpriteVariant } from "../data-grid-sprites.js";
-import { type DrawHeaderCallback, type Rectangle, GridColumnMenuIcon, type GridSelection } from "../data-grid-types.js";
+import { GridColumnMenuIcon, type DrawHeaderCallback, type GridSelection, type Rectangle } from "../data-grid-types.js";
 import {
     drawMenuDots,
+    getMeasuredTextCache,
     getMiddleCenterBias,
+    measureTextCached,
     roundedPoly,
     type MappedGridColumn,
-    measureTextCached,
-    getMeasuredTextCache,
 } from "./data-grid-lib.js";
 import type { GroupDetails, GroupDetailsCallback } from "./data-grid-render.cells.js";
 import { walkColumns, walkGroups } from "./data-grid-render.walk.js";
@@ -185,8 +185,10 @@ export function drawGroups(
         const groupTheme =
             group?.overrideTheme === undefined ? theme : mergeAndRealizeTheme(theme, group.overrideTheme);
         const isHovered = hRow === -2 && hCol !== undefined && hCol >= span[0] && hCol <= span[1];
+        const fillColor = isHovered
+            ? groupTheme.bgGroupHeaderHovered ?? groupTheme.bgHeaderHovered
+            : groupTheme.bgGroupHeader ?? groupTheme.bgHeader;
 
-        const fillColor = isHovered ? groupTheme.bgHeaderHovered : groupTheme.bgHeader;
         if (fillColor !== theme.bgHeader) {
             ctx.fillStyle = fillColor;
             ctx.fill();