diff --git a/apps/builder/app/builder/features/style-panel/controls/menu/menu-control.tsx b/apps/builder/app/builder/features/style-panel/controls/menu/menu-control.tsx index df12256625..5d613415d3 100644 --- a/apps/builder/app/builder/features/style-panel/controls/menu/menu-control.tsx +++ b/apps/builder/app/builder/features/style-panel/controls/menu/menu-control.tsx @@ -9,7 +9,11 @@ export const MenuControl = ({ items: passedItems, styleValue, setProperty, -}: Pick & { + 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); + }} /> ); }; diff --git a/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx b/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx index 4ff2fc2301..295c603d39 100644 --- a/apps/builder/app/builder/features/style-panel/sections/layout/layout.tsx +++ b/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 = ({ > } + icon={ + { + if (event.altKey) { + event.preventDefault(); + deleteProperty("columnGap"); + if (isLinked) { + deleteProperty("rowGap"); + } + } + }} + /> + } style={style} property="columnGap" intermediateValue={intermediateColumnGap} @@ -204,7 +218,19 @@ const FlexGap = ({ } + icon={ + { + 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 ( { + 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} /> @@ -338,24 +376,31 @@ const LayoutSectionFlex = ({ property="alignItems" styleValue={mapNormalTo("stretch", currentStyle.alignItems)} setProperty={setProperty} + deleteProperty={deleteProperty} /> {showAlignContent && ( )} - + ); }; @@ -433,6 +478,7 @@ export const LayoutSection = ({ )} diff --git a/apps/builder/app/builder/features/style-panel/sections/space/space.tsx b/apps/builder/app/builder/features/style-panel/sections/space/space.tsx index bda092f3cd..3ffa9d45e8 100644 --- a/apps/builder/app/builder/features/style-panel/sections/space/space.tsx +++ b/apps/builder/app/builder/features/style-panel/sections/space/space.tsx @@ -135,7 +135,14 @@ export const SpaceSection = ({ > 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} diff --git a/packages/design-system/src/components/icon-button-with-menu.tsx b/packages/design-system/src/components/icon-button-with-menu.tsx index d1532beb2e..868e61ac08 100644 --- a/packages/design-system/src/components/icon-button-with-menu.tsx +++ b/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 ( @@ -42,7 +44,17 @@ export const IconButtonWithMenu = ({ disableHoverableContent={true} > - {Icon} + { + if (event.altKey) { + event.preventDefault(); + onReset?.(); + } + }} + > + {icon} +