fix(PanelHeader): Replace FixedLayout with sticky position

[mendrew]

• close [Bug][PanelHeader]: Некорректная позиция after на первом рендере #6588

related (по поводу использования position sticky): #2422 (comment) #2414 (comment)

Описание

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

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

Изменения

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

[github-actions]

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]

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 49b6f96

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

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%)	⬇️

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.

[mendrew]

Убрал, потому что иначе проп fixed не работает с платформой vkcom.
А не работает из-за того, что веса PanelHeader--fixed cо sticky и .PanelHeader--vkcom теперь одинаковы.

[inomdzhon]

🎉

[inomdzhon]

Возможно стоит добавить backface-visibility: hidden, сталкивался с багом то ли в сафари, то ли в хроме, когда стики то пропадает, то появляется. Мб сейчас уже ок, не смог найти инфы в инете поправлено ли.

Ссылки

• см. Почему в хроме «прыгает» фиксированный блок при скролле?
• см. Css sticky element is flickering

[mendrew]

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

Screen.Recording.2024-03-01.at.16.33.26.mov

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

[mendrew]

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

Screen.Recording.2024-03-05.at.18.23.17.mov

[vkcom-publisher]

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