Reset any style panel property with option+click (#1741)

Ref https://github.com/webstudio-is/webstudio-builder/issues/1730

## Description

- [ ] any flex items
- [ ] spacing  

## Steps for reproduction

1. set flex value on every flex and spacing property
2. option+click to reset

## Code Review

- [ ] hi @istarkov , 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:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory

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

@@ -9,7 +9,11 @@ export const MenuControl = ({
   items: passedItems,
   styleValue,
   setProperty,
-}: Pick<ControlProps, "property" | "items" | "setProperty"> & {
+  deleteProperty,
+}: Pick<
+  ControlProps,
+  "property" | "items" | "setProperty" | "deleteProperty"
+> & {
   styleValue?: StyleValueInfo;
 }) => {
   const { label, items: defaultItems } = styleConfigByName(property);
@@ -41,6 +45,9 @@ export const MenuControl = ({
       value={String(currentValue)}
       onChange={setValue}
       onHover={(value) => setValue(value, { isEphemeral: true })}
+      onReset={() => {
+        deleteProperty(property);
+      }}
     />
   );
 };

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

@@ -124,9 +124,11 @@ const GapInput = ({
 const FlexGap = ({
   style,
   createBatchUpdate,
+  deleteProperty,
 }: {
   style: StyleInfo;
   createBatchUpdate: CreateBatchUpdate;
+  deleteProperty: RenderCategoryProps["deleteProperty"];
 }) => {
   const batchUpdate = createBatchUpdate();
 
@@ -155,7 +157,19 @@ const FlexGap = ({
     >
       <Box css={{ gridArea: "columnGap" }}>
         <GapInput
-          icon={<GapHorizontalIcon />}
+          icon={
+            <GapHorizontalIcon
+              onClick={(event) => {
+                if (event.altKey) {
+                  event.preventDefault();
+                  deleteProperty("columnGap");
+                  if (isLinked) {
+                    deleteProperty("rowGap");
+                  }
+                }
+              }}
+            />
+          }
           style={style}
           property="columnGap"
           intermediateValue={intermediateColumnGap}
@@ -204,7 +218,19 @@ const FlexGap = ({
 
       <Box css={{ gridArea: "rowGap" }}>
         <GapInput
-          icon={<GapVerticalIcon />}
+          icon={
+            <GapVerticalIcon
+              onClick={(event) => {
+                if (event.altKey) {
+                  event.preventDefault();
+                  deleteProperty("rowGap");
+                  if (isLinked) {
+                    deleteProperty("columnGap");
+                  }
+                }
+              }}
+            />
+          }
           style={style}
           property="rowGap"
           intermediateValue={intermediateRowGap}
@@ -257,6 +283,7 @@ const Toggle = ({
   valueOff,
   currentStyle,
   setProperty,
+  deleteProperty,
 }: {
   property: StyleProperty;
   iconOn: ReactNode;
@@ -265,6 +292,7 @@ const Toggle = ({
   valueOff: string;
   currentStyle: RenderCategoryProps["currentStyle"];
   setProperty: RenderCategoryProps["setProperty"];
+  deleteProperty: RenderCategoryProps["deleteProperty"];
 }) => {
   const { label } = styleConfigByName(property);
   const styleValue = currentStyle[property]?.value;
@@ -274,6 +302,12 @@ const Toggle = ({
   return (
     <Tooltip content={label} delayDuration={400} disableHoverableContent={true}>
       <ToggleButton
+        onClick={(event) => {
+          if (event.altKey) {
+            event.preventDefault();
+            deleteProperty(property);
+          }
+        }}
         pressed={isPressed}
         onPressedChange={(isPressed) => {
           setProperty(property)({
@@ -292,10 +326,12 @@ const Toggle = ({
 const LayoutSectionFlex = ({
   currentStyle,
   setProperty,
+  deleteProperty,
   createBatchUpdate,
 }: {
   currentStyle: RenderCategoryProps["currentStyle"];
   setProperty: RenderCategoryProps["setProperty"];
+  deleteProperty: RenderCategoryProps["deleteProperty"];
   createBatchUpdate: RenderCategoryProps["createBatchUpdate"];
 }) => {
   const batchUpdate = createBatchUpdate();
@@ -322,6 +358,7 @@ const LayoutSectionFlex = ({
               valueOff="row"
               currentStyle={currentStyle}
               setProperty={setProperty}
+              deleteProperty={deleteProperty}
             />
             <Toggle
               property="flexWrap"
@@ -331,6 +368,7 @@ const LayoutSectionFlex = ({
               valueOff="nowrap"
               currentStyle={currentStyle}
               setProperty={setProperty}
+              deleteProperty={deleteProperty}
             />
           </Flex>
           <Flex css={{ gap: theme.spacing[7] }}>
@@ -338,24 +376,31 @@ const LayoutSectionFlex = ({
               property="alignItems"
               styleValue={mapNormalTo("stretch", currentStyle.alignItems)}
               setProperty={setProperty}
+              deleteProperty={deleteProperty}
             />
             <MenuControl
               property="justifyContent"
               styleValue={mapNormalTo("start", currentStyle.justifyContent)}
               setProperty={setProperty}
+              deleteProperty={deleteProperty}
             />
             {showAlignContent && (
               <MenuControl
                 property="alignContent"
                 styleValue={mapNormalTo("stretch", currentStyle.alignContent)}
                 setProperty={setProperty}
+                deleteProperty={deleteProperty}
               />
             )}
           </Flex>
         </Flex>
       </Flex>
 
-      <FlexGap style={currentStyle} createBatchUpdate={createBatchUpdate} />
+      <FlexGap
+        style={currentStyle}
+        createBatchUpdate={createBatchUpdate}
+        deleteProperty={deleteProperty}
+      />
     </Flex>
   );
 };
@@ -433,6 +478,7 @@ export const LayoutSection = ({
           <LayoutSectionFlex
             currentStyle={currentStyle}
             setProperty={setProperty}
+            deleteProperty={deleteProperty}
             createBatchUpdate={createBatchUpdate}
           />
         )}

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

@@ -135,7 +135,14 @@ export const SpaceSection = ({
     >
       <SpaceLayout
         ref={layoutRef}
-        onClick={() => setOpenProperty(hoverTarget?.property)}
+        onClick={(event) => {
+          const property = hoverTarget?.property;
+          if (event.altKey && property) {
+            deleteProperty(property);
+            return;
+          }
+          setOpenProperty(property);
+        }}
         onHover={handleHover}
         onFocus={keyboardNavigation.hadnleFocus}
         onBlur={keyboardNavigation.handleBlur}

packages/design-system/src/components/icon-button-with-menu.tsx

@@ -15,12 +15,13 @@ import { theme } from "../stitches.config";
 
 export const IconButtonWithMenu = ({
   variant,
-  icon: Icon,
+  icon,
   label,
   value,
   items,
   onChange,
   onHover,
+  onReset,
 }: {
   variant: "default" | "preset" | "local" | "overwritten" | "remote";
   icon?: JSX.Element;
@@ -33,6 +34,7 @@ export const IconButtonWithMenu = ({
   }>;
   onChange?: (value: string) => void;
   onHover?: (value: string) => void;
+  onReset?: () => void;
 }) => {
   return (
     <DropdownMenu modal={false}>
@@ -42,7 +44,17 @@ export const IconButtonWithMenu = ({
         disableHoverableContent={true}
       >
         <DropdownMenuTrigger asChild>
-          <IconButton variant={variant}>{Icon}</IconButton>
+          <IconButton
+            variant={variant}
+            onPointerDown={(event) => {
+              if (event.altKey) {
+                event.preventDefault();
+                onReset?.();
+              }
+            }}
+          >
+            {icon}
+          </IconButton>
         </DropdownMenuTrigger>
       </Tooltip>
       <DropdownMenuPortal>