search

mozilla / protocol

A design system for Mozilla websites.
https://protocol.mozilla.org/
Mozilla Public License 2.0
258 stars 77 forks source link

Modal close button pointer overridden by defaults #955

Open janbrasna opened 1 month ago

janbrasna commented 1 month ago

Description

Even though .mzp-c-modal-close has cursor: pointer defined, the actual child button .mzp-c-modal-button-close itself is not setting it and since it's a ‹button› element it gets a good deal of browser styling defaults applied to it, overriding the pointer.

Steps to reproduce

See https://protocol.mozilla.org/components/detail/modal or visit e.g. https://www.mozilla.org/firefox/all/ where the ‹?› help popus are modal instances.

Expected result

The "X" close button should have pointer cursor to reconfirm it's an active element.

Actual result

The parent has it defined, but the actual button is brutally overridden by UA defaults for button element, i.e. effectively no pointer.

Environment

macOS Catalina FXDE 129b5, Chromium 127r1313161

janbrasna commented 1 month ago

So the question is whether duplicate the pointer on both the container and the button, or just move to the button itself. (Will play around with what feels better, e.g. more precise hit zone etc.)