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();
- 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();
+ const dom = getDOMNode(instanceRef.current);
+ assert.equal(getStyle(dom, 'width'), '56px', 'Sidenav width');
+ });
+
+ it('Should highlight selected dropdown item', () => {
+ const { getByTestId } = render(
+
+
+
+ );
+
+ expect(getByTestId('item')).to.have.style('color', getDefaultPalette('H700'));
+ });
+ });
+
+ context('Subtle', () => {
+ it('Should highlight selected dropdown item', () => {
+ const { getByTestId } = render(
+
+
+
+ );
+
+ 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);
/**