fix: various issues related to the new toolbar

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>

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

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()
             }
         },

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}

src/components/Toolbar/HoverMenuBar/HoverMenuList.js

@@ -81,6 +81,7 @@ HoverMenuList.defaultProps = {
     dataTest: 'dhis2-analytics-hovermenulist',
     maxWidth: '380px',
     maxHeight: 'auto',
+    dense: true,
 }
 
 HoverMenuList.propTypes = {

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 {

src/components/Toolbar/MenuButton.styles.js

@@ -11,12 +11,13 @@ 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;
+        user-select: none;
     }
 
     button:hover:enabled,
-    button:active {
+    button:active:enabled,
+    button.isOpen {
         background-color: ${colors.grey200};
     }