Add indeterminate support to <Checkbox />

[schne324]

The indeterminate state is the state of a checkbox where the checked value of the checkbox cannot be determined.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#attr-indeterminate

Design Specs

Note: The designs originated from UXPin and the links are no longer accessible but the concepts are still applicable. Please note the proposed design does not match the current size of checkboxes and this is intentional.

Dark mode

Light mode

No new icons are needed for this checkbox, the indeterminate state can be rendered purely with CSS, approximate styles below:

.Checkbox input[type='checkbox']:indeterminate ~ .Checkbox__overlay:before {
  content: "";
  display: block;
  position: absolute;
  height: calc(var(--icon-size) - 8px);
  width: calc(var(--icon-size) - 8px);
  background: currentColor;
  transform: translate(4px, 4px);
}

.Checkbox input[type='checkbox']:indeterminate ~ .Checkbox__overlay:after {
  content: "";
  display: block;
  position: absolute;
  height: 3px;
  width: calc(var(--icon-size) / 2);
  background-color: var(--workspace-background-color);
  transform: translate(6px, calc(var(--icon-size) / 2 * -1 - 1.5px));
}

Technical Details

For more context, this github comment thread for react provides specific details about implementation challenges with indeterminate checkboxes. The HTML spec does not allow for indeterminate properties to be set via an attribute, so it must be set via javascript.

The checked and indeterminate properties are incompatible, so we need to define the default behavior of what happens to the checkbox when it becomes indeterminate in either its checked or unchecked state.

[schne324]

Grab the svg (and add it as a new <Icon /> type) from the uxpin

[scurker]

Closing, I'm not aware of anywhere that we currently need this and we can create a new issue if needed later.