Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(PanelHeader): Replace FixedLayout with sticky position #6609

Closed
wants to merge 3 commits into from
Closed

fix(PanelHeader): Replace FixedLayout with sticky position #6609

wants to merge 3 commits into from

Conversation

mendrew
Copy link
Contributor

@mendrew mendrew commented Feb 20, 2024 •
edited
Loading

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

Описание

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

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

Изменения

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

@github-actions github-actions bot added the patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча label Feb 20, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Feb 20, 2024 •
edited
Loading

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 CodeSandbox CI
Copy link

codesandbox-ci bot commented Feb 20, 2024 •
edited
Loading

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 GitHub Actions
Copy link
Contributor

github-actions bot commented Feb 20, 2024 •
edited
Loading

e2e tests

Playwright Report

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Feb 20, 2024 •
edited
Loading

👀 Docs deployed

Commit 49b6f96

@codecov Codecov
Copy link

codecov bot commented Feb 20, 2024 •
edited
Loading

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.

@github-actions github-actions bot added the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Feb 28, 2024
@mendrew
Replace FixedLayout with sticky position in PanelHeader
5ee6aa9
@mendrew
Remove position css prop from vkcom theme
c6d079d 
Because it's the default value, so we don't need set it again.
Also it breaks fixed prop as it doesn't allow to override
position due to cascade.
@mendrew mendrew force-pushed the mendrew/6588/PanelHeader/remove-fixed-layout-usage branch from 221ba5c to c6d079d Compare February 29, 2024 11:01
mendrew
mendrew commented Feb 29, 2024
View reviewed changes
packages/vkui/src/components/PanelHeader/PanelHeader.module.css
@@ -244,7 +240,6 @@
* VKCOM
*/
.PanelHeader--vkcom {
position: relative;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@mendrew mendrew marked this pull request as ready for review February 29, 2024 12:07
@mendrew mendrew requested a review from a team as a code owner February 29, 2024 12:07
@mendrew mendrew modified the milestone: v6.0.1 Feb 29, 2024
inomdzhon
inomdzhon approved these changes Feb 29, 2024
View reviewed changes
Copy link
Contributor

@inomdzhon inomdzhon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

packages/vkui/src/components/PanelHeader/PanelHeader.module.css
display: block;
content: '';
.PanelHeader--fixed {
position: sticky;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Ссылки

@github-actions github-actions bot removed the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Mar 1, 2024
@mendrew
Copy link
Contributor Author

mendrew commented Mar 1, 2024

Заметил, что если использовать 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 mendrew marked this pull request as draft March 1, 2024 13:34
@mendrew
Copy link
Contributor Author

mendrew commented Mar 5, 2024

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

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

@vkcom-publisher vkcom-publisher added pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности and removed pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности labels Mar 13, 2024
@vkcom-publisher vkcom-publisher added pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности and removed pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности labels Mar 22, 2024
@vkcom-publisher vkcom-publisher added the pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности label Mar 30, 2024
@vkcom-publisher
Copy link
Contributor

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

@inomdzhon inomdzhon mentioned this pull request May 13, 2024
Closed
@inomdzhon inomdzhon mentioned this pull request Jul 19, 2024
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@inomdzhon inomdzhon inomdzhon approved these changes

Assignees
No one assigned
Labels
patch Автоматизация: PR продублируется в ветку последнего минорного релиза для выпуска патча pr-needs-work Автоматизация: PR автоматически закроется через 14 дней при отсутствии активности
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Bug][PanelHeader]: Некорректная позиция after на первом рендере
3 participants
@mendrew @vkcom-publisher @inomdzhon