Merge branch 'pane-tabs' of https://github.com/concrete-utopia/utopia …

…into pane-tabs

editor/src/components/canvas/canvas-context-menu.spec.browser2.tsx

@@ -1,5 +1,5 @@
 import { fireEvent } from '@testing-library/react'
-import { forElementOptic } from '../../core/model/common-optics'
+import { forElementChildOptic } from '../../core/model/common-optics'
 import {
   conditionalWhenFalseOptic,
   jsxConditionalExpressionOptic,
@@ -912,7 +912,7 @@ describe('canvas context menu', () => {
       const conditionalPath = EP.fromString(
         `${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:aaa/conditional`,
       )
-      const inactiveElementOptic = forElementOptic(conditionalPath)
+      const inactiveElementOptic = forElementChildOptic(conditionalPath)
         .compose(jsxConditionalExpressionOptic)
         .compose(conditionalWhenFalseOptic)
       const inactiveElement = unsafeGet(inactiveElementOptic, renderResult.getEditorState())

editor/src/components/canvas/canvas-strategies/canvas-strategies.spec.browser2.tsx

@@ -20,6 +20,7 @@ import { defaultCustomStrategyState } from './canvas-strategy-types'
 import type { InteractionSession } from './interaction-state'
 import { boundingArea } from './interaction-state'
 import { createMouseInteractionForTests } from './interaction-state.test-utils'
+import { NonResizableControlTestId } from '../controls/select-mode/non-resizable-control'
 
 interface StyleRectangle {
   left: string
@@ -863,7 +864,7 @@ describe('special case controls', () => {
       await dispatchDone
     })
 
-    const nonResizableControl = renderResult.renderedDOM.queryByTestId('non-resizable-control')
+    const nonResizableControl = renderResult.renderedDOM.queryByTestId(NonResizableControlTestId)
     expect(nonResizableControl).toEqual(null)
   })
 })

editor/src/components/canvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.tsx

@@ -1,3 +1,4 @@
+import type { LayoutPinnedProp } from '../../../../core/layout/layout-helpers-new'
 import { MetadataUtils } from '../../../../core/model/element-metadata-utils'
 import * as EP from '../../../../core/shared/element-path'
 import type { ElementPathTrees } from '../../../../core/shared/element-path-tree'
@@ -368,7 +369,7 @@ function getConstrainedFramesAdjustments(
 function isDimensionConstrained(
   jsxMetadata: ElementInstanceMetadataMap,
   path: ElementPath,
-  constraintsArray: any[],
+  constraintsArray: LayoutPinnedProp[],
   dimension: 'width' | 'height',
 ): boolean {
   return (

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',
+    ),
   ]
 }
 

editor/src/components/canvas/canvas-strategies/strategies/set-border-radius-strategy.spec.browser2.tsx

@@ -13,7 +13,6 @@ import { CanvasControlsContainerID } from '../../controls/new-canvas-controls'
 import { CircularHandleTestId } from '../../controls/select-mode/border-radius-control'
 import {
   mouseClickAtPoint,
-  mouseDoubleClickAtPoint,
   mouseDragFromPointToPoint,
   mouseDragFromPointWithDelta,
   mouseEnterAtPoint,
@@ -187,7 +186,8 @@ describe('set border radius strategy', () => {
       codeForDragTest(`borderTopLeftRadius: '24px',
                        borderTopRightRadius: '15px',
                        borderBottomRightRadius: '16px',
-                       borderBottomLeftRadius: '17px'`),
+                       borderBottomLeftRadius: '17px',
+                       overflow: 'hidden'`),
     )
   })
 
@@ -202,7 +202,7 @@ describe('set border radius strategy', () => {
 
     await doDragTest(editor, 'tl', 400, emptyModifiers)
     expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-      codeForDragTest(`borderRadius: '${expectedBorderRadius}px'`),
+      codeForDragTest(`borderRadius: '${expectedBorderRadius}px', overflow: 'hidden'`),
     )
   })
 
@@ -213,7 +213,7 @@ describe('set border radius strategy', () => {
     )
     await doDragTest(editor, 'tl', -20, emptyModifiers)
     expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-      codeForDragTest(`borderRadius: '0px'`),
+      codeForDragTest(`borderRadius: '0px', overflow: 'hidden'`),
     )
   })
 
@@ -240,7 +240,7 @@ describe('set border radius strategy', () => {
     await doDragTest(editor, 'tl', 400, emptyModifiers)
 
     expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-      codeForDragTest(`borderRadius: '200px'`),
+      codeForDragTest(`borderRadius: '200px', overflow: 'hidden'`),
     )
 
     await resizeElement(
@@ -267,6 +267,7 @@ describe('set border radius strategy', () => {
               width: 300,
               height: 100,
               borderRadius: '40px',
+              overflow: 'hidden',
             }}
           />
         </div>`),
@@ -280,7 +281,7 @@ describe('set border radius strategy', () => {
     )
     await doDragTest(editor, 'tl', 10, emptyModifiers)
     expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-      codeForDragTest(`borderRadius: '22px'`),
+      codeForDragTest(`borderRadius: '22px', overflow: 'hidden'`),
     )
   })
 
