Implement hover states + remove some old code to do with pinning (#47328)

public/app/core/components/NavBar/NavBarMenuItem.tsx

@@ -102,24 +102,6 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive'], styleOverr
         background-color: ${theme.colors.action.hover};
       }
     }
-
-    > .pin-button {
-      opacity: 0;
-    }
-
-    &:hover > .pin-button,
-    &:focus-visible > .pin-button {
-      opacity: 100%;
-    }
-  `,
-  pinButton: css`
-    position: relative;
-    flex-shrink: 2;
-    color: ${theme.colors.text.secondary};
-
-    &:focus-visible {
-      opacity: 100%;
-    }
   `,
   element: css`
     align-items: center;
@@ -133,10 +115,6 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive'], styleOverr
     text-align: left;
     white-space: nowrap;
 
-    &:focus-visible + .pin-button {
-      opacity: 100%;
-    }
-
     &:focus-visible {
       outline: none;
       box-shadow: none;

public/app/core/components/NavBar/Next/NavBarMenu.tsx

@@ -185,7 +185,7 @@ function NavItem({
   if (linkHasChildren(link)) {
     return (
       <CollapsibleNavItem link={link} isActive={isMatchOrChildMatch(link, activeItem)}>
-        <ul>
+        <ul className={styles.children}>
           {link.children.map(
             (childLink) =>
               !childLink.divider && (
@@ -245,8 +245,12 @@ function NavItem({
 }
 
 const getNavItemStyles = (theme: GrafanaTheme2) => ({
+  children: css({
+    display: 'flex',
+    flexDirection: 'column',
+  }),
   item: css({
-    padding: `${theme.spacing(1)} 0`,
+    padding: `${theme.spacing(1)} ${theme.spacing(1.5)}`,
     whiteSpace: 'normal',
     '&::before': {
       display: 'none',
@@ -288,6 +292,7 @@ const getNavItemStyles = (theme: GrafanaTheme2) => ({
   linkText: css({
     fontSize: theme.typography.pxToRem(14),
     justifySelf: 'start',
+    paddingLeft: theme.spacing(0.5),
   }),
 });
 
@@ -359,18 +364,27 @@ const getCollapsibleStyles = (theme: GrafanaTheme2) => ({
     flexDirection: 'column',
   }),
   collapseWrapper: css({
-    borderRadius: theme.shape.borderRadius(2),
+    paddingLeft: theme.spacing(0.5),
     paddingRight: theme.spacing(4.25),
     height: theme.spacing(6),
     alignItems: 'center',
+    color: theme.colors.text.secondary,
+    '&:hover, &:focus-within': {
+      backgroundColor: theme.colors.action.hover,
+      color: theme.colors.text.primary,
+    },
+    '&:focus-within': {
+      boxShadow: 'none',
+      outline: `2px solid ${theme.colors.primary.main}`,
+      outlineOffset: '-2px',
+      transition: 'none',
+    },
   }),
   collapseContent: css({
     padding: 0,
-    paddingLeft: theme.spacing(1.25),
   }),
   labelWrapper: css({
     fontSize: '15px',
-    color: theme.colors.text.secondary,
   }),
   primary: css({
     color: theme.colors.text.primary,

public/app/core/components/NavBar/Next/NavBarMenuItem.tsx

@@ -93,28 +93,22 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive']) => ({
     border: 'none',
     color: isActive ? theme.colors.text.primary : theme.colors.text.secondary,
     display: 'flex',
+    flex: 1,
     fontSize: 'inherit',
     height: '100%',
     padding: '5px 12px 5px 10px',
     textAlign: 'left',
     whiteSpace: 'nowrap',
-
-    '&:focus-visible + .pin-button': {
-      opacity: '100%',
+    '&:hover, &:focus-visible': {
+      backgroundColor: theme.colors.action.hover,
+      color: theme.colors.text.primary,
     },
-
     '&:focus-visible': {
-      outline: 'none',
       boxShadow: 'none',
-
-      '&::after': {
-        boxShadow: 'none',
-        outline: `${theme.shape.borderRadius} solid ${theme.colors.primary.main}`,
-        outlineOffset: `-${theme.shape.borderRadius(1)}`,
-        transition: 'none',
-      },
+      outline: `2px solid ${theme.colors.primary.main}`,
+      outlineOffset: '-2px',
+      transition: 'none',
     },
-
     '&::before': {
       display: isActive ? 'block' : 'none',
       content: '" "',
@@ -126,15 +120,6 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive']) => ({
       borderRadius: theme.shape.borderRadius(1),
       backgroundImage: theme.colors.gradients.brandVertical,
     },
-
-    '&::after': {
-      position: 'absolute',
-      content: '" "',
-      left: 0,
-      top: 0,
-      bottom: 0,
-      right: 0,
-    },
   }),
   listItem: css({
     position: 'relative',
@@ -148,14 +133,6 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive']) => ({
         backgroundColor: theme.colors.action.hover,
       },
     },
-
-    '> .pin-button': {
-      opacity: 0,
-    },
-
-    '&:hover > .pin-button, &:focusVisible > .pin-button': {
-      opacity: '100%',
-    },
   }),
   divider: css({
     borderBottom: `1px solid ${theme.colors.border.weak}`,