feat: add ModalSheet #5092

SevereCloud · 2023-05-18T09:26:18Z

Новый компонент ModalSheet, который использует scroll-snap вместо прошлого способа

Потенциально избавляет от следующих проблем:

codesandbox-ci · 2023-05-18T09:29:13Z

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.

codecov · 2023-05-18T09:30:18Z

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 ⚠️
packages/vkui/src/hooks/useKeyboard.ts	78.57%	3 Missing ⚠️

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

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 · 2023-05-18T09:30:44Z

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 · 2023-05-18T09:47:23Z

e2e tests

Playwright Report

inomdzhon · 2023-05-18T13:02:34Z

....неужели... неужели модалки начинают путь к рефактору 🥲 ✨💖✨

Правильно понимаю, что от ModalRoot будем отказываться?

Глянул на iOS, вот что заметил:

(коммент не относиться напрямую к iOS) возможно стоит оставлять маску до тех пор, пока модалка полностью не скроется или изменить скорость анимации.
В конце модалка очень медленно уходит

Видео 1

RPReplay_Final1684405594.mp4
iOS со своей клавой как всегда добавляет проблем 😭

Видео 2

RPReplay_Final1684405641.mp4

Перенёс пример в песочницу https://codesandbox.io/s/pr5092-modalpagenew-438xlz, чтобы было удобней проверять на мобилках.

SevereCloud · 2023-05-18T13:39:26Z

Правильно понимаю, что от ModalRoot будем отказываться?