@@ -292,7 +293,7 @@ describe('set border radius strategy', () => {
       )
       await doDragTest(editor, 'tl', 10, emptyModifiers)
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-        codeForDragTest(`borderRadius: '24px'`),
+        codeForDragTest(`borderRadius: '24px', overflow: 'hidden'`),
       )
     })
 
@@ -303,7 +304,7 @@ describe('set border radius strategy', () => {
       )
       await doDragTest(editor, 'tr', 10, emptyModifiers)
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-        codeForDragTest(`borderRadius: '24px'`),
+        codeForDragTest(`borderRadius: '24px', overflow: 'hidden'`),
       )
     })
 
@@ -314,7 +315,7 @@ describe('set border radius strategy', () => {
       )
       await doDragTest(editor, 'bl', 10, emptyModifiers)
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-        codeForDragTest(`borderRadius: '24px'`),
+        codeForDragTest(`borderRadius: '24px', overflow: 'hidden'`),
       )
     })
 
@@ -325,7 +326,7 @@ describe('set border radius strategy', () => {
       )
       await doDragTest(editor, 'br', 10, emptyModifiers)
       expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
-        codeForDragTest(`borderRadius: '24px'`),
+        codeForDragTest(`borderRadius: '24px', overflow: 'hidden'`),
       )
     })
   })
@@ -341,7 +342,8 @@ describe('set border radius strategy', () => {
         codeForDragTest(`borderTopLeftRadius: '24px',
                           borderTopRightRadius: '14px',
                           borderBottomRightRadius: '14px',
-                          borderBottomLeftRadius: '14px',`),
+                          borderBottomLeftRadius: '14px',
+                          overflow: 'hidden'`),
       )
     })
 
@@ -355,7 +357,8 @@ describe('set border radius strategy', () => {
         codeForDragTest(`borderTopLeftRadius: '14px',
                           borderTopRightRadius: '24px',
                           borderBottomRightRadius: '14px',
-                          borderBottomLeftRadius: '14px',`),
+                          borderBottomLeftRadius: '14px',
+                          overflow: 'hidden'`),
       )
     })
 
@@ -369,7 +372,8 @@ describe('set border radius strategy', () => {
         codeForDragTest(`borderTopLeftRadius: '14px',
                           borderTopRightRadius: '14px',
                           borderBottomRightRadius: '14px',
-                          borderBottomLeftRadius: '24px',`),
+                          borderBottomLeftRadius: '24px',
+                          overflow: 'hidden'`),
       )
     })
 
@@ -383,10 +387,43 @@ describe('set border radius strategy', () => {
         codeForDragTest(`borderTopLeftRadius: '14px',
                           borderTopRightRadius: '14px',
                           borderBottomRightRadius: '24px',
-                          borderBottomLeftRadius: '14px',`),
+                          borderBottomLeftRadius: '14px',
+                          overflow: 'hidden'`),
       )
     })
   })
