feat(mdCheckbox): Add indeterminate state

[brettstack]

I just replaced a native checkbox with mdCheckbox and realised it doesn't have an indeterminate state.

[epelc]

If anyone doesn't know what this is have a look below

https://css-tricks.com/indeterminate-checkboxes/

Also +1 I will need this soon.

[marcysutton]

We have passed this question along to the UX team and will report back.

[marcysutton]

I'm still unclear what the use-case for this would be, and the native versions can only be added with JavaScript (not HTML attributes). That said, I think a line icon just like the Chrome version would communicate effectively.

[brettstack]

Use-case: a select-all check box which is checked whem all children are
checked; unchecked when all children are unchecked; and intermediate when
at least 1 but not all children are selected.
On 14 Apr 2015 4:48 pm, "Marcy Sutton" [email protected] wrote:

I'm still unclear what the use-case for this would be, and the native
versions can only be added with JavaScript (not HTML attributes). That
said, I think a line icon just like the Chrome version would communicate
effectively.

—
Reply to this email directly or view it on GitHub
#1912 (comment).

[epelc]

@marcysutton My use case would be for user specific permissions. Specifically for overriding defaults from a users role. The indeterminate state would be used to default to the parent role for each permission.

[marcysutton]

Cool! thanks for your replies, those help.

[ThomasBurleson]

The UX Material team is adding this feature to the specification.

[brettstack]

Thanks!

[ravanscafi]

+1
Use case: Row selection in tables determine state of "select all" checkbox.

http://www.google.com/design/spec/components/data-tables.html#data-tables-interaction

[YuriyVlasenko]

+1

[langdonx]

@ThomasBurleson PRs welcome?

md-checkbox.md-indeterminate .md-icon:after {
    box-sizing: border-box;
    transform: rotate(45deg);
    position: absolute;
    left: $checkbox-width / 3;
    top: $checkbox-width / 9;
    display: table;
    width: $checkbox-width / 3;
    height: $checkbox-width * 2 / 3;
    border-width: $checkbox-border-width;
    border-style: solid;
    border-top: 0;
    border-left: 0;
    content: '';
    transform: rotate(0deg);
    border-right: 0;
    top: -2px;
    width: 10px;
    left: 4px;
}

I know input only has indeterminate as a property, but it would make good sense to have it as an attribute here (or a class at the very least). It shouldn't manipulate the model either since input.checked doesn't change when input.indeterminate changes (if indeterminate is true, it will always show the checkbox as indeterminate regardless of the checked property).

[smurugavel]

+1

[begemott]

+1

[devversion]

SHA 2776ad2