Merge pull request #306 from dannya/sidebarcard-tooltipswhenclosed

feat: `SidebarCard`: add optional `tooltipsWhenClosed` prop

Author: shannonhochkins

packages/components/src/Cards/SidebarCard/SidebarCard.stories.tsx

@@ -283,6 +283,28 @@ export const SidebarExample: SidebarStory = {
   },
 };
 
+export const SidebarTooltipsWhenClosedExample: SidebarStory = {
+  render: Template,
+  args: {
+    menuItems: [
+      {
+        title: "Air Conditioner",
+        description: "On - currently 23°",
+        icon: "mdi:fan",
+        active: false,
+        onClick() {
+          console.info("do something on click!");
+        },
+      },
+    ],
+    weatherCardProps: {
+      entity: "weather.entity",
+      includeForecast: true,
+    },
+    tooltipsWhenClosed: true,
+  },
+};
+
 export const CustomMenuItemsExample: SidebarStory = {
   render: TemplateMenuItems,
   args: {

packages/components/src/Cards/SidebarCard/index.tsx

@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 import { css, Global } from "@emotion/react";
 import { Icon } from "@iconify/react";
 import { useHass } from "@hakit/core";
-import { TimeCard, WeatherCard, Row, Column, fallback, mq, useBreakpoint } from "@components";
+import { Tooltip, TimeCard, WeatherCard, Row, Column, fallback, mq, useBreakpoint } from "@components";
 import type { WeatherCardProps, TimeCardProps } from "@components";
 import { ErrorBoundary } from "react-error-boundary";
 
@@ -264,6 +264,8 @@ export interface SidebarCardProps extends React.ComponentProps<"div"> {
   children?: React.ReactNode;
   /** a method to apply a sort function to the sidebar menu items before they render */
   sortSidebarMenuItems?: (a: MenuItem, b: MenuItem) => number;
+  /** Show Tooltips on item hover when the sidebar is closed @default false */
+  tooltipsWhenClosed?: boolean;
 }
 function InternalSidebarCard({
   weatherCardProps,
@@ -274,6 +276,7 @@ function InternalSidebarCard({
   },
   startOpen = true,
   collapsible = true,
+  tooltipsWhenClosed = true,
   menuItems = [],
   children,
   autoIncludeRoutes = true,
@@ -384,6 +387,18 @@ function InternalSidebarCard({
             <Divider className="divider" />
             <Menu open={open} className="menu">
               {concatenatedMenuItems.map((item, index) => {
+                const innerItemContent = (
+                  <a>
+                    {typeof item.icon === "string" ? <Icon className="icon" icon={item.icon} /> : item.icon}
+                    {open && (
+                      <div className="menu-inner">
+                        {item.title}
+                        {item.description && <span>{item.description}</span>}
+                      </div>
+                    )}
+                  </a>
+                );
+
                 return (
                   <li
                     onClick={(event) => {
@@ -393,15 +408,13 @@ function InternalSidebarCard({
                     key={index}
                     className={item.active ? "active" : "inactive"}
                   >
-                    <a>
-                      {typeof item.icon === "string" ? <Icon className="icon" icon={item.icon} /> : item.icon}
-                      {open && (
-                        <div className="menu-inner">
-                          {item.title}
-                          {item.description && <span>{item.description}</span>}
-                        </div>
-                      )}
-                    </a>
+                    {tooltipsWhenClosed && !open ? (
+                      <Tooltip title={item.title} placement="right" offsetX={-16}>
+                        {innerItemContent}
+                      </Tooltip>
+                    ) : (
+                      innerItemContent
+                    )}
                   </li>
                 );
               })}

packages/components/src/Shared/Tooltip/index.tsx

@@ -84,13 +84,17 @@ const TooltipSpan = styled.span<Pick<TooltipProps, "placement">>`
 export interface TooltipProps extends Omit<React.ComponentPropsWithRef<"div">, "title"> {
   /** the placement of the tooltip @default 'top' */
   placement?: "top" | "right" | "bottom" | "left";
+  /** the X-axis offset of the tooltip @default 0 */
+  offsetX?: number;
+  /** the Y-axis offset of the tooltip @default 0 */
+  offsetY?: number;
   /** the title of the tooltip */
   title?: React.ReactNode | null;
   /** the children of the tooltip */
   children: React.ReactNode;
 }
 
-function InternalTooltip({ placement = "top", title = null, children, ref, ...rest }: TooltipProps) {
+function InternalTooltip({ placement = "top", offsetX = 0, offsetY = 0, title = null, children, ref, ...rest }: TooltipProps) {
   const tooltipRef = useRef<HTMLSpanElement | null>(null);
   const childRef = useRef<HTMLDivElement | null>(null);
   const portalRoot = useHass((store) => store.portalRoot);
@@ -122,6 +126,8 @@ function InternalTooltip({ placement = "top", title = null, children, ref, ...re
           left = childRect.left;
           break;
       }
+      top = top + offsetY;
+      left = left + offsetX;
       el.style.top = `${top}px`;
       el.style.left = `${left}px`;
       // to ensure animations play out, we need to update these values after the next tick
@@ -130,7 +136,7 @@ function InternalTooltip({ placement = "top", title = null, children, ref, ...re
         el.style.visibility = "visible";
       }, 0);
     },
-    [placement],
+    [placement, offsetX, offsetY],
   );
 
   const handleMouseEnter = useCallback(() => {