fix(Sidenav): fix missing highlight on selected dropdown items (#2216)

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);

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'));
+    });
   });
 });

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);
 
 /**