From 75b82d69a22becfe5f20122fbd5903dd602c33ae Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Sun, 2 Mar 2025 19:17:44 +0000
Subject: [PATCH] feat: Additional way to reset in spacing (#4924)

## Description

closes https://github.com/webstudio-is/webstudio/issues/4844

As a user when I don't know about option+click shorthand, and try to
reset spacing, only other way is to wait for the tooltip to come. If you
click, like you do on other labels - input will come but no way to
reset.

Solution: show a label next to the input.

## Steps for reproduction

1. click on any spacing value
2. see label next to input
3. test usual label functionality

## Code Review

- [ ] hi @kof, I need you to do
  - conceptual review (architecture, feature-correctness)
  - detailed review (read every line)
  - test it on preview

## Before requesting a review

- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")

## Before merging

- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---
 .../sections/shared/input-popover.tsx         | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx b/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx
index be9b479151..4a50c7023b 100644
--- a/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx
+++ b/apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx
@@ -5,17 +5,21 @@ import {
   Popover,
   PopoverTrigger,
   PopoverContent,
+  Flex,
+  theme,
 } from "@webstudio-is/design-system";
 import type { StyleProperty, StyleValue } from "@webstudio-is/css-engine";
+import { propertyDescriptions } from "@webstudio-is/css-data";
 import {
   CssValueInput,
   type IntermediateStyleValue,
 } from "../../shared/css-value-input";
 import { createBatchUpdate } from "../../shared/use-style-data";
-import { theme } from "@webstudio-is/design-system";
 import type { StyleValueSourceColor } from "~/shared/style-object-model";
 import { $availableUnitVariables } from "../../shared/model";
 import type { Modifiers } from "../../shared/modifier-keys";
+import { PropertyLabel } from "../../property-label";
+import { humanizeString } from "~/shared/string-utils";
 
 const slideUpAndFade = keyframes({
   "0%": { opacity: 0, transform: "scale(0.8)" },
@@ -120,9 +124,10 @@ const Input = ({
 const Trigger = styled("div", { position: "absolute", width: 0, height: 0 });
 
 const PopoverContentStyled = styled(PopoverContent, {
+  flexDirection: "row",
+  gap: theme.spacing[5],
   minWidth: 0,
   minHeight: 0,
-  width: theme.spacing[20],
   border: `1px solid ${theme.colors.borderMain}`,
   borderRadius: theme.borderRadius[7],
   background: theme.colors.backgroundPanel,
@@ -166,13 +171,20 @@ export const InputPopover = ({
         // and closing popover before applying changes
         onClick={(event) => event.stopPropagation()}
       >
-        <Input
-          styleSource={styleSource}
-          value={value}
-          property={property}
-          getActiveProperties={getActiveProperties}
-          onClosePopover={onClose}
+        <PropertyLabel
+          label={humanizeString(property)}
+          description={propertyDescriptions[property]}
+          properties={[property]}
         />
+        <Flex css={{ width: theme.spacing[20] }}>
+          <Input
+            styleSource={styleSource}
+            value={value}
+            property={property}
+            getActiveProperties={getActiveProperties}
+            onClosePopover={onClose}
+          />
+        </Flex>
       </PopoverContentStyled>
     </Popover>
   );