+
+  describe('Overflow property handling', () => {
+    it('does not overwrite existing overflow property', async () => {
+      const editor = await renderTestEditorWithCode(
+        codeForDragTest(`borderRadius: '14px', overflow: 'visible',`),
+        'await-first-dom-report',
+      )
+      await doDragTest(editor, 'tl', 10, cmdModifier)
+      expect(getPrintedUiJsCode(editor.getEditorState())).toEqual(
+        codeForDragTest(`overflow: 'visible',
+                          borderTopLeftRadius: '24px',
+                          borderTopRightRadius: '14px',
+                          borderBottomRightRadius: '14px',
+                          borderBottomLeftRadius: '14px'`),
+      )
+    })
+
+    it('shows toast message', async () => {
+      const editor = await renderTestEditorWithCode(
+        codeForDragTest(`borderRadius: '14px',`),
+        'await-first-dom-report',
+      )
+      await doDragTest(editor, 'tl', 10, cmdModifier)
+      expect(editor.getEditorState().editor.toasts).toHaveLength(1)
+      expect(editor.getEditorState().editor.toasts[0]).toEqual({
+        id: 'property-added',
+        level: 'NOTICE',
+        message: 'Element now hides overflowing content',
+        persistent: false,
+      })
+    })
+  })
 })
 
 function codeForDragTest(borderRadius: string): string {

editor/src/components/canvas/canvas-strategies/strategies/set-border-radius-strategy.tsx

@@ -12,6 +12,7 @@ import {
   isJSXElement,
   jsxElementName,
   jsxElementNameEquals,
+  modifiableAttributeIsAttributeNotFound,
 } from '../../../../core/shared/element-template'
 import type { CanvasPoint, CanvasVector, Size } from '../../../../core/shared/math-utils'
 import {
@@ -69,6 +70,11 @@ import {
 import type { InteractionSession } from '../interaction-state'
 import { deleteProperties } from '../../commands/delete-properties-command'
 import { allElemsEqual } from '../../../../core/shared/array-utils'
+import * as PP from '../../../../core/shared/property-path'
+import { withUnderlyingTarget } from '../../../editor/store/editor-state'
+import type { ProjectContentTreeRoot } from '../../../assets'
+import { getModifiableJSXAttributeAtPath } from '../../../../core/shared/jsx-attributes'
+import { showToastCommand } from '../../commands/show-toast-command'
 
 export const SetBorderRadiusStrategyId = 'SET_BORDER_RADIUS_STRATEGY'
 
@@ -149,6 +155,7 @@ export const setBorderRadiusStrategy: CanvasStrategyFactory = (
       strategyApplicationResult([
         setCursorCommand(CSSCursor.Radius),
         ...commands(selectedElement),
+        ...getAddOverflowHiddenCommands(selectedElement, canvasState.projectContents),
         setElementsToRerenderCommand(selectedElements),
       ]),
   }
@@ -586,3 +593,30 @@ const setShorthandStylePropertyCommand =
       ]),
       setProperty('always', target, StyleProp('borderRadius'), value),
     ]
+
+function getAddOverflowHiddenCommands(
+  target: ElementPath,
+  projectContents: ProjectContentTreeRoot,
+): Array<CanvasCommand> {
+  const overflowProp = PP.create('style', 'overflow')
+
+  const propertyExists = withUnderlyingTarget(target, projectContents, false, (_, element) => {
+    if (isJSXElement(element)) {
+      return foldEither(
+        () => false,
+        (value) => !modifiableAttributeIsAttributeNotFound(value),
+        getModifiableJSXAttributeAtPath(element.props, overflowProp),
+      )
+    } else {
+      return false
+    }
+  })
+
+  if (propertyExists) {
+    return []
+  }
+  return [
+    showToastCommand('Element now hides overflowing content', 'NOTICE', 'property-added'),
+    setProperty('always', target, overflowProp, 'hidden'),
+  ]
+}

editor/src/components/canvas/controls/new-canvas-controls.tsx

@@ -544,7 +544,8 @@ const NewCanvasControlsInner = (props: NewCanvasControlsInnerProps) => {
             <MultiSelectOutlineControl localSelectedElements={localSelectedViews} />
             <ZeroSizedElementControls.control showAllPossibleElements={false} />
             {when(
-              isSelectOrInsertMode(editorMode),
+              isSelectOrInsertMode(editorMode) &&
+                !EP.multiplePathsAllWithTheSameUID(localSelectedViews),
               <>
                 {strategyControls.map((c) => (
                   <RenderControlMemoized

editor/src/components/canvas/controls/select-mode/non-resizable-control.tsx

@@ -9,6 +9,8 @@ import type { EdgePosition } from '../../canvas-types'
 import { useBoundingBox } from '../bounding-box-hooks'
 import { CanvasOffsetWrapper } from '../canvas-offset-wrapper'
 
+export const NonResizableControlTestId = 'non-resizable-control'
+
 const selectedElementsSelector = (store: { editor: { selectedViews: ElementPath[] } }) =>
   store.editor.selectedViews
 
@@ -51,7 +53,7 @@ export const NonResizableControl = controlForStrategyMemoized(() => {
           position: 'absolute',
           pointerEvents: 'none',
         }}
-        data-testid={'non-resizable-control'}
+        data-testid={NonResizableControlTestId}
       >
         <NonResizablePoint ref={topLeftRef} position={{ x: 0, y: 0 }} />
         <NonResizablePoint ref={topRightRef} position={{ x: 1, y: 0 }} />