Indeterminate checkbox loses fill color on hover when checked

Atlassian Ecosystem Design
1

Hi team :waving_hand:

I noticed a visual inconsistency with the Atlassian checkbox component.

Issue

When a checkbox is checked and not indeterminate, hovering over it keeps the filled (dark) state — :white_check_mark: expected.

However, when the checkbox is checked and indeterminate, hovering causes the checkbox to lose its fill color and appear unfilled/white — :cross_mark: unexpected.

Expected behavior

Indeterminate + checked state should retain the filled style on hover, same as a regular checked checkbox.

Actual behavior

Indeterminate + checked state loses fill color on hover and appears unselected.

Steps to reproduce

  1. Render a checkbox component

  2. Set checked={true} and isIndeterminate={true}

  3. Hover over the checkbox

Environment

  • Atlassian Design System

  • Browser: Chrome (latest)

  • Platform: Jira Cloud iframe app

Screenshots

2

Hi, I believe this would occur when Compiled was not setup correctly. Style ordering occurs during one of the bundler phases. See the Compiled installation instructions.

That said, the latest version of Checkbox (17.3.5) includes a refactor/optimization of styles, which removes some of the more complex CSS selectors. The issue you reported no longer seems to be a problem, even in environments where Compiled is not configured correctly, like Codesandbox.