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.

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

patch(v5.10-stable): pr6538 #6583

Merged
merged 1 commit into from
Feb 16, 2024
Merged

Conversation

mendrew
Copy link
Contributor

@mendrew mendrew commented Feb 16, 2024

…6538) (#6573)

- close #6242

- меняем логику определения высоты контента. 
  Раньше мы просто брали `el.offsetScroll` у контейнера контента `.ModalPage__content-in`, теперь же, учитывая, что в режиме `expandable` размер контента модального окна не получить через `el.offsetScroll` мы высчитываем высоту временно меня `height` на `height: auto`, смотрим размер, и возвращаем стиль назад.
- убрали проверку предыдущего состояния `state.expandable` при определении текущего состояния `expandable`, потому что при изменении ориентации это не верно. Верно всё же ориентироваться на высоту контента.

Проблема лишнего места при изменении ориентации экрана в том, что это происходит когда модальное окно в режиме `expandable`. В этом режиме у `.ModalPage__content-in` `height` задано `100%` (изначально добавлено [тут](#4625))
https://github.com/VKCOM/VKUI/blob/e935a7b8dfd2c9d9dbbb5937bd1decba859d45d1/packages/vkui/src/components/ModalPage/ModalPage.module.css#L121-L126

Из-за этих стилей высота контейнера контента становится равна высоте родительского элемента.
При этом, если высота контента в вертикальной ориентации экрана меньше чем высота экрана, то высота контейнера контента будет больше чем высота контента, что как раз и добавляет лишнее место снизу.

При изменении ориентации мы пересчитываем высоту, но селектор всё ещё работает и `element.scrollHeight`, дающий нам высоту контента продолжает выдавать высоту равную высоте родителя, хотя наша логика определения состояния `expandable` основывается на сравнении высоты родительского элемента и высоты контента.
В результате `ModalRoot` продолжает думать, что `ModalPage` в состоянии `expandablе` и позиционирует модальную страницу максимально высоко, хотя контент позволяет отрисовать модальное окно ниже, как если бы модальное окно было изначально открыто в такой ориентации экрана.
@mendrew mendrew requested a review from a team as a code owner February 16, 2024 11:02
@mendrew mendrew self-assigned this Feb 16, 2024
@mendrew mendrew added this to the v5.10.1 milestone Feb 16, 2024
@mendrew mendrew merged commit 3c22e88 into 5.10-stable Feb 16, 2024
11 of 19 checks passed
@mendrew mendrew deleted the mendrew/v5.10-stable/patch/pr6538 branch February 16, 2024 11:03
Copy link
Contributor

size-limit report 📦

Path Size
JS 371.5 KB (0%)
JS (gzip) 111.9 KB (0%)
JS (brotli) 90.84 KB (0%)
JS import Div (tree shaking) 2.74 KB (0%)
CSS 286.13 KB (0%)
CSS (gzip) 36.68 KB (0%)
CSS (brotli) 29.16 KB (0%)

Copy link

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.

Copy link
Contributor

e2e tests

Playwright Report

Copy link
Contributor

👀 Docs deployed

Commit 56255bf

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Archived in project
3 participants