From 7a27db7864267eba4e44fc8a95ea8c4762861fcc Mon Sep 17 00:00:00 2001
From: Sloan Sparger <sloansparger@users.noreply.github.com>
Date: Thu, 15 Feb 2024 09:45:40 -0600
Subject: [PATCH] Improve tooltips in navigation (#38588)
---
.../collections/collections.cy.spec.js | 4 +-
.../nav/components/AppBar/AppBarToggle.tsx | 53 +++++++++++++------
.../SidebarItems/SidebarItems.styled.tsx | 5 +-
3 files changed, 43 insertions(+), 19 deletions(-)
diff --git a/e2e/test/scenarios/collections/collections.cy.spec.js b/e2e/test/scenarios/collections/collections.cy.spec.js
index f868a17f184..08e983574a1 100644
--- a/e2e/test/scenarios/collections/collections.cy.spec.js
+++ b/e2e/test/scenarios/collections/collections.cy.spec.js
@@ -150,7 +150,9 @@ describe("scenarios > collection defaults", () => {
// 2. Ensure we show the helpful tooltip with the full (long) collection name
// eslint-disable-next-line no-unscoped-text-selectors -- deprecated usage
cy.findByText("Fifth collection with a very long name").realHover();
- popover().contains("Fifth collection with a very long name");
+ cy.findByRole("tooltip", {
+ name: /Fifth collection with a very long name/,
+ });
});
it("should be usable on mobile screen sizes (metabase#15006)", () => {
diff --git a/frontend/src/metabase/nav/components/AppBar/AppBarToggle.tsx b/frontend/src/metabase/nav/components/AppBar/AppBarToggle.tsx
index 16021db1196..35eadb8fca3 100644
--- a/frontend/src/metabase/nav/components/AppBar/AppBarToggle.tsx
+++ b/frontend/src/metabase/nav/components/AppBar/AppBarToggle.tsx
@@ -1,4 +1,6 @@
import { t } from "ttag";
+import { useState, useEffect } from "react";
+import { useHover } from "@mantine/hooks";
import { isMac } from "metabase/lib/browser";
import { Tooltip } from "metabase/ui";
import { SidebarButton, SidebarIcon } from "./AppBarToggle.styled";
@@ -18,27 +20,48 @@ export function AppBarToggle({
isNavBarOpen,
onToggleClick,
}: AppBarToggleProps): JSX.Element | null {
+ const [disableTooltip, setDisableTooltip] = useState(false);
+ const { hovered, ref: hoverRef } = useHover();
+
+ // when user clicks the sidebar button, never show the
+ // tooltip as long as their cursor remains on the button
+ // but show it again next time they hover
+ useEffect(() => {
+ if (!hovered) {
+ setDisableTooltip(false);
+ }
+ }, [hovered]);
+
if (!isNavBarEnabled) {
return null;
}
+ const handleToggleClick = () => {
+ setDisableTooltip(true);
+ onToggleClick?.();
+ };
+
return (
- <Tooltip
- label={getSidebarTooltipLabel(isNavBarOpen)}
- disabled={isSmallAppBar}
- offset={-12}
- >
- <SidebarButton
- isSmallAppBar={isSmallAppBar}
- isNavBarEnabled={isNavBarEnabled}
- isLogoVisible={isLogoVisible}
- onClick={onToggleClick}
- data-testid="sidebar-toggle"
- aria-label={t`Toggle sidebar`}
+ <div ref={hoverRef}>
+ <Tooltip
+ label={getSidebarTooltipLabel(isNavBarOpen)}
+ disabled={isSmallAppBar || disableTooltip}
+ withArrow
+ offset={-12}
+ openDelay={1000}
>
- <SidebarIcon isLogoVisible={isLogoVisible} size={20} name="burger" />
- </SidebarButton>
- </Tooltip>
+ <SidebarButton
+ isSmallAppBar={isSmallAppBar}
+ isNavBarEnabled={isNavBarEnabled}
+ isLogoVisible={isLogoVisible}
+ onClick={handleToggleClick}
+ data-testid="sidebar-toggle"
+ aria-label={t`Toggle sidebar`}
+ >
+ <SidebarIcon isLogoVisible={isLogoVisible} size={20} name="burger" />
+ </SidebarButton>
+ </Tooltip>
+ </div>
);
}
diff --git a/frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx b/frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx
index b02a8e127ca..9bc71cc596c 100644
--- a/frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx
+++ b/frontend/src/metabase/nav/containers/MainNavbar/SidebarItems/SidebarItems.styled.tsx
@@ -1,9 +1,8 @@
import styled from "@emotion/styled";
import { css } from "@emotion/react";
-import { Icon } from "metabase/ui";
+import { Icon, Tooltip } from "metabase/ui";
import { TreeNode } from "metabase/components/tree/TreeNode";
-import Tooltip from "metabase/core/components/Tooltip";
import Link from "metabase/core/components/Link";
import { NAV_SIDEBAR_WIDTH } from "metabase/nav/constants";
@@ -119,7 +118,7 @@ export const ItemName = styled(TreeNode.NameContainer)`
export function NameContainer({ children: itemName }: { children: string }) {
if (itemName.length >= ITEM_NAME_LENGTH_TOOLTIP_THRESHOLD) {
return (
- <Tooltip tooltip={itemName} maxWidth="none">
+ <Tooltip label={itemName} withArrow maw="none">
<ItemName>{itemName}</ItemName>
</Tooltip>
);
--
GitLab