fix(Flex): refactor gaps

[inomdzhon]

• fix [Bug]: Вложенные Flex добавляют отрицательные отступы, что иногда ломает разметку #7464

---

• Unit-тесты
• e2e-тесты

Описание

Т.к. CSS св-во gap применяется только при наличии нескольких потомков,
добавляем в наш фолбек такую же логику основываясь:

• на передаче пропа gap;
• на кол-ве элементов в пропе children;

[github-actions]

size-limit report 📦

Path	Size
JS	380.88 KB (+0.05% 🔺)
JS (gzip)	115.32 KB (+0.05% 🔺)
JS (brotli)	94.66 KB (+0.08% 🔺)
JS import Div (tree shaking)	1.45 KB (0%)
CSS	309.13 KB (+0.03% 🔺)
CSS (gzip)	39.65 KB (+0.02% 🔺)
CSS (brotli)	31.86 KB (-0.02% 🔽)

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[github-actions]

e2e tests

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit 3924fd6

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.17%. Comparing base (a67792e) to head (3924fd6).
Report is 14 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #7492   +/-   ##
=======================================
  Coverage   95.17%   95.17%           
=======================================
  Files         384      384           
  Lines       11212    11221    +9     
  Branches     3674     3679    +5     
=======================================
+ Hits        10671    10680    +9     
  Misses        541      541           

Flag	Coverage Δ
unittests	95.17% <100.00%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[BlackySoul]

Косяк с целевой веткой?)

[inomdzhon]

Косяк с целевой веткой?)

поправил, спасибо ✅

[SevereCloud]

Теперь у флекса появился отступ сверху и слева

было	стало

[inomdzhon]

Теперь у флекса появился отступ сверху и слева

было стало

а скинь плиз пример с кодом

вот так не смог воспроизвести

код

<button>кнопка</button>
<button>кнопка</button>
  <Flex gap="xs">
    {new Array(3).fill(3).map((i) => (
      <div style={{ width: '36px', height: '36px', borderRadius: '50%', border: '1px solid red' }} key={i}>
        <Flex
          align="center"
          justify="center"
          style={{ width: '36px', height: '36px', border: '1px solid blue' }}
        >
          VKUI
        </Flex>
      </div>
    ))}
  </Flex>```

</p>
</details> 

[SevereCloud]

Код

<Button></Button>
<Button></Button>
  <Flex gap="xs">
    {new Array(3).fill(3).map((i) => (
      <div style={{ width: '36px', height: '36px', borderRadius: '50%', border: '1px solid red' }} key={i}>
        <Flex
          align="center"
          justify="center"
          style={{ width: '36px', height: '36px', border: '1px solid blue' }}
        >
          VKUI
        </Flex>
      </div>
    ))}
  </Flex>

[inomdzhon]

Код

Это из-за Button без текста создаёт пустое пространство, если добавить текст, то всё ок