From 85e92dfec93ba1b37dea26b26e6b3e4e89c79d42 Mon Sep 17 00:00:00 2001
From: albinAppsmith <87797149+albinAppsmith@users.noreply.github.com>
Date: Wed, 11 Dec 2024 15:31:54 +0530
Subject: [PATCH] fix: Added rowGap and colGap as PropsToBeCssPrefixPrepended
 in Box component (#38096)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

rowGap and colGap was not accepting standard `spaces` values in Flex and
Grid component. This PR fix that issue.


Fixes #38097

## Automation

/ok-to-test tags="@tag.Sanity"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/12273259261>
> Commit: 16b48def7322d12c7cbd4ab34049c6d1ea58b0b1
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=12273259261&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity`
> Spec:
> <hr>Wed, 11 Dec 2024 10:01:27 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced new CSS properties `rowGap` and `columnGap` for enhanced
grid layout management within the design system.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 packages/design-system/ads/src/Box/Box.constants.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/design-system/ads/src/Box/Box.constants.ts b/packages/design-system/ads/src/Box/Box.constants.ts
index 2f270b1beedb..d7e13fd1342c 100644
--- a/packages/design-system/ads/src/Box/Box.constants.ts
+++ b/packages/design-system/ads/src/Box/Box.constants.ts
@@ -27,4 +27,6 @@ export const PropsToBeCssPrefixPrepended = [
   "px",
   "py",
   "gap",
+  "rowGap",
+  "columnGap",
 ];