Reset properties with option-click (#1866)

## Description

Closes  https://github.com/webstudio-is/webstudio-builder/issues/1844

## Steps for reproduction

1. see issue

## Code Review

- [ ] hi @TrySound , I need you to do
  - conceptual review (architecture, feature-correctness)
- [ ] hi @taylornowotny  , I need you to do
  - QC


## 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/toggle/toggle-control.tsx

@@ -11,6 +11,7 @@ export type ToggleGroupControlProps = {
   value: string;
   items: { child: JSX.Element; label: string; value: string }[];
   onValueChange?: (value: string) => void;
+  onReset: () => void;
 };
 
 // @todo refactor this control to follow the standard interface we otherwise have for all controls
@@ -19,6 +20,7 @@ export const ToggleGroupControl = ({
   value = "",
   items = [],
   onValueChange,
+  onReset,
 }: ToggleGroupControlProps) => {
   return (
     <ToggleGroup
@@ -31,7 +33,14 @@ export const ToggleGroupControl = ({
       {items.map(({ child, label, value }, index) => {
         return (
           <EnhancedTooltip key={index} content={label}>
-            <ToggleGroupButton value={value}>
+            <ToggleGroupButton
+              value={value}
+              onClick={(event) => {
+                if (event.altKey) {
+                  onReset?.();
+                }
+              }}
+            >
               <Flex>{child}</Flex>
             </ToggleGroupButton>
           </EnhancedTooltip>

apps/builder/app/builder/features/style-panel/sections/backgrounds/background-content.tsx

@@ -271,6 +271,7 @@ export const BackgroundContent = (props: BackgroundContentProps) => {
                       value,
                     })
                   }
+                  onReset={() => deleteProperty("backgroundRepeat")}
                   value={toValue(props.currentStyle.backgroundRepeat?.value)}
                   items={[
                     {

apps/builder/app/builder/features/style-panel/sections/flex-child/flex-child.tsx

@@ -59,6 +59,7 @@ const FlexChildSectionAlign = (props: RenderCategoryProps) => {
       />
       <ToggleGroupControl
         onValueChange={(value) => setAlignSelf({ type: "keyword", value })}
+        onReset={() => deleteProperty("alignSelf")}
         value={toValue(currentStyle.alignSelf?.value)}
         items={[
           {
@@ -100,7 +101,11 @@ const FlexChildSectionAlign = (props: RenderCategoryProps) => {
 const FlexChildSectionSizing = (props: RenderCategoryProps) => {
   const { createBatchUpdate, currentStyle } = props;
   const setSizing = createBatchUpdate();
-
+  const onReset = () => {
+    setSizing.deleteProperty("flexGrow");
+    setSizing.deleteProperty("flexShrink");
+    setSizing.publish();
+  };
   return (
     <Grid css={{ gridTemplateColumns: "4fr auto" }}>
       <PropertyName
@@ -108,13 +113,10 @@ const FlexChildSectionSizing = (props: RenderCategoryProps) => {
         properties={["flexGrow", "flexShrink"]}
         label="Sizing"
         description="Specifies the ability of a flex item to grow or shrink"
-        onReset={() => {
-          setSizing.deleteProperty("flexGrow");
-          setSizing.deleteProperty("flexShrink");
-          setSizing.publish();
-        }}
+        onReset={onReset}
       />
       <ToggleGroupControl
+        onReset={onReset}
         onValueChange={(value) => {
           switch (value) {
             case "none": {
@@ -273,6 +275,7 @@ const FlexChildSectionOrder = (props: RenderCategoryProps) => {
         onReset={() => deleteProperty("order")}
       />
       <ToggleGroupControl
+        onReset={() => deleteProperty("order")}
         onValueChange={(value) => {
           switch (value) {
             case "0":

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

@@ -132,6 +132,7 @@ export const SizeSection = ({
           onReset={() => deleteProperty("overflow")}
         />
         <ToggleGroupControl
+          onReset={() => deleteProperty("overflow")}
           items={[
             {
               child: <EyeconOpenIcon />,

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

@@ -184,7 +184,7 @@ export const TypographySectionSizing = (props: RenderCategoryProps) => {
 };
 
 export const TypographySectionAdvanced = (props: RenderCategoryProps) => {
-  const { setProperty, currentStyle } = props;
+  const { setProperty, deleteProperty, currentStyle } = props;
   const setTextAlign = setProperty("textAlign");
   const setTextDecorationLine = setProperty("textDecorationLine");
   const setTextTransform = setProperty("textTransform");
@@ -205,6 +205,7 @@ export const TypographySectionAdvanced = (props: RenderCategoryProps) => {
         <ToggleGroupControl
           styleSource={getStyleSource(currentStyle.textAlign)}
           onValueChange={(value) => setTextAlign({ type: "keyword", value })}
+          onReset={() => deleteProperty("textAlign")}
           value={String(getTextAlign(toValue(currentStyle.textAlign?.value)))}
           items={[
             {
@@ -234,6 +235,7 @@ export const TypographySectionAdvanced = (props: RenderCategoryProps) => {
           onValueChange={(value) =>
             setTextDecorationLine({ type: "keyword", value })
           }
+          onReset={() => deleteProperty("textDecorationLine")}
           value={toValue(currentStyle.textDecorationLine?.value)}
           items={[
             {
@@ -266,6 +268,7 @@ export const TypographySectionAdvanced = (props: RenderCategoryProps) => {
           onValueChange={(value) =>
             setTextTransform({ type: "keyword", value })
           }
+          onReset={() => deleteProperty("textTransform")}
           value={toValue(currentStyle.textTransform?.value)}
           items={[
             {
@@ -293,6 +296,7 @@ export const TypographySectionAdvanced = (props: RenderCategoryProps) => {
         <ToggleGroupControl
           styleSource={getStyleSource(currentStyle.fontStyle)}
           onValueChange={(value) => setFontStyle({ type: "keyword", value })}
+          onReset={() => deleteProperty("fontStyle")}
           value={toValue(currentStyle.fontStyle?.value)}
           items={[
             {
@@ -350,6 +354,7 @@ export const TypographySectionAdvancedPopover = (
               onValueChange={(value) =>
                 setDirection({ type: "keyword", value })
               }
+              onReset={() => deleteProperty("direction")}
               value={toValue(currentStyle.direction?.value)}
               items={[
                 {
@@ -374,6 +379,7 @@ export const TypographySectionAdvancedPopover = (
             />
             <ToggleGroupControl
               onValueChange={(value) => setHyphens({ type: "keyword", value })}
+              onReset={() => deleteProperty("hyphens")}
               value={toValue(currentStyle.hyphens?.value)}
               items={[
                 {
@@ -400,6 +406,7 @@ export const TypographySectionAdvancedPopover = (
               onValueChange={(value) =>
                 setTextOverflow({ type: "keyword", value })
               }
+              onReset={() => deleteProperty("textOverflow")}
               value={toValue(currentStyle.textOverflow?.value)}
               items={[
                 {

apps/builder/app/builder/features/style-panel/shared/property-name.tsx

@@ -221,7 +221,7 @@ type PropertyNameInternalProps = {
   label: string | ReactElement;
   title?: string;
   description?: React.ReactNode;
-  onReset?: undefined | (() => void);
+  onReset?: () => void;
   disabled?: boolean;
 };
 
@@ -263,7 +263,11 @@ const PropertyNameInternal = ({
           shrink
           gap={1}
           align="center"
-          onClick={() => {
+          onClick={(event) => {
+            if (event.altKey) {
+              onReset?.();
+              return;
+            }
             setIsOpen(true);
           }}
         >