fix: fix components view with global box-sizing: border-box

[EldarMuhamethanov]

• close [Bug]: Маленькие размеры иконки в PanelHeaderSubmit и next.js 15 #8262
• close [Feature]: Возможность использования box-sizing: border-box по дефолту #5054

---

• e2e-тесты
• Release notes

Описание

Сейчас есть проблема: если использовать VKUI в приложении, где глобально используется переопределение для всех элементов стиля box-sizing: border-box, то у некоторых компонентов ломается верстка. Нужно пройтись по таким компонентам и точечно там, где нужно выставить box-sizing: content-box

Изменения

Чтобы выявить необходимые компоненты для скриншотных тестов добавил глобальный класс, который переопределяет всем дочерним элементам box-sizing: border-box. Далее запустил тесты и там где тесты обновились начал смотреть - что не так.

• В некоторых компонентах точечно добавил box-sizing: content-box
• В некоторых скриншотных тестах пришлось тоже добавить box-sizing: content-box, чтобы убедиться, что проблема не внутри компонента. Решил оставить эти стили, чтобы в будущем можно было следить, чтобы новых проблем не возникло

Release notes

Исправления

• Исправлена проблема с использованием библиотеки в проектах, где у всех элементов установлен стиль box-sizing: border-box

[github-actions]

size-limit report 📦

Path	Size
JS	397.06 KB (0%)
JS (gzip)	120.59 KB (0%)
JS (brotli)	99.13 KB (0%)
JS import Div (tree shaking)	1.56 KB (0%)
CSS	348.36 KB (+0.07% 🔺)
CSS (gzip)	43.13 KB (+0.08% 🔺)
CSS (brotli)	34.45 KB (+0.02% 🔺)

[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

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook
• ✅ Docs beta

Commit 6818bd4

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 95.54%. Comparing base (06f24f4) to head (6818bd4).
Report is 2 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #8268   +/-   ##
=======================================
  Coverage   95.54%   95.54%           
=======================================
  Files         404      404           
  Lines       11641    11641           
  Branches     3859     3859           
=======================================
  Hits        11122    11122           
  Misses        519      519           

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

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]

👍 🙏

давно надо было это сделать)

[andrey-medvedev-vk]

💠

[vkcom-publisher]

❌ Patch

Не удалось автоматически применить исправление на ветке 7.1-stable.

Дальнейшие действия выполняют контрибьютеры из группы @VKCOM/vkui-core

Чтобы изменение попало в ветку 7.1-stable, выполните следующие действия:

1. Создайте новую ветку от 7.1-stable и примените изменения используя cherry-pick

git stash # опционально
git fetch origin 7.1-stable
git checkout -b patch/pr8268 origin/7.1-stable

git cherry-pick --no-commit 85f232eb9b52cad76e42911030982932a9be60c0
git checkout HEAD **/__image_snapshots__/*.png
git diff --quiet HEAD || git commit --no-verify --no-edit

2. Исправьте конфликты, следуя инструкциям из терминала
3. Отправьте ветку на GitHub и создайте новый PR с веткой 7.1-stable (установка лейбла не требуется!)

git push --set-upstream origin patch/pr8268
gh pr create --base 7.1-stable --title "patch: pr8268" --body "- patch #8268"