feat: Reset any css value when user deletes the input and hits enter (#…

…4491)

## Description

closes #4481

## Steps for reproduction

1. click button
2. expect xyz

## 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

apps/builder/app/builder/features/style-panel/controls/color/color-control.tsx

@@ -27,6 +27,9 @@ export const ColorControl = ({ property }: { property: StyleProperty }) => {
       onChange={(styleValue) => setValue(styleValue, { isEphemeral: true })}
       onChangeComplete={setValue}
       onAbort={() => deleteProperty(property, { isEphemeral: true })}
+      onReset={() => {
+        deleteProperty(property);
+      }}
     />
   );
 };

apps/builder/app/builder/features/style-panel/controls/text/text-control.tsx

@@ -55,6 +55,10 @@ export const TextControl = ({ property }: { property: StyleProperty }) => {
       onAbort={() => {
         deleteProperty(property, { isEphemeral: true });
       }}
+      onReset={() => {
+        setIntermediateValue(undefined);
+        deleteProperty(property);
+      }}
     />
   );
 };

apps/builder/app/builder/features/style-panel/sections/borders/border-color.tsx

@@ -84,6 +84,13 @@ export const BorderColor = () => {
                 }
                 batch.publish({ isEphemeral: true });
               }}
+              onReset={() => {
+                const batch = createBatchUpdate();
+                for (const property of properties) {
+                  batch.deleteProperty(property);
+                }
+                batch.publish();
+              }}
             />
           </div>
         </PropertyValueTooltip>

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

@@ -183,6 +183,10 @@ const GapInput = ({
         onAbort={() => {
           onPreviewChange();
         }}
+        onReset={() => {
+          onIntermediateChange(undefined);
+          onReset();
+        }}
       />
     </Box>
   );

apps/builder/app/builder/features/style-panel/sections/shared/input-popover.tsx

@@ -77,8 +77,8 @@ const Input = ({
         batch.publish({ isEphemeral: true });
       }}
       onChangeComplete={({ value }) => {
-        const batch = createBatchUpdate();
         setIntermediateValue(undefined);
+        const batch = createBatchUpdate();
         for (const property of activeProperties) {
           batch.setProperty(property)(value);
         }
@@ -90,6 +90,15 @@ const Input = ({
         batch.deleteProperty(property);
         batch.publish({ isEphemeral: true });
       }}
+      onReset={() => {
+        setIntermediateValue(undefined);
+        const batch = createBatchUpdate();
+        for (const property of activeProperties) {
+          batch.deleteProperty(property);
+        }
+        batch.publish();
+        onClosePopover();
+      }}
     />
   );
 };

apps/builder/app/builder/features/style-panel/sections/transforms/transform-scale.tsx

@@ -127,6 +127,9 @@ export const ScalePanelContent = () => {
               }
             }}
             onAbort={() => deleteProperty(property, { isEphemeral: true })}
+            onReset={() => {
+              deleteProperty(property);
+            }}
           />
         </Grid>
         <Grid
@@ -168,6 +171,9 @@ export const ScalePanelContent = () => {
               }
             }}
             onAbort={() => deleteProperty(property, { isEphemeral: true })}
+            onReset={() => {
+              deleteProperty(property);
+            }}
           />
         </Grid>
         <Grid
@@ -205,6 +211,9 @@ export const ScalePanelContent = () => {
               }
             }}
             onAbort={() => deleteProperty(property, { isEphemeral: true })}
+            onReset={() => {
+              deleteProperty(property);
+            }}
           />
         </Grid>
       </Flex>

apps/builder/app/builder/features/style-panel/shared/color-picker.tsx

@@ -169,6 +169,7 @@ const ColorPickerPopoverContent = ({
 type ColorPickerProps = {
   onChange: (value: StyleValue) => void;
   onChangeComplete: (value: StyleValue) => void;
+  onReset: () => void;
   onAbort: () => void;
   value: StyleValue;
   currentColor: StyleValue;
@@ -243,6 +244,7 @@ export const ColorPicker = ({
   onChange,
   onChangeComplete,
   onAbort,
+  onReset,
 }: ColorPickerProps) => {
   const [intermediateValue, setIntermediateValue] = useState<
     StyleValue | IntermediateStyleValue
@@ -326,6 +328,10 @@ export const ColorPicker = ({
         onChange(invalidValue);
       }}
       onAbort={onAbort}
+      onReset={() => {
+        setIntermediateValue(undefined);
+        onReset();
+      }}
     />
   );
 };

apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input-container.tsx

@@ -11,6 +11,7 @@ type CssValueInputContainerProps = {
   | "onChange"
   | "onHighlight"
   | "onChangeComplete"
+  | "onReset"
   | "onAbort"
   | "intermediateValue"
 >;
@@ -56,6 +57,9 @@ export const CssValueInputContainer = ({
       onAbort={() => {
         deleteProperty(property, { isEphemeral: true });
       }}
+      onReset={() => {
+        deleteProperty(property);
+      }}
     />
   );
 };

apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.stories.tsx

@@ -47,6 +47,9 @@ export const WithKeywords = () => {
       onAbort={() => {
         action("onAbort")();
       }}
+      onReset={() => {
+        action("onReset")();
+      }}
     />
   );
 };
@@ -91,6 +94,9 @@ export const WithIcons = () => {
       onAbort={() => {
         action("onAbort")();
       }}
+      onReset={() => {
+        action("onReset")();
+      }}
     />
   );
 };
@@ -134,6 +140,9 @@ export const WithUnits = () => {
         onAbort={() => {
           action("onAbort")();
         }}
+        onReset={() => {
+          action("onReset")();
+        }}
       />
       <InputField
         readOnly

apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input.tsx

@@ -267,6 +267,7 @@ type CssValueInputProps = Pick<
   onChangeComplete: (event: ChangeCompleteEvent) => void;
   onHighlight: (value: StyleValue | undefined) => void;
   onAbort: () => void;
+  onReset: () => void;
   icon?: ReactNode;
   showSuffix?: boolean;
 };
@@ -337,6 +338,7 @@ export const CssValueInput = ({
   getOptions = () => [],
   onHighlight,
   onAbort,
+  onReset,
   disabled,
   ["aria-disabled"]: ariaDisabled,
   fieldSizing,
@@ -376,6 +378,13 @@ export const CssValueInput = ({
     const { value } = event;
     const defaultProps = { altKey: false, shiftKey: false };
 
+    // We are resetting by setting the value to an empty string
+    if (value.type === "intermediate" && value.value === "") {
+      closeMenu();
+      onReset();
+      return;
+    }
+
     if (value.type !== "intermediate" && value.type !== "invalid") {
       // The value might be valid but not selected from the combo menu. Close the menu.
       closeMenu();

apps/builder/app/builder/features/style-panel/shared/shadow-content.tsx

@@ -336,6 +336,9 @@ export const ShadowContent = ({
               handlePropertyChange({ color: styleValue })
             }
             onAbort={() => handlePropertyChange({ color: colorControlProp })}
+            onReset={() => {
+              handlePropertyChange({ color: undefined });
+            }}
           />
         </Flex>