Checkbox Support

[serenamarie125]

Create support for checkboxes:

Include story examples demonstrating these features in a mock application scenario

Link to JIRA story:
https://patternfly.atlassian.net/browse/OSUX-348

[priley86]

I am running into issues with inline styles and additional div's being rendered with the React Bootstrap checkbox. I will update this issue shortly with details on how we might make a more flexible Checkbox.

[serenamarie125]

@priley86 It looks checkboxes are already in the Supported Form Controls in the storybook, can you confirm?

[priley86]

So... the React Bootstrap Checkbox implementation seems to do the following:

If I just use the default <Checkbox>, I get the following markup:

<div class="checkbox"><label title=""><input type="checkbox" value="on"></label></div>

I use the inline option,<Checkbox inline> I get:

<label class="checkbox-inline" title=""><input type="checkbox" value="on">1</label>

These both work fine in forms typically, but for the DataTable selection checkboxes, these classes applied on the outer elements break the design. To match our existing design most closely, I can do something like this:

          <ControlLabel srOnly htmlFor={id}>
            {label}
          </ControlLabel>
          <FormControl type="checkbox" id={id} checked={rowData.selected} bsClass=" "
            onChange={e => {this.onSelectRow(e, rowData);}}
          />

OR just:

<ControlLabel srOnly htmlFor={id}> {label}</ControlLabel>
<input type="checkbox" id={id} checked={rowData.selected}
            onChange={e => {this.onSelectRow(e, rowData);}}/>

And I get the rendered output that most closely mimics the existing html/design:

<label for="select0" class="control-label sr-only">Select row 0</label>
<input type="checkbox" id="select0" value="on">

I guess what's bothering me about this is I prefer to just use <Checkbox>. I think it might be nice to write a wrapper on top of React Bootstrap Checkbox which just renders an input type="checkbox". Maybe <Checkbox type="form"> renders to the ReactBootstrap default, and <Checkbox type="input" renders just an <input>?

Thoughts @jeff-phillips-18 @sharvit @cdcabrera ?

We have the same exact issue w/ <Radio> it appears 😄 ...

[sharvit]

@priley86 - I think I prefer to create another new component called DataTableCheckbox, DataTable.Checkbox.
This component can handle it inside and should be used only inside the DataTable.

Then we can keep the components in their context

• Forms.Checkbox should be used only inside forms.
• DataTable.Checkbox only inside DataTables.
• <input type='checkbox' /> for other usages when you just want a normal checkbox.

[jeff-phillips-18]

I'm OK with this proposal @sharvit though for option 3 it seems we lose bootstrap's additional capabilities and could cause some inconsistencies.

[jeff-phillips-18]

Should we update this issue to reflect current status? Currently we do have checkbox support. If there are issues with the current implementation then those should be separate issues.

[priley86]

i guess this is just really a case where I disagree with React Bootstrap's api (and would have just had Checkbox render an input), however to keep it consistent with the React Bootstrap docs, I'm fine with @sharvit 's proposal. I think this should be something that gets re-evaluated when we look at Reacstrap / PF Next...

Also fine w/ closing this issue @jeff-phillips-18.