Create tri-state checkbox component
Description
Attachments
4
- 31 Jul 2017, 05:43 am
- 27 Jul 2017, 02:08 am
- 24 Jul 2017, 05:07 am
- 21 Jul 2017, 01:06 am
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
Details
Assignee
Former user
Former user(Deactivated)Reporter
Former user
Former user(Deactivated)Tested Version/s
None
Story Points
3
Components
Sprint
None
Fix versions
Priority

More fields
Time tracking
More fields
Time trackingCreated 18 July 2017 at 02:49
Updated 27 June 2018 at 02:15
Resolved 1 August 2017 at 23:48
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