fix(Flex): refactor gaps

packages/vkui/src/components/Flex/Flex.module.css

@@ -3,19 +3,28 @@
   --vkui_internal--flex_original_margin_block: 0px;
 
   display: flex;
-  margin-block: calc(
-      -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
-    )
-    var(--vkui_internal--flex_original_margin_block);
-  margin-inline: calc(
-      -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
-    )
-    var(--vkui_internal--flex_original_margin_inline);
 }
 
 .Flex--margin-auto {
   --vkui_internal--flex_original_margin_inline: var(--vkui--size_base_padding_horizontal--regular);
   --vkui_internal--flex_original_margin_block: var(--vkui--size_base_padding_vertical--regular);
+
+  margin-block: var(--vkui--size_base_padding_horizontal--regular);
+  margin-inline: var(--vkui--size_base_padding_vertical--regular);
+}
+
+.Flex--withGaps {
+  margin-block-start: calc(
+    -1 * var(--vkui_internal--row_gap) + var(--vkui_internal--flex_original_margin_block)
+  );
+  margin-inline-start: calc(
+    -1 * var(--vkui_internal--column_gap) + var(--vkui_internal--flex_original_margin_inline)
+  );
+}
+
+.Flex > .Flex--margin-auto {
+  margin-block: 0;
+  margin-inline: 0;
 }
 
 .Flex--direction-column {
@@ -83,7 +92,7 @@
 }
 
 /* stylelint-disable-next-line @project-tools/stylelint-atomic, selector-max-universal */
-.Flex > * {
-  margin-block: var(--vkui_internal--row_gap) 0;
-  margin-inline: var(--vkui_internal--column_gap) 0;
+.Flex--withGaps > * {
+  margin-block-start: var(--vkui_internal--row_gap);
+  margin-inline-start: var(--vkui_internal--column_gap);
 }

packages/vkui/src/components/Flex/Flex.test.tsx

@@ -7,16 +7,27 @@ import gapStyles from '../../styles/gaps.module.css';
 describe(Flex, () => {
   baselineComponent(Flex);
 
-  it('should have css custom variable with gaps values', () => {
+  it('should have css custom variable with gaps values for several child', () => {
     render(
       <Flex gap={[15, 20]} data-testid="flex">
         <div></div>
+        <div></div>
       </Flex>,
     );
     expect(screen.getByTestId('flex')).toHaveStyle('--vkui_internal--row_gap: 20px');
     expect(screen.getByTestId('flex')).toHaveStyle('--vkui_internal--column_gap: 15px');
   });
 
+  it('should not have css custom variable with gaps values for one child', () => {
+    render(
+      <Flex gap={[15, 20]} data-testid="flex">
+        <div></div>
+      </Flex>,
+    );
+    expect(screen.getByTestId('flex')).not.toHaveStyle('--vkui_internal--row_gap: 20px');
+    expect(screen.getByTestId('flex')).not.toHaveStyle('--vkui_internal--column_gap: 15px');
+  });
+
   describe('check correct classNames', () => {
     it.each<{ props: Partial<FlexProps>; className: string }>([
       {
@@ -71,6 +82,7 @@ describe(Flex, () => {
       render(
         <Flex {...props} data-testid="flex">
           <div></div>
+          <div></div>
         </Flex>,
       );
       expect(screen.getByTestId('flex')).toHaveClass(className);

packages/vkui/src/components/Flex/Flex.tsx

@@ -1,7 +1,9 @@
+import { Children } from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import {
   calculateGap,
   columnGapClassNames,
+  type GapProp,
   type GapsProp,
   rowGapClassNames,
 } from '../../lib/layouts';
@@ -83,17 +85,11 @@ export const Flex: React.FC<FlexProps> & {
   direction = 'row',
   style: styleProp,
   reverse = false,
+  children,
   ...props
 }: FlexProps) => {
-  const [columnGap, rowGap] = calculateGap(gap);
-  const style: CSSCustomProperties = {};
-
-  if (typeof rowGap === 'number') {
-    style['--vkui_internal--row_gap'] = `${rowGap}px`;
-  }
-  if (typeof columnGap === 'number') {
-    style['--vkui_internal--column_gap'] = `${columnGap}px`;
-  }
+  const withGaps = Children.count(children) > 1 && gap;
+  const [columnGap, rowGap] = calculateGap(withGaps ? gap : undefined);
 
   return (
     <RootComponent
@@ -104,14 +100,36 @@ export const Flex: React.FC<FlexProps> & {
         reverse && styles['Flex--reverse'],
         direction !== 'row' && styles['Flex--direction-column'],
         margin !== 'none' && styles['Flex--margin-auto'],
-        typeof columnGap === 'string' && columnGapClassNames[columnGap],
-        typeof rowGap === 'string' && rowGapClassNames[rowGap],
         align && alignClassNames[align],
         justify && justifyClassNames[justify],
+        withGaps && styles['Flex--withGaps'],
+        withGaps && getGapsPresets(rowGap, columnGap),
       )}
-      style={{ ...styleProp, ...style }}
-    />
+      style={withGaps ? { ...getGapsByUser(rowGap, columnGap), ...styleProp } : styleProp}
+    >
+      {children}
+    </RootComponent>
   );
 };
 
+function getGapsPresets(rowGap?: GapProp, columnGap?: GapProp) {
+  return classNames(
+    typeof rowGap === 'string' && rowGapClassNames[rowGap],
+    typeof columnGap === 'string' && columnGapClassNames[columnGap],
+  );
+}
+
+function getGapsByUser(rowGap?: GapProp, columnGap?: GapProp) {
+  const style: CSSCustomProperties = {};
+
+  if (typeof rowGap === 'number') {
+    style['--vkui_internal--row_gap'] = `${rowGap}px`;
+  }
+  if (typeof columnGap === 'number') {
+    style['--vkui_internal--column_gap'] = `${columnGap}px`;
+  }
+
+  return style;
+}
+
 Flex.Item = FlexItem;