Open SineYlo opened 2 years ago
Добрый день. Можете подробнее скинуть какие-то примеры такой реализации в дизайн-системах, или какие-то рекомендации?. Мне просто кажется, это наоборот будет неочевидное поведение. Я смотрел несколько дизайн-систем:
Material Ui - https://material.io/components/dialogs#usage Ant Design - https://ant.design/components/modal/ Bootstrap - https://getbootstrap.com/docs/4.0/components/modal/ Fluent UI - https://developer.microsoft.com/en-us/fluentui#/controls/web/modal
В них нет паттерна cursor: pointer
для оверлея. Мне кажется, нет смысла добавлять это по умолчанию. При необходимости, можно переопределить это в конкретном проекте из css.
Ну если не опираться на дизайн-системы, то по факту это тоже кликабельный элемент. Мы же кнопке добавляем cursor: pointer
- добавляем. А чем отличается кликабельный overlay от той же кнопки? Кто-то этот overlay даже кнопкой и делает. В этих дизайн-системах точно также не объясняется почему у них стоит cursor в значении auto. Я больше чем уверен, что одни сделали, а другие просто слепо повторили, как это у нас обычно бывает.
Этой речью я не пытался вас как-то переубедить мне это и не нужно. Так или иначе каждый сам решает, что ему делать и как.
Не увидел в данной либе, как и во многих других наличие свойства
cursor
на определённых элементах. Для основного блока (.hystmodal) - нужно установитьcursor: pointer
, а для (.hystmodal__window) -cursor: auto
. Нужно помнить, что обычный юзер зачастую не является разработчиком и, следовательно, он не должен догадываться можно ли кликнуть на данный элемент или нельзя. А с помощью казалось бы простого свойства мы решаем данную "проблему" показывая на что можно кликнуть, а на что нельзя.