fix(flex): ensure utility styles override component styles (DS-5175)

packages/components/src/components/FlexBox/FlexBox.module.css

@@ -0,0 +1,199 @@
+.base {
+  --flex-type: flex;
+  --flex-wrap: nowrap;
+  --flex-direction: row;
+  --flex-align-items: flex-start;
+  --flex-justify-content: flex-start;
+
+  gap: var(--flex-row-gap) var(--flex-column-gap);
+  display: var(--flex-type);
+  align-items: var(--flex-align-items);
+  justify-content: var(--flex-justify-content);
+  flex-flow: var(--flex-direction) var(--flex-wrap);
+}
+
+.alignItems_flex-start {
+  --flex-align-items: flex-start;
+}
+
+.alignItems_flex-end {
+  --flex-align-items: flex-end;
+}
+
+.alignItems_center {
+  --flex-align-items: center;
+}
+
+.alignItems_baseline {
+  --flex-align-items: baseline;
+}
+
+.alignItems_stretch {
+  --flex-align-items: stretch;
+}
+
+.justifyContent_flex-start {
+  --flex-justify-content: flex-start;
+}
+
+.justifyContent_flex-end {
+  --flex-justify-content: flex-end;
+}
+
+.justifyContent_center {
+  --flex-justify-content: center;
+}
+
+.justifyContent_space-between {
+  --flex-justify-content: space-between;
+}
+
+.justifyContent_space-around {
+  --flex-justify-content: space-around;
+}
+
+.justifyContent_space-evenly {
+  --flex-justify-content: space-evenly;
+}
+
+.flex_flex {
+  --flex-type: flex;
+}
+
+.flex_inline-flex {
+  --flex-type: inline-flex;
+}
+
+.wrap_wrap {
+  --flex-wrap: wrap;
+}
+
+.wrap_nowrap {
+  --flex-wrap: nowrap;
+}
+
+.wrap_wrap-reverse {
+  --flex-wrap: wrap-reverse;
+}
+
+.direction_row {
+  --flex-direction: row;
+}
+
+.direction_row-reverse {
+  --flex-direction: row-reverse;
+}
+
+.direction_column {
+  --flex-direction: column;
+}
+
+.direction_column-reverse {
+  --flex-direction: column-reverse;
+}
+
+/* column-gap */
+.gap_column_3xs {
+  --flex-column-gap: var(--kbq-size-3xs);
+}
+
+.gap_column_xxs {
+  --flex-column-gap: var(--kbq-size-xxs);
+}
+
+.gap_column_xs {
+  --flex-column-gap: var(--kbq-size-xs);
+}
+
+.gap_column_s {
+  --flex-column-gap: var(--kbq-size-s);
+}
+
+.gap_column_m {
+  --flex-column-gap: var(--kbq-size-m);
+}
+
+.gap_column_l {
+  --flex-column-gap: var(--kbq-size-l);
+}
+
+.gap_column_xl {
+  --flex-column-gap: var(--kbq-size-xl);
+}
+
+.gap_column_xxl {
+  --flex-column-gap: var(--kbq-size-xxl);
+}
+
+.gap_column_3xl {
+  --flex-column-gap: var(--kbq-size-3xl);
+}
+
+.gap_column_4xl {
+  --flex-column-gap: var(--kbq-size-4xl);
+}
+
+.gap_column_5xl {
+  --flex-column-gap: var(--kbq-size-5xl);
+}
+
+.gap_column_6xl {
+  --flex-column-gap: var(--kbq-size-6xl);
+}
+
+.gap_column_7xl {
+  --flex-column-gap: var(--kbq-size-7xl);
+}
+
+/* row-gap */
+.gap_row_3xs {
+  --flex-row-gap: var(--kbq-size-3xs);
+}
+
+.gap_row_xxs {
+  --flex-row-gap: var(--kbq-size-xxs);
+}
+
+.gap_row_xs {
+  --flex-row-gap: var(--kbq-size-xs);
+}
+
+.gap_row_s {
+  --flex-row-gap: var(--kbq-size-s);
+}
+
+.gap_row_m {
+  --flex-row-gap: var(--kbq-size-m);
+}
+
+.gap_row_l {
+  --flex-row-gap: var(--kbq-size-l);
+}
+
+.gap_row_xl {
+  --flex-row-gap: var(--kbq-size-xl);
+}
+
+.gap_row_xxl {
+  --flex-row-gap: var(--kbq-size-xxl);
+}
+
+.gap_row_3xl {
+  --flex-row-gap: var(--kbq-size-3xl);
+}
+
+.gap_row_4xl {
+  --flex-row-gap: var(--kbq-size-4xl);
+}
+
+.gap_row_5xl {
+  --flex-row-gap: var(--kbq-size-5xl);
+}
+
+.gap_row_6xl {
+  --flex-row-gap: var(--kbq-size-6xl);
+}
+
+.gap_row_7xl {
+  --flex-row-gap: var(--kbq-size-7xl);
+}

packages/components/src/components/FlexBox/FlexBox.test.tsx

@@ -1,8 +1,11 @@
 import { createRef } from 'react';
 
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { describe, it, expect } from 'vitest';
 
+import { BreakpointsContext, type BreakpointsContextType } from '../Provider';
+
+import s from './FlexBox.module.css';
 import { FlexBox } from './index';
 import type { FlexBoxProps } from './index';
 