Хотелось бы, чтобы модальные окна и попапы работали без SplitLayout. Если отказываться от ModalRoot, нужно предложить какую-то систему по открытию нескольких модалок (см #2449)

Перенёс пример в песочницу https://codesandbox.io/s/pr5092-modalpagenew-438xlz, чтобы было удобней проверять на мобилках.

В сторибуке можно открывать в отдельном окне

inomdzhon · 2023-05-19T09:36:44Z

Правильно понимаю, что от ModalRoot будем отказываться?

Хотелось бы, чтобы модальные окна и попапы работали без SplitLayout. Если отказываться от ModalRoot, нужно предложить какую-то систему по открытию нескольких модалок (см #2449)

Найс

Про систему открытия надо будет покумекать, ну и как в issue написано, нужно ещё с дизайном обсудить

Перенёс пример в песочницу https://codesandbox.io/s/pr5092-modalpagenew-438xlz, чтобы было удобней проверять на мобилках.

В сторибуке можно открывать в отдельном окне

да, просто в codesandbox можно более гибко потыкать, в сторибуке же всё зашито

github-actions · 2023-12-15T13:23:31Z

👀 Docs deployed

✅ Styleguide
✅ Storybook

Commit 83546b1

levtsypanov · 2023-12-15T17:38:47Z

Привет! В примере на styleguide с динамической высотой при ширине 320 заметил, что при скроллинге модалка не закрывается, а при раскрытии Accordion-а скроллинг закрывает модалку а не видвигает ее.

SevereCloud · 2023-12-18T08:31:07Z

Привет! В примере на styleguide с динамической высотой при ширине 320 заметил, что при скроллинге модалка не закрывается, а при раскрытии Accordion-а скроллинг закрывает модалку а не видвигает ее.

Фикс

inomdzhon

Выглядит очень клёво! И по реализации выглядит элегантно 💅

Написал несколько предложений.

Проверил на iOS 17.1.2, есть вот такие замечания:

В ModalFirst при раскрытии на весь экран, не выключается scroll-snap (см. Видео).
В ModalDynamic не пересчитывается высота. (см. Видео).
Можно ли сделать так, чтобы при скролле сверху вниз, когда мы проскролили контент, модалка не закрывалась сразу? (см. ModalFull в см. Видео).

Видео

RPReplay_Final1703068228.MP4

packages/vkui/src/components/ModalSheet/ModalSheet.stories.tsx

packages/vkui/src/components/ModalSheet/Readme.md

packages/vkui/src/components/ModalSheet/components/Content/Content.tsx

packages/vkui/src/components/ModalSheet/ModalSheet.module.css

packages/vkui/src/components/ModalSheet/components/Indent/Indent.tsx

packages/vkui/src/hooks/useKeyboard.ts

packages/vkui/src/components/ModalSheet/ModalSheet.tsx

SevereCloud · 2023-12-20T14:23:39Z

В ModalFirst при раскрытии на весь экран, не выключается scroll-snap (см. Видео).

Не очень понял, а зачем выключать

В ModalDynamic не пересчитывается высота. (см. Видео).

safari...

Можно ли сделать так, чтобы при скролле сверху вниз, когда мы проскролили контент, модалка не закрывалась сразу? (см. ModalFull в см. Видео).

Оно уже есть, но оно не реагирует если сильно скролить

packages/vkui/src/components/ModalSheet/ModalSheet.module.css

inomdzhon · 2023-12-20T15:26:54Z

В ModalFirst при раскрытии на весь экран, не выключается scroll-snap (см. Видео).

Не очень понял, а зачем выключать

Можно на видео наблюдать, что скролл сегментирован, как-будто слайды листаю

Хочется такой же прокрутки как в ModalFull

SevereCloud · 2023-12-20T15:44:03Z

Можно на видео наблюдать, что скролл сегментирован, как-будто слайды листаю

Возможно это кажется из-за обязательной остановки при закрытии модалки. Там просто не может быть снапа

packages/vkui/src/components/ModalSheet/ModalSheet.tsx

BlackySoul · 2023-12-21T14:01:13Z

А это требование какое-то, чтобы при закрытии модалка проскролливалась вверх и только потом закрывалась или баг?)

2023-12-21.20.59.50.mov

Co-authored-by: Inomdzhon Mirdzhamolov <[email protected]>

Co-authored-by: Andrey Medvedev <[email protected]>

SevereCloud · 2024-02-26T10:03:31Z

закрыть модалку потянув вниз лишь заголовок

Не нашел ничего нативного, что имело бы такое же поведение. Да и реализовывать такое очень не хочется

shevchux · 2024-02-26T16:14:16Z

Анимация открытия и закрытия медленная кажется, не похожа на старую. Скорее всего будет много приложений, кто использует старый и новый компонент, и по опыту взаимодействия они будут отличаться. Было бы здорово, если пользователь бы не понял подмены.

Кажется еще чуть чуть требуется калибровка. Опираться можно на пример нативных модалок в vk клиентах

shevchux · 2024-02-26T16:14:31Z

на ios очень палится что это фейковый скролл, тяжелее скроллить, опираясь на инерцию

shevchux · 2024-02-26T16:15:26Z

На iOS резком скролле вниз фиксированная кнопка эластично подпрыгивает и возвращается обратно.

shevchux · 2024-02-26T16:17:17Z

В старой реализации полноэкранная модалка была с отступом, чтобы была видна шапка родительской панели.

Вижу такое же поведение в нативном компоненте iOS клиента: просмотр инфо о своем профиле.

shevchux · 2024-02-26T16:18:57Z

Ок что при взаимодействии с высотой небольшой модалки меняется степень прозрачности фона? Раньше степень прозрачности фона менялась только при открытии и закрытии модалки. ИМХО Измена фона в процессе взаимодействия с модалкой чуть отвлекает

SevereCloud · 2024-02-28T09:36:02Z

Ок что при взаимодействии с высотой небольшой модалки меняется степень прозрачности фона?

Поправил 0ad8fad

mendrew · 2024-02-28T09:47:02Z

[1]

закрыть модалку потянув вниз лишь заголовок

Не нашел ничего нативного, что имело бы такое же поведение. Да и реализовывать такое очень не хочется

Действительно, похоже я перепутал с кастомным паттерном когда показывается информационное сообщение снизу с помощью компонента (Sheet), а при выдвигании контента появляются кнопки для действия. Там почему-то именно за dragger элемент нужно было держаться для выдвигания и скрытия. Но это похоже, что просто тонкости реализации и хотелки дизайна.

Тогда просто интересует ответ на вопрос, который Вика задала. [2]

А это требование какое-то, чтобы при закрытии модалка проскролливалась вверх и только потом закрывалась или баг?)

Могу представить как в модалке используется список файлов, которых может быть миллион, как в почте, например (с виртуальным список это может и не проблема). Может быть просто очень длинный текст. Странно проскроливать сквось всё обратно. Хотя может быть я ошибаюсь.

Спрашиваю не фикса ради, а просто поднимаю для обсуждения. Может быть потом к нам с этим придут.

SevereCloud · 2024-02-28T11:37:57Z

В старой реализации полноэкранная модалка была с отступом, чтобы была видна шапка родительской панели.

Поправил поддержку hasCustomPanelHeaderAfter 83546b1

SevereCloud · 2024-02-28T11:40:53Z

