remove bg color on frame to group conversion (#4270)

* remove bg color on frame to group conversion * tests * show toast * more background props
concrete-utopia · Oct 2, 2023 · 6e077c3 · 6e077c3
1 parent bd67af2
commit 6e077c3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
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
@@ -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<JSXElementChild>()
     .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
@@ -278,7 +278,6 @@ describe('Groups', () => {
           `<div>
         <Group
           style={{
-            backgroundColor: 'blue',
             position: 'absolute',
             left: 93,
             top: 174,

diff --git a/editor/src/core/model/margin-and-padding.ts b/editor/src/core/model/margin-and-padding.ts
@@ -33,10 +33,29 @@ export const PaddingPropertyPaths: Array<PropertyPath> = [
   PP.create('style', 'paddingTop'),
 ]
 
+export const BackgroundPropertyPaths: Array<PropertyPath> = [
+  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))
 }
 
 export function removeMarginProperties(jsxAttributes: JSXAttributes): JSXAttributes {
   return defaultEither(jsxAttributes, unsetJSXValuesAtPaths(jsxAttributes, MarginPropertyPaths))
 }
+
+export function removeBackgroundProperties(jsxAttributes: JSXAttributes): JSXAttributes {
+  return defaultEither(jsxAttributes, unsetJSXValuesAtPaths(jsxAttributes, BackgroundPropertyPaths))
+}