refactor: rename callbacks in css input container (#5014)

TrySound · web-flow · commit 8d05217cf300 · 2025-03-18T18:18:25.000+07:00
Css input container is simplified version of css value input. setValue
and deleteProperty callbacks do not follow callback style and have
inconsistent implementation. deleteProperty requires property to be
specified.

Here renamed setValue to onUpdate, deleteProperty to onDelete and
removed property parameter.

```
onUpdate: (style: StyleValue, options?: StyleUpdateOptions) =&gt; void;
onDelete: (options?: StyleUpdateOptions) =&gt; void;
```
diff --git a/apps/builder/app/builder/features/style-panel/controls/position/position-control.tsx b/apps/builder/app/builder/features/style-panel/controls/position/position-control.tsx
@@ -112,8 +112,8 @@ export const PositionControl = ({
             styleSource={styleDecl.source.name}
             getOptions={() => keywords}
             value={value.value[0]}
-            setValue={setValueX}
-            deleteProperty={deleteProperty}
+            onUpdate={setValueX}
+            onDelete={(options) => deleteProperty(property, options)}
           />
           <PropertyInlineLabel
             label="Top"
@@ -125,8 +125,8 @@ export const PositionControl = ({
             styleSource={styleDecl.source.name}
             getOptions={() => keywords}
             value={value.value[1]}
-            setValue={setValueY}
-            deleteProperty={deleteProperty}
+            onUpdate={setValueY}
+            onDelete={(options) => deleteProperty(property, options)}
           />
         </Grid>
       </Flex>
diff --git a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-position.tsx b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-position.tsx
@@ -79,10 +79,10 @@ export const BackgroundPosition = ({ index }: { index: number }) => {
               { type: "keyword", value: "right" },
             ]}
             value={xValue}
-            setValue={(value, options) => {
+            onUpdate={(value, options) => {
               setRepeatedStyleItem(backgroundPositionX, index, value, options);
             }}
-            deleteProperty={() => {
+            onDelete={() => {
               if (xValue) {
                 setRepeatedStyleItem(backgroundPositionX, index, xValue);
               }
@@ -102,10 +102,10 @@ export const BackgroundPosition = ({ index }: { index: number }) => {
               { type: "keyword", value: "bottom" },
             ]}
             value={yValue}
-            setValue={(value, options) => {
+            onUpdate={(value, options) => {
               setRepeatedStyleItem(backgroundPositionY, index, value, options);
             }}
-            deleteProperty={() => {
+            onDelete={() => {
               if (yValue) {
                 setRepeatedStyleItem(backgroundPositionY, index, yValue);
               }
diff --git a/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-size.tsx b/apps/builder/app/builder/features/style-panel/sections/backgrounds/background-size.tsx
@@ -142,8 +142,8 @@ export const BackgroundSize = ({ index }: { index: number }) => {
           styleSource="default"
           getOptions={() => customSizeOptions}
           value={customSizeValue.value[0]}
-          setValue={setValueX}
-          deleteProperty={() => {}}
+          onUpdate={setValueX}
+          onDelete={() => {}}
         />
 
         <CssValueInputContainer
@@ -152,8 +152,8 @@ export const BackgroundSize = ({ index }: { index: number }) => {
           styleSource="default"
           getOptions={() => customSizeOptions}
           value={customSizeValue.value[1]}
-          setValue={setValueY}
-          deleteProperty={() => {}}
+          onUpdate={setValueY}
+          onDelete={() => {}}
         />
       </Grid>
     </>
diff --git a/apps/builder/app/builder/features/style-panel/sections/borders/border-property.tsx b/apps/builder/app/builder/features/style-panel/sections/borders/border-property.tsx
@@ -86,14 +86,14 @@ export const BorderProperty = ({
               ...$availableUnitVariables.get(),
             ]}
             value={value}
-            setValue={(newValue, options) => {
+            onUpdate={(newValue, options) => {
               const batch = createBatchUpdate();
               for (const property of borderProperties) {
                 batch.setProperty(property)(newValue);
               }
               batch.publish(options);
             }}
-            deleteProperty={(_property, options) => {
+            onDelete={(options) => {
               const batch = createBatchUpdate();
               for (const property of borderProperties) {
                 batch.deleteProperty(property);
@@ -127,8 +127,10 @@ export const BorderProperty = ({
                 }))
               }
               value={styleDecl.cascadedValue}
-              setValue={setProperty(styleDecl.property)}
-              deleteProperty={deleteProperty}
+              onUpdate={setProperty(styleDecl.property)}
+              onDelete={(options) =>
+                deleteProperty(styleDecl.property, options)
+              }
             />
           ))}
         </Grid>
diff --git a/apps/builder/app/builder/features/style-panel/sections/transforms/transform-and-perspective-origin.tsx b/apps/builder/app/builder/features/style-panel/sections/transforms/transform-and-perspective-origin.tsx
@@ -187,8 +187,8 @@ export const TransformAndPerspectiveOrigin = ({
                 getOptions={() => xOriginKeywords}
                 styleSource="local"
                 property={fakePropertyX}
-                deleteProperty={() => {}}
-                setValue={(value, options) =>
+                onDelete={() => {}}
+                onUpdate={(value, options) =>
                   handleValueChange(0, value, options)
                 }
               />
@@ -214,8 +214,8 @@ export const TransformAndPerspectiveOrigin = ({
                 getOptions={() => yOriginKeywords}
                 styleSource="local"
                 property={fakePropertyY}
-                deleteProperty={() => {}}
-                setValue={(value, options) =>
+                onDelete={() => {}}
+                onUpdate={(value, options) =>
                   handleValueChange(1, value, options)
                 }
               />
@@ -235,8 +235,8 @@ export const TransformAndPerspectiveOrigin = ({
                   value={origin.z}
                   styleSource="local"
                   property={fakePropertyZ}
-                  deleteProperty={() => {}}
-                  setValue={(value, options) =>
+                  onDelete={() => {}}
+                  onUpdate={(value, options) =>
                     handleValueChange(2, value, options)
                   }
                 />
diff --git a/apps/builder/app/builder/features/style-panel/sections/transforms/transform-rotate.tsx b/apps/builder/app/builder/features/style-panel/sections/transforms/transform-rotate.tsx
@@ -53,10 +53,10 @@ export const RotatePanelContent = () => {
           property="rotate"
           getOptions={() => $availableUnitVariables.get()}
           value={rotateX}
-          setValue={(value, options) =>
+          onUpdate={(value, options) =>
             updateTransformFunction(styleDecl, "rotateX", value, options)
           }
-          deleteProperty={() => {}}
+          onDelete={() => {}}
         />
       </Grid>
       <Grid
@@ -73,10 +73,10 @@ export const RotatePanelContent = () => {
           property="rotate"
           getOptions={() => $availableUnitVariables.get()}
           value={rotateY}
-          setValue={(value, options) =>
+          onUpdate={(value, options) =>
             updateTransformFunction(styleDecl, "rotateY", value, options)
           }
-          deleteProperty={() => {}}
+          onDelete={() => {}}
         />
       </Grid>
       <Grid
@@ -93,10 +93,10 @@ export const RotatePanelContent = () => {
           property="rotate"
           getOptions={() => $availableUnitVariables.get()}
           value={rotateZ}
-          setValue={(value, options) =>
+          onUpdate={(value, options) =>
             updateTransformFunction(styleDecl, "rotateZ", value, options)
           }
-          deleteProperty={() => {}}
+          onDelete={() => {}}
         />
       </Grid>
     </Flex>
diff --git a/apps/builder/app/builder/features/style-panel/sections/transforms/transform-skew.tsx b/apps/builder/app/builder/features/style-panel/sections/transforms/transform-skew.tsx
@@ -50,10 +50,10 @@ export const SkewPanelContent = () => {
           styleSource="local"
           property={fakeProperty}
           value={skewX}
-          setValue={(value, options) =>
+          onUpdate={(value, options) =>
             updateTransformFunction(styleDecl, "skewX", value, options)
           }
-          deleteProperty={() => {}}
+          onDelete={() => {}}
         />
       </Grid>
       <Grid
@@ -69,10 +69,10 @@ export const SkewPanelContent = () => {
           styleSource="local"
           property={fakeProperty}
           value={skewY}
-          setValue={(value, options) =>
+          onUpdate={(value, options) =>
             updateTransformFunction(styleDecl, "skewY", value, options)
           }
-          deleteProperty={() => {}}
+          onDelete={() => {}}
         />
       </Grid>
     </Flex>
diff --git a/apps/builder/app/builder/features/style-panel/sections/transforms/transform-translate.tsx b/apps/builder/app/builder/features/style-panel/sections/transforms/transform-translate.tsx
@@ -63,8 +63,8 @@ export const TranslatePanelContent = () => {
           property={property}
           getOptions={() => $availableUnitVariables.get()}
           value={translateX}
-          setValue={(newValue, options) => setAxis(0, newValue, options)}
-          deleteProperty={(property, options) =>
+          onUpdate={(newValue, options) => setAxis(0, newValue, options)}
+          onDelete={(options) =>
             setProperty(property)(styleDecl.cascadedValue, options)
           }
         />
@@ -83,8 +83,8 @@ export const TranslatePanelContent = () => {
           property={property}
           getOptions={() => $availableUnitVariables.get()}
           value={translateY}
-          setValue={(newValue, options) => setAxis(1, newValue, options)}
-          deleteProperty={(property, options) =>
+          onUpdate={(newValue, options) => setAxis(1, newValue, options)}
+          onDelete={(options) =>
             setProperty(property)(styleDecl.cascadedValue, options)
           }
         />
@@ -103,8 +103,8 @@ export const TranslatePanelContent = () => {
           property={property}
           getOptions={() => $availableUnitVariables.get()}
           value={translateZ}
-          setValue={(newValue, options) => setAxis(2, newValue, options)}
-          deleteProperty={(property, options) =>
+          onUpdate={(newValue, options) => setAxis(2, newValue, options)}
+          onDelete={(options) =>
             setProperty(property)(styleDecl.cascadedValue, options)
           }
         />
diff --git a/apps/builder/app/builder/features/style-panel/sections/transitions/transition-content.tsx b/apps/builder/app/builder/features/style-panel/sections/transitions/transition-content.tsx
@@ -145,8 +145,8 @@ export const TransitionContent = ({ index }: { index: number }) => {
           styleSource="local"
           getOptions={() => $availableUnitVariables.get()}
           value={duration ?? propertiesData["transition-duration"].initial}
-          deleteProperty={() => {}}
-          setValue={(value, options) => {
+          onDelete={() => {}}
+          onUpdate={(value, options) => {
             if (value === undefined) {
               return;
             }
@@ -170,8 +170,8 @@ export const TransitionContent = ({ index }: { index: number }) => {
           styleSource="local"
           getOptions={() => $availableUnitVariables.get()}
           value={delay ?? propertiesData["transition-delay"].initial}
-          deleteProperty={() => {}}
-          setValue={(value, options) => {
+          onDelete={() => {}}
+          onUpdate={(value, options) => {
             if (value === undefined) {
               return;
             }
@@ -207,8 +207,8 @@ export const TransitionContent = ({ index }: { index: number }) => {
             timingFunction ??
             propertiesData["transition-timing-function"].initial
           }
-          deleteProperty={() => {}}
-          setValue={(value, options) => {
+          onDelete={() => {}}
+          onUpdate={(value, options) => {
             if (value === undefined) {
               return;
             }
diff --git a/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input-container.tsx b/apps/builder/app/builder/features/style-panel/shared/css-value-input/css-value-input-container.tsx
@@ -1,28 +1,28 @@
 import { type ComponentProps, useState } from "react";
 import type { StyleValue } from "@webstudio-is/css-engine";
 import { CssValueInput, type IntermediateStyleValue } from "./css-value-input";
-import type { DeleteProperty, SetValue } from "../use-style-data";
+import type { StyleUpdateOptions } from "../use-style-data";
 
-type CssValueInputContainerProps = {
-  setValue: SetValue;
-  deleteProperty: DeleteProperty;
-} & Omit<
+type CssValueInputContainerProps = Omit<
   ComponentProps<typeof CssValueInput>,
   | "onChange"
   | "onHighlight"
   | "onReset"
   | "onAbort"
   | "intermediateValue"
   | "onChangeComplete"
+  | "setProperty"
 > & {
-    onChangeComplete?: ComponentProps<typeof CssValueInput>["onChangeComplete"];
-    onReset?: ComponentProps<typeof CssValueInput>["onReset"];
-  };
+  onUpdate: (style: StyleValue, options?: StyleUpdateOptions) => void;
+  onDelete: (options?: StyleUpdateOptions) => void;
+  onChangeComplete?: ComponentProps<typeof CssValueInput>["onChangeComplete"];
+  onReset?: ComponentProps<typeof CssValueInput>["onReset"];
+};
 
 export const CssValueInputContainer = ({
   property,
-  setValue,
-  deleteProperty,
+  onUpdate,
+  onDelete,
   onChangeComplete,
   onReset,
   ...props
@@ -40,32 +40,32 @@ export const CssValueInputContainer = ({
         setIntermediateValue(styleValue);
 
         if (styleValue === undefined) {
-          deleteProperty(property, { isEphemeral: true });
+          onDelete({ isEphemeral: true });
           return;
         }
 
         if (styleValue.type !== "intermediate") {
-          setValue(styleValue, { isEphemeral: true });
+          onUpdate(styleValue, { isEphemeral: true });
         }
       }}
       onHighlight={(styleValue) => {
         if (styleValue !== undefined) {
-          setValue(styleValue, { isEphemeral: true });
+          onUpdate(styleValue, { isEphemeral: true });
         } else {
-          deleteProperty(property, { isEphemeral: true });
+          onDelete({ isEphemeral: true });
         }
       }}
       onChangeComplete={(event) => {
-        setValue(event.value);
+        onUpdate(event.value);
         setIntermediateValue(undefined);
         onChangeComplete?.(event);
       }}
       onAbort={() => {
-        deleteProperty(property, { isEphemeral: true });
+        onDelete({ isEphemeral: true });
       }}
       onReset={() => {
         setIntermediateValue(undefined);
-        deleteProperty(property);
+        onDelete();
         onReset?.();
       }}
     />
diff --git a/apps/builder/app/builder/features/style-panel/shared/filter-content.tsx b/apps/builder/app/builder/features/style-panel/shared/filter-content.tsx
@@ -208,8 +208,8 @@ export const FilterSectionContent = ({
                   unit: "px",
                 }
               }
-              setValue={handleFilterFunctionValueChange}
-              deleteProperty={() => {}}
+              onUpdate={handleFilterFunctionValueChange}
+              onDelete={() => {}}
             />
           </Grid>
         ) : undefined}
diff --git a/apps/builder/app/builder/features/style-panel/shared/shadow-content.tsx b/apps/builder/app/builder/features/style-panel/shared/shadow-content.tsx
diff --git a/apps/builder/app/builder/shared/css-editor/css-editor.tsx b/apps/builder/app/builder/shared/css-editor/css-editor.tsx
