AddMoreScripts / hystModal

Simple modal library written in JavaScript
https://addmorescripts.github.io/hystModal/
MIT License
244 stars 26 forks source link

Добавление свойства cursor #12

Open SineYlo opened 2 years ago

SineYlo commented 2 years ago

Не увидел в данной либе, как и во многих других наличие свойства cursor на определённых элементах. Для основного блока (.hystmodal) - нужно установить cursor: pointer, а для (.hystmodal__window) - cursor: auto. Нужно помнить, что обычный юзер зачастую не является разработчиком и, следовательно, он не должен догадываться можно ли кликнуть на данный элемент или нельзя. А с помощью казалось бы простого свойства мы решаем данную "проблему" показывая на что можно кликнуть, а на что нельзя.

AddMoreScripts commented 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.

SineYlo commented 2 years ago

Ну если не опираться на дизайн-системы, то по факту это тоже кликабельный элемент. Мы же кнопке добавляем cursor: pointer - добавляем. А чем отличается кликабельный overlay от той же кнопки? Кто-то этот overlay даже кнопкой и делает. В этих дизайн-системах точно также не объясняется почему у них стоит cursor в значении auto. Я больше чем уверен, что одни сделали, а другие просто слепо повторили, как это у нас обычно бывает. Этой речью я не пытался вас как-то переубедить мне это и не нужно. Так или иначе каждый сам решает, что ему делать и как.