diff --git a/packages/core/API.md b/packages/core/API.md index b611871be..dabe925b2 100644 --- a/packages/core/API.md +++ b/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 | diff --git a/packages/core/src/common/styles.ts b/packages/core/src/common/styles.ts index fa4a2e4b8..27cb024e0 100644 --- a/packages/core/src/common/styles.ts +++ b/packages/core/src/common/styles.ts @@ -17,6 +17,8 @@ export function makeCSSStyle(theme: Theme): Record { "--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; diff --git a/packages/core/src/docs/08-theming.stories.tsx b/packages/core/src/docs/08-theming.stories.tsx index d80a0147c..337ee731c 100644 --- a/packages/core/src/docs/08-theming.stories.tsx +++ b/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 {` -return `} @@ -376,7 +378,7 @@ const getContent = React.useCallback((cell: Item): GridCell => { textDark: "#FF0000", } } - + const d = getDataForCell(col, row); return { kind: GridCellKind.Text, diff --git a/packages/core/src/internal/data-grid/render/data-grid-render.header.ts b/packages/core/src/internal/data-grid/render/data-grid-render.header.ts index b5fce8944..2ff0970ed 100644 --- a/packages/core/src/internal/data-grid/render/data-grid-render.header.ts +++ b/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();