На iOS резком скролле вниз фиксированная кнопка эластично подпрыгивает и возвращается обратно.

Не воспроизвел

SevereCloud · 2024-02-28T11:43:13Z

на ios очень палится что это фейковый скролл, тяжелее скроллить, опираясь на инерцию

Это нативный скролл. Скролл может затормаживаться(scroll-snap-stop: always) при приближении к началу модалки, чтобы случайно не закрыть ее

SevereCloud · 2024-02-28T11:45:15Z

Анимация открытия и закрытия медленная кажется, не похожа на старую.

Под капотом используется нативный el.scrollTo({top: ...,behavior: 'smooth',}), к сожалению скоростью нельзя управлять

BlackySoul · 2024-03-18T08:37:16Z

А что по итогу с этим? Будем ссылаться на особенности реализации?

Ещё в доке на айпаде ловлю вот такое странное поведение, при проскролливании списка он в какой-то момент мигает и сбрасывается в начало:

6209058835129.mp4

И вообще в доке на айпаде ощущается очень багованным скрол (с динамической высотой он как будто подтормаживает и откликается через секунду, в фильтрах мигает постоянно):

6209077119673.mp4

shevchux · 2024-03-18T08:40:18Z

А что по итогу с этим? Будем ссылаться на особенности реализации?

Ещё в доке на айпаде ловлю вот такое странное поведение, при проскролливании списка он в какой-то момент мигает и сбрасывается в начало:

6209058835129.mp4
И вообще в доке на айпаде ощущается очень багованным скрол (с динамической высотой он как будто подтормаживает и откликается через секунду, в фильтрах мигает постоянно):

6209077119673.mp4

Поддерживаю, вопрос актуален. Взаимодействие плохо мимикрирует под нативное, как в VK клиенте. Я бы в таком виде не распространял компонент в общее использование. Простите

shevchux · 2024-03-18T08:41:43Z

Сепаратор шапки должен прятаться при скролле контента вниз

shevchux · 2024-03-18T08:43:43Z

Боковые отступы у сепараторов должны быть побольше. Нужно взять токен горизонтального отступа

SevereCloud added the no-stale Добавляет PR в исключения для автоматического закрытия label May 18, 2023

SevereCloud force-pushed the SevereCloud/concept/new-ModalPage branch from d9253b1 to d0d0404 Compare May 18, 2023 09:34

SevereCloud force-pushed the SevereCloud/concept/new-ModalPage branch from d0d0404 to 7ab238c Compare August 2, 2023 09:18

SevereCloud added the v5 Автоматизация: PR продублируется в ветку v5 label Sep 6, 2023

SevereCloud force-pushed the SevereCloud/concept/new-ModalPage branch from 7ab238c to 596ada9 Compare December 15, 2023 13:15

SevereCloud removed no-stale Добавляет PR в исключения для автоматического закрытия v5 Автоматизация: PR продублируется в ветку v5 labels Dec 15, 2023

SevereCloud changed the title ~~concept: new ModalPage~~ feat: add ModalSheet Dec 15, 2023

SevereCloud marked this pull request as ready for review December 15, 2023 13:16

SevereCloud requested a review from a team as a code owner December 15, 2023 13:16

VKCOM deleted a comment from github-actions bot Dec 18, 2023

inomdzhon reviewed Dec 20, 2023

View reviewed changes

packages/vkui/src/components/ModalSheet/ModalSheet.module.css Outdated Show resolved Hide resolved

SevereCloud force-pushed the SevereCloud/concept/new-ModalPage branch from 57be80d to cec5cc7 Compare December 20, 2023 16:49

SevereCloud commented Dec 20, 2023

View reviewed changes

packages/vkui/src/components/ModalSheet/ModalSheet.tsx Show resolved Hide resolved

SevereCloud requested a review from inomdzhon December 21, 2023 11:50

SevereCloud and others added 8 commits February 26, 2024 12:37

Update packages/vkui/src/components/ModalSheet/ModalSheet.module.css

63a6c1d

Co-authored-by: Inomdzhon Mirdzhamolov <[email protected]>

fix: ios anchor dynamic

a60294a

fix: remove indent ref

1e33694

fix: max-block-size

1a5533a

fix: @media (--sizeX-regular) max-block-size

8d80c88

fix: center ModalSheet__container

1d08350

feat: add close

6b69477

refactor: fix comments

355e9b5

Co-authored-by: Andrey Medvedev <[email protected]>

