From ab0215d039beea2de9321369c601d8d1e35d6bf7 Mon Sep 17 00:00:00 2001
From: Zhihao Cui <5257855+origami-z@users.noreply.github.com>
Date: Tue, 20 Aug 2024 11:07:49 +0100
Subject: [PATCH] Fix ag grid header text color when column menu is open
 (#3886)

---
 .changeset/fluffy-eyes-sin.md                               | 5 +++++
 packages/ag-grid-theme/css/salt-ag-grid-theme.css           | 3 +++
 packages/ag-grid-theme/stories/ag-grid-theme.qa.stories.tsx | 2 --
 3 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fluffy-eyes-sin.md

diff --git a/.changeset/fluffy-eyes-sin.md b/.changeset/fluffy-eyes-sin.md
new file mode 100644
index 00000000000..6b2f97cae5a
--- /dev/null
+++ 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
index 59ad11accdc..3a84d7ad23d 100644
--- 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
index 59e48087b5d..a09d62acd12 100644
--- 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")!;