feat(Cell/SimpleCell/MiniInfoCell/RichCell): Use spacing size tokens

[mendrew]

• related [EPIC]: Использовать vkui-токены для системы расстояний внутри компонентов VKUI #6684

---

• Unit-тесты
• e2e-тесты
• Дизайн-ревью

Описание

Заменяем константы отступов на токены системы расстояний.

Токены системы расстояний из vkui-tokens:
https://github.com/VKCOM/vkui-tokens/blob/2222b5b2208df9ea2d1f8d449e683f34696c6cd4/src/themeDescriptions/base/vk.ts#L730-L741

Вопросы

1.

Стоит ли нам заменять на токены отступы в режиме removable такие как 44px и 48px?

VKUI/packages/vkui/src/components/Cell/Cell.module.css

Lines 28 to 29 in f20e790

	/* размер removable icon */
	padding-inline-end: 44px;

VKUI/packages/vkui/src/components/Cell/Cell.module.css

Line 57 in f20e790

padding-inline: 48px var(--vkui--size_base_padding_horizontal--regular);

Так как у нас нет соответствующих токенов для таких размеров, то можно было бы использовать сложение имеющихся токенов, например
вместо 44px писать calc(var(--vkui--spacing_size_3xl) + var(--vkui--spacing_size_4xl))
а вместо 48px писать calc(var(--vkui--spacing_size_4xl) * 2)

Ответ: в данном случае оставим как есть, потому что тут не расстояние а размер иконки, и не хотелось бы, что это поехало при изменении токенов расстояний.

2.

У RichCell есть нестандартный отступ у группы bottom - 5px. Оставим как есть или может быть в дизайне до 6px увеличим?

VKUI/packages/vkui/src/components/RichCell/RichCell.module.css

Lines 100 to 102 in 991c631

	.RichCell__bottom {
	margin-block-start: 5px;
	}

Ответ: решили использовать --vkui--spacing_size_s (6px) для того чтобы всё привести к единой системе.

[github-actions]

size-limit report 📦

Path	Size
JS	368.61 KB (0%)
JS (gzip)	112.85 KB (0%)
JS (brotli)	92.85 KB (0%)
JS import Div (tree shaking)	1.42 KB (0%)
CSS	290.38 KB (+0.2% 🔺)
CSS (gzip)	37.74 KB (+0.23% 🔺)
CSS (brotli)	30.49 KB (+0.15% 🔺)

[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

⚠️ Some screenshots were failed. See Playwright Report.

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit caf76a8

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 83.78%. Comparing base (9ba0c02) to head (caf76a8).

❗ Current head caf76a8 differs from pull request most recent head b993feb

Please upload reports for the commit b993feb to get more accurate results.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #7033   +/-   ##
=======================================
  Coverage   83.78%   83.78%           
=======================================
  Files         357      357           
  Lines       10676    10676           
  Branches     3551     3551           
=======================================
  Hits         8945     8945           
  Misses       1731     1731           

Flag	Coverage Δ
unittests	83.78% <ø> (ø)

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.

[inomdzhon]

👍

---

Ответы на вопросы:

1. Вообще можно было бы комбинировать, но боюсь, что и читать сложнее станет, и конечному пользователю будет переопределять сложнее. Предлагаю пока оставить как есть.
2. @VKCOM/vkui-design ?