antoniandre / wave-ui

A UI framework for Vue.js 3 (and 2) with only the bright side. ☀️
https://antoniandre.github.io/wave-ui
MIT License
544 stars 39 forks source link

[w-checkbox] Fix the cursor so it only affects the input and label #118

Closed DerrikMilligan closed 11 months ago

DerrikMilligan commented 12 months ago

When you wrap a w-checkbox or w-checkboxes in a w-form the additional div that gets inserted has flex and grow on it. Which is good!

However this expands the w-checkbox container element to grow. Currently the cursor: pointer is associated with the w-checkbox class. But when expanded we show a pointer cursor for the white space area to the side of the checkbox which isn't intractable.

Here is a tiny codepen demonstrating the behavior. For the checkboxes in the w-form we get a pointer cursor all the way to the right of the screen because the div spans the whole width now. It's a little hard to describe in words. Here's an image with the red area highlighting where you get the pointer cursor when I believe it's not expected.

image

This pull request moves the cursor: pointer to the &__input and &__label classes so that only the intractable parts of the w-checkbox change the cursor.

Assuming this gets accepted, this likely needs to be done for the w-radio as well.

antoniandre commented 11 months ago

Hey @DerrikMilligan, thanks again for your PRs. This one took me some time to review, but thanks to your Codepen showing both cases, I could understand. Clean coding, great. 🚀