feat(adaptivity): move to density adaptivity prop

[inomdzhon]

• close [v8][AdaptivityProvider]: создать density на замену sizeX / sizeY #9015

---

• Unit-тесты
• e2e-тесты
• [ ] Дизайн-ревью
• Документация фичи
• Release notes

Описание

• Создал свойство density (полный аналог sizeY) и заменил sizeY на него по всему репозиторию.
• sizeX="compact" заменил на viewWidth.MOBILE и sizeY="regular" заменил на viewWidth.SMALL_TABLET где это возможно.

Note

Скриншоты

На скриншотах оставил названия sizeX и sizeY, чтобы не увеличивать кол-во измененных файлов и убедиться, что изменения обратно совместимы.

Изменения

• sizeX в CSS заменен на --viewWidth-smallTabletMinus / --viewWidth-smallTabletPlus в @media и на viewWidthSmallTabletMinus / viewWidthSmallTabletPlus в селекторах, а также в глобальных селекторах vkuiInternal. Исключение: селекторы в Tappable заменил на более семантичные.
• sizeY в CSS напрямую заменен на density в @media и в селекторах, а также в глобальных селекторах vkuiInternal.
• В ComponentPlayground.tsx sizeX и sizeY перебиваются на viewWidth и density соотвествено.
  • В **/*.e2e.tsx sizeY заменён на density. sizeX пока оставил как есть.
• В useAdaptivityConditionalRender создана временная функцию getAdaptivityConditionalRenderForSizeXCompact.
• В useAdaptivityWithJSMediaQueries созданы временные функции isSizeXCompactFallback и isSizeXRegularFallback.

Release notes

Улучшения

• AdaptivityProvider: свойства sizeX и sizeY теперь @deprecated, используйте density вместо sizeY, viewWidth={ViewWidth.MOBILE} вместо sizeX="compact" и viewWidth={ViewWidth.SMALL_TABLET} вместо sizeX="regular"

  Пример миграции

  - <AdaptivityProvider sizeX="compact">
  + <AdaptivityProvider viewWidth={ViewWidth.MOBILE}>
  
  - <AdaptivityProvider sizeX="regular">
  + <AdaptivityProvider viewWidth={ViewWidth.SMALL_TABLET}>
  
  - <AdaptivityProvider sizeY="compact">
  + <AdaptivityProvider density="compact">
  
  - <AdaptivityProvider sizeY="regular">
  + <AdaptivityProvider density="regular">
  
  - <AdaptivityProvider sizeX="compact" sizeY="compact">
  + <AdaptivityProvider viewWidth={ViewWidth.MOBILE} density="compact">
  
  - <AdaptivityProvider sizeX="regular" sizeY="regular">
  + <AdaptivityProvider viewWidth={ViewWidth.SMALL_TABLET} density="regular">
  
  - <AppRootProvider sizeX="regular" sizeY="compact">
  + <AppRootProvider viewWidth={ViewWidth.SMALL_TABLET} density="compact">
  
  - <AppRootProvider sizeX="compact" sizeY="regular">
  + <AppRootProvider viewWidth={ViewWidth.MOBILE} density="regular">

[github-actions]

size-limit report 📦

Path	Size
JS	410.32 KB (+0.55% 🔺)
JS (gzip)	125.73 KB (+0.44% 🔺)
JS (brotli)	103.94 KB (+0.29% 🔺)
JS import Div (tree shaking)	811 B (0%)
CSS	373.5 KB (+0.22% 🔺)
CSS (gzip)	46.25 KB (+0.08% 🔺)
CSS (brotli)	36.63 KB (+0.03% 🔺)

[github-actions]

e2e tests

Playwright Report

[github-actions]

📊 Найдены изменения в собранных файлах: Отчет

Commit 15b84d6

[github-actions]

👀 Docs deployed

• ✅ Website
• ✅ Playground

📦 Package ✅

yarn add @vkontakte/vkui@https://development.s3.prodcloud.vk.team/pull/9334/15b84d650d0018a7b5d4483bd77fc8386b0f5124/pkg/@vkontakte/vkui/_pkg.tgz

Commit 15b84d6

[codecov]

Codecov Report

❌ Patch coverage is 89.96540% with 29 lines in your changes missing coverage. Please review.
✅ Project coverage is 94.76%. Comparing base (cc94b7d) to head (15b84d6).

Files with missing lines	Patch %	Lines
packages/vkui/src/components/Panel/Panel.tsx	68.75%	5 Missing ⚠️
packages/vkui/src/components/CardGrid/CardGrid.tsx	55.55%	4 Missing ⚠️
...kages/vkui/src/components/Group/GroupContainer.tsx	75.00%	4 Missing ⚠️
...es/vkui/src/components/PanelHeader/PanelHeader.tsx	71.42%	4 Missing ⚠️
...src/components/PanelHeaderBack/PanelHeaderBack.tsx	55.55%	4 Missing ⚠️
...mponents/PanelHeaderContext/PanelHeaderContext.tsx	63.63%	4 Missing ⚠️
...mponents/AdaptivityProvider/AdaptivityProvider.tsx	76.92%	3 Missing ⚠️
packages/vkui/src/components/Tappable/Tappable.tsx	88.88%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #9334      +/-   ##
==========================================
- Coverage   94.96%   94.76%   -0.21%     
==========================================
  Files         436      436              
  Lines       11763    11854      +91     
  Branches     4329     4380      +51     
==========================================
+ Hits        11171    11233      +62     
- Misses        592      621      +29     

Flag	Coverage Δ
unittests	94.76% <89.96%> (-0.21%)	⬇️

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.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.