Create tri-state checkbox component

Description

Checkboxes are used in multiple places on the frontend using a react-bootstrap component.

The react-bootstrap component does not support tri-state functionality, we should make a component that allows this and gives safer control of its react state.

This component would be a useful addition to the TM Merge Modal feature https://zanata.atlassian.net/browse/ZNTA-1865#icft=ZNTA-1865 with check-boxes having an indeterminate state to indicate partial selection of a checkbox group.

Tri-State check-boxes are also present on the JSF editor page.

Example usage:

<TriCheckbox 
  onChange={({target: {checked}})=>{
    this.setState({checked, indeterminate:false})
  }}
  checked={this.state.checked}
  indeterminate={this.state.indeterminate}
/>

Technical notes

Currently an open issue with facebook/react
Changing a default checkbox indeterminate property requires accessing the DOM
However, custom components can overcome this issue:
Material Design react checkbox component
React-Mdc-Web implementation

Attachments

31 Jul 2017, 05:43 am
27 Jul 2017, 02:08 am
24 Jul 2017, 05:07 am
21 Jul 2017, 01:06 am

Linked issues

relates to

ZNTA-631

Checkbox component is not keyboard-accessible.

Activity

Show:

Former user 27 July 2017 at 02:10

Updated the custom style of the component and now demonstrating passing classes as props in the 'with custom styles' storybook

Former user 21 July 2017 at 02:14

@Former user I included a truth table in the storybook showing how the component appears with each state combination
Checkboxes can be made indeterminate by setting their props in a wrapper function as in the frontend storybook:

makeIndeterminate = (event) => {
    this.setState({checked: false, indeterminate: true})
    this.props.onClick(event)
  }

Former user 19 July 2017 at 04:37

We need to be clear about whether the intermediate prop can override the checked prop or not. The important thing is to make sure the description and examples make it clear.

checked	intermediate	appearance
false	false	unchecked
false	true	unchecked (could implement to be intermediate if we want)
true	false	checked
true	true	intermediate

Ready for Release

Details

Assignee

Former user(Deactivated)

Reporter

Former user(Deactivated)

Tested Version/s

None

Story Points

Components

frontend

Sprint

None

Fix versions

platform-4.3.0

Priority

unspecified

More fields

Created 18 July 2017 at 02:49

Updated 27 June 2018 at 02:15

Resolved 1 August 2017 at 23:48

Configure

Zanata