fix(PanelHeader): Replace FixedLayout with sticky position

[mendrew]

• close #6588

related (по поводу использования position sticky): https://github.com/VKCOM/VKUI/issues/2422#issuecomment-1127388770 https://github.com/VKCOM/VKUI/pull/2414#issuecomment-1106027113

Описание

Убираем использование FixedLayout из PanelHeader, так как это провоцирует ререндер и сдвиг контента из-за того, что FixedLayout адаптирует свою ширину под ширину SplitCol .

Только сейчас по браузерной поддержке мы можем использовать position: sticky.

Изменения

• заменили FixedLayout на position: sticky.

[github-actions[bot]]

size-limit report 📦

Path	Size
JS	351.99 KB (-0.06% 🔽)
JS (gzip)	107.63 KB (-0.05% 🔽)
JS (brotli)	89.09 KB (+0.07% 🔺)
JS import Div (tree shaking)	1.43 KB (0%)
CSS	257.9 KB (-0.03% 🔽)
CSS (gzip)	33.81 KB (-0.01% 🔽)
CSS (brotli)	27.46 KB (+0.04% 🔺)

[codesandbox-ci[bot]]

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[bot]]

e2e tests

Playwright Report

[github-actions[bot]]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit 49b6f9609c6529755717a602ac36f8ce18b5446f

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 82.20%. Comparing base (e140ea9) to head (49b6f96). Report is 84 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #6609      +/-   ##
==========================================
- Coverage   82.21%   82.20%   -0.01%     
==========================================
  Files         331      331              
  Lines       10250    10246       -4     
  Branches     3439     3436       -3     
==========================================
- Hits         8427     8423       -4     
  Misses       1823     1823              

Flag	Coverage Δ
unittests	82.20% <ø> (-0.01%)	:arrow_down:

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

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[mendrew]

Заметил, что если использовать PanelHeader в многоколоночном интерфейсе на широком экране на Android или iOS, передавая PanelHeader в свойство header у SplitLayout, чтобы это работало как заглушка, заполняя пробелы между колонками, то c position: sticky эта заглушка прилипнет к концу SplitCol если контент панели больше высоты вьюпорта. https://vkui-screenshot.hb.bizmrg.com/pull/6609/49b6f9609c6529755717a602ac36f8ce18b5446f/styleguide/index.html#/SplitLayout

https://github.com/VKCOM/VKUI/assets/5443359/4b42b2d4-c250-496c-a8b5-fe725e04c83c

Перевожу пока в draft. Надо подумать.

[mendrew]

Другая причина не переходить полностью на position: sticky, это то, что PanelHeader начинает скакать вместе с контентом панели при scroll overflow. На видео сначала показываю что PanelHeader скачет с position: sticky, а при position: fixed - нет.

https://github.com/VKCOM/VKUI/assets/5443359/310389ea-2da9-4040-a8b4-7d28cd3f9bbc

[vkcom-publisher]

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