Skip to content

Commit e9b7803

Browse files
clentfortTheSharpieOne
clentfort
authored and
TheSharpieOne
committed
fix(FormGroup,Label): Fix inline radio- and checkboxes (#624)
Currently inline of radio- and checkboxes do not work, because the classes are applied on the wrong component. According to the [Bootstrap documentation](https://getbootstrap.com/docs/4.0/components/forms/#inline) they should be applied to the containing `FormGroup` and not to the `Label`-element.
1 parent 53d126f commit e9b7803

6 files changed

Lines changed: 60 additions & 60 deletions

File tree

‎docs/lib/Components/FormPage.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ const FormFeedbackExampleSource = require('!!raw!../examples/FormFeedback');
1818
import InputTypeExample from '../examples/InputType';
1919
const InputTypeExampleSource = require('!!raw!../examples/InputType');
2020

21+
import InlineCheckboxesExample from '../examples/InlineCheckboxes';
22+
const InlineCheckboxesExampleSource = require('!!raw!../examples/InlineCheckboxes');
23+
2124
import InputSizingExample from '../examples/InputSizing';
2225
const InputSizingExampleSource = require('!!raw!../examples/InputSizing');
2326

@@ -104,6 +107,16 @@ export default class FormPage extends React.Component {
104107
</PrismCode>
105108
</pre>
106109

110+
<h3>Inline checkboxes</h3>
111+
<div className="docs-example">
112+
<InlineCheckboxesExample />
113+
</div>
114+
<pre>
115+
<PrismCode className="language-jsx">
116+
{InlineCheckboxesExampleSource}
117+
</PrismCode>
118+
</pre>
119+
107120
<h3>Input Sizing</h3>
108121
<div className="docs-example">
109122
<InputSizingExample />

‎docs/lib/examples/InlineCheckboxes.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react';
2+
import { Form, FormGroup, Label, Input } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<Form>
8+
<FormGroup check inline>
9+
<Label check>
10+
<Input type="checkbox" /> Some input
11+
</Label>
12+
</FormGroup>
13+
<FormGroup check inline>
14+
<Label check>
15+
<Input type="checkbox" /> Some other input
16+
</Label>
17+
</FormGroup>
18+
</Form>
19+
);
20+
}
21+
}

‎src/FormGroup.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const propTypes = {
77
children: PropTypes.node,
88
row: PropTypes.bool,
99
check: PropTypes.bool,
10+
inline: PropTypes.bool,
1011
disabled: PropTypes.bool,
1112
tag: PropTypes.string,
1213
className: PropTypes.string,
@@ -24,6 +25,7 @@ const FormGroup = (props) => {
2425
row,
2526
disabled,
2627
check,
28+
inline,
2729
tag: Tag,
2830
...attributes
2931
} = props;
@@ -32,6 +34,7 @@ const FormGroup = (props) => {
3234
className,
3335
row ? 'row' : false,
3436
check ? 'form-check' : 'form-group',
37+
check && inline ? 'form-check-inline' : false,
3538
check && disabled ? 'disabled' : false
3639
), cssModule);
3740

