From c21eeee7066eed0f7afa049cb55b4074df8f44d0 Mon Sep 17 00:00:00 2001
From: Kamil Emeleev <emeleev.kamil@gmail.com>
Date: Mon, 3 Aug 2026 13:15:36 +0300
Subject: [PATCH] fix(flex, FlexBox): correct rowGap and colGap behavior

---
 .../src/components/FlexBox/FlexBox.module.css    |  2 ++
 .../src/components/layout/flex/flex.module.css   |  3 ++-
 .../src/components/layout/flex/flex.stories.tsx  | 16 ++++++++++++++++
 3 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/FlexBox/FlexBox.module.css b/packages/components/src/components/FlexBox/FlexBox.module.css
index b99f00063..2ff884dbf 100644
--- a/packages/components/src/components/FlexBox/FlexBox.module.css
+++ b/packages/components/src/components/FlexBox/FlexBox.module.css
@@ -1,4 +1,6 @@
 .base {
+  --flex-row-gap: 0;
+  --flex-column-gap: 0;
   --flex-type: flex;
   --flex-wrap: nowrap;
   --flex-direction: row;
diff --git a/packages/components/src/components/layout/flex/flex.module.css b/packages/components/src/components/layout/flex/flex.module.css
index 26e65f6b9..aa92c65a0 100644
--- a/packages/components/src/components/layout/flex/flex.module.css
+++ b/packages/components/src/components/layout/flex/flex.module.css
@@ -1,5 +1,6 @@
 .base {
-  --flex-gap: 0;
+  --flex-row-gap: 0;
+  --flex-column-gap: 0;
   --flex-order: 0;
   --flex-type: flex;
   --flex-wrap: nowrap;
diff --git a/packages/components/src/components/layout/flex/flex.stories.tsx b/packages/components/src/components/layout/flex/flex.stories.tsx
index 07d1a9df0..5e9e8b1c5 100644
--- a/packages/components/src/components/layout/flex/flex.stories.tsx
+++ b/packages/components/src/components/layout/flex/flex.stories.tsx
@@ -63,6 +63,22 @@ const meta = {
         type: { summary: 'FlexPropGap' },
       },
     },
+    colGap: {
+      description: 'column-gap',
+      options: flexPropGap,
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'FlexPropGap' },
+      },
+    },
+    rowGap: {
+      description: 'row-gap',
+      options: flexPropGap,
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'FlexPropGap' },
+      },
+    },
     order: {
       options: flexPropOrder,
       control: { type: 'select' },