@@ -27,4 +30,54 @@ describe('FlexBox', () => {
     const flexBox = container.querySelector('div');
     expect(ref.current).toBe(flexBox);
   });
+
+  it('should apply flex classes from props', () => {
+    render(
+      <FlexBox
+        data-testid="flex-box"
+        flex="inline-flex"
+        wrap="wrap-reverse"
+        gap="m"
+        rowGap="l"
+        colGap="xl"
+        direction="column-reverse"
+        alignItems="center"
+        justifyContent="space-between"
+      />
+    );
+
+    expect(screen.getByTestId('flex-box')).toHaveClass(
+      s.base,
+      s['flex_inline-flex'],
+      s['wrap_wrap-reverse'],
+      s.gap_row_l,
+      s.gap_column_xl,
+      s['direction_column-reverse'],
+      s.alignItems_center,
+      s['justifyContent_space-between']
+    );
+  });
+
+  it('should apply flex classes from responsive props', () => {
+    const breakpoints = {
+      xs: true,
+      l: true,
+    } as BreakpointsContextType;
+
+    render(
+      <BreakpointsContext.Provider value={breakpoints}>
+        <FlexBox
+          data-testid="flex-box"
+          gap={{ xs: 's', l: 'm' }}
+          direction={{ xs: 'column', l: 'row' }}
+        />
+      </BreakpointsContext.Provider>
+    );
+
+    expect(screen.getByTestId('flex-box')).toHaveClass(
+      s.gap_row_m,
+      s.gap_column_m,
+      s.direction_row
+    );
+  });
 });

packages/components/src/components/FlexBox/FlexBox.tsx

@@ -5,9 +5,9 @@ import type { ComponentPropsWithRef, ElementType } from 'react';
 import { clsx, polymorphicForwardRef } from '@koobiq/react-core';
 
 import { getResponsiveValue } from '../../utils';
-import { flex as flexBox } from '../layout';
 import { useMatchedBreakpoints } from '../Provider';
 
+import s from './FlexBox.module.css';
 import type { FlexBoxBaseProps } from './index';
 
 /**
@@ -38,26 +38,29 @@ export const FlexBox = polymorphicForwardRef<'div', FlexBoxBaseProps>(
 
     const flex = getResponsiveValue(flexProp, breakpoints);
     const gap = getResponsiveValue(gapProp, breakpoints);
-    const colGap = getResponsiveValue(colGapProp, breakpoints);
-    const rowGap = getResponsiveValue(rowGapProp, breakpoints);
+    const colGap = getResponsiveValue(colGapProp, breakpoints) ?? gap;
+    const rowGap = getResponsiveValue(rowGapProp, breakpoints) ?? gap;
     const wrap = getResponsiveValue(wrapProp, breakpoints);
     const alignItems = getResponsiveValue(alignItemsProp, breakpoints);
     const direction = getResponsiveValue(directionProp, breakpoints);
     const justifyContent = getResponsiveValue(justifyContentProp, breakpoints);
 
-    const flexCn = flexBox({
-      gap,
-      flex,
-      wrap,
-      colGap,
-      rowGap,
-      direction,
-      alignItems,
-      justifyContent,
-    });
-
     return (
-      <Tag className={clsx(flexCn, className)} {...other} ref={ref}>
+      <Tag
+        className={clsx(
+          s.base,
+          flex && s[`flex_${flex}`],
+          wrap && s[`wrap_${wrap}`],
+          rowGap && s[`gap_row_${rowGap}`],
+          colGap && s[`gap_column_${colGap}`],
+          direction && s[`direction_${direction}`],
+          alignItems && s[`alignItems_${alignItems}`],
+          justifyContent && s[`justifyContent_${justifyContent}`],
+          className
+        )}
+        {...other}
+        ref={ref}
+      >
         {children}
       </Tag>
     );

packages/components/src/components/layout/flex/flex.stories.tsx

@@ -10,9 +10,9 @@ import {
   flexPropGap,
   flexPropJustifyContent,
   flexPropOrder,
-  type FlexProps,
   flexPropWrap,
-} from './flex';
+} from './index';
+import type { FlexProps } from './index';
 
 const meta = {
   title: 'Mixins/flex',

packages/components/src/components/layout/flex/flex.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest';
+
+import { flex } from './flex';
+import s from './flex.module.css';
+
+describe('flex', () => {
+  it('should generate classes for every flex property', () => {
+    expect(
+      flex(
+        {
+          flex: 'inline-flex',
+          wrap: 'wrap-reverse',
+          order: -1,
+          gap: 'm',
+          rowGap: 'l',
+          colGap: 'xl',
+          direction: 'column-reverse',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+        },
+        'custom-class'
+      )
+    ).toBe(
+      [
+        s.base,
+        s['flex_inline-flex'],
+        s['wrap_wrap-reverse'],
+        s['order_-1'],
+        s.gap_row_l,
+        s.gap_column_xl,
+        s['direction_column-reverse'],
+        s.alignItems_center,
+        s['justifyContent_space-between'],
+        'custom-class',
+      ].join(' ')
+    );
+  });
+
+  it('should use gap as the row and column gap fallback', () => {
+    expect(flex({ gap: 'm' })).toBe(
+      [s.base, s.gap_row_m, s.gap_column_m].join(' ')
+    );
+  });
+
+  it('should generate class for zero order', () => {
+    expect(flex({ order: 0 })).toBe([s.base, s.order_0].join(' '));
+  });
+});