fix(flex, FlexBox): correct rowGap and colGap behavior (DS-5394)

[KamilEmeleev]

Summary by CodeRabbit

• New Features

  • Added independent row and column gap controls for flex layouts.
  • Updated component previews to demonstrate configurable horizontal and vertical spacing.

• Bug Fixes

  • Ensured flex layouts default to zero spacing when row or column gaps are not specified.

[coderabbitai]

📝 Walkthrough

Walkthrough

The flex layout now uses separate row and column gap properties. The FlexBox base styles set zero defaults. Storybook exposes controls for both gap values.

Changes

Flex gap configuration

Layer / File(s)	Summary
Separate row and column gap properties packages/components/src/components/FlexBox/FlexBox.module.css, packages/components/src/components/layout/flex/flex.module.css	The styles define independent row and column gap properties. The base styles initialize both properties to 0.
Storybook gap controls packages/components/src/components/layout/flex/flex.stories.tsx	The story adds colGap and rowGap controls with gap options and FlexPropGap table summaries.

Estimated code review effort: 2 (Simple) | ~5 minutes

Possibly related PRs

• koobiq/react-components#438: Modifies the flex layout row and column gap properties and Storybook gap controls.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the fix to rowGap and colGap behavior in the Flex and FlexBox components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/ds-5394

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[github-actions]

Visit the preview URL for this PR (updated for commit c21eeee):

https://react-koobiq-next--prs-443-wmjxeyzx.web.app

_{(expires Sat, 08 Aug 2026 10:17:52 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: fc29847d4a9e5cb1adf458c76a9b681c76e2eeff}

[coderabbitai]

🧹 Nitpick comments (2)

packages/components/src/components/layout/flex/flex.module.css (1)

2-3: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Cover independent gap defaults in both implementations.

The fix is correct, but both paths need regression coverage for single-axis gaps.

• packages/components/src/components/layout/flex/flex.module.css#L2-L3: test flex() with only rowGap and only colGap.
• packages/components/src/components/FlexBox/FlexBox.module.css#L2-L3: test <FlexBox> with only rowGap and only colGap.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/components/src/components/layout/flex/flex.module.css` around lines
2 - 3, Maintain the independent zero defaults for row and column gaps, and add
regression tests for both implementations: in
packages/components/src/components/layout/flex/flex.module.css at lines 2-3,
test flex() with only rowGap and only colGap; in
packages/components/src/components/FlexBox/FlexBox.module.css at lines 2-3, test
FlexBox with only rowGap and only colGap.

Source: Learnings

packages/components/src/components/layout/flex/flex.stories.tsx (1)

66-81: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Avoid manual argTypes for inferred props.

colGap and rowGap are component props. The repository rules prohibit adding argTypes for props inferred from component types. Remove these entries if Storybook infers FlexPropGap; otherwise, confirm the approved local pattern for this exception.

As per coding guidelines, packages/components/src/components/**/*.stories.tsx must not add argTypes for props inferred from component types.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/components/src/components/layout/flex/flex.stories.tsx` around lines
66 - 81, Remove the manually defined colGap and rowGap entries from the story’s
argTypes configuration, allowing Storybook to infer these component props from
the Flex component type and preserving the repository guideline against manual
inferred-prop definitions.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/components/src/components/layout/flex/flex.module.css`:
- Around line 2-3: Maintain the independent zero defaults for row and column
gaps, and add regression tests for both implementations: in
packages/components/src/components/layout/flex/flex.module.css at lines 2-3,
test flex() with only rowGap and only colGap; in
packages/components/src/components/FlexBox/FlexBox.module.css at lines 2-3, test
FlexBox with only rowGap and only colGap.

In `@packages/components/src/components/layout/flex/flex.stories.tsx`:
- Around line 66-81: Remove the manually defined colGap and rowGap entries from
the story’s argTypes configuration, allowing Storybook to infer these component
props from the Flex component type and preserving the repository guideline
against manual inferred-prop definitions.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 866aeed5-bbb7-4662-9a12-ec3876846f0e

📥 Commits

Reviewing files that changed from the base of the PR and between 5726788 and c21eeee.

📒 Files selected for processing (3)

• packages/components/src/components/FlexBox/FlexBox.module.css
• packages/components/src/components/layout/flex/flex.module.css
• packages/components/src/components/layout/flex/flex.stories.tsx