‎src/Label.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ const propTypes = {
2323
children: PropTypes.node,
2424
hidden: PropTypes.bool,
2525
check: PropTypes.bool,
26-
inline: PropTypes.bool,
2726
disabled: PropTypes.bool,
2827
size: PropTypes.string,
2928
for: PropTypes.string,
@@ -61,7 +60,6 @@ const Label = (props) => {
6160
widths,
6261
tag: Tag,
6362
check,
64-
inline,
6563
disabled,
6664
size,
6765
for: htmlFor,
@@ -101,8 +99,8 @@ const Label = (props) => {
10199
const classes = mapToCssModules(classNames(
102100
className,
103101
hidden ? 'sr-only' : false,
104-
check ? `form-check-${inline ? 'inline' : 'label'}` : false,
105-
check && inline && disabled ? 'disabled' : false,
102+
check ? 'form-check-label' : false,
103+
check && disabled ? 'disabled' : false,
106104
size ? `col-form-label-${size}` : false,
107105
colClasses,
108106
colClasses.length ? 'col-form-label' : false,

‎src/__tests__/FormGroup.spec.js‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,11 @@ describe('FormGroup', () => {
2121
expect(wrapper.hasClass('form-group')).toBe(true);
2222
});
2323

24-
it('should not render with "form-check" class by default', () => {
24+
it('should not render with "form-check" nor "form-check-inline" class by default', () => {
2525
const wrapper = shallow(<FormGroup>Yo!</FormGroup>);
2626

2727
expect(wrapper.hasClass('form-check')).toBe(false);
28+
expect(wrapper.hasClass('form-check-inline')).toBe(false);
2829
});
2930

3031
it('should render with "form-check" class when check prop is truthy', () => {
@@ -33,6 +34,25 @@ describe('FormGroup', () => {
3334
expect(wrapper.hasClass('form-check')).toBe(true);
3435
});
3536

37+
it('should not render with "form-check-inline" class when check prop is truthy and inline prop is falsy', () => {
38+
const wrapper = shallow(<FormGroup check>Yo!</FormGroup>);
39+
40+
expect(wrapper.hasClass('form-check-inline')).toBe(false);
41+
});
42+
43+
it('should render with "form-check" and "form-check-inline" classes when check prop and inline prop are both truthy', () => {
44+
const wrapper = shallow(<FormGroup check inline>Yo!</FormGroup>);
45+
46+
expect(wrapper.hasClass('form-check')).toBe(true);
47+
expect(wrapper.hasClass('form-check-inline')).toBe(true);
48+
});
49+
50+
it('should not render with "form-check-inline" class when check prop is falsy and inline prop is truthy', () => {
51+
const wrapper = shallow(<FormGroup inline>Yo!</FormGroup>);
52+
53+
expect(wrapper.hasClass('form-check-inline')).toBe(false);
54+
});
55+
3656
it('should not render with "form-group" class when check prop is truthy', () => {
3757
const wrapper = shallow(<FormGroup check>Yo!</FormGroup>);
3858

‎src/__tests__/Label.spec.js‎

Lines changed: 0 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -111,61 +111,6 @@ describe('Label', () => {
111111
expect(wrapper.hasClass('sr-only')).toBe(true);
112112
});
113113

114-
it('should render with "form-check-label" class when check prop is truthy and inline is not', () => {
115-
const wrapper = shallow(<Label check>Yo!</Label>);
116-
117-
expect(wrapper.hasClass('form-check-label')).toBe(true);
118-
});
119-
120-
it('should not render with "form-check-inline" class when check prop is truthy and inline is not', () => {
121-
const wrapper = shallow(<Label check>Yo!</Label>);
122-
123-
expect(wrapper.hasClass('form-check-inline')).toBe(false);
124-
});
125-
126-
it('should not render with "disabled" class when check and disabled props are truthy and inline is not', () => {
127-
const wrapper = shallow(<Label check disabled>Yo!</Label>);
128-
129-
expect(wrapper.hasClass('disabled')).toBe(false);
130-
});
131-
132-
it('should render with "form-check-inline" class when check and inline props are truthy', () => {
133-
const wrapper = shallow(<Label check inline>Yo!</Label>);
134-
135-
expect(wrapper.hasClass('form-check-inline')).toBe(true);
136-
});
137-
138-
it('should not render with "form-check-inline" class when check and inline props are truthy', () => {
139-
const wrapper = shallow(<Label check inline>Yo!</Label>);
140-
141-
expect(wrapper.hasClass('form-check-label')).toBe(false);
142-
});
143-
144-
it('should not render with "disabled" class when check, inline, and disabled props are truthy', () => {
145-
const wrapper = shallow(<Label check inline disabled>Yo!</Label>);
146-
147-
expect(wrapper.hasClass('disabled')).toBe(true);
148-
});
149-
150-
it('should not render with "form-check-inline" class when inline prop is truthy and check is not', () => {
151-
const wrapper = shallow(<Label inline>Yo!</Label>);
152-
153-
expect(wrapper.hasClass('form-check-inline')).toBe(false);
154-
});
155-
156-
it('should not render with "disabled" class when inline and disabled props are truthy and check is not', () => {
157-
const wrapper = shallow(<Label inline disabled>Yo!</Label>);
158-
159-
expect(wrapper.hasClass('disabled')).toBe(false);
160-
});
161-
162-
it('should not render with "form-check-inline" nor "form-check-label" by default', () => {
163-
const wrapper = shallow(<Label>Yo!</Label>);
164-
165-
expect(wrapper.hasClass('form-check-inline')).toBe(false);
166-
expect(wrapper.hasClass('form-check-label')).toBe(false);
167-
});
168-
169114
it('should render with "col-form-label-${size}" class when size is provided', () => {
170115
const wrapper = shallow(<Label size="lg">Yo!</Label>);
171116

0 commit comments

Comments
 (0)