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

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

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

Reporter

Tested Version/s

Story Points

Components

Sprint

Fix versions

Priority

More fields

Created 18 July 2017 at 02:49
Updated 27 June 2018 at 02:15
Resolved 1 August 2017 at 23:48

Flag notifications