From 6f8e651cdbe5d959bbc16337f41e64d9e308318c Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 20 Dec 2021 16:00:29 +0000
Subject: [PATCH] Move the background style to the parent component (#43359)

---
 public/app/core/components/NavBar/NavBarItem.tsx      |  1 -
 public/app/core/components/NavBar/NavBarItemMenu.tsx  | 11 ++++++++++-
 .../app/core/components/NavBar/NavBarItemMenuItem.tsx |  6 ++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/public/app/core/components/NavBar/NavBarItem.tsx b/public/app/core/components/NavBar/NavBarItem.tsx
index 7304e8a8e8a..974d1d4a04a 100644
--- a/public/app/core/components/NavBar/NavBarItem.tsx
+++ b/public/app/core/components/NavBar/NavBarItem.tsx
@@ -123,7 +123,6 @@ const getStyles = (
 ) => ({
   ...getNavBarItemWithoutMenuStyles(theme, isActive),
   header: css`
-    background-color: ${theme.colors.background.secondary};
     color: ${theme.colors.text.primary};
     height: ${theme.components.sidemenu.width - (adjustHeightForBorder ? 2 : 1)}px;
     font-size: ${theme.typography.h4.fontSize};
diff --git a/public/app/core/components/NavBar/NavBarItemMenu.tsx b/public/app/core/components/NavBar/NavBarItemMenu.tsx
index ea815bc93f7..f0e34ac3a05 100644
--- a/public/app/core/components/NavBar/NavBarItemMenu.tsx
+++ b/public/app/core/components/NavBar/NavBarItemMenu.tsx
@@ -50,7 +50,13 @@ export function NavBarItemMenu(props: NavBarItemMenuProps): ReactElement | null
   const menuSubTitle = section.value.subTitle;
 
   const sectionComponent = (
-    <NavBarItemMenuItem key={section.key} item={section} state={state} onNavigate={onNavigate} />
+    <NavBarItemMenuItem
+      className={styles.section}
+      key={section.key}
+      item={section}
+      state={state}
+      onNavigate={onNavigate}
+    />
   );
 
   const subTitleComponent = (
@@ -124,5 +130,8 @@ function getStyles(
       padding: ${theme.spacing(1)} ${theme.spacing(2)} ${theme.spacing(1)};
       white-space: nowrap;
     `,
+    section: css`
+      background-color: ${theme.colors.background.secondary};
+    `,
   };
 }
diff --git a/public/app/core/components/NavBar/NavBarItemMenuItem.tsx b/public/app/core/components/NavBar/NavBarItemMenuItem.tsx
index 745a58c3b81..170dfad204f 100644
--- a/public/app/core/components/NavBar/NavBarItemMenuItem.tsx
+++ b/public/app/core/components/NavBar/NavBarItemMenuItem.tsx
@@ -7,16 +7,18 @@ import { useFocus } from '@react-aria/interactions';
 import { TreeState } from '@react-stately/tree';
 import { mergeProps } from '@react-aria/utils';
 import { Node } from '@react-types/shared';
+import classNames from 'classnames';
 
 import { useNavBarItemMenuContext } from './context';
 
 export interface NavBarItemMenuItemProps {
+  className?: string;
   item: Node<NavModelItem>;
   state: TreeState<NavModelItem>;
   onNavigate: (item: NavModelItem) => void;
 }
 
-export function NavBarItemMenuItem({ item, state, onNavigate }: NavBarItemMenuItemProps): ReactElement {
+export function NavBarItemMenuItem({ className, item, state, onNavigate }: NavBarItemMenuItemProps): ReactElement {
   const { onClose } = useNavBarItemMenuContext();
   const { key, rendered } = item;
   const ref = useRef<HTMLLIElement>(null);
@@ -46,7 +48,7 @@ export function NavBarItemMenuItem({ item, state, onNavigate }: NavBarItemMenuIt
   );
 
   return (
-    <li {...mergeProps(menuItemProps, focusProps)} ref={ref} className={styles.menuItem}>
+    <li {...mergeProps(menuItemProps, focusProps)} ref={ref} className={classNames(styles.menuItem, className)}>
       {rendered}
     </li>
   );