From ddcec3de98fda06d97ef764eb37a0cc55f65e5f4 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 1 Oct 2024 12:21:10 +0200
Subject: [PATCH] Detect stretch when resizing grid cell (#6436)

**Problem:**

The grid cell resize handles should be shown when the child is
stretching as well as filling the cell.

**Fix:**

Do that.

Fixes #6435
---
 ...-resize-element-strategy.spec.browser2.tsx | 31 +++++++++++++++++++
 .../grid-resize-element-strategy.ts           | 10 +++---
 .../components/inspector/inspector-common.ts  | 13 ++++++--
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
index 0ba50510b128..7b39be3806b6 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.spec.browser2.tsx
@@ -340,6 +340,26 @@ export var storyboard = (
       }
     })
   })
+
+  it('also works for stretching cells', async () => {
+    const editor = await renderTestEditorWithCode(ProjectCode, 'await-first-dom-report')
+
+    await runCellResizeTest(
+      editor,
+      'column-end',
+      gridCellTargetId(EP.fromString('sb/scene/grid'), 2, 10),
+      EP.fromString('sb/scene/grid/eee'),
+    )
+
+    const { gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd } =
+      editor.renderedDOM.getByTestId('grid-child-stretch').style
+    expect({ gridRowStart, gridRowEnd, gridColumnStart, gridColumnEnd }).toEqual({
+      gridColumnEnd: '11',
+      gridColumnStart: '4',
+      gridRowStart: '4',
+      gridRowEnd: 'auto',
+    })
+  })
 })
 
 const ProjectCode = `import * as React from 'react'
@@ -425,6 +445,17 @@ export var storyboard = (
           data-uid='ddd'
           data-testid='grid-child'
         />
+        <div
+          style={{
+            backgroundColor: '#9f0',
+            alignSelf: 'stretch',
+            justifySelf: 'stretch',
+            gridColumn: 4,
+            gridRow: 4,
+          }}
+          data-uid='eee'
+          data-testid='grid-child-stretch'
+        />
       </div>
     </Scene>
   </Storyboard>
diff --git a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
index 2f47003ac5ce..daa9996bc207 100644
--- a/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
+++ b/editor/src/components/canvas/canvas-strategies/strategies/grid-resize-element-strategy.ts
@@ -38,12 +38,10 @@ export const gridResizeElementStrategy: CanvasStrategyFactory = (
     return null
   }
 
-  const isFillContainer = isFixedHugFillModeApplied(
-    canvasState.startingMetadata,
-    selectedElement,
-    'fill',
-  )
-  if (!isFillContainer) {
+  const isFillOrStretchContainer =
+    isFixedHugFillModeApplied(canvasState.startingMetadata, selectedElement, 'fill') ||
+    isFixedHugFillModeApplied(canvasState.startingMetadata, selectedElement, 'stretch')
+  if (!isFillOrStretchContainer) {
     return null
   }
 
diff --git a/editor/src/components/inspector/inspector-common.ts b/editor/src/components/inspector/inspector-common.ts
index 7f0b03ef28a1..06588173c38b 100644
--- a/editor/src/components/inspector/inspector-common.ts
+++ b/editor/src/components/inspector/inspector-common.ts
@@ -679,14 +679,23 @@ export function detectFillHugFixedState(
   )
 
   if (MetadataUtils.isGridCell(metadata, elementPath)) {
-    if (
+    const isStretchingExplicitly =
       (element.specialSizeMeasurements.alignSelf === 'stretch' &&
         axis === 'horizontal' &&
         width == null) ||
       (element.specialSizeMeasurements.justifySelf === 'stretch' &&
         axis === 'vertical' &&
         height == null)
-    ) {
+
+    const isStretchingImplicitly =
+      width == null &&
+      height == null &&
+      (element.specialSizeMeasurements.alignSelf == null ||
+        element.specialSizeMeasurements.alignSelf === 'auto') &&
+      (element.specialSizeMeasurements.justifySelf == null ||
+        element.specialSizeMeasurements.justifySelf === 'auto')
+
+    if (isStretchingExplicitly || isStretchingImplicitly) {
       return { fixedHugFill: { type: 'stretch' }, controlStatus: 'detected' }
     }
   }