Add modern tooltips to space control

apps/builder/app/builder/features/style-panel/sections/space/scrub.tsx

@@ -148,7 +148,7 @@ const circleGroups = [
   ["marginTop", "marginRight", "marginBottom", "marginLeft"],
 ] as const;
 
-const getModifiersGroup = (
+export const getModifiersGroup = (
   property: SpaceStyleProperty,
   modifiers: { shiftKey: boolean; altKey: boolean }
 ) => {

apps/builder/app/builder/features/style-panel/sections/space/space.tsx

@@ -17,6 +17,7 @@ import { getStyleSource } from "../../shared/style-info";
 import { CollapsibleSection } from "../../shared/collapsible-section";
 import { useKeyboardNavigation } from "./keyboard";
 import { useDebouncedCallback } from "use-debounce";
+import type { CreateBatchUpdate } from "../../shared/use-style-data";
 
 const Cell = ({
   isPopoverOpen,
@@ -27,6 +28,7 @@ const Cell = ({
   isActive,
   scrubStatus,
   currentStyle,
+  createBatchUpdate,
 }: {
   isPopoverOpen: boolean;
   onPopoverClose: () => void;
@@ -36,6 +38,7 @@ const Cell = ({
   isActive: boolean;
   scrubStatus: ReturnType<typeof useScrub>;
   currentStyle: RenderCategoryProps["currentStyle"];
+  createBatchUpdate: CreateBatchUpdate;
 }) => {
   const styleInfo = currentStyle[property];
   const finalValue =
@@ -57,27 +60,31 @@ const Cell = ({
         onChange={onChange}
         onClose={onPopoverClose}
       />
-      {isActive && isPopoverOpen === false && scrubStatus.isActive === false ? (
-        <SpaceTooltip property={property} />
-      ) : null}
-      <ValueText
-        css={{
-          // We want value to have `default` cursor to indicate that it's clickable,
-          // unlike the rest of the value area that has cursor that indicates scrubbing.
-          // Click and scrub works everywhere anyway, but we want cursors to be different.
-          //
-          // In order to have control over cursor we're setting pointerEvents to "all" here
-          // because SpaceLayout sets it to "none" for cells' content.
-          pointerEvents: "all",
-        }}
-        value={finalValue}
-        isActive={isActive}
-        source={styleSource}
-        onMouseEnter={(event) =>
-          onHover({ property, element: event.currentTarget })
-        }
-        onMouseLeave={() => onHover(undefined)}
-      />
+      <SpaceTooltip
+        property={property}
+        style={currentStyle}
+        createBatchUpdate={createBatchUpdate}
+        preventOpen={scrubStatus.isActive}
+      >
+        <ValueText
+          css={{
+            // We want value to have `default` cursor to indicate that it's clickable,
+            // unlike the rest of the value area that has cursor that indicates scrubbing.
+            // Click and scrub works everywhere anyway, but we want cursors to be different.
+            //
+            // In order to have control over cursor we're setting pointerEvents to "all" here
+            // because SpaceLayout sets it to "none" for cells' content.
+            pointerEvents: "all",
+          }}
+          value={finalValue}
+          isActive={isActive}
+          source={styleSource}
+          onMouseEnter={(event) =>
+            onHover({ property, element: event.currentTarget })
+          }
+          onMouseLeave={() => onHover(undefined)}
+        />
+      </SpaceTooltip>
     </>
   );
 };
@@ -179,7 +186,20 @@ export const SpaceSection = ({
     activeProperties = [openProperty, ...scrubStatus.properties];
   }
 
+  const handleHoverUndefined = useDebouncedCallback(() => {
+    setHoverTarget(undefined);
+    keyboardNavigation.handleHover(undefined);
+  }, 100);
+
   const handleHover = (target: HoverTagret | undefined) => {
+    if (target === undefined) {
+      // Debounce the mouseleave event to prevent delays when moving between cells.
+      // This resolves the issue where the tooltip content changes when repositioned (e.g., when alt/shift clicked),
+      // causing rapid mouseleave and mouseenter events in the space section.
+      handleHoverUndefined();
+      return;
+    }
+    handleHoverUndefined.cancel();
     setHoverTarget(target);
     keyboardNavigation.handleHover(target?.property);
   };
@@ -207,10 +227,10 @@ export const SpaceSection = ({
         onHover={handleHover}
         onFocus={focusProps.onFocus}
         onBlur={focusProps.onBlur}
+        activeProperties={activeProperties}
         onKeyDown={keyboardNavigation.handleKeyDown}
         onMouseMove={keyboardNavigation.handleMouseMove}
         onMouseLeave={keyboardNavigation.handleMouseLeave}
-        activeProperties={activeProperties}
         renderCell={({ property }) => (
           <Cell
             isPopoverOpen={openProperty === property}
@@ -232,6 +252,7 @@ export const SpaceSection = ({
             scrubStatus={scrubStatus}
             isActive={activeProperty === property}
             currentStyle={currentStyle}
+            createBatchUpdate={createBatchUpdate}
           />
         )}
       />

apps/builder/app/builder/features/style-panel/sections/space/tooltip.tsx

@@ -1,65 +1,128 @@
-import {
-  styled,
-  Tooltip,
-  useEnhancedTooltipProps,
-} from "@webstudio-is/design-system";
 import type { SpaceStyleProperty } from "./types";
-import { useDebounce } from "use-debounce";
-import { useState } from "react";
-
-// trigger is used only for positioning
-const Trigger = styled("div", {
-  position: "absolute",
-  width: "100%",
-  height: "100%",
-  pointerEvents: "none",
-  top: 0,
-  left: 0,
-});
-
-const labels = {
-  paddingTop: "Padding Top",
-  paddingRight: "Padding Right",
-  paddingBottom: "Padding Bottom",
-  paddingLeft: "Padding Left",
-  marginTop: "Margin Top",
-  marginRight: "Margin Right",
-  marginBottom: "Margin Bottom",
-  marginLeft: "Margin Left",
-};
+import { PropertyTooltip } from "../../shared/property-name";
+import type { StyleInfo } from "../../shared/style-info";
+import { useState, type ReactElement } from "react";
+import { useModifierKeys } from "../../shared/modifier-keys";
+import { getModifiersGroup } from "./scrub";
+import type { CreateBatchUpdate } from "../../shared/use-style-data";
 
 const sides = {
   paddingTop: "top",
-  paddingRight: "left",
-  paddingBottom: "top",
-  paddingLeft: "right",
+  paddingRight: "top",
+  paddingBottom: "bottom",
+  paddingLeft: "left",
   marginTop: "top",
   marginRight: "left",
-  marginBottom: "top",
+  marginBottom: "bottom",
   marginLeft: "right",
 } as const;
 
+const propertyContents: {
+  properties: SpaceStyleProperty[];
+  label: string;
+  description: string;
+}[] = [
+  // Padding
+  {
+    properties: ["paddingTop", "paddingBottom"],
+    label: "Vertical Padding",
+    description:
+      "Defines the space between the content of an element and its top and bottom border. Can affect layout height.",
+  },
+
+  {
+    properties: ["paddingLeft", "paddingRight"],
+    label: "Horizontal Padding",
+    description:
+      "Defines the space between the content of an element and its left and right border. Can affect layout width.",
+  },
+
+  {
+    properties: ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight"],
+    label: "Padding",
+    description:
+      "Defines the space between the content of an element and its border. Can affect layout size.",
+  },
+  // Margin
+  {
+    properties: ["marginTop", "marginBottom"],
+    label: "Vertical Margin",
+    description: "Sets the margin at the top and bottom of an element.",
+  },
+
+  {
+    properties: ["marginLeft", "marginRight"],
+    label: "Horizontal Margin",
+    description: "Sets the margin at the left and right of an element.",
+  },
+
+  {
+    properties: ["marginTop", "marginBottom", "marginLeft", "marginRight"],
+    label: "Margin",
+    description: "Sets the margin of an element.",
+  },
+];
+
+const isSameUnorderedArrays = (
+  arrA: readonly string[],
+  arrB: readonly string[]
+) => {
+  if (arrA.length !== arrB.length) {
+    return false;
+  }
+
+  const union = new Set([...arrA, ...arrB]);
+  return union.size === arrA.length;
+};
+
 export const SpaceTooltip = ({
   property,
+  style,
+  children,
+  createBatchUpdate,
+  preventOpen,
 }: {
   property: SpaceStyleProperty;
+  style: StyleInfo;
+  children: ReactElement;
+  createBatchUpdate: CreateBatchUpdate;
+  preventOpen: boolean;
 }) => {
-  const { delayDuration } = useEnhancedTooltipProps();
-  const [initialOpen, setInitialOpen] = useState(false);
-  const [open] = useDebounce(initialOpen, delayDuration ?? 0);
+  const [open, setOpen] = useState(false);
 
-  if (initialOpen === false) {
-    setInitialOpen(true);
-  }
+  const modifiers = useModifierKeys();
+
+  const properties = [...getModifiersGroup(property, modifiers)];
+
+  const propertyContent = propertyContents.find((propertyContent) =>
+    isSameUnorderedArrays(propertyContent.properties, properties)
+  );
+
+  const handleOpenChange = (value: boolean) => {
+    if (preventOpen && value === true) {
+      return;
+    }
+    setOpen(value);
+  };
 
   return (
-    <Tooltip
+    <PropertyTooltip
       open={open}
-      content={labels[property]}
+      onOpenChange={handleOpenChange}
+      properties={properties}
+      style={style}
+      title={propertyContent?.label}
+      description={propertyContent?.description}
       side={sides[property]}
-      disableHoverableContent
+      onReset={() => {
+        const batch = createBatchUpdate();
+        for (const property of properties) {
+          batch.deleteProperty(property);
+        }
+        batch.publish();
+      }}
     >
-      <Trigger />
-    </Tooltip>
+      <div>{children}</div>
+    </PropertyTooltip>
   );
 };

apps/builder/app/builder/features/style-panel/shared/modifier-keys.ts

@@ -1,4 +1,5 @@
 import { useState, useEffect } from "react";
+import { shallowEqual } from "shallow-equal";
 
 // Used for combined mouse and keyboard interactions, like scrubbing while holding ALT.
 // If it's just a keyboard interaction, you should already have a keyboard event at hand.
@@ -11,20 +12,33 @@ export const useModifierKeys = () => {
   });
 
   useEffect(() => {
-    const handler = (event: KeyboardEvent) =>
-      setState({
+    const handler = (event: KeyboardEvent | MouseEvent) => {
+      const newState = {
         shiftKey: event.shiftKey,
         altKey: event.altKey,
         ctrlKey: event.ctrlKey,
         metaKey: event.metaKey,
+      };
+
+      setState((prev) => {
+        if (shallowEqual(prev, newState)) {
+          return prev;
+        }
+
+        return newState;
       });
+    };
 
     window.addEventListener("keydown", handler);
     window.addEventListener("keyup", handler);
+    // The use of only the keyup/keydown events may not be sufficient.
+    // on a Mac, when the cmd-shift-4 (printscreen) combination is triggered, there is a possibility of losing the keyup event.
+    window.addEventListener("mousemove", handler);
 
     return () => {
       window.removeEventListener("keydown", handler);
       window.removeEventListener("keyup", handler);
+      window.removeEventListener("mousemove", handler);
     };
   }, []);