n8design/htwoo

Hover effect incorrectly shown on checkbox and radio button

Closed this issue · 1 comments

gabbsmo commented

Describe the bug
The circle/square is filled when hovering over a disabled radio button or checkbox.

To Reproduce
Steps to reproduce the behavior:

  1. Go to Pattern Lab for disabled checkbox and radio button
  2. Hover over the input
  3. Notice the inner circle appearing

Expected behavior
Nothing should happen, as in Fluent React.

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Edge
  • Version: 124

Additional context
You can fix it for radio buttons by adding the :disabled condition to relevant selectors.

.hoo-radio:hover:not(:checked, :disabled) + label:after, .hoo-radio:checked + label:after {
    transform: scale(1);
    opacity: 1;
}

Checkboxes are a little more tricky since there's this magic box-shadow used to implement the check icon.

.hoo-checkbox:not(:checked, :disabled):hover + label:after {
    position: absolute;
    top: 0.5rem;
    left: 0.3125rem;
    width: 0.125rem;
    height: 0.125rem;
    content: "";
    transform: rotate(45deg);
    background: var(--inputIcon);
    background: var(--neutralSecondary);
    box-shadow: 2px 0 0 var(--neutralSecondary), 4px 0 0 var(--neutralSecondary), 4px -2px 0 var(--neutralSecondary), 4px -4px 0 var(--neutralSecondary), 4px -6px 0 var(--neutralSecondary), 4px -8px 0 var(--neutralSecondary);
}

.hoo-checkbox:not(:checked, :disabled):hover + label:after, .hoo-checkbox:checked + label:after {
    position: absolute;
    top: 0.5rem;
    left: 0.3125rem;
    width: 0.125rem;
    height: 0.125rem;
    content: "";
    transform: rotate(45deg);
    background: var(--inputIcon);
    box-shadow: 2px 0 0 var(--inputIcon), 4px 0 0 var(--inputIcon), 4px -2px 0 var(--inputIcon), 4px -4px 0 var(--inputIcon), 4px -6px 0 var(--inputIcon), 4px -8px 0 var(--inputIcon);
}