allow for IconWrapper hover customization on EntityMenus (#10750)

* allow for IconWrapper hover customization

* test / lint fixes

frontend/src/metabase/components/EntityMenu.jsx

@@ -19,6 +19,7 @@ type Props = {
   triggerIcon: string,
   className?: string,
   tooltip?: string,
+  triggerProps: object,
 };
 
 class EntityMenu extends Component {
@@ -48,7 +49,7 @@ class EntityMenu extends Component {
   };
 
   render() {
-    const { items, triggerIcon, className, tooltip } = this.props;
+    const { items, triggerIcon, triggerProps, className, tooltip } = this.props;
     const { open, menuItemContent } = this.state;
     return (
       <div className={cx("relative", className)}>
@@ -57,6 +58,7 @@ class EntityMenu extends Component {
           onClick={this.toggleMenu}
           open={open}
           tooltip={tooltip}
+          triggerProps={triggerProps}
         />
         <Popover
           isOpen={open}

frontend/src/metabase/components/EntityMenuTrigger.jsx

@@ -3,9 +3,9 @@ import React from "react";
 import Icon, { IconWrapper } from "metabase/components/Icon";
 import Tooltip from "metabase/components/Tooltip";
 
-const EntityMenuTrigger = ({ icon, onClick, open, tooltip }) => {
+const EntityMenuTrigger = ({ icon, onClick, open, tooltip, triggerProps }) => {
   const trigger = (
-    <IconWrapper onClick={onClick}>
+    <IconWrapper onClick={onClick} {...triggerProps}>
       <Icon size={18} name={icon} m={1} />
     </IconWrapper>
   );

frontend/src/metabase/components/Icon.jsx

@@ -5,7 +5,7 @@ import RetinaImage from "react-retina-image";
 import styled from "styled-components";
 import { color, space, hover } from "styled-system";
 import cx from "classnames";
-import colors, { darken } from "metabase/lib/colors";
+import colors from "metabase/lib/colors";
 
 import { loadIcon } from "metabase/icon_paths";
 import { stripLayoutProps } from "metabase/lib/utils";
@@ -29,12 +29,13 @@ export const IconWrapper = styled("div")`
     transform: translateY(-2px);
   }
   ${hover};
+  transition: all 300ms ease-in-out;
 `;
 
 IconWrapper.defaultProps = {
   hover: {
-    backgroundColor: darken(colors["brand"]),
-    color: "white",
+    backgroundColor: colors["bg-medium"],
+    color: colors["brand"],
   },
 };
 

frontend/src/metabase/nav/components/ProfileLink.jsx

@@ -5,6 +5,7 @@ import { Box } from "grid-styled";
 import { t } from "ttag";
 import _ from "underscore";
 import { capitalize } from "metabase/lib/formatting";
+import { color, darken } from "metabase/lib/colors";
 
 import MetabaseSettings from "metabase/lib/settings";
 import * as Urls from "metabase/lib/urls";
@@ -91,6 +92,12 @@ export default class ProfileLink extends Component {
           tooltip={t`Settings`}
           items={this.generateOptionsForUser()}
           triggerIcon="gear"
+          triggerProps={{
+            hover: {
+              backgroundColor: darken(color("brand")),
+              color: "white",
+            },
+          }}
         />
         {modalOpen === "about" ? (
           <Modal small onClose={this.closeModal}>

frontend/src/metabase/nav/containers/Navbar.jsx

@@ -68,6 +68,11 @@ const ActiveSearchColor = color(colors.brand)
   .lighten(0.1)
   .string();
 
+const NavHover = {
+  backgroundColor: darken(colors["brand"]),
+  color: "white",
+};
+
 const SearchWrapper = Flex.extend`
   background-color: ${props =>
     props.active ? ActiveSearchColor : DefaultSearchColor};
@@ -344,6 +349,7 @@ export default class Navbar extends Component {
             tooltip={t`Create`}
             className="hide sm-show mr1"
             triggerIcon="add"
+            triggerProps={{ hover: NavHover }}
             items={[
               {
                 title: t`New dashboard`,
@@ -360,7 +366,10 @@ export default class Navbar extends Component {
             ]}
           />
           {hasNativeWrite && (
-            <IconWrapper className="relative hide sm-show mr1 overflow-hidden">
+            <IconWrapper
+              className="relative hide sm-show mr1 overflow-hidden"
+              hover={NavHover}
+            >
               <Link
                 to={this.props.plainNativeQuery.question().getUrl()}
                 className="flex align-center"

frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap

@@ -416,7 +416,7 @@ exports[`EntityMenu should render "Edit menu" correctly 1`] = `
       className="relative"
     >
       <div
-        className="Icon__IconWrapper-ksWXhn fdItMk"
+        className="Icon__IconWrapper-ksWXhn loUASk"
         onClick={[Function]}
       >
         <svg
@@ -450,7 +450,7 @@ exports[`EntityMenu should render "More menu" correctly 1`] = `
       className="relative"
     >
       <div
-        className="Icon__IconWrapper-ksWXhn fdItMk"
+        className="Icon__IconWrapper-ksWXhn loUASk"
         onClick={[Function]}
       >
         <svg
@@ -484,7 +484,7 @@ exports[`EntityMenu should render "Multiple menus" correctly 1`] = `
       className="relative"
     >
       <div
-        className="Icon__IconWrapper-ksWXhn fdItMk"
+        className="Icon__IconWrapper-ksWXhn loUASk"
         onClick={[Function]}
       >
         <svg
@@ -507,7 +507,7 @@ exports[`EntityMenu should render "Multiple menus" correctly 1`] = `
       className="relative"
     >
       <div
-        className="Icon__IconWrapper-ksWXhn fdItMk"
+        className="Icon__IconWrapper-ksWXhn loUASk"
         onClick={[Function]}
       >
         <svg
@@ -531,7 +531,7 @@ exports[`EntityMenu should render "Multiple menus" correctly 1`] = `
       className="relative"
     >
       <div
-        className="Icon__IconWrapper-ksWXhn fdItMk"
+        className="Icon__IconWrapper-ksWXhn loUASk"
         onClick={[Function]}
       >
         <svg
@@ -565,7 +565,7 @@ exports[`EntityMenu should render "Share menu" correctly 1`] = `
       className="relative"
     >
       <div
-        className="Icon__IconWrapper-ksWXhn fdItMk"
+        className="Icon__IconWrapper-ksWXhn loUASk"
         onClick={[Function]}
       >
         <svg