feat: validation class prop (#1181)

* feat: add props to FormValidationOverlay and Checkbox

* fix: place className prop in correct wrapper element

* fix: remove validationOverlayProps

* fix: remove validationOverlayProps PropType definiton

* chore: add unit test for validationClassName

Author: miguel-diaz-covarrubias

src/Forms/Checkbox.js

@@ -29,6 +29,7 @@ const Checkbox = React.forwardRef(({
     name,
     onChange,
     value,
+    validationClassName,
     validationState,
     ...props
 }, ref) => {
@@ -95,6 +96,7 @@ const Checkbox = React.forwardRef(({
 
     return validationState ? (
         <FormValidationOverlay
+            className={validationClassName}
             control={checkbox}
             validationState={validationState} />
     ) : checkbox;
@@ -141,6 +143,8 @@ Please ensure you are either using a visible \`FormLabel\` or an \`aria-label\`
     labelProps: PropTypes.object,
     /** Sets the `name` for the checkbox input */
     name: PropTypes.string,
+    /** Additional classes to apply to validation popover */
+    validationClassName: PropTypes.string,
     /** An object identifying a validation message.  The object will include properties for `state` and `text`; _e.g._, \`{ state: \'warning\', text: \'This is your last warning\' }\` */
     validationState: PropTypes.shape({
         /** State of validation: 'error', 'warning', 'information', 'success' */

src/Forms/Checkbox.test.js

@@ -118,6 +118,17 @@ describe('<Checkbox />', () => {
                 wrapper.find('.fd-checkbox').getDOMNode().classList
             ).toContain('wonderful-styles');
         });
+
+        test('should set validationClassName on the popover', () => {
+            const wrapper = setup({
+                validationState: { state: 'error', text: 'Test validation state' },
+                validationClassName: 'wonderful-styles'
+            });
+
+            expect(
+                wrapper.find('.fd-popover').getDOMNode().classList
+            ).toContain('wonderful-styles');
+        });
     });
 
     test('forwards the ref', () => {

src/Forms/_FormValidationOverlay.js

@@ -57,7 +57,7 @@ FormValidationOverlay.propTypes = {
         /** State of validation: 'error', 'warning', 'information', 'success' */
         state: PropTypes.oneOf(FORM_MESSAGE_TYPES),
         /** Text of the validation message */
-        text: PropTypes.stringng
+        text: PropTypes.string
     })
 };