From 25224fae5bcd21a0097ce67c8f265d9fbd1c6163 Mon Sep 17 00:00:00 2001
From: Kyle Doherty <kdoh@users.noreply.github.com>
Date: Wed, 28 Aug 2019 18:11:45 -0700
Subject: [PATCH] allow for IconWrapper hover customization on EntityMenus
(#10750)
* allow for IconWrapper hover customization
* test / lint fixes
---
frontend/src/metabase/components/EntityMenu.jsx | 4 +++-
.../src/metabase/components/EntityMenuTrigger.jsx | 4 ++--
frontend/src/metabase/components/Icon.jsx | 7 ++++---
frontend/src/metabase/nav/components/ProfileLink.jsx | 7 +++++++
frontend/src/metabase/nav/containers/Navbar.jsx | 11 ++++++++++-
.../__snapshots__/components.unit.spec.js.snap | 12 ++++++------
6 files changed, 32 insertions(+), 13 deletions(-)
diff --git a/frontend/src/metabase/components/EntityMenu.jsx b/frontend/src/metabase/components/EntityMenu.jsx
index f9a9c584991..5f7ba70f922 100644
--- a/frontend/src/metabase/components/EntityMenu.jsx
+++ b/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}
diff --git a/frontend/src/metabase/components/EntityMenuTrigger.jsx b/frontend/src/metabase/components/EntityMenuTrigger.jsx
index 84feb268477..c632fd85f12 100644
--- a/frontend/src/metabase/components/EntityMenuTrigger.jsx
+++ b/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>
);
diff --git a/frontend/src/metabase/components/Icon.jsx b/frontend/src/metabase/components/Icon.jsx
index 454c42ebff4..00d02a9df73 100644
--- a/frontend/src/metabase/components/Icon.jsx
+++ b/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"],
},
};
diff --git a/frontend/src/metabase/nav/components/ProfileLink.jsx b/frontend/src/metabase/nav/components/ProfileLink.jsx
index 7654eec543b..8c5238f221b 100644
--- a/frontend/src/metabase/nav/components/ProfileLink.jsx
+++ b/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}>
diff --git a/frontend/src/metabase/nav/containers/Navbar.jsx b/frontend/src/metabase/nav/containers/Navbar.jsx
index ab0509001e1..02d96ab8c97 100644
--- a/frontend/src/metabase/nav/containers/Navbar.jsx
+++ b/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"
diff --git a/frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap b/frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap
index 5d29abbdf7b..b5d51d5b460 100644
--- a/frontend/test/metabase/internal/__snapshots__/components.unit.spec.js.snap
+++ b/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
--
GitLab