search

themesberg / flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
https://flowbite.com
MIT License
7.3k stars 710 forks source link

Indeterminate Checkbox should not change on hover if disabled. #851

Open herronelou opened 2 months ago

herronelou commented 2 months ago

Describe the bug With Flowbite, only indeterminate checkboxes have a different style on hover. While inconsistent, this doesn't bother me, however, these checkboxes preserve this behaviour even when disabled, which makes them look like they can be interacted with, which I believe is against UI best practices enough to constitute a bug.

I believe the CSS selector on https://github.com/themesberg/flowbite/blob/main/plugin.js#L364 could be changed to:

[type='checkbox']:indeterminate:not(:disabled):hover,
[type='checkbox']:indeterminate:not(:disabled):focus {
  border-color: transparent;
  background-color: currentColor;
}

I did not open a PR because maybe you would prefer to fix it a different way (maybe removing the hover entirely since none of the other checkboxes have them), and I haven't forked the repo so far.

To Reproduce Steps to reproduce the behavior:

  1. Create a disabled indeterminate checkbox
  2. Move you mouse over it

Expected behavior Disabled elements should not change on hover

Screenshots Not hover: image Hover: image