diff --git a/editor/src/components/canvas/canvas-strategies/strategies/group-conversion-helpers.ts b/editor/src/components/canvas/canvas-strategies/strategies/group-conversion-helpers.ts index f1da2798c37a..e384aa37ddeb 100644 --- a/editor/src/components/canvas/canvas-strategies/strategies/group-conversion-helpers.ts +++ b/editor/src/components/canvas/canvas-strategies/strategies/group-conversion-helpers.ts @@ -8,6 +8,7 @@ import { } from '../../../../core/model/element-metadata-utils' import { generateUidWithExistingComponents } from '../../../../core/model/element-template-utils' import { + removeBackgroundProperties, removeMarginProperties, removePaddingProperties, } from '../../../../core/model/margin-and-padding' @@ -114,6 +115,7 @@ import type { AbsolutePin } from './resize-helpers' import { ensureAtLeastTwoPinsForEdgePosition, isHorizontalPin } from './resize-helpers' import { createMoveCommandsForElement } from './shared-move-strategies-helpers' import { getConditionalActiveCase } from '../../../../core/model/conditionals' +import { showToastCommand } from '../../commands/show-toast-command' const GroupImport: Imports = { 'utopia-api': { @@ -590,8 +592,8 @@ export function convertFrameToGroup( } const { children, uid, props } = instance.element.value - // Remove the padding properties from the parent. - const propsWithoutPadding = removePaddingProperties(props) + // Remove the padding and background properties from the parent. + const propsWithoutPadding = removeBackgroundProperties(removePaddingProperties(props)) // Remove the margin properties for the children of the newly created group. const toPropsOptic = traverseArray() .compose(fromTypeGuard(isJSXElement)) @@ -642,6 +644,11 @@ export function convertFrameToGroup( }), ...moveChildrenCommands, queueGroupTrueUp([trueUpChildrenOfElementChanged(elementPath)]), + showToastCommand( + 'Converted to group and removed styling', + 'INFO', + 'convert-frame-to-group-toast', + ), ] } diff --git a/editor/src/components/canvas/groups.spec.browser2.tsx b/editor/src/components/canvas/groups.spec.browser2.tsx index 1dae169ec960..b8a92838098c 100644 --- a/editor/src/components/canvas/groups.spec.browser2.tsx +++ b/editor/src/components/canvas/groups.spec.browser2.tsx @@ -278,7 +278,6 @@ describe('Groups', () => { `
= [ PP.create('style', 'paddingTop'), ] +export const BackgroundPropertyPaths: Array = [ + PP.create('style', 'background'), + PP.create('style', 'backgroundAttachment'), + PP.create('style', 'backgroundClip'), + PP.create('style', 'backgroundColor'), + PP.create('style', 'backgroundOrigin'), + PP.create('style', 'backgroundPosition'), + PP.create('style', 'backgroundRepeat'), + PP.create('style', 'backgroundSize'), + PP.create('style', 'backgroundImage'), + PP.create('style', 'backgroundBlendMode'), + PP.create('style', 'backgroundPositionX'), + PP.create('style', 'backgroundPositionY'), +] + export function removePaddingProperties(jsxAttributes: JSXAttributes): JSXAttributes { return defaultEither(jsxAttributes, unsetJSXValuesAtPaths(jsxAttributes, PaddingPropertyPaths)) } @@ -40,3 +55,7 @@ export function removePaddingProperties(jsxAttributes: JSXAttributes): JSXAttrib export function removeMarginProperties(jsxAttributes: JSXAttributes): JSXAttributes { return defaultEither(jsxAttributes, unsetJSXValuesAtPaths(jsxAttributes, MarginPropertyPaths)) } + +export function removeBackgroundProperties(jsxAttributes: JSXAttributes): JSXAttributes { + return defaultEither(jsxAttributes, unsetJSXValuesAtPaths(jsxAttributes, BackgroundPropertyPaths)) +}