From 161179c924bd0c7f3e6317155e388be625db654a Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 1 Oct 2024 15:32:58 +0200
Subject: [PATCH] Clamp minimum gap for flex/grid elements (#6441)

**Problem:**

The grid and flex gap inspector controls can go negative, either by
scrubbing as well as direct input.

**Fix:**

1. Add `minimum={0}` to those number inputs so the scrubbing cannot go
lower than 0
2. Clamp the value calculated in the number input so it stays between
the min/max bounds.

Fixes #6440
---
 editor/src/components/inspector/flex-section.tsx  |  6 ++++++
 .../flex-container-controls.tsx                   |  2 ++
 editor/src/uuiui/inputs/number-input.tsx          | 15 ++++++++++++---
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/editor/src/components/inspector/flex-section.tsx b/editor/src/components/inspector/flex-section.tsx
index 3ff686593e13..b32f4da14128 100644
--- a/editor/src/components/inspector/flex-section.tsx
+++ b/editor/src/components/inspector/flex-section.tsx
@@ -887,6 +887,8 @@ const GapRowColumnControl = React.memo(() => {
           <NumberInput
             value={columnGap.value}
             numberType={'Length'}
+            minimum={0}
+            clampOnSubmitValue={true}
             onSubmitValue={onSubmitUnifiedValue}
             onTransientSubmitValue={onSubmitUnifiedValue}
             onForcedSubmitValue={onSubmitUnifiedValue}
@@ -903,6 +905,8 @@ const GapRowColumnControl = React.memo(() => {
           <NumberInput
             value={columnGap.value}
             numberType={'Length'}
+            minimum={0}
+            clampOnSubmitValue={true}
             onSubmitValue={onSubmitSplitValue('columnGap')}
             onTransientSubmitValue={onSubmitSplitValue('columnGap')}
             onForcedSubmitValue={onSubmitSplitValue('columnGap')}
@@ -916,6 +920,8 @@ const GapRowColumnControl = React.memo(() => {
           <NumberInput
             value={rowGap.value}
             numberType={'Length'}
+            minimum={0}
+            clampOnSubmitValue={true}
             onSubmitValue={onSubmitSplitValue('rowGap')}
             onTransientSubmitValue={onSubmitSplitValue('rowGap')}
             onForcedSubmitValue={onSubmitSplitValue('rowGap')}
diff --git a/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx b/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx
index ed42986db729..a519c34fddfa 100644
--- a/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx
+++ b/editor/src/components/inspector/sections/layout-section/flex-container-subsection/flex-container-controls.tsx
@@ -328,6 +328,8 @@ export const FlexGapControl = React.memo(() => {
           testId='flex.container.gap'
           key='flex.container.gap'
           value={value}
+          minimum={0}
+          clampOnSubmitValue={true}
           onSubmitValue={wrappedOnSubmitValue}
           onTransientSubmitValue={wrappedOnTransientSubmitValue}
           onForcedSubmitValue={wrappedOnSubmitValue}
diff --git a/editor/src/uuiui/inputs/number-input.tsx b/editor/src/uuiui/inputs/number-input.tsx
index 41db6078d683..aeb9d054fee5 100644
--- a/editor/src/uuiui/inputs/number-input.tsx
+++ b/editor/src/uuiui/inputs/number-input.tsx
@@ -36,11 +36,10 @@ import type {
 } from '../../components/inspector/controls/control'
 import type { Either } from '../../core/shared/either'
 import { isLeft, mapEither } from '../../core/shared/either'
-import { clampValue, point } from '../../core/shared/math-utils'
+import { clampValue } from '../../core/shared/math-utils'
 import { memoize } from '../../core/shared/memoize'
 import type { ControlStyles } from '../../uuiui-deps'
 import { getControlStyles, CSSCursor } from '../../uuiui-deps'
-import type { IcnProps } from '../icn'
 import { Icn } from '../icn'
 import { useColorTheme, UtopiaTheme } from '../styles/theme'
 import { FlexRow } from '../widgets/layout/flex-row'
@@ -141,6 +140,7 @@ export interface NumberInputOptions {
   pasteHandler?: boolean
   descriptionLabel?: string
   disableScrubbing?: boolean
+  clampOnSubmitValue?: boolean
 }
 
 export interface AbstractNumberInputProps<T extends CSSNumber | number>
@@ -190,6 +190,7 @@ export const NumberInput = React.memo<NumberInputProps>(
     invalid,
     pasteHandler,
     disableScrubbing = false,
+    clampOnSubmitValue,
   }) => {
     const ref = React.useRef<HTMLInputElement>(null)
     const colorTheme = useColorTheme()
@@ -511,7 +512,12 @@ export const NumberInput = React.memo<NumberInputProps>(
           if (isLeft(parsed)) {
             return unknownInputValue(displayValue)
           }
-          return parsed.value
+          return clampOnSubmitValue
+            ? {
+                ...parsed.value,
+                value: clampValue(parsed.value.value, minimum, maximum),
+              }
+            : parsed.value
         }
 
         const newValue = getNewValue()
@@ -540,6 +546,9 @@ export const NumberInput = React.memo<NumberInputProps>(
         updateValue,
         value,
         displayValue,
+        minimum,
+        maximum,
+        clampOnSubmitValue,
       ],
     )