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	374.73 KB (0%)
JS (gzip)	114.66 KB (0%)
JS (brotli)	94.03 KB (0%)
JS import Div (tree shaking)	1.42 KB (0%)
CSS	300.61 KB (+0.19% 🔺)
CSS (gzip)	38.35 KB (+0.19% 🔺)
CSS (brotli)	30.86 KB (+0.12% 🔺)

[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 3989c6c

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.07%. Comparing base (5924c47) to head (3989c6c).
Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #7033   +/-   ##
=======================================
  Coverage   84.07%   84.07%           
=======================================
  Files         359      359           
  Lines       10909    10909           
  Branches     3591     3591           
=======================================
  Hits         9172     9172           
  Misses       1737     1737           

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

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 ?

[vkcom-publisher]

PR закрыт из-за отсутствия активности в течение последних 14 дней. Если это произошло по ошибке или изменения все ещё актуальны, откройте PR повторно.

[vkcom-publisher]

✅ v6.3.0 🎉