From 17da4ab9690106e6a38091377d35b95450935157 Mon Sep 17 00:00:00 2001
From: Bogdan Chadkin <trysound@yandex.ru>
Date: Sat, 10 Dec 2022 12:05:40 +0300
Subject: [PATCH] Add proprety reset button in popover

Ref https://github.com/webstudio-is/webstudio-designer/issues/29
---
 apps/designer/app/canvas/shared/styles.ts     |   6 +
 .../sections/flex-child/flex-child.tsx        |  35 ++++++
 .../style-panel/sections/layout/layout.tsx    |   5 +
 .../sections/typography/typography.tsx        | 100 +++++++++++++--
 .../style-panel/shared/property-name.tsx      | 114 +++++++++++++-----
 .../style-panel/shared/use-style-data.ts      |  16 ++-
 .../features/style-panel/style-sections.tsx   |  16 +--
 packages/css-engine/src/core/rules.ts         |   8 ++
 .../shared/tree-utils/set-instance-style.ts   |   6 +-
 9 files changed, 252 insertions(+), 54 deletions(-)

diff --git a/apps/designer/app/canvas/shared/styles.ts b/apps/designer/app/canvas/shared/styles.ts
index dfa0f3b9191..aae05f9c3eb 100644
--- a/apps/designer/app/canvas/shared/styles.ts
+++ b/apps/designer/app/canvas/shared/styles.ts
@@ -180,6 +180,12 @@ export const useCssRules = ({
       for (property in dynamicStyle) {
         rule.styleMap.set(property, dynamicStyle[property]);
       }
+      // delete previously rendered properties when reset
+      for (const property of rule.styleMap.keys()) {
+        if (dynamicStyle[property] == null) {
+          rule.styleMap.delete(property);
+        }
+      }
     }
     cssEngine.render();
   }, [id, cssRules]);
diff --git a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx
index a22b77acbb0..824b16b6c65 100644
--- a/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx
+++ b/apps/designer/app/designer/features/style-panel/sections/flex-child/flex-child.tsx
@@ -38,6 +38,11 @@ const FlexChildSectionAlign = (props: RenderCategoryProps) => {
       <PropertyName
         property={sectionStyle.alignSelf?.styleConfig.property}
         label="Align"
+        onReset={() => {
+          sectionStyle.alignSelf.setProperty(
+            sectionStyle.alignSelf?.styleConfig.property
+          )({ type: "unset", value: "" });
+        }}
       />
       <ToggleGroupControl
         property={sectionStyle.alignSelf?.styleConfig.property}
@@ -92,6 +97,11 @@ const FlexChildSectionSizing = (props: RenderCategoryProps) => {
           sectionStyle.flexShrink?.styleConfig.property,
         ]}
         label="Sizing"
