docs(Playground): expand and copy buttons

[SevereCloud]

Описание

Изменяем кнопки раскрытия и копирования кода

2025-11-10.12.03.56.mov

Release notes

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

• Улучшили кнопки раскрытия и копирования кода

[github-actions]

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

Commit da23d2f

[github-actions]

👀 Docs deployed

• ✅ Website
• ❌ Playground

📦 Package ❌

yarn add @vkontakte/vkui@

Commit da23d2f

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.03%. Comparing base (2abc174) to head (da23d2f).
⚠️ Report is 26 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #9152   +/-   ##
=======================================
  Coverage   95.02%   95.03%           
=======================================
  Files         420      419    -1     
  Lines       11184    11185    +1     
  Branches     4210     4211    +1     
=======================================
+ Hits        10628    10630    +2     
+ Misses        556      555    -1     

Flag	Coverage Δ
unittests	95.03% <ø> (+<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.

🚀 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.

[BlackySoul]

Вот такая штука не очень хорошо выглядит теперь х)

По-моему, мы даже с дизайнерами как-то разбирали - они предлагали просто всегда справа держать зарезервированное место под иконку (по всей высоте) 🤔

Но мейби просто фон будет лучше

[SevereCloud]

Вот такая штука не очень хорошо выглядит теперь х)

Исправил

[inomdzhon]

Вот такая штука не очень хорошо выглядит теперь х)

По-моему, мы даже с дизайнерами как-то разбирали - они предлагали просто всегда справа держать зарезервированное место под иконку (по всей высоте) 🤔

Но мейби просто фон будет лучше

А что если?

demo.mov

В тёмной теме

На светлой (поправил отступы, на видео не те отступы)

Сейчас много пространства иконка копирования занимает

2025-11-12.17.05.39.mov

[SevereCloud]

Поправил глобально, теперь везде кнопка копирования показывается при наведении

[inomdzhon]

Поправил глобально, теперь везде кнопка копирования показывается при наведении

Рис. 1. В Использование кнопка остается прозрачной при наведение, но физически есть

Рис. 2. Отступ справа у .prism-code .language-tsx в 44px нужно в любом случае добавить, а то кнопка будет перекрывать текст если первые строки будут длинные

---

Но точно ли хотим делать на наведение кнопку копирования?

Может возьмём опыт Stackblitz и будем показывать кнопку копирования на десктопе, а на мобилах скрывать (пример https://ark-ui.com/docs/components/accordion).

В будущем можем придти к решению когда код частично виден, пока не раскроешь и тогда вернуть кнопку копирования в тулбар (пример, https://base-ui.com/react/components/accordion).

[SevereCloud]

Рис. 1. В Использование кнопка остается прозрачной при наведение, но физически есть

Исправлю

Рис. 2. Отступ справа у .prism-code .language-tsx в 44px нужно в любом случае добавить, а то кнопка будет перекрывать текст если первые строки будут длинные

Переделаю на Button с подложкой

Может возьмём опыт Stackblitz и будем показывать кнопку копирования на десктопе, а на мобилах скрывать (пример https://ark-ui.com/docs/components/accordion).

Проблему не решает

Но точно ли хотим делать на наведение кнопку копирования?

Она может мешать видимости текста. Много где видел такое поведение кнопки. А вообще есть мысль вовсе избавиться от кнопки копирования, оставив только при наличии заголовка

[SevereCloud]

В итоге избавились от кнопки копирования и оставили ее только при наличии заголовка