Skip to content

Commit d0c6e82

Browse files
TheSharpieOneTheSharpieOne
committed
feat(Input): add plaintext prop
Deprecate static prop in favor of plaintext prop. Use plaintaxt prop in the same way (boolean) closes #485
1 parent 49c76b4 commit d0c6e82

4 files changed

Lines changed: 51 additions & 24 deletions

File tree

‎docs/lib/Components/FormPage.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,23 @@ export default class FormPage extends React.Component {
4242
</PrismCode>
4343
</pre>
4444

45+
{`Input.propTypes = {
46+
children: PropTypes.node,
47+
// type can be things like text, password, (typical input types) as well as select and textarea, providing children as you normally would to those.
48+
type: PropTypes.string,
49+
size: PropTypes.string,
50+
state: deprecated(PropTypes.string, 'Please use the prop "valid"'),
51+
valid: PropTypes.bool,
52+
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
53+
// ref will only get you a reference to the Input component, use innerRef to get a reference to the DOM input (for things like focus management).
54+
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
55+
static: deprecated(PropTypes.bool, 'Please use the prop "plaintext"'),
56+
plaintext: PropTypes.bool,
57+
addon: PropTypes.bool,
58+
className: PropTypes.string,
59+
cssModule: PropTypes.object,
60+
};`}
61+
4562
<h3>Form Grid</h3>
4663
<div className="docs-example">
4764
<FormGridExample />

‎docs/lib/examples/InputType.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ export default class Example extends React.Component {
66
return (
77
<Form>
88
<FormGroup>
9-
<Label for="exampleEmail">Static</Label>
10-
<Input static>Some static value</Input>
9+
<Label for="exampleEmail">Plain Text (Static)</Label>
10+
<Input plaintext>Some plain text/ static value</Input>
1111
</FormGroup>
1212
<FormGroup>
1313
<Label for="exampleEmail">Email</Label>

‎src/Input.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ const propTypes = {
1313
valid: PropTypes.bool,
1414
tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
1515
innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
16-
static: PropTypes.bool,
16+
static: deprecated(PropTypes.bool, 'Please use the prop "plaintext"'),
17+
plaintext: PropTypes.bool,
1718
addon: PropTypes.bool,
1819
className: PropTypes.string,
1920
cssModule: PropTypes.object,
@@ -36,6 +37,7 @@ class Input extends React.Component {
3637
tag,
3738
addon,
3839
static: staticInput,
40+
plaintext,
3941
innerRef,
4042
...attributes
4143
} = this.props;
@@ -49,8 +51,8 @@ class Input extends React.Component {
4951

5052
let formControlClass = 'form-control';
5153

52-
if (staticInput) {
53-
formControlClass = `${formControlClass}-static`;
54+
if (plaintext || staticInput) {
55+
formControlClass = `${formControlClass}-plaintext`;
5456
Tag = tag;
5557
} else if (fileInput) {
5658
formControlClass = `${formControlClass}-file`;

‎src/__tests__/Input.spec.js‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -21,31 +21,31 @@ describe('Input', () => {
2121
expect(wrapper.type()).toBe('textarea');
2222
});
2323

24-
it('should render with "p" tag when static prop is truthy', () => {
25-
const wrapper = shallow(<Input type="select" static />);
24+
it('should render with "p" tag when plaintext prop is truthy', () => {
25+
const wrapper = shallow(<Input type="select" plaintext />);
2626

2727
expect(wrapper.type()).toBe('p');
2828
});
2929

30-
it('should render with "form-control-static" class when static prop is truthy', () => {
31-
const wrapper = shallow(<Input type="select" static />);
30+
it('should render with "form-control-plaintext" class when plaintext prop is truthy', () => {
31+
const wrapper = shallow(<Input type="select" plaintext />);
3232

33-
expect(wrapper.hasClass('form-control-static')).toBe(true);
33+
expect(wrapper.hasClass('form-control-plaintext')).toBe(true);
3434
});
3535

36-
it('should not render with "form-control" class when static prop is truthy', () => {
37-
const wrapper = shallow(<Input type="select" static />);
36+
it('should not render with "form-control" class when plaintext prop is truthy', () => {
37+
const wrapper = shallow(<Input type="select" plaintext />);
3838

3939
expect(wrapper.hasClass('form-control')).toBe(false);
4040
});
4141

42-
it('should render with custom tag when static prop is truthy and tag is provided', () => {
43-
const wrapper = shallow(<Input type="select" static tag="div" />);
42+
it('should render with custom tag when plaintext prop is truthy and tag is provided', () => {
43+
const wrapper = shallow(<Input type="select" plaintext tag="div" />);
4444

4545
expect(wrapper.type()).toBe('div');
4646
});
4747

48-
it('should not render with custom tag when static prop is not truthy and tag is provided', () => {
48+
it('should not render with custom tag when plaintext prop is not truthy and tag is provided', () => {
4949
const wrapper = shallow(<Input type="select" tag="div" />);
5050

5151
expect(wrapper.type()).toBe('select');
@@ -106,43 +106,51 @@ describe('Input', () => {
106106
expect(wrapper.hasClass('form-control')).toBe(true);
107107
});
108108

109-
it('should not render with "form-control-file" nor "form-control-static" nor "form-check-input" class by default', () => {
109+
it('should not render with "form-control-file" nor "form-control-plaintext" nor "form-check-input" class by default', () => {
110110
const wrapper = shallow(<Input />);
111111

112112
expect(wrapper.hasClass('form-control-file')).toBe(false);
113-
expect(wrapper.hasClass('form-control-static')).toBe(false);
113+
expect(wrapper.hasClass('form-control-plaintext')).toBe(false);
114114
expect(wrapper.hasClass('form-check-input')).toBe(false);
115115
});
116116

117-
it('should not render with "form-control" nor "form-control-static" nor "form-check-input" class when type is file', () => {
117+
it('should not render with "form-control" nor "form-control-plaintext" nor "form-check-input" class when type is file', () => {
118118
const wrapper = shallow(<Input type="file" />);
119119

120120
expect(wrapper.hasClass('form-control')).toBe(false);
121-
expect(wrapper.hasClass('form-control-static')).toBe(false);
121+
expect(wrapper.hasClass('form-control-plaintext')).toBe(false);
122122
expect(wrapper.hasClass('form-check-input')).toBe(false);
123123
});
124124

125-
it('should not render with "form-control-file" nor "form-control" nor "form-check-input" class when static prop is truthy', () => {
125+
it('should not render with "form-control-file" nor "form-control" nor "form-check-input" class when plaintext prop is truthy', () => {
126+
const wrapper = shallow(<Input type="file" plaintext />);
127+
128+
expect(wrapper.hasClass('form-control-file')).toBe(false);
129+
expect(wrapper.hasClass('form-control')).toBe(false);
130+
expect(wrapper.hasClass('form-check-input')).toBe(false);
131+
});
132+
133+
it('should not render with "form-control-file" nor "form-control" nor "form-check-input" class when static prop is truthy [DEPRECATED]', () => {
126134
const wrapper = shallow(<Input type="file" static />);
127135

128136
expect(wrapper.hasClass('form-control-file')).toBe(false);
129137
expect(wrapper.hasClass('form-control')).toBe(false);
130138
expect(wrapper.hasClass('form-check-input')).toBe(false);
131139
});
132140

133-
it('should not render with "form-control-file" nor "form-control-static" nor "form-control" class when type is radio', () => {
141+
it('should not render with "form-control-file" nor "form-control-plaintext" nor "form-control" class when type is radio', () => {
134142
const wrapper = shallow(<Input type="radio" />);
135143

136144
expect(wrapper.hasClass('form-control-file')).toBe(false);
137-
expect(wrapper.hasClass('form-control-static')).toBe(false);
145+
expect(wrapper.hasClass('form-control-plaintext')).toBe(false);
138146
expect(wrapper.hasClass('form-control')).toBe(false);
139147
});
140148

141-
it('should not render with "form-control-file" nor "form-control-static" nor "form-control" class when type is checkbox', () => {
149+
it('should not render with "form-control-file" nor "form-control-plaintext" nor "form-control" class when type is checkbox', () => {
142150
const wrapper = shallow(<Input type="checkbox" />);
143151

144152
expect(wrapper.hasClass('form-control-file')).toBe(false);
145-
expect(wrapper.hasClass('form-control-static')).toBe(false);
153+
expect(wrapper.hasClass('form-control-plaintext')).toBe(false);
146154
expect(wrapper.hasClass('form-control')).toBe(false);
147155
});
148156

0 commit comments

Comments
 (0)