[i-mirdzhamolov-vk-team]

• close [Docs]: Дополнить документацию компонентов примерами со Skeleton #10184

---

• Документация фичи
• Release notes

Описание

Добавлены готовые примеры использования Skeleton для компонентов, которые часто отображают асинхронные данные. Примеры помогают сохранять геометрию интерфейса во время загрузки и переиспользуют реальные компоненты там, где это возможно.

Изменения

• добавлены истории SkeletonExample для Accordion, Avatar, Banner, Button, Cell, ContentCard, CustomSelect, GridAvatar, HorizontalCell, Image, InfoRow, MiniInfoCell, NativeSelect, RichCell, Select, SelectMimicry и SimpleCell;
• на соответствующие страницы website добавлены разделы с рекомендациями и интерактивными примерами;
• для CustomSelect, Select и NativeSelect в качестве адаптивной оболочки используется SelectMimicry;
• пример CustomSelect описан как альтернатива встроенному состоянию асинхронной загрузки списка;
• устаревший Div в затронутом примере Banner заменён на Box.

Проверено:

• ESLint и Biome;
• типы VKUI и website;
• генерация документации;
• production-сборка Storybook;
• production-сборка website.

Release notes

Документация

• Skeleton: добавлены примеры состояния загрузки для компонентов отображения данных, полей выбора и кнопки.

[github-actions]

✅ Изменений в собранных файлах нет

Commit 27a4d44

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.24%. Comparing base (0b7ec81) to head (27a4d44).
⚠️ Report is 23 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #10209   +/-   ##
=======================================
  Coverage   95.24%   95.24%           
=======================================
  Files         461      461           
  Lines       12571    12581   +10     
  Branches     4491     4497    +6     
=======================================
+ Hits        11973    11983   +10     
  Misses        598      598           

Flag	Coverage Δ
unittests	95.24% <ø> (+<0.01%)	⬆️

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

☔ View full report in Codecov by Harness.
📢 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.

[github-actions]

👀 Docs deployed

• ✅ Website
• ✅ Playground

📦 Package ❌

yarn add @vkontakte/vkui@

Commit 27a4d44

[d-suvorov-vk-team]

Примеры на сайте на сером фоне

[i-mirdzhamolov-vk-team]

Примеры на сайте на сером фоне

Поправил добавив PlaygroundView св-во contarstBackground – включил во всех примерах со скелетон

[vkcom-publisher]

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