InputField new option: showValidationError

Author: Xiaozhou Li

src/components/__tests__/__snapshots__/form.test.tsx.snap

@@ -42,6 +42,7 @@ exports[`The Form component should render with a form item 1`] = `
         labelLayoutWidth="1/1"
         labelWidthBreakpoint="sm"
         onChangeHandler={[MockFunction]}
+        showValidationError={true}
         staticField={false}
         type="text"
         value={null}
@@ -51,6 +52,7 @@ exports[`The Form component should render with a form item 1`] = `
           labelLayoutWidth="1/1"
           labelWidthBreakpoint="sm"
           onChangeHandler={[MockFunction]}
+          showValidationError={true}
           staticField={false}
           type="text"
           value={null}
@@ -60,6 +62,7 @@ exports[`The Form component should render with a form item 1`] = `
             labelLayoutWidth="1/1"
             labelWidthBreakpoint="sm"
             onChangeHandler={[MockFunction]}
+            showValidationError={true}
             staticField={false}
             type="text"
             value={null}
@@ -69,6 +72,7 @@ exports[`The Form component should render with a form item 1`] = `
               labelLayoutWidth="1/1"
               labelWidthBreakpoint="sm"
               onChangeHandler={[MockFunction]}
+              showValidationError={true}
               staticField={false}
               touched={false}
             >

src/components/__tests__/__snapshots__/input_field.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`The InputField component should render 1`] = `
   labelLayoutWidth="1/1"
   labelWidthBreakpoint="sm"
   onChangeHandler={[MockFunction]}
+  showValidationError={true}
   staticField={false}
   type="text"
   value="Test input"

src/components/__tests__/__snapshots__/popup_prompt.test.tsx.snap

@@ -15,6 +15,7 @@ exports[`The PopupPrompt component should render a prompt popup 1`] = `
     labelLayoutWidth="1/1"
     labelWidthBreakpoint="sm"
     onChangeHandler={[Function]}
+    showValidationError={true}
     staticField={false}
     type="text"
   />

src/components/__tests__/input_field.test.tsx

@@ -34,6 +34,7 @@ describe('The InputField component', () => {
             labelLayoutWidth: '1/1',
             labelWidthBreakpoint: 'sm',
             onChangeHandler: props.onChangeHandler,
+            showValidationError: true,
             staticField: true,
             value: 'Test input',
         });
@@ -48,6 +49,7 @@ describe('The InputField component', () => {
             labelLayoutWidth: '1/1',
             labelWidthBreakpoint: 'sm',
             onChangeHandler: props.onChangeHandler,
+            showValidationError: true,
             staticField: false,
             value: 'Test input',
         });

src/components/input_field.tsx

@@ -84,6 +84,7 @@ export class InputField extends React.Component<OldInputFieldProps, {}> {
         labelLayoutWidth: '1/1',
         labelWidthBreakpoint: 'sm',
         staticField: false,
+        showValidationError: true,
     };
 
     render() {

src/components/input_fields/__tests__/__snapshots__/input_field_wrapper.test.tsx.snap

@@ -100,3 +100,46 @@ exports[`The input field wrapper component should render a wrapper without any o
   </div>
 </div>
 `;
+
+exports[`The input field wrapper component should render a wrapper without the validation error 1`] = `
+<div
+  className="input-field layout test-input-class"
+>
+  <InputFieldLabel
+    id="testInputId"
+    infoLinkURL="http://info.url"
+    infoText="Click for more info"
+    label="Test Input Label"
+    labelLayoutWidth="1/2"
+    labelWidthBreakpoint="xs"
+    preLabelElement="*"
+  />
+  <div
+    className="layout__item u-fill layout__item--middle test-input-class text-center"
+  >
+    <div
+      className="input-container layout layout--gutter-xs"
+    >
+      <div
+        className="input-wrapper-children layout__item u-fill"
+      >
+        <div>
+          child
+        </div>
+      </div>
+      <div
+        className="layout__item u-fit input-field__field-addition"
+      >
+        <Icon(RequiredIcon) />
+      </div>
+    </div>
+  </div>
+  <div
+    className="layout__item u-fit input-children"
+  >
+    <div>
+      input child
+    </div>
+  </div>
+</div>
+`;

src/components/input_fields/__tests__/input_field_wrapper.test.tsx

@@ -24,6 +24,7 @@ describe('The input field wrapper component', () => {
             required: true,
             submitted: false,
             validationError: 'A validation error!',
+            showValidationError: true,
             touched: true,
             children: <div>child</div>,
             inputChildren: <div>input child</div>,
@@ -50,4 +51,9 @@ describe('The input field wrapper component', () => {
         wrapper = shallow(<InputFieldWrapper {...props} />);
         expect(wrapper).toMatchSnapshot();
     });
+
+    it('should render a wrapper without the validation error', () => {
+        wrapper.setProps({ showValidationError: false });
+        expect(wrapper).toMatchSnapshot();
+    });
 });

src/components/input_fields/input_field_wrapper.tsx

@@ -42,6 +42,8 @@ export interface InputFieldProps {
      * It should be translated. Can be JSX.Element[] if returned from I18n.interpolateElements
      */
     validationError?: string | JSX.Element[];
+    /** Whether to show the validation error message or not */
+    showValidationError?: boolean;
 }
 
 /**
@@ -80,8 +82,8 @@ export class InputFieldWrapper extends React.Component<InputFieldWrapperProps, {
     }
 
     private _showValidationError(): boolean {
-        const { validationError, submitted, touched } = this.props;
-        return validationError && (touched || submitted);
+        const { validationError, submitted, touched, showValidationError } = this.props;
+        return validationError && (touched || submitted) && showValidationError;
     }
 
     private _renderLabel(): JSX.Element {