Fill container percentage values (#4291)

* round percent values in adjust-css-length-command * only classifiy 100% as fill container * tests * better test name
concrete-utopia · Oct 3, 2023 · 53f7769 · 53f7769
1 parent 90a1f6d
commit 53f7769
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 2 deletions.
diff --git a/...nvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx b/...nvas/canvas-strategies/strategies/absolute-resize-bounding-box-strategy.spec.browser2.tsx
@@ -1338,6 +1338,64 @@ export var storyboard = (
     const resizeControl = getResizeControl(renderResult, EdgePositionBottomRight)
     expect(resizeControl).toBeNull()
   })
+  it('percent values are rounded to 2 decimal places after resizing', async () => {
+    const renderResult = await renderTestEditorWithCode(
+      makeTestProjectCodeWithSnippet(`
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          position: 'absolute',
+          left: 92,
+          top: 162,
+          width: 430,
+          height: 378,
+        }}
+        data-uid='aaa'
+      >
+        <div
+          style={{
+            backgroundColor: '#aaaaaa33',
+            width: '100%',
+            height: '100%',
+            contain: 'layout',
+          }}
+          data-uid='bbb'
+        />
+      </div>
+      `),
+      'await-first-dom-report',
+    )
+
+    const target = EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:aaa/bbb`)
+
+    await renderResult.dispatch([selectComponents([target], false)], true)
+    await resizeElement(renderResult, { x: -10, y: -10 }, EdgePositionBottomRight, emptyModifiers)
+    expect(getPrintedUiJsCode(renderResult.getEditorState())).toEqual(
+      makeTestProjectCodeWithSnippet(`
+      <div
+        style={{
+          backgroundColor: '#aaaaaa33',
+          position: 'absolute',
+          left: 92,
+          top: 162,
+          width: 430,
+          height: 378,
+        }}
+        data-uid='aaa'
+      >
+        <div
+          style={{
+            backgroundColor: '#aaaaaa33',
+            width: '97.67%',
+            height: '97.35%',
+            contain: 'layout',
+          }}
+          data-uid='bbb'
+        />
+      </div>
+      `),
+    )
+  })
   describe('snap lines', () => {
     it('horizontal snap lines are shown when resizing a multiselection', async () => {
       const editor = await renderTestEditorWithCode(

diff --git a/editor/src/components/canvas/commands/adjust-css-length-command.ts b/editor/src/components/canvas/commands/adjust-css-length-command.ts
@@ -15,6 +15,7 @@ import {
   setJSXValuesAtPaths,
   unsetJSXValuesAtPaths,
 } from '../../../core/shared/jsx-attributes'
+import { roundTo } from '../../../core/shared/math-utils'
 import type { ElementPath, PropertyPath } from '../../../core/shared/project-file-types'
 import * as PP from '../../../core/shared/property-path'
 import type { DerivedState, EditorState } from '../../editor/store/editor-state'
@@ -359,7 +360,7 @@ function updatePercentageValueByPixel(
   const currentValuePercent = currentValue.value
   const offsetInPercent = (byValue / parentDimensionPx) * 100
   const newValueCssNumber: CSSNumber = {
-    value: currentValuePercent + offsetInPercent,
+    value: roundTo(currentValuePercent + offsetInPercent, 2),
     unit: currentValue.unit,
   }
   const newValue = printCSSNumber(newValueCssNumber, null)

diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
@@ -622,7 +622,7 @@ export function detectFillHugFixedState(
   const isGroupLike = treatElementAsGroupLike(metadata, elementPath)
 
   const parsed = defaultEither(null, parseCSSLengthPercent(simpleAttribute))
-  if (parsed != null && parsed.unit === '%') {
+  if (parsed != null && parsed.unit === '%' && parsed.value === 100) {
     const valueWithType: FixedHugFill = { type: isGroupLike ? 'hug-group' : 'fill', value: parsed }
     return { fixedHugFill: valueWithType, controlStatus: 'simple' }
   }

diff --git a/editor/src/components/inspector/inspector-strategies/fixed-fill-hug.spec.browser2.tsx b/editor/src/components/inspector/inspector-strategies/fixed-fill-hug.spec.browser2.tsx
@@ -349,6 +349,53 @@ describe('Fixed / Fill / Hug control', () => {
         absoluteProjectWithInjectedStyle(`width: '100%', height: '100%'`),
       )
     })
+
+    it('detects fill container on a static element', async () => {
+      const editor = await renderTestEditorWithCode(
+        makeTestProjectCodeWithSnippet(`
+        <div
+          style={{
+            backgroundColor: '#aaaaaa33',
+            width: '100%',
+            height: '100%',
+            contain: 'layout',
+          }}
+          data-uid='thediv'
+        />
+        `),
+        'await-first-dom-report',
+      )
+
+      await selectComponentsForTest(editor, [
+        EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:thediv`),
+      ])
+
+      expect(editor.renderedDOM.getAllByText(FillContainerLabel).length).toEqual(2)
+    })
+
+    it('percent values that are not 100% are not classified as fill container', async () => {
+      const editor = await renderTestEditorWithCode(
+        makeTestProjectCodeWithSnippet(`
+        <div
+          style={{
+            backgroundColor: '#aaaaaa33',
+            width: '90%',
+            height: '90%',
+            contain: 'layout',
+          }}
+          data-uid='thediv'
+        />
+        `),
+        'await-first-dom-report',
+      )
+
+      await selectComponentsForTest(editor, [
+        EP.fromString(`${BakedInStoryboardUID}/${TestSceneUID}/${TestAppUID}:thediv`),
+      ])
+
+      expect(editor.renderedDOM.queryAllByText(FillContainerLabel).length).toEqual(0)
+      expect(editor.renderedDOM.getAllByText(FixedLabel).length).toEqual(2)
+    })
   })
 
   describe('hug contents', () => {