SevereCloud force-pushed the SevereCloud/concept/new-ModalPage branch from 7857084 to 355e9b5 Compare February 26, 2024 09:48

SevereCloud requested a review from mendrew February 26, 2024 10:11

fix: opacity

0ad8fad

fix: support hasCustomPanelHeaderAfter

83546b1

mendrew approved these changes Mar 7, 2024

View reviewed changes

inomdzhon mentioned this pull request Mar 26, 2024

[Draft] feat: create ModalPageV2 #6759

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add ModalSheet #5092

feat: add ModalSheet #5092

SevereCloud commented May 18, 2023 •

edited by BlackySoul

codesandbox-ci bot commented May 18, 2023 •

edited

codecov bot commented May 18, 2023 •

edited

github-actions bot commented May 18, 2023 •

edited

github-actions bot commented May 18, 2023 •

edited

inomdzhon commented May 18, 2023 •

edited

SevereCloud commented May 18, 2023

inomdzhon commented May 19, 2023

github-actions bot commented Dec 15, 2023 •

edited

levtsypanov commented Dec 15, 2023 •

edited

SevereCloud commented Dec 18, 2023

inomdzhon left a comment

SevereCloud commented Dec 20, 2023

inomdzhon commented Dec 20, 2023

SevereCloud commented Dec 20, 2023

BlackySoul commented Dec 21, 2023

SevereCloud commented Feb 26, 2024

shevchux commented Feb 26, 2024 •

edited

shevchux commented Feb 26, 2024 •

edited

shevchux commented Feb 26, 2024

shevchux commented Feb 26, 2024 •

edited by inomdzhon

shevchux commented Feb 26, 2024

SevereCloud commented Feb 28, 2024

mendrew commented Feb 28, 2024

SevereCloud commented Feb 28, 2024

SevereCloud commented Feb 28, 2024

SevereCloud commented Feb 28, 2024

SevereCloud commented Feb 28, 2024

BlackySoul commented Mar 18, 2024

shevchux commented Mar 18, 2024

shevchux commented Mar 18, 2024

shevchux commented Mar 18, 2024

feat: add ModalSheet #5092

Are you sure you want to change the base?

feat: add ModalSheet #5092

Conversation

SevereCloud commented May 18, 2023 • edited by BlackySoul

codesandbox-ci bot commented May 18, 2023 • edited

codecov bot commented May 18, 2023 • edited

Codecov Report

github-actions bot commented May 18, 2023 • edited

size-limit report 📦

github-actions bot commented May 18, 2023 • edited

e2e tests

inomdzhon commented May 18, 2023 • edited

SevereCloud commented May 18, 2023

inomdzhon commented May 19, 2023

github-actions bot commented Dec 15, 2023 • edited

👀 Docs deployed

levtsypanov commented Dec 15, 2023 • edited

SevereCloud commented Dec 18, 2023

inomdzhon left a comment

Choose a reason for hiding this comment

SevereCloud commented Dec 20, 2023

inomdzhon commented Dec 20, 2023

SevereCloud commented Dec 20, 2023

BlackySoul commented Dec 21, 2023

SevereCloud commented Feb 26, 2024

shevchux commented Feb 26, 2024 • edited

shevchux commented Feb 26, 2024 • edited

shevchux commented Feb 26, 2024

shevchux commented Feb 26, 2024 • edited by inomdzhon

shevchux commented Feb 26, 2024

SevereCloud commented Feb 28, 2024

mendrew commented Feb 28, 2024

SevereCloud commented Feb 28, 2024

SevereCloud commented Feb 28, 2024

SevereCloud commented Feb 28, 2024

SevereCloud commented Feb 28, 2024

BlackySoul commented Mar 18, 2024

shevchux commented Mar 18, 2024

shevchux commented Mar 18, 2024

shevchux commented Mar 18, 2024

SevereCloud commented May 18, 2023 •

edited by BlackySoul

codesandbox-ci bot commented May 18, 2023 •

edited

codecov bot commented May 18, 2023 •

edited

github-actions bot commented May 18, 2023 •

edited

github-actions bot commented May 18, 2023 •

edited

inomdzhon commented May 18, 2023 •

edited

github-actions bot commented Dec 15, 2023 •

edited

levtsypanov commented Dec 15, 2023 •

edited

shevchux commented Feb 26, 2024 •

edited

shevchux commented Feb 26, 2024 •

edited

shevchux commented Feb 26, 2024 •

edited by inomdzhon