From 0565656a47734cb9215e3f15092fb3e15145a238 Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Tue, 27 Jun 2023 13:05:41 +0200
Subject: [PATCH 1/8] fix: remove background color transition from menu button
 styles

---
 src/components/Toolbar/MenuButton.styles.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Toolbar/MenuButton.styles.js b/src/components/Toolbar/MenuButton.styles.js
index 7522ca1d7..66442b648 100644
--- a/src/components/Toolbar/MenuButton.styles.js
+++ b/src/components/Toolbar/MenuButton.styles.js
@@ -11,7 +11,6 @@ export default css`
         line-height: 14px;
         padding: 0 ${spacers.dp12};
         color: ${colors.grey900};
-        transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
         cursor: pointer;
     }
 

From 29d527fa7367e00ac8457279c6c5b5c5196d37d8 Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Tue, 27 Jun 2023 13:07:34 +0200
Subject: [PATCH 2/8] fix: prevent disabled menu button from getting grey
 highlight on click

---
 src/components/Toolbar/MenuButton.styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Toolbar/MenuButton.styles.js b/src/components/Toolbar/MenuButton.styles.js
index 66442b648..0c697a5de 100644
--- a/src/components/Toolbar/MenuButton.styles.js
+++ b/src/components/Toolbar/MenuButton.styles.js
@@ -15,7 +15,7 @@ export default css`
     }
 
     button:hover:enabled,
