From a2921d9dfbd4a0edb7ccd60602de260a32e75ab1 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 23 Oct 2023 09:15:39 +0100
Subject: [PATCH] DockedMegaMenu: More consistent spacing on active state
 (#76873)

* more consistent spacing on active state

* use correct secondary variant buttons
---
 .../components/AppChrome/DockedMegaMenu/MegaMenu.tsx  |  1 -
 .../AppChrome/DockedMegaMenu/MegaMenuItem.tsx         | 11 +++++++----
 .../AppChrome/DockedMegaMenu/MegaMenuItemText.tsx     |  1 +
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx
index ff8d11580af..622426f3485 100644
--- a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx
+++ b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx
@@ -114,7 +114,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     },
   }),
   dockMenuButton: css({
-    color: theme.colors.text.disabled,
     display: 'none',
 
     [theme.breakpoints.up('md')]: {
diff --git a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
index 355ccfdce92..fdd90c06352 100644
--- a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
+++ b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
@@ -36,7 +36,11 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
 
   return (
     <li className={styles.listItem}>
-      <div className={styles.menuItem}>
+      <div
+        className={cx(styles.menuItem, {
+          [styles.hasIcon]: Boolean(level === 0 && link.icon),
+        })}
+      >
         {level !== 0 && <Indent level={level === MAX_DEPTH ? level - 1 : level} spacing={3} />}
         {level === MAX_DEPTH && <div className={styles.itemConnector} />}
         <div className={styles.collapseButtonWrapper}>
@@ -47,6 +51,7 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
               onClick={() => setSectionExpanded(!sectionExpanded)}
               name={sectionExpanded ? 'angle-down' : 'angle-right'}
               size="md"
+              variant="secondary"
             />
           )}
         </div>
@@ -63,7 +68,6 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
             <div
               className={cx(styles.labelWrapper, {
                 [styles.hasActiveChild]: hasActiveChild,
-                [styles.hasIcon]: Boolean(level === 0 && link.icon),
               })}
             >
               {level === 0 && link.icon && (
@@ -112,6 +116,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     alignItems: 'center',
     gap: theme.spacing(1),
     height: theme.spacing(4),
+    paddingLeft: theme.spacing(1),
     position: 'relative',
   }),
   collapseButtonWrapper: css({
@@ -134,7 +139,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     },
   }),
   collapseButton: css({
-    color: theme.colors.text.disabled,
     margin: 0,
   }),
   collapsibleSectionWrapper: css({
@@ -148,7 +152,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(2),
-    paddingLeft: theme.spacing(1),
     minWidth: 0,
   }),
   hasIcon: css({
diff --git a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItemText.tsx b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItemText.tsx
index 6510fda9a27..910a571e2af 100644
--- a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItemText.tsx
+++ b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItemText.tsx
@@ -88,6 +88,7 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive']) => ({
     display: 'flex',
     gap: '0.5rem',
     height: '100%',
+    paddingLeft: theme.spacing(1),
     width: '100%',
   }),
 });