From 8f79d4a8aafb123f75f420a3adf3f680386aae68 Mon Sep 17 00:00:00 2001
From: Doma <leishenghao@126.com>
Date: Tue, 21 Dec 2021 19:01:38 +0800
Subject: [PATCH] fix(Sidenav): fix missing highlight on selected dropdown
 items (#2216)

---
 src/Sidenav/styles/index.less         |  3 +-
 src/Sidenav/test/SidenavStylesSpec.js | 52 +++++++++++++++++++++++----
 test/testUtils.js                     |  7 +++-
 3 files changed, 52 insertions(+), 10 deletions(-)

diff --git a/src/Sidenav/styles/index.less b/src/Sidenav/styles/index.less
index 8a45aa51a..373aa3f97 100644
--- a/src/Sidenav/styles/index.less
+++ b/src/Sidenav/styles/index.less
@@ -437,7 +437,6 @@
 
 .rs-sidenav-default.rs-sidenav-collapse-in,
 .rs-sidenav-default.rs-sidenav-collapsing {
-  .rs-dropdown-item:not(.rs-dropdown-item-submenu),
   .rs-dropdown-item > .rs-dropdown-menu-toggle,
   .rs-dropdown-item > .rs-dropdown-item-toggle {
     color: var(--rs-sidenav-default-text);
@@ -544,6 +543,7 @@
 
   // Active
   .rs-sidenav-item.rs-sidenav-item-active,
+  .rs-dropdown-item.rs-dropdown-item-active,
   .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
     color: var(--rs-sidenav-subtle-selected-text);
   }
@@ -560,7 +560,6 @@
 
 .rs-sidenav-subtle.rs-sidenav-collapse-in,
 .rs-sidenav-subtle.rs-sidenav-collapsing {
-  .rs-dropdown-item:not(.rs-dropdown-item-submenu),
   .rs-dropdown-item > .rs-dropdown-menu-toggle,
   .rs-dropdown-item > .rs-dropdown-item-toggle {
     color: var(--rs-sidenav-subtle-text);
diff --git a/src/Sidenav/test/SidenavStylesSpec.js b/src/Sidenav/test/SidenavStylesSpec.js
index 81756d549..661858481 100644
--- a/src/Sidenav/test/SidenavStylesSpec.js
+++ b/src/Sidenav/test/SidenavStylesSpec.js
@@ -1,15 +1,53 @@
 import React from 'react';
 import { render } from '@testing-library/react';
-import Sidenav from '../index';
-import { getDOMNode, getStyle } from '@test/testUtils';
+import { getDOMNode, getStyle, getDefaultPalette } from '@test/testUtils';
+import Nav from '../../Nav';
+import Dropdown from '../../Dropdown';
+import Sidenav from '../Sidenav';
 
 import '../styles/index.less';
 
 describe('Sidenav styles', () => {
-  it('Should render the correct styles', () => {
-    const instanceRef = React.createRef();
-    render(<Sidenav ref={instanceRef} expanded={false} />);
-    const dom = getDOMNode(instanceRef.current);
-    assert.equal(getStyle(dom, 'width'), '56px', 'Sidenav width');
+  context('Default', () => {
+    it('Should render the correct styles', () => {
+      const instanceRef = React.createRef();
+      render(<Sidenav ref={instanceRef} expanded={false} />);
+      const dom = getDOMNode(instanceRef.current);
+      assert.equal(getStyle(dom, 'width'), '56px', 'Sidenav width');
+    });
+
+    it('Should highlight selected dropdown item', () => {
+      const { getByTestId } = render(
+        <Sidenav>
+          <Nav>
+            <Dropdown title="Dropdown">
+              <Dropdown.Item data-testid="item" active>
+                Dropdown Item
+              </Dropdown.Item>
+            </Dropdown>
+          </Nav>
+        </Sidenav>
+      );
+
+      expect(getByTestId('item')).to.have.style('color', getDefaultPalette('H700'));
+    });
+  });
+
+  context('Subtle', () => {
+    it('Should highlight selected dropdown item', () => {
+      const { getByTestId } = render(
+        <Sidenav appearance="subtle">
+          <Nav>
+            <Dropdown title="Dropdown">
+              <Dropdown.Item data-testid="item" active>
+                Dropdown Item
+              </Dropdown.Item>
+            </Dropdown>
+          </Nav>
+        </Sidenav>
+      );
+
+      expect(getByTestId('item')).to.have.style('color', getDefaultPalette('H700'));
+    });
   });
 });
diff --git a/test/testUtils.js b/test/testUtils.js
index e767c9f41..c9d284564 100644
--- a/test/testUtils.js
+++ b/test/testUtils.js
@@ -12,7 +12,12 @@ export const globalKey = 'rs';
 const DEFAULT_PRIMARY_COLOR = '#3498ff';
 const DARK_PRIMARY_COLOR = '#34c3ff';
 
-export const getDefaultPalette = () => getPalette(DEFAULT_PRIMARY_COLOR);
+export const getDefaultPalette = key => {
+  if (!key) {
+    return getPalette(DEFAULT_PRIMARY_COLOR);
+  }
+  return getDefaultPalette()[key];
+};
 export const getDarkPalette = () => getPalette(DARK_PRIMARY_COLOR);
 
 /**