-    button:active {
+    button:active:enabled {
         background-color: ${colors.grey200};
     }
 

From 1ec5e214bd6322fd21042063ed97ae53c16e0513 Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Tue, 27 Jun 2023 13:33:04 +0200
Subject: [PATCH 3/8] fix: decrease hovermenu list items size and align file
 menu

---
 src/components/FileMenu/FileMenu.js                  | 6 +++---
 src/components/Toolbar/HoverMenuBar/HoverMenuList.js | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/FileMenu/FileMenu.js b/src/components/FileMenu/FileMenu.js
index bc0c3766a..f81a3145c 100644
--- a/src/components/FileMenu/FileMenu.js
+++ b/src/components/FileMenu/FileMenu.js
@@ -148,7 +148,7 @@ export const FileMenu = ({
                         onClick={onNew}
                         dataTest="file-menu-new"
                     />
-                    <MenuDivider />
+                    <MenuDivider dense />
                     <HoverMenuListItem
                         label={i18n.t('Open…')}
                         icon={<IconLaunch24 color={iconActiveColor} />}
@@ -230,7 +230,7 @@ export const FileMenu = ({
                         onClick={onMenuItemClick('translate')}
                         dataTest="file-menu-translate"
                     />
-                    <MenuDivider />
+                    <MenuDivider dense />
                     <HoverMenuListItem
                         label={i18n.t('Share…')}
                         icon={
@@ -263,7 +263,7 @@ export const FileMenu = ({
                         onClick={onMenuItemClick('getlink')}
                         dataTest="file-menu-getlink"
                     />
-                    <MenuDivider />
+                    <MenuDivider dense />
                     <HoverMenuListItem
                         label={i18n.t('Delete')}
                         destructive
diff --git a/src/components/Toolbar/HoverMenuBar/HoverMenuList.js b/src/components/Toolbar/HoverMenuBar/HoverMenuList.js
index a9ae02b84..6709977af 100644
--- a/src/components/Toolbar/HoverMenuBar/HoverMenuList.js
+++ b/src/components/Toolbar/HoverMenuBar/HoverMenuList.js
@@ -81,6 +81,7 @@ HoverMenuList.defaultProps = {
     dataTest: 'dhis2-analytics-hovermenulist',
     maxWidth: '380px',
     maxHeight: 'auto',
+    dense: true,
 }
 
 HoverMenuList.propTypes = {

From 63ff8ca1bd850781c1d596ada2ff93968c629a02 Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Tue, 27 Jun 2023 13:37:51 +0200
Subject: [PATCH 4/8] fix: prevent text highlighting by user selection in menu
 button

---
 src/components/Toolbar/MenuButton.styles.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Toolbar/MenuButton.styles.js b/src/components/Toolbar/MenuButton.styles.js
index 0c697a5de..7ff639553 100644
--- a/src/components/Toolbar/MenuButton.styles.js
+++ b/src/components/Toolbar/MenuButton.styles.js
@@ -12,6 +12,7 @@ export default css`
         padding: 0 ${spacers.dp12};
         color: ${colors.grey900};
         cursor: pointer;
+        user-select: none;
     }
 
     button:hover:enabled,

From a0249b280b2e792f28d148af3a63ab0f96205901 Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Tue, 27 Jun 2023 13:41:37 +0200
Subject: [PATCH 5/8] fix: keep grey highlight on open menu dropdown button

---
 src/components/Toolbar/HoverMenuBar/HoverMenuDropdown.js | 2 ++
 src/components/Toolbar/MenuButton.styles.js              | 3 ++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Toolbar/HoverMenuBar/HoverMenuDropdown.js b/src/components/Toolbar/HoverMenuBar/HoverMenuDropdown.js
index 1664d1473..259131be2 100644
--- a/src/components/Toolbar/HoverMenuBar/HoverMenuDropdown.js
+++ b/src/components/Toolbar/HoverMenuBar/HoverMenuDropdown.js
@@ -1,5 +1,6 @@
 import { Popper } from '@dhis2-ui/popper'
 import { Portal } from '@dhis2-ui/portal'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useRef } from 'react'
 import menuButtonStyles from '../MenuButton.styles.js'
@@ -17,6 +18,7 @@ export const HoverMenuDropdown = ({ children, label, dataTest, disabled }) => {
     return (
         <>
             <button
+                className={cx({ isOpen })}
                 ref={buttonRef}
                 onClick={onDropDownButtonClick}
                 disabled={disabled}
diff --git a/src/components/Toolbar/MenuButton.styles.js b/src/components/Toolbar/MenuButton.styles.js
index 7ff639553..683567cb8 100644
--- a/src/components/Toolbar/MenuButton.styles.js
+++ b/src/components/Toolbar/MenuButton.styles.js
@@ -16,7 +16,8 @@ export default css`
     }
 
     button:hover:enabled,
-    button:active:enabled {
+    button:active:enabled,
+    button.isOpen {
         background-color: ${colors.grey200};
     }
 

From d3385c2569e6603a1bd2f5eb10a8ff17dfa9c6cb Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Tue, 27 Jun 2023 13:51:25 +0200
Subject: [PATCH 6/8] fix: ensure menu list item background highlight colors
 are consistent

---
 .../Toolbar/HoverMenuBar/HoverMenuListItem.styles.js       | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/components/Toolbar/HoverMenuBar/HoverMenuListItem.styles.js b/src/components/Toolbar/HoverMenuBar/HoverMenuListItem.styles.js
index 31748d2a5..1c98e808e 100644
--- a/src/components/Toolbar/HoverMenuBar/HoverMenuListItem.styles.js
+++ b/src/components/Toolbar/HoverMenuBar/HoverMenuListItem.styles.js
@@ -16,13 +16,10 @@ export default css`
         user-select: none;
     }
 
-    li:hover {
-        background-color: ${colors.grey200};
-    }
-
+    li:hover,
     li:active,
     li.active {
-        background-color: ${colors.grey300};
+        background-color: ${colors.grey200};
     }
 
     li.destructive {

From 8430c52e4084459b87d4f139d5d58bce7f8cf5b8 Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Tue, 27 Jun 2023 13:58:19 +0200
Subject: [PATCH 7/8] chore: fix props error in toolbar demo story

---
 src/__demo__/Toolbar.stories.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/__demo__/Toolbar.stories.js b/src/__demo__/Toolbar.stories.js
index 14d50fb34..f0795632e 100644
--- a/src/__demo__/Toolbar.stories.js
+++ b/src/__demo__/Toolbar.stories.js
@@ -29,7 +29,7 @@ function ToolbarWithState() {
                     click to hide
                 </a>
             </ToolbarSidebar>
-            <UpdateButton />
+            <UpdateButton onClick={() => {}} />
             <HoverMenuBar>
                 <HoverMenuDropdown label="Menu A">
                     <HoverMenuList>

From 1a4c26d8db6d030f4e78de4186bb4ef27b171a80 Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Tue, 27 Jun 2023 14:06:54 +0200
Subject: [PATCH 8/8] fix: prevent menu button from having focus outline when
 closing with ESC

---
 src/components/Toolbar/HoverMenuBar/HoverMenuBar.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/Toolbar/HoverMenuBar/HoverMenuBar.js b/src/components/Toolbar/HoverMenuBar/HoverMenuBar.js
index 055694e78..6f6429de6 100644
--- a/src/components/Toolbar/HoverMenuBar/HoverMenuBar.js
+++ b/src/components/Toolbar/HoverMenuBar/HoverMenuBar.js
@@ -69,6 +69,15 @@ const HoverMenuBar = ({ children, dataTest }) => {
     const closeMenuWithEsc = useCallback(
         (event) => {
             if (event.keyCode === 27) {
+                /* Blurring the active element is needed here to prevent
+                 * the menu button which was clicked to open the hovermenu
+                 * from getting the blue outline style. This looks a bit off
+                 * in all cases, but especially when the menu item which was
+                 * clicked to open the hover menu isn't the currently opened
+                 * dropdown menu. This doesn't have to be the case since
+                 * dropdown menues open on hover once the first one has been
+                 * clicked. */
+                document.activeElement.blur()
                 closeMenu()
             }
         },