fix(ModalPage): ограничить область контента с помощью bottom-inset

[mendrew]

fixes: #5604

Описание

В iOS при наличии bottom-inset скролл заходил в область bottom-inset.
Сам контент не был перекрыт bottom-inset потому что мы компенсировали и поднимали контент с помощью ::after с высотой равной значению bottom-inset.
Но скролл контента заходил в область bottom-inset потому что ::after был частью контента.

Изменения

• компенсаци bottom-inset вынесена из области контента на уровень ModalPage__content-wrap, за счёт чего контент вместе с областью скролла поднимается на высоту bottom-inset, таким образом скролл заканчивается до bottom-inset.
  Для этого псевдо элемент был убран из ModalPage__content-in и заменён на div ModalPage__bottom-inset вунтри ModalPage__content-wrap.

• в ModalState.refs был добавлен новый ref bottomInset. Сделано это для того, что можно было получить высоту ModalPage__bottom-inset, а значит значение переменной var(--vkui_internal--safe_area_inset_bottom).
  Значение bottom-inset нужно для того, чтобы корректно анимировать появление ModalPage в режиме dynamicHeight.

Дело в том, что ModalPage во время анимации появления выезжает ровно на высоту контента ModalPage. То есть при наличии bottom-offset, без псевдо-элемента внутри ModalPage__content-wrap, ModalPage появится таким образом, что bottom-offset перекроет нижнюю часть контента ModalPage.
Чтобы такого не было надо поднять ModalPage на высоту контента + bottom-inset.

Можно было и не добавлять bottomInset ref и достучаться до нужно элемента через contentElement ref, но это делает код хрупким и очень не явным зависимость ModalPage от ModalPage__bottom-inset при расчёте translateY.

Хотелось именно связать место расположения ModalPage__bottom-inset и его роль в подсчёте translateY.

Видео

Тут bottom-inset = 50px и визуализирован с помощью дива с position: fixed;

2023-08-29.14.06.28.mov

[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.

Latest deployment of this branch, based on commit 56bd22f:

Sandbox	Source
VKUI TypeScript	Configuration

[github-actions]

size-limit report 📦

Path	Size
JS	316.29 KB (+0.07% 🔺)
JS (gzip)	93.18 KB (+0.07% 🔺)
JS (brotli)	76.97 KB (+0.01% 🔺)
JS import Div (tree shaking)	3.04 KB (0%)
CSS	275.79 KB (-0.01% 🔽)
CSS (gzip)	36.01 KB (+0.02% 🔺)
CSS (brotli)	28.57 KB (+0.06% 🔺)

[github-actions]

e2e tests

Playwright Report

[github-actions]

👀 Docs deployed

• ✅ Styleguide
• ✅ Storybook

Commit 56bd22f

[codecov]

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (38a57c6) 81.93% compared to head (56bd22f) 81.93%.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #5715   +/-   ##
=======================================
  Coverage   81.93%   81.93%           
=======================================
  Files         296      296           
  Lines        9780     9783    +3     
  Branches     3102     3103    +1     
=======================================
+ Hits         8013     8016    +3     
  Misses       1767     1767           

Flag	Coverage Δ
unittests	81.93% <100.00%> (+<0.01%)	⬆️

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

Files Changed	Coverage Δ
...ckages/vkui/src/components/ModalPage/ModalPage.tsx	98.07% <ø> (ø)
...ckages/vkui/src/components/ModalRoot/ModalRoot.tsx	51.96% <100.00%> (+0.25%)	⬆️
...vkui/src/components/ModalRoot/ModalRootContext.tsx	85.71% <100.00%> (+0.71%)	⬆️

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[inomdzhon]

🤝