Skip to content

Commit 0aea9bd

Browse files
jbadanjbadan
authored
feat: forms using state proptype migrated to updated options (#968)
1 parent 1a7afd2 commit 0aea9bd

File tree

32 files changed

+487
-49
lines changed

32 files changed

+487
-49
lines changed

‎src/Forms/Checkbox.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import classnames from 'classnames';
2-
import { FORM_STATES } from '../utils/constants';
2+
import { FORM_MESSAGE_TYPES } from '../utils/constants';
33
import FormItem from './FormItem';
44
import FormLabel from './FormLabel';
55
import PropTypes from 'prop-types';
@@ -40,7 +40,7 @@ const Checkbox = React.forwardRef(({
4040
const inputEl = useRef();
4141

4242
useEffect(() => {
43-
inputEl && (inputEl.current.indeterminate = indeterminate);
43+
inputEl && inputEl.current && (inputEl.current.indeterminate = indeterminate);
4444
});
4545

4646
useEffect(() => {
@@ -115,7 +115,7 @@ Checkbox.propTypes = {
115115
labelClassName: PropTypes.string,
116116
labelProps: PropTypes.object,
117117
name: PropTypes.string,
118-
state: PropTypes.oneOf(FORM_STATES),
118+
state: PropTypes.oneOf(FORM_MESSAGE_TYPES),
119119
value: PropTypes.string,
120120
onChange: PropTypes.func
121121
};

‎src/Forms/Checkbox.test.js‎

Lines changed: 42 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import renderer from 'react-test-renderer';
55

66
describe('<Checkbox />', () => {
77
const checkbox = (
8-
<Checkbox id='foo' value='Option 1' />
8+
<Checkbox id='foo' value='Option 1'>Label</Checkbox>
99
);
1010

1111
test('create checkbox', () => {
@@ -17,7 +17,7 @@ describe('<Checkbox />', () => {
1717

1818
describe('Checkbox Tests', () => {
1919
let setup = (props) => {
20-
return mount(<Checkbox value='Label 1' {...props} />);
20+
return mount(<Checkbox value='Label 1' {...props}>Label</Checkbox>);
2121
};
2222
test('should add checked attribute when checked is passed', () => {
2323
let element = setup({
@@ -83,37 +83,73 @@ describe('<Checkbox />', () => {
8383
});
8484

8585
test('should allow props to be spread to the Checkbox component', () => {
86-
const element = mount(<Checkbox data-sample='Sample' />);
86+
const element = mount(<Checkbox data-sample='Sample'>Label</Checkbox>);
8787

8888
expect(
8989
element.find('.fd-form-item').getDOMNode().attributes['data-sample'].value
9090
).toBe('Sample');
9191
});
9292

9393
test('should allow props to be spread to the Checkbox component input', () => {
94-
const element = mount(<Checkbox inputProps={{ 'data-sample': 'Sample' }} />);
94+
const element = mount(<Checkbox inputProps={{ 'data-sample': 'Sample' }}>Label</Checkbox>);
9595

9696
expect(
9797
element.find('.fd-checkbox').getDOMNode().attributes['data-sample'].value
9898
).toBe('Sample');
9999
});
100100

101101
test('should allow props to be spread to the Checkbox component label', () => {
102-
const element = mount(<Checkbox labelProps={{ 'data-sample': 'Sample' }} />);
102+
const element = mount(<Checkbox labelProps={{ 'data-sample': 'Sample' }}>Label</Checkbox>);
103103

104104
expect(
105105
element.find('.fd-form-label').getDOMNode().attributes['data-sample'].value
106106
).toBe('Sample');
107107
});
108108
});
109+
describe('Validation states', () => {
110+
test('should render the correct snapshots', () => {
111+
const checkboxWarning = (
112+
<Checkbox id='foo' state='warning'>Label</Checkbox>
113+
);
114+
115+
let component = renderer.create(checkboxWarning);
116+
let tree = component.toJSON();
117+
expect(tree).toMatchSnapshot();
118+
119+
const checkboxError = (
120+
<Checkbox id='foo' state='error'>Label</Checkbox>
121+
);
122+
123+
component = renderer.create(checkboxError);
124+
tree = component.toJSON();
125+
expect(tree).toMatchSnapshot();
126+
127+
const checkboxSuccess = (
128+
<Checkbox id='foo' state='success'>Label</Checkbox>
129+
);
130+
131+
component = renderer.create(checkboxSuccess);
132+
tree = component.toJSON();
133+
expect(tree).toMatchSnapshot();
134+
135+
const checkboxInformation = (
136+
<Checkbox id='foo' state='information'>Label</Checkbox>
137+
);
138+
139+
component = renderer.create(checkboxInformation);
140+
tree = component.toJSON();
141+
expect(tree).toMatchSnapshot();
142+
});
143+
});
144+
109145
test('forwards the ref', () => {
110146
let ref;
111147
class Test extends React.Component {
112148
constructor(props) {
113149
super(props);
114150
ref = React.createRef();
115151
}
116-
render = () => <Checkbox ref={ref} />;
152+
render = () => <Checkbox ref={ref}>Label</Checkbox>;
117153
}
118154
mount(<Test />);
119155

‎src/Forms/FormRadioItem.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import classnames from 'classnames';
2-
import { FORM_STATES } from '../utils/constants';
2+
import { FORM_MESSAGE_TYPES } from '../utils/constants';
33
import FormItem from './FormItem';
44
import FormLabel from './FormLabel';
55
import PropTypes from 'prop-types';
@@ -83,7 +83,7 @@ FormRadioItem.propTypes = {
8383
inputProps: PropTypes.object,
8484
labelProps: PropTypes.object,
8585
name: PropTypes.string,
86-
state: PropTypes.oneOf(FORM_STATES),
86+
state: PropTypes.oneOf(FORM_MESSAGE_TYPES),
8787
value: PropTypes.string
8888
};
8989

‎src/Forms/FormRadioItem.test.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,49 @@ describe('<FormRadioItem />', () => {
9696
).toBe('Sample');
9797
});
9898
});
99+
describe('Validation states', () => {
100+
test('should render the correct snapshots', () => {
101+
const formRadioItemWarning = (
102+
<FormRadioItem id='foo' state='warning'>
103+
Option 1
104+
</FormRadioItem>
105+
);
106+
107+
let component = renderer.create(formRadioItemWarning);
108+
let tree = component.toJSON();
109+
expect(tree).toMatchSnapshot();
110+
111+
const formRadioItemError = (
112+
<FormRadioItem id='foo' state='error'>
113+
Option 1
114+
</FormRadioItem>
115+
);
116+
117+
component = renderer.create(formRadioItemError);
118+
tree = component.toJSON();
119+
expect(tree).toMatchSnapshot();
120+
121+
const formRadioItemSuccess = (
122+
<FormRadioItem id='foo' state='success'>
123+
Option 1
124+
</FormRadioItem>
125+
);
126+
127+
component = renderer.create(formRadioItemSuccess);
128+
tree = component.toJSON();
129+
expect(tree).toMatchSnapshot();
130+
131+
const formRadioItemInformation = (
132+
<FormRadioItem id='foo' state='information'>
133+
Option 1
134+
</FormRadioItem>
135+
);
136+
137+
component = renderer.create(formRadioItemInformation);
138+
tree = component.toJSON();
139+
expect(tree).toMatchSnapshot();
140+
});
141+
});
99142
test('forwards the ref', () => {
100143
let ref;
101144
class Test extends React.Component {

‎src/Forms/FormSelect.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import classnames from 'classnames';
2-
import { FORM_STATES } from '../utils/constants';
2+
import { FORM_MESSAGE_TYPES } from '../utils/constants';
33
import PropTypes from 'prop-types';
44
import React, { useEffect } from 'react';
55

@@ -37,7 +37,7 @@ FormSelect.propTypes = {
3737
compact: PropTypes.bool,
3838
disabled: PropTypes.bool,
3939
disableStyles: PropTypes.bool,
40-
state: PropTypes.oneOf(FORM_STATES)
40+
state: PropTypes.oneOf(FORM_MESSAGE_TYPES)
4141
};
4242

4343
export default FormSelect;

‎src/Forms/FormSelect.test.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,44 @@ describe('<FormSelect />', () => {
2828
});
2929
});
3030

31+
describe('Validation states', () => {
32+
test('should render the correct snapshots', () => {
33+
const formSelectWarning = (
34+
<FormSelect
35+
placeholder='Field placeholder text'
36+
state='warning' />
37+
);
38+
39+
let component = renderer.create(formSelectWarning);
40+
let tree = component.toJSON();
41+
expect(tree).toMatchSnapshot();
42+
43+
const formSelectError = (
44+
<FormSelect state='error' />
45+
);
46+
47+
component = renderer.create(formSelectError);
48+
tree = component.toJSON();
49+
expect(tree).toMatchSnapshot();
50+
51+
const formSelectSuccess = (
52+
<FormSelect state='success' />
53+
);
54+
55+
component = renderer.create(formSelectSuccess);
56+
tree = component.toJSON();
57+
expect(tree).toMatchSnapshot();
58+
59+
const formSelectInformation = (
60+
<FormSelect state='information' />
61+
);
62+
63+
component = renderer.create(formSelectInformation);
64+
tree = component.toJSON();
65+
expect(tree).toMatchSnapshot();
66+
});
67+
});
68+
3169
test('forwards the ref', () => {
3270
let ref;
3371
class Test extends React.Component {

‎src/Forms/FormTextArea.test.js‎

Lines changed: 45 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,7 @@ import renderer from 'react-test-renderer';
55

66
describe('<FormTextArea />', () => {
77
const formTextArea = (
8-
<FormTextarea id='textarea-2'>
9-
Pellentesque metus lacus commodo eget justo ut rutrum varius nunc.
10-
</FormTextarea>
8+
<FormTextarea id='textarea-2' value='Pellentesque metus lacus commodo eget justo ut rutrum varius nunc.' />
119
);
1210
const formTextareaCounter = (
1311
<FormTextarea id='textarea-3' maxLength={ 150 } />
@@ -50,6 +48,50 @@ describe('<FormTextArea />', () => {
5048
expect(ref.current.className).toEqual('fd-textarea');
5149
});
5250

51+
describe('Validation states', () => {
52+
test('should render the correct snapshots', () => {
53+
const formTextAreaWarning = (
54+
<FormTextarea
55+
placeholder='Field placeholder text'
56+
state='warning' />
57+
);
58+
59+
let component = renderer.create(formTextAreaWarning);
60+
let tree = component.toJSON();
61+
expect(tree).toMatchSnapshot();
62+
63+
const formTextAreaError = (
64+
<FormTextarea
65+
placeholder='Field placeholder text'
66+
state='error' />
67+
);
68+
69+
component = renderer.create(formTextAreaError);
70+
tree = component.toJSON();
71+
expect(tree).toMatchSnapshot();
72+
73+
const formTextAreaSuccess = (
74+
<FormTextarea
75+
placeholder='Field placeholder text'
76+
state='success' />
77+
);
78+
79+
component = renderer.create(formTextAreaSuccess);
80+
tree = component.toJSON();
81+
expect(tree).toMatchSnapshot();
82+
83+
const formTextAreaInformation = (
84+
<FormTextarea
85+
placeholder='Field placeholder text'
86+
state='information' />
87+
);
88+
89+
component = renderer.create(formTextAreaInformation);
90+
tree = component.toJSON();
91+
expect(tree).toMatchSnapshot();
92+
});
93+
});
94+
5395
describe('FormTextArea counter', () => {
5496
const setup = props => {
5597
return mount(<FormTextarea {...props} />);

‎src/Forms/FormTextarea.js‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import classnames from 'classnames';
22
import CustomPropTypes from '../utils/CustomPropTypes/CustomPropTypes';
3-
import { FORM_STATES } from '../utils/constants';
3+
import { FORM_MESSAGE_TYPES } from '../utils/constants';
44
import PropTypes from 'prop-types';
55
import React, { useEffect, useState } from 'react';
66

77
const FormTextarea = React.forwardRef(({
8-
children,
98
className,
109
compact,
1110
counterProps,
@@ -30,9 +29,6 @@ const FormTextarea = React.forwardRef(({
3029
if (typeof value === 'boolean' || value) {
3130
return Math.min(value.toString().length, maxLength);
3231
}
33-
if (typeof children === 'string') {
34-
return Math.min(children.length, maxLength);
35-
}
3632
if (defaultValue) {
3733
return Math.min(defaultValue.toString().length, maxLength);
3834
}
@@ -61,7 +57,8 @@ const FormTextarea = React.forwardRef(({
6157

6258
const formTextAreaClasses = classnames(
6359
'fd-textarea',
64-
{ 'fd-textarea--compact': compact,
60+
{
61+
'fd-textarea--compact': compact,
6562
[`is-${state}`]: state
6663
},
6764
className
@@ -73,10 +70,9 @@ const FormTextarea = React.forwardRef(({
7370
);
7471

7572
return (
76-
<React.Fragment>
73+
<>
7774
<textarea
7875
{...props}
79-
children={children}
8076
className={formTextAreaClasses}
8177
defaultValue={defaultValue}
8278
disabled={disabled}
@@ -92,14 +88,13 @@ const FormTextarea = React.forwardRef(({
9288
{getMaxLengthText()}
9389
</div>
9490
}
95-
</React.Fragment>
91+
</>
9692
);
9793
});
9894

9995
FormTextarea.displayName = 'FormTextarea';
10096

10197
FormTextarea.propTypes = {
102-
children: PropTypes.node,
10398
className: PropTypes.string,
10499
compact: PropTypes.bool,
105100
counterProps: PropTypes.object,
@@ -112,7 +107,7 @@ FormTextarea.propTypes = {
112107
}),
113108
maxLength: PropTypes.number,
114109
readOnly: PropTypes.bool,
115-
state: PropTypes.oneOf(FORM_STATES),
110+
state: PropTypes.oneOf(FORM_MESSAGE_TYPES),
116111
value: PropTypes.string,
117112
onChange: PropTypes.func
118113
};

0 commit comments

Comments
 (0)