feat(Panel): Add mode

[mendrew]

• close [Feature]: Добавить возможность переопределять layout из AppRoot для Panel #6607

---

• e2e-тесты

Описание

Добавляем новое свойство mode для Panel, по аналогии с Group.
Подразумевается использование вместе с Group, чтобы точечно задавать стиль card для Group с верным фоном, а не только для всего макета, как можно делать сейчас со свойством layout из AppRoot.

Изменения

• убрали прозрачность фона у Panel в режиме адаптивности regular. Не очень понятна причина по которой это раньше было добавлено. Судя по 71e1293, это связано со многоколоночным режимом, но что именно пытались решить не понятно, точнее не понятно актуально ли это сейчас или нет.
  Пока же, судя по коду, с прозрачностью фон становится идентичным тому, который задаёт AppRoot по стилям из common.css.
  

  VKUI/packages/vkui/src/styles/common.css

  Lines 28 to 36 in f7f6dea

  	.vkui--sizeX-regular {
  	background: var(--vkui--color_background);
  	}
  	@media (--sizeX-regular) {
  	.vkui--sizeX-none {
  	background: var(--vkui--color_background);
  	}
  	}

  
  То есть замена прозрачности на явные токены, которые идентичны AppRoot, визуально для приложений ничего не меняет, но у прощает css.

Тем не менее это затронуло скриншотные тесты в Playwright в dark режиме. Должно быть потому, что AppRootWrapper имеет немного другой фон и без прозрачности цвет Panel в скриншотах стал отличаться.

VKUI/packages/vkui/src/testing/e2e/AppDefaultWrapper.tsx

Line 11 in f7f6dea

background: 'var(--playwright-background)',

VKUI/packages/vkui/playwright/index.css

Line 107 in f7f6dea

--playwright-background: black;

На скриншоте слева фон черный #000000, а справа #0a0a0a

[github-actions]

size-limit report 📦

Path	Size
JS	356.5 KB (+0.05% 🔺)
JS (gzip)	108.8 KB (+0.08% 🔺)
JS (brotli)	89.88 KB (+0.12% 🔺)
JS import Div (tree shaking)	1.43 KB (0%)
CSS	260.94 KB (+0.01% 🔺)
CSS (gzip)	34.19 KB (+0.01% 🔺)
CSS (brotli)	27.77 KB (+0.04% 🔺)

[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

Commit c96d514

[codecov]

Codecov Report

Attention: Patch coverage is 85.71429% with 2 lines in your changes are missing coverage. Please review.

Project coverage is 82.26%. Comparing base (39192cc) to head (c96d514).
Report is 26 commits behind head on master.

Files	Patch %	Lines
packages/vkui/src/components/Panel/Panel.tsx	85.71%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #6678      +/-   ##
==========================================
+ Coverage   82.24%   82.26%   +0.01%     
==========================================
  Files         331      331              
  Lines       10270    10288      +18     
  Branches     3439     3445       +6     
==========================================
+ Hits         8447     8463      +16     
- Misses       1823     1825       +2     

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

[BlackySoul]

Скриншоты че т сильно выросли, там они точно нужны со всеми вариациями?)
Мейби отдельно нагенерим с mode? 🤔

[inomdzhon]

👍

---

вот эти скриншоты выглядят странно 🤔

[mendrew]

Скриншоты че т сильно выросли, там они точно нужны со всеми вариациями?) Мейби отдельно нагенерим с mode? 🤔

Нужна именно вариация mode + sizeX. Переместил тесты в отдельный плейграунд, а то тут в куче уже непонятно становится.
⚡ b4552b4

[inomdzhon]

🤝