Fix ag grid header text color when column menu is open (#3886)

jpmorganchase · Aug 20, 2024 · ab0215d · ab0215d
1 parent 3ff4448
commit ab0215d
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/.changeset/fluffy-eyes-sin.md b/.changeset/fluffy-eyes-sin.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/ag-grid-theme": patch
+---
+
+Fixed header text and icon color when column menu is open
diff --git a/packages/ag-grid-theme/css/salt-ag-grid-theme.css b/packages/ag-grid-theme/css/salt-ag-grid-theme.css
@@ -150,10 +150,13 @@ div[class*="ag-theme-salt"] .ag-floating-filter input[class^="ag-"][type="number
 }
 
 div[class*="ag-theme-salt"] .ag-header-cell:not(.ag-column-resizing) + .ag-header-cell.ag-column-menu-visible:not(.ag-column-hover):not(.ag-header-cell-moving):hover,
+div[class*="ag-theme-salt"] .ag-header-cell:not(.ag-column-hover):first-of-type:not(.ag-header-cell-moving).ag-column-menu-visible:hover,
 div[class*="ag-theme-salt"] .ag-header-cell.ag-column-menu-visible {
   /* When menu is visible, change bg and fg */
   background: var(--salt-actionable-secondary-background-active);
   color: var(--salt-actionable-secondary-foreground-active);
+  /* Color for menu / filter icons */
+  --ag-icon-font-color: var(--salt-actionable-secondary-foreground-active);
 }
 
 div[class*="ag-theme-salt"] .ag-header-cell.ag-column-menu-visible .ag-icon {

diff --git a/packages/ag-grid-theme/stories/ag-grid-theme.qa.stories.tsx b/packages/ag-grid-theme/stories/ag-grid-theme.qa.stories.tsx
@@ -59,8 +59,6 @@ HeaderTooltip.play = async ({ canvasElement }) => {
   // Do findAll here so this will also work in `side-by-side` mode
   const headerCells = await canvas.findAllByText("Capital");
 
-  console.log(headerCells);
-
   for (const cell of headerCells) {
     const gridRoot: HTMLElement = cell.closest(".ag-root-wrapper")!;