[FRNT-579] fix modal styles

[ainursharaev]

Problem

Modal is not compatible with the design system

AS IS:

• heading has the same size in modals of different widths
• modal doesn't have min/max width constraints
• paddings between title and content are not calculated correctly
• wrong padding of the modal content
• the closing icon of the modal has no states

TO BE:

• reduce the size of the heading (consult with the designer)
• set min/max width
• paddings for the modal component are calculated by formulas (consult with the designer)
• the padding between title and content is calculated by the formulae
• the closing icon has states
• the closing icon is aligned with the title (consult with the designer)
• the icon is colored depending on the priority (consult with the designer)

[risen228]

А можешь вкратце пояснить зачем программный "скролл лок"? Насколько помню я решал любые скроллы и прочее в модалках на уровне css

[ainursharaev]

А можешь вкратце пояснить зачем программный "скролл лок"? Насколько помню я решал любые скроллы и прочее в модалках на уровне css

Я тоже делаю это на уровне css, просто вынес в отдельный хук. Если есть время, напиши свой альтернативный вариант

[ainursharaev]

Зачем сделал хук, а не просто вешаю класс body.is-model-open { overflow: hidden }:

• в Windows браузерах scrollbar съедает пространство у viewport. Когда у body ставится overflow: hidden, то scrollbar пропадает, и модалка "прыгает". В хук можно передать параметр reserveScrollBarGap, если он true, то у body добавится padding-right, который равен ширине скролла, чтобы предовратить этот флик.
• он запоминает предыдущие стили у body перед тем, как заблокировать скролл, и возвращает их после разблокирования, поскольку у пользователя могли быть свои параметры overflow у body

[risen228]

Зачем сделал хук, а не просто вешаю класс body.is-model-open { overflow: hidden }:

• в Windows браузерах scrollbar съедает пространство у viewport. Когда у body ставится overflow: hidden, то scrollbar пропадает, и модалка "прыгает". В хук можно передать параметр reserveScrollBarGap, если он true, то у body добавится padding-right, который равен ширине скролла, чтобы предовратить этот флик.
• он запоминает предыдущие стили у body перед тем, как заблокировать скролл, и возвращает их после разблокирования, поскольку у пользователя могли быть свои параметры overflow у body

Забавно, я всегда забивал на горизонтальные флики)