fix(styling): add Dark Mode CSS class to Header Menu (#1589)

* fix(styling): add Dark Mode CSS class to Header Menu - Header Menu wasn't always picking up dark mode styling especially when having multiple dark themes like in Slickgrid-Universal Material/Salesforce
ghiscoding · Jul 1, 2024 · 3399ae8 · 3399ae8
1 parent 44fd11b
commit 3399ae8
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 3 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/material-styles.scss b/examples/vite-demo-vanilla-bundle/src/material-styles.scss
@@ -118,10 +118,10 @@
       }
     }
 
-    [data-theme="dark"] .slick-submenu,
     .ms-dark-mode,
     .ms-drop.ms-dark-mode,
     .slick-dark-mode .ms-dark-mode,
+    .slick-dark-mode .slick-submenu,
     .slick-dark-mode .icon-checkbox-container,
     .ms-dark-mode .icon-checkbox-container,
     .slick-dark-mode {
@@ -177,11 +177,11 @@
     }
   }
 
-  body.material-theme[data-theme="dark"] .slick-submenu,
   body.material-theme .ms-dark-mode,
   body.material-theme .ms-drop.ms-dark-mode,
-  body.material-theme .slick-dark-mode .ms-dark-mode,
   body.material-theme .slick-dark-mode,
+  body.material-theme .slick-dark-mode .ms-dark-mode,
+  body.material-theme .slick-dark-mode .slick-submenu,
   body.material-theme .dark-mode .text-color-primary {
     --slick-primary-color: #66bb6a;
     --slick-menu-color: #ededed;

diff --git a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts
@@ -748,6 +748,10 @@ describe('HeaderMenu Plugin', () => {
         const onCommandMock = jest.fn();
         Object.defineProperty(document.documentElement, 'clientWidth', { writable: true, configurable: true, value: 50 });
         jest.spyOn(gridStub, 'getColumns').mockReturnValueOnce(columnsMock);
+        jest.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValueOnce({
+          ...gridOptionsMock,
+          darkMode: true,
+        });
 
         plugin.init({ autoAlign: true });
         plugin.addonOptions.onCommand = onCommandMock;
@@ -785,6 +789,7 @@ describe('HeaderMenu Plugin', () => {
 
         expect(headerMenu2Elm2.classList.contains('dropup')).toBeTruthy();
         expect(headerMenu2Elm2.classList.contains('dropdown')).toBeFalsy();
+        expect(headerMenu2Elm2.classList.contains('slick-dark-mode')).toBeTruthy();
 
         // cell click should close it
         gridStub.onClick.notify({ row: 1, cell: 2, grid: gridStub }, eventData as any, gridStub);

diff --git a/packages/common/src/extensions/slickHeaderMenu.ts b/packages/common/src/extensions/slickHeaderMenu.ts
@@ -620,11 +620,16 @@ export class SlickHeaderMenu extends MenuBaseClass<HeaderMenu> {
       className: menuClasses,
       style: { minWidth: `${this.addonOptions.minWidth}px` },
     });
+
     if (level > 0) {
       menuElm.classList.add('slick-submenu');
       if (subMenuId) {
         menuElm.dataset.subMenuParent = subMenuId;
       }
+      // add dark mode CSS class when enabled
+      if (this.gridOptions?.darkMode) {
+        menuElm.classList.add('slick-dark-mode');
+      }
     }
 
     const commandMenuElm = createDomElement('div', { className: `${this._menuCssPrefix}-command-list`, role: 'menu' }, menuElm);

diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss
@@ -96,6 +96,7 @@ $slick-dark-text-color:                                   #d4d4d4;
 .ms-dark-mode,
 .ms-drop.ms-dark-mode,
 .slick-dark-mode .ms-dark-mode,
+.slick-dark-mode .slick-submenu,
 .slick-dark-mode .icon-checkbox-container,
 .slick-dark-mode {
   --slick-base-dark-menu-bg-color:                #212121;

diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -130,6 +130,7 @@ $slick-dark-base-dark-menu-bg-color:                      #212121;
 .ms-dark-mode,
 .ms-drop.ms-dark-mode,
 .slick-dark-mode .ms-dark-mode,
+.slick-dark-mode .slick-submenu,
 .slick-dark-mode .icon-checkbox-container,
 .slick-dark-mode {
   --ms-checkbox-color:                      #66b8ff;

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -971,6 +971,7 @@ $slick-dark-text-color:                                   #d4d4d4;
 .ms-dark-mode,
 .ms-drop.ms-dark-mode,
 .slick-dark-mode .ms-dark-mode,
+.slick-dark-mode .slick-submenu,
 .slick-dark-mode {
   // local common CSS vars for dark mode
   --slick-primary-color:                                  #{$slick-dark-primary-color};