+        onReset={() => {
+          setSizing.setProperty("flexGrow")({ type: "unset", value: "" });
+          setSizing.setProperty("flexShrink")({ type: "unset", value: "" });
+          setSizing.publish();
+        }}
       />
       <ToggleGroupControl
         property={[
@@ -169,6 +179,11 @@ const FlexChildSectionSizingPopover = ({
             <PropertyName
               property={sectionStyle.flexBasis?.styleConfig.property}
               label="Basis"
+              onReset={() => {
+                sectionStyle.flexBasis.setProperty(
+                  sectionStyle.flexBasis?.styleConfig.property
+                )({ type: "unset", value: "" });
+              }}
             />
             <TextControl {...sectionStyle.flexBasis} />
           </Grid>
@@ -176,6 +191,11 @@ const FlexChildSectionSizingPopover = ({
             <PropertyName
               property={sectionStyle.flexGrow?.styleConfig.property}
               label="Grow"
+              onReset={() => {
+                sectionStyle.flexGrow.setProperty(
+                  sectionStyle.flexGrow?.styleConfig.property
+                )({ type: "unset", value: "" });
+              }}
             />
             <TextControl {...sectionStyle.flexGrow} />
           </Grid>
@@ -183,6 +203,11 @@ const FlexChildSectionSizingPopover = ({
             <PropertyName
               property={sectionStyle.flexShrink?.styleConfig.property}
               label="Shrink"
+              onReset={() => {
+                sectionStyle.flexShrink.setProperty(
+                  sectionStyle.flexShrink?.styleConfig.property
+                )({ type: "unset", value: "" });
+              }}
             />
             <TextControl {...sectionStyle.flexShrink} />
           </Grid>
@@ -205,6 +230,11 @@ const FlexChildSectionOrder = (props: RenderCategoryProps) => {
       <PropertyName
         property={sectionStyle.order?.styleConfig.property}
         label="Order"
+        onReset={() => {
+          sectionStyle.order.setProperty(
+            sectionStyle.order?.styleConfig.property
+          )({ type: "unset", value: "" });
+        }}
       />
       <ToggleGroupControl
         property={sectionStyle.order?.styleConfig.property}
@@ -257,6 +287,11 @@ const FlexChildSectionOrderPopover = (props: RenderCategoryProps) => {
             <PropertyName
               property={sectionStyle.order?.styleConfig.property}
               label="Order"
+              onReset={() => {
+                sectionStyle.order.setProperty(
+                  sectionStyle.order?.styleConfig.property
+                )({ type: "unset", value: "" });
+              }}
             />
             <TextControl {...sectionStyle.order} />
           </Grid>
diff --git a/apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx b/apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx
index 17aba833038..0cb79dd7675 100644
--- a/apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx
+++ b/apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx
@@ -61,6 +61,11 @@ const LayoutSectionFlex = ({
           <PropertyName
             property={display.styleConfig.property}
             label={display.styleConfig.label}
+            onReset={() => {
+              sectionStyle.display.setProperty(
+                sectionStyle.display.styleConfig.property
+              )({ type: "unset", value: "" });
+            }}
           />
           <SelectControl {...display} />
         </Grid>
diff --git a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx
index 67c941d281d..f9d33ad26e2 100644
--- a/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx
+++ b/apps/designer/app/designer/features/style-panel/sections/typography/typography.tsx
@@ -55,15 +55,39 @@ export const TypographySectionFont = (props: RenderCategoryProps) => {
       }}
     >
       <Grid css={{ gridTemplateColumns: "4fr 6fr" }}>
-        <PropertyName label="Font" property="fontFamily" />
+        <PropertyName
+          label="Font"
+          property="fontFamily"
+          onReset={() => {
+            sectionStyle.fontFamily.setProperty(
+              sectionStyle.fontFamily.styleConfig.property
+            )({ type: "unset", value: "" });
+          }}
+        />
         <FontFamilyControl {...sectionStyle.fontFamily} />
       </Grid>
       <Grid css={{ gridTemplateColumns: "4fr 6fr" }}>
-        <PropertyName label="Weight" property="fontWeight" />
+        <PropertyName
+          label="Weight"
+          property="fontWeight"
+          onReset={() => {
+            sectionStyle.fontWeight.setProperty(
+              sectionStyle.fontWeight.styleConfig.property
+            )({ type: "unset", value: "" });
+          }}
+        />
         <FontWeightControl {...sectionStyle.fontWeight} />
       </Grid>
       <Grid css={{ gridTemplateColumns: "4fr 6fr" }}>
-        <PropertyName label="Color" property="color" />
+        <PropertyName
+          label="Color"
+          property="color"
+          onReset={() => {
+            sectionStyle.color.setProperty(
+              sectionStyle.color.styleConfig.property
+            )({ type: "unset", value: "" });
+          }}
+        />
         <ColorControl {...sectionStyle.color} />
       </Grid>
     </Grid>
@@ -81,15 +105,39 @@ export const TypographySectionSizing = (props: RenderCategoryProps) => {
       }}
     >
       <Grid css={{ gridTemplateColumns: "auto", gap: "$spacing$3" }}>
-        <PropertyName property="fontSize" label="Size" />
+        <PropertyName
+          property="fontSize"
+          label="Size"
+          onReset={() => {
+            sectionStyle.fontSize.setProperty(
+              sectionStyle.fontSize.styleConfig.property
+            )({ type: "unset", value: "" });
+          }}
+        />
         <TextControl {...sectionStyle.fontSize} />
       </Grid>
       <Grid css={{ gridTemplateColumns: "auto", gap: "$spacing$3" }}>
-        <PropertyName property="lineHeight" label="Height" />
+        <PropertyName
+          property="lineHeight"
+          label="Height"
+          onReset={() => {
+            sectionStyle.lineHeight.setProperty(
+              sectionStyle.lineHeight.styleConfig.property
+            )({ type: "unset", value: "" });
+          }}
+        />
         <TextControl {...sectionStyle.lineHeight} />
       </Grid>
       <Grid css={{ gridTemplateColumns: "auto", gap: "$spacing$3" }}>
-        <PropertyName property="letterSpacing" label="Spacing" />
+        <PropertyName
+          property="letterSpacing"
+          label="Spacing"
+          onReset={() => {
+            sectionStyle.letterSpacing.setProperty(
+              sectionStyle.letterSpacing.styleConfig.property
+            )({ type: "unset", value: "" });
+          }}
+        />
         <TextControl {...sectionStyle.letterSpacing} />
       </Grid>
     </Grid>
@@ -235,11 +283,27 @@ export const TypographySectionAdvancedPopover = (
       content={
         <Grid css={{ padding: "$spacing$9", gap: "$spacing$9" }}>
           <Grid css={{ gridTemplateColumns: "4fr 6fr" }}>
-            <PropertyName property="whiteSpace" label="White Space" />
+            <PropertyName
+              property="whiteSpace"
+              label="White Space"
+              onReset={() => {
+                sectionStyle.whiteSpace.setProperty(
+                  sectionStyle.whiteSpace.styleConfig.property
+                )({ type: "unset", value: "" });
+              }}
+            />
             <SelectControl {...sectionStyle.whiteSpace} />
           </Grid>
           <Grid css={{ gridTemplateColumns: "4fr auto" }}>
-            <PropertyName property="direction" label="Direction" />
+            <PropertyName
+              property="direction"
+              label="Direction"
+              onReset={() => {
+                sectionStyle.direction.setProperty(
+                  sectionStyle.direction.styleConfig.property
+                )({ type: "unset", value: "" });
+              }}
+            />
             <ToggleGroupControl
               property="direction"
               onValueChange={(value) => setDirection(value)}
@@ -259,7 +323,15 @@ export const TypographySectionAdvancedPopover = (
             />
           </Grid>
           <Grid css={{ gridTemplateColumns: "4fr auto" }}>
-            <PropertyName property="hyphens" label="Hyphens" />
+            <PropertyName
+              property="hyphens"
+              label="Hyphens"
+              onReset={() => {
+                sectionStyle.hyphens.setProperty(
+                  sectionStyle.hyphens.styleConfig.property
+                )({ type: "unset", value: "" });
+              }}
+            />
             <ToggleGroupControl
               property="hyphens"
               onValueChange={(value) => setHyphens(value)}
@@ -279,7 +351,15 @@ export const TypographySectionAdvancedPopover = (
             />
           </Grid>
           <Grid css={{ gridTemplateColumns: "4fr auto" }}>
-            <PropertyName property="textOverflow" label="Text Overflow" />
+            <PropertyName
+              property="textOverflow"
+              label="Text Overflow"
+              onReset={() => {
+                sectionStyle.textOverflow.setProperty(
+                  sectionStyle.textOverflow.styleConfig.property
+                )({ type: "unset", value: "" });
+              }}
+            />
             <ToggleGroupControl
               property="textOverflow"
               onValueChange={(value) => setTextOverflow(value)}
diff --git a/apps/designer/app/designer/features/style-panel/shared/property-name.tsx b/apps/designer/app/designer/features/style-panel/shared/property-name.tsx
index 260911c56ab..48abc2b8696 100644
--- a/apps/designer/app/designer/features/style-panel/shared/property-name.tsx
+++ b/apps/designer/app/designer/features/style-panel/shared/property-name.tsx
@@ -1,39 +1,89 @@
-import { Flex, Label, Tooltip } from "@webstudio-is/design-system";
+import { useState } from "react";
+import type { StyleProperty } from "@webstudio-is/css-data";
+import {
+  Button,
+  Flex,
+  Box,
+  Text,
+  Label,
+  Tooltip,
+  Popover,
+  PopoverContent,
+  PopoverPortal,
+  PopoverTrigger,
+  Separator,
+} from "@webstudio-is/design-system";
+import { UndoIcon } from "@webstudio-is/icons";
 import { useIsFromCurrentBreakpoint } from "./use-is-from-current-breakpoint";
-import { propertyNameColorForSelectedBreakpoint } from "./constants";
-import type { PropertyProps } from "../style-sections";
 
-export const PropertyName = ({ property, label, css }: PropertyProps) => {
+type PropertyProps = {
+  property: StyleProperty | StyleProperty[];
+  label: string;
+  onReset: () => void;
+};
+
+export const PropertyName = ({ property, label, onReset }: PropertyProps) => {
   const isCurrentBreakpoint = useIsFromCurrentBreakpoint(property);
+  const [isOpen, setIsOpen] = useState(false);
+  const isPopoverEnabled = isCurrentBreakpoint;
+
+  const labelElement = (
+    <Label
+      css={{
+        fontWeight: "inherit",
+        padding: "calc($spacing$3 / 2) $spacing$3",
+        ...(isCurrentBreakpoint
+          ? {
+              color: "$blue11",
+              backgroundColor: "$colors$blue4",
+              borderRadius: "$borderRadius$4",
+            }
+          : {
+              color: "$hiContrast",
+            }),
+      }}
+      htmlFor={property.toString()}
+    >
+      {label}
+    </Label>
+  );
+
+  if (isPopoverEnabled) {
+    return (
+      <Flex align="center">
+        <Popover modal open={isOpen} onOpenChange={setIsOpen}>
+          <PopoverTrigger asChild aria-label="Show proprety description">
+            {labelElement}
+          </PopoverTrigger>
+          <PopoverPortal>
+            <PopoverContent align="start" onClick={() => setIsOpen(false)}>
+              <Flex align="start" css={{ padding: "$spacing$3 $spacing$4" }}>
+                <Button onClick={onReset}>
+                  <UndoIcon /> &nbsp; Reset
+                </Button>
+              </Flex>
+              <Separator />
+              <Box css={{ padding: "$spacing$3 $spacing$4" }}>
+                <Text color="hint">
+                  Resetting will revert to initial or inherited value
+                </Text>
+              </Box>
+            </PopoverContent>
+          </PopoverPortal>
+        </Popover>
+      </Flex>
+    );
+  }
+
   return (
-    <Tooltip content={label} delayDuration={600} disableHoverableContent={true}>
-      <Flex
-        css={{
-          ...css,
-          alignItems: "center",
-        }}
+    <Flex align="center">
+      <Tooltip
+        content={label}
+        delayDuration={600}
+        disableHoverableContent={true}
       >
-        <Label
-          css={{
-            gridColumn: "1",
-            fontWeight: "inherit",
-            ...(isCurrentBreakpoint
-              ? {
-                  color: propertyNameColorForSelectedBreakpoint,
-                  backgroundColor: "$colors$blue4",
-                  padding: "calc($spacing$3 / 2) $spacing$3",
-                  borderRadius: "$borderRadius$4",
-                }
-              : {
-                  color: "$hiContrast",
-                }),
-          }}
-          htmlFor={String(property)}
-        >
-          {label}
-        </Label>
-      </Flex>
-    </Tooltip>
+        {labelElement}
+      </Tooltip>
+    </Flex>
   );
 };
-PropertyName.displayName = "PropertyName";
diff --git a/apps/designer/app/designer/features/style-panel/shared/use-style-data.ts b/apps/designer/app/designer/features/style-panel/shared/use-style-data.ts
index 3ea42e34faf..57d5e644fbb 100644
--- a/apps/designer/app/designer/features/style-panel/shared/use-style-data.ts
+++ b/apps/designer/app/designer/features/style-panel/shared/use-style-data.ts
@@ -129,7 +129,13 @@ export const useStyleData = ({
       }
 
       if (options.isEphemeral === false) {
-        setCurrentStyle({ ...currentStyle, [property]: nextValue });
+        if (nextValue.type === "unset") {
+          const newStyle = { ...currentStyle };
+          delete newStyle[property];
+          setCurrentStyle(newStyle);
+        } else {
+          setCurrentStyle({ ...currentStyle, [property]: nextValue });
+        }
       }
     };
   };
@@ -169,8 +175,12 @@ export const useStyleData = ({
       publishUpdates("update", updates);
       const nextStyle = updates.reduce(
         (currentStyle, { property, value }) => {
-          // @todo
-          currentStyle[property] = value;
+          if (value.type === "unset") {
+            delete currentStyle[property];
+          } else {
+            // @todo
+            currentStyle[property] = value;
+          }
           return currentStyle;
         },
         { ...currentStyle }
diff --git a/apps/designer/app/designer/features/style-panel/style-sections.tsx b/apps/designer/app/designer/features/style-panel/style-sections.tsx
index d97d770f76d..fb9b34f0928 100644
--- a/apps/designer/app/designer/features/style-panel/style-sections.tsx
+++ b/apps/designer/app/designer/features/style-panel/style-sections.tsx
@@ -2,7 +2,7 @@ import { Grid, type CSS } from "@webstudio-is/design-system";
 import { toValue } from "@webstudio-is/css-engine";
 import type { StyleConfig } from "./shared/configs";
 import type { Category } from "@webstudio-is/react-sdk";
-import type { Style, StyleProperty } from "@webstudio-is/css-data";
+import type { Style } from "@webstudio-is/css-data";
 import type { SetProperty, CreateBatchUpdate } from "./shared/use-style-data";
 import type { InheritedStyle } from "./shared/get-inherited-style";
 import * as controls from "./controls";
@@ -21,12 +21,6 @@ import {
 } from "./sections";
 import { PropertyName } from "./shared/property-name";
 
-export type PropertyProps = {
-  property: StyleProperty | StyleProperty[];
-  label: string;
-  css?: CSS;
-};
-
 export type ControlProps = {
   setProperty: SetProperty;
   currentStyle: Style;
@@ -71,7 +65,13 @@ export const renderProperty = ({
 
   return (
     <Grid key={category + property} css={{ gridTemplateColumns: "4fr 6fr" }}>
-      <PropertyName property={styleConfig.property} label={styleConfig.label} />
+      <PropertyName
+        property={styleConfig.property}
+        label={styleConfig.label}
+        onReset={() => {
+          setProperty(styleConfig.property)({ type: "unset", value: "" });
+        }}
+      />
       <Control
         currentStyle={currentStyle}
         inheritedStyle={inheritedStyle}
diff --git a/packages/css-engine/src/core/rules.ts b/packages/css-engine/src/core/rules.ts
index b237c455dba..06a0cb28354 100644
--- a/packages/css-engine/src/core/rules.ts
+++ b/packages/css-engine/src/core/rules.ts
@@ -15,6 +15,14 @@ class StylePropertyMap {
   has(property: StyleProperty) {
     return this.#styleMap.has(property);
   }
+  keys() {
+    return this.#styleMap.keys();
+  }
+  delete(property: StyleProperty) {
+    this.#styleMap.delete(property);
+    this.#isDirty = true;
+    this.onChange?.();
+  }
   clear() {
     this.#styleMap.clear();
     this.#isDirty = true;
diff --git a/packages/project/src/shared/tree-utils/set-instance-style.ts b/packages/project/src/shared/tree-utils/set-instance-style.ts
index 2580fd4c851..fd2cd12bff8 100644
--- a/packages/project/src/shared/tree-utils/set-instance-style.ts
+++ b/packages/project/src/shared/tree-utils/set-instance-style.ts
@@ -22,7 +22,11 @@ export const setInstanceStyleMutable = (
   }
 
   for (const update of updates) {
-    cssRule.style[update.property] = update.value;
+    if (update.value.type === "unset") {
+      delete cssRule.style[update.property];
+    } else {
+      cssRule.style[update.property] = update.value;
+    }
   }
   return true;
 };