VKUI
VKUI copied to clipboard
VKCOM
feat: add ModalSheet
Новый компонент ModalSheet, который использует scroll-snap вместо прошлого способа
Потенциально избавляет от следующих проблем:
- #335
- #338
- #599
- #1071
- #1494
- #604
- #741
- #876
- #1570
- #2008
- #2029
- #2030
- #3028
- closed #2449
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.
![codesandbox-ci[bot] avatar](https://avatars.githubusercontent.com/in/38409?v=4 "Published by a pub.dev verified publisher"){kind=small}
Codecov Report
Attention: Patch coverage is 78.91892% with 39 lines in your changes are missing coverage. Please review.
Project coverage is 82.14%. Comparing base (
eb56a7d) to head (83546b1). Report is 8 commits behind head on master.
| Files | Patch % | Lines |
|---|---|---|
| ...ages/vkui/src/components/ModalSheet/ModalSheet.tsx | 73.33% | 36 Missing :warning: |
| packages/vkui/src/hooks/useKeyboard.ts | 78.57% | 3 Missing :warning: |
Additional details and impacted files
@@ Coverage Diff @@
## master #5092 +/- ##
==========================================
- Coverage 82.20% 82.14% -0.07%
==========================================
Files 331 336 +5
Lines 10219 10429 +210
Branches 3422 3473 +51
==========================================
+ Hits 8401 8567 +166
- Misses 1818 1862 +44
| Flag | Coverage Δ | |
|---|---|---|
| unittests | 82.14% <78.91%> (-0.07%) |
: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.
![codecov[bot] avatar](https://avatars.githubusercontent.com/in/254?v=4 "Published by a pub.dev verified publisher"){kind=small}
size-limit report 📦
| Path | Size |
|---|---|
| JS | 356.35 KB (+1.26% 🔺) |
| JS (gzip) | 108.85 KB (+1.15% 🔺) |
| JS (brotli) | 89.98 KB (+1.07% 🔺) |
| JS import Div (tree shaking) | 1.43 KB (0%) |
| CSS | 262.17 KB (+1.63% 🔺) |
| CSS (gzip) | 34.31 KB (+1.48% 🔺) |
| CSS (brotli) | 27.86 KB (+1.51% 🔺) |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
....неужели... неужели модалки начинают путь к рефактору 🥲 ✨💖✨
Правильно понимаю, что от ModalRoot будем отказываться?
Глянул на iOS, вот что заметил:
-
(коммент не относиться напрямую к iOS) возможно стоит оставлять маску до тех пор, пока модалка полностью не скроется или изменить скорость анимации. В конце модалка очень медленно уходит
Видео 1
https://github.com/VKCOM/VKUI/assets/5850354/3e43ae68-dd5a-4aed-a163-66eccc016717
-
iOS со своей клавой как всегда добавляет проблем 😭
Видео 2
https://github.com/VKCOM/VKUI/assets/5850354/855440bf-fb0a-4ea1-9c4f-4733930f4d90
Перенёс пример в песочницу https://codesandbox.io/s/pr5092-modalpagenew-438xlz, чтобы было удобней проверять на мобилках.
Правильно понимаю, что от ModalRoot будем отказываться?
Хотелось бы, чтобы модальные окна и попапы работали без SplitLayout. Если отказываться от ModalRoot, нужно предложить какую-то систему по открытию нескольких модалок (см #2449)
Перенёс пример в песочницу https://codesandbox.io/s/pr5092-modalpagenew-438xlz, чтобы было удобней проверять на мобилках.
В сторибуке можно открывать в отдельном окне
Правильно понимаю, что от ModalRoot будем отказываться?
Хотелось бы, чтобы модальные окна и попапы работали без SplitLayout. Если отказываться от ModalRoot, нужно предложить какую-то систему по открытию нескольких модалок (см #2449)
Найс
Про систему открытия надо будет покумекать, ну и как в issue написано, нужно ещё с дизайном обсудить
Перенёс пример в песочницу https://codesandbox.io/s/pr5092-modalpagenew-438xlz, чтобы было удобней проверять на мобилках.
В сторибуке можно открывать в отдельном окне
да, просто в codesandbox можно более гибко потыкать, в сторибуке же всё зашито
Привет! В примере на styleguide с динамической высотой при ширине 320 заметил, что при скроллинге модалка не закрывается, а при раскрытии Accordion-а скроллинг закрывает модалку а не видвигает ее.
Привет! В примере на styleguide с динамической высотой при ширине 320 заметил, что при скроллинге модалка не закрывается, а при раскрытии Accordion-а скроллинг закрывает модалку а не видвигает ее.
Фикс
- В
ModalFirstпри раскрытии на весь экран, не выключаетсяscroll-snap(см. Видео).
Не очень понял, а зачем выключать
- В
ModalDynamicне пересчитывается высота. (см. Видео).
- Можно ли сделать так, чтобы при скролле сверху вниз, когда мы проскролили контент, модалка не закрывалась сразу? (см.
ModalFullв см. Видео).
Оно уже есть, но оно не реагирует если сильно скролить
- В
ModalFirstпри раскрытии на весь экран, не выключаетсяscroll-snap(см. Видео).
Не очень понял, а зачем выключать
Можно на видео наблюдать, что скролл сегментирован, как-будто слайды листаю
Хочется такой же прокрутки как в ModalFull
Можно на видео наблюдать, что скролл сегментирован, как-будто слайды листаю
Возможно это кажется из-за обязательной остановки при закрытии модалки. Там просто не может быть снапа
А это требование какое-то, чтобы при закрытии модалка проскролливалась вверх и только потом закрывалась или баг?)
https://github.com/VKCOM/VKUI/assets/7431217/69ca937a-9c41-4834-a874-479d58db08e7
Очень круто! 💪 💪 💪 Мне нравится, приятно взаимодействовать.
Заметил один момент. Кажется, как будто теперь заголовок привязан к части скролящегося контента и нельзя, например, проскролив до конца, закрыть модалку потянув вниз лишь заголовок, потому что снова начинается скролл контента. Пока до начала не доскролишь закрыть нельзя. Наверняка связано с тем, что @BlackySoul написала https://github.com/VKCOM/VKUI/pull/5092#issuecomment-1866310170
А это требование какое-то, чтобы при закрытии модалка проскролливалась вверх и только потом закрывалась или баг?)
PR закрыт из-за отсутствия активности в течение последних 14 дней. Если это произошло по ошибке или изменения все ещё актуальны, откройте PR повторно.
закрыть модалку потянув вниз лишь заголовок
Не нашел ничего нативного, что имело бы такое же поведение. Да и реализовывать такое очень не хочется
Анимация открытия и закрытия медленная кажется, не похожа на старую. Скорее всего будет много приложений, кто использует старый и новый компонент, и по опыту взаимодействия они будут отличаться. Было бы здорово, если пользователь бы не понял подмены.
Кажется еще чуть чуть требуется калибровка. Опираться можно на пример нативных модалок в vk клиентах
на ios очень палится что это фейковый скролл, тяжелее скроллить, опираясь на инерцию
На iOS резком скролле вниз фиксированная кнопка эластично подпрыгивает и возвращается обратно.
В старой реализации полноэкранная модалка была с отступом, чтобы была видна шапка родительской панели.
Вижу такое же поведение в нативном компоненте iOS клиента: просмотр инфо о своем профиле.
Ок что при взаимодействии с высотой небольшой модалки меняется степень прозрачности фона? Раньше степень прозрачности фона менялась только при открытии и закрытии модалки. ИМХО Измена фона в процессе взаимодействия с модалкой чуть отвлекает
Ок что при взаимодействии с высотой небольшой модалки меняется степень прозрачности фона?
Поправил 0ad8fad
закрыть модалку потянув вниз лишь заголовок
Не нашел ничего нативного, что имело бы такое же поведение. Да и реализовывать такое очень не хочется
Действительно, похоже я перепутал с кастомным паттерном когда показывается информационное сообщение снизу с помощью компонента (Sheet), а при выдвигании контента появляются кнопки для действия. Там почему-то именно за dragger элемент нужно было держаться для выдвигания и скрытия. Но это похоже, что просто тонкости реализации и хотелки дизайна.
Тогда просто интересует ответ на вопрос, который Вика задала. [2]
А это требование какое-то, чтобы при закрытии модалка проскролливалась вверх и только потом закрывалась или баг?)
Могу представить как в модалке используется список файлов, которых может быть миллион, как в почте, например (с виртуальным список это может и не проблема). Может быть просто очень длинный текст. Странно проскроливать сквось всё обратно. Хотя может быть я ошибаюсь.
Спрашиваю не фикса ради, а просто поднимаю для обсуждения. Может быть потом к нам с этим придут.
В старой реализации полноэкранная модалка была с отступом, чтобы была видна шапка родительской панели.
Поправил поддержку hasCustomPanelHeaderAfter 83546b1
На iOS резком скролле вниз фиксированная кнопка эластично подпрыгивает и возвращается обратно.
Не воспроизвел
на ios очень палится что это фейковый скролл, тяжелее скроллить, опираясь на инерцию
Это нативный скролл. Скролл может затормаживаться(scroll-snap-stop: always) при приближении к началу модалки, чтобы случайно не закрыть ее
Анимация открытия и закрытия медленная кажется, не похожа на старую.
Под капотом используется нативный el.scrollTo({top: ...,behavior: 'smooth',}), к сожалению скоростью нельзя управлять
А что по итогу с этим? Будем ссылаться на особенности реализации?
Ещё в доке на айпаде ловлю вот такое странное поведение, при проскролливании списка он в какой-то момент мигает и сбрасывается в начало:
https://github.com/VKCOM/VKUI/assets/7431217/b7fe82c9-8831-48c1-8afa-75beabd96214
И вообще в доке на айпаде ощущается очень багованным скрол (с динамической высотой он как будто подтормаживает и откликается через секунду, в фильтрах мигает постоянно):
https://github.com/VKCOM/VKUI/assets/7431217/e6cf79d1-a718-4ad6-874b-3636c04a3c7a
А что по итогу с этим? Будем ссылаться на особенности реализации?
Ещё в доке на айпаде ловлю вот такое странное поведение, при проскролливании списка он в какой-то момент мигает и сбрасывается в начало:
6209058835129.mp4 И вообще в доке на айпаде ощущается очень багованным скрол (с динамической высотой он как будто подтормаживает и откликается через секунду, в фильтрах мигает постоянно):
6209077119673.mp4
Поддерживаю, вопрос актуален. Взаимодействие плохо мимикрирует под нативное, как в VK клиенте. Я бы в таком виде не распространял компонент в общее использование. Простите