From 9a7127733433378e0632f70b8a3ba0039488658e Mon Sep 17 00:00:00 2001
From: Jenna Badanowski <29607818+jbadan@users.noreply.github.com>
Date: Fri, 21 Aug 2020 14:40:46 -0700
Subject: [PATCH] feat: BREAKING CHANGE: checkbox replace state with validation
 states (#1176)

Breaking change: Checkbox: replace `state` property with `validationState`
---
 src/Forms/Checkbox.js                         |  32 ++-
 src/Forms/Checkbox.test.js                    |  10 +
 src/Forms/__stories__/Checkbox.stories.js     |  20 +-
 .../__snapshots__/Checkbox.stories.storyshot  | 186 ++++++++++++------
 4 files changed, 169 insertions(+), 79 deletions(-)

diff --git a/src/Forms/Checkbox.js b/src/Forms/Checkbox.js
index 56408d0cd..4100b6af9 100644
--- a/src/Forms/Checkbox.js
+++ b/src/Forms/Checkbox.js
@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import { FORM_MESSAGE_TYPES } from '../utils/constants';
 import FormItem from './FormItem';
 import FormLabel from './FormLabel';
+import FormValidationOverlay from './_FormValidationOverlay';
 import PropTypes from 'prop-types';
 import useUniqueId from '../utils/useUniqueId';
 import React, { useEffect, useRef } from 'react';
@@ -21,13 +22,14 @@ const Checkbox = React.forwardRef(({
     id,
     indeterminate,
     inline,
+    inputClassName,
     inputProps,
     labelClassName,
     labelProps,
     name,
     onChange,
     value,
-    state,
+    validationState,
     ...props
 }, ref) => {
 
@@ -38,12 +40,13 @@ const Checkbox = React.forwardRef(({
     });
 
 
-    const inputClassName = classnames(
+    const inputClassNames = classnames(
         'fd-checkbox',
         {
-            [`is-${state}`]: state,
+            [`is-${validationState?.state}`]: validationState?.state,
             'fd-checkbox--compact': compact
-        }
+        },
+        inputClassName
     );
 
     const labelClasses = classnames(
@@ -60,7 +63,7 @@ const Checkbox = React.forwardRef(({
         </span>
     ) : children;
 
-    return (
+    const checkbox = (
         <FormItem
             {...props}
             disabled={disabled}
@@ -70,7 +73,7 @@ const Checkbox = React.forwardRef(({
                 {...inputProps}
                 aria-label={ariaLabel}
                 checked={checked}
-                className={inputClassName}
+                className={inputClassNames}
                 defaultChecked={defaultChecked}
                 disabled={disabled}
                 id={checkId}
@@ -89,6 +92,12 @@ const Checkbox = React.forwardRef(({
             </FormLabel>
         </FormItem>
     );
+
+    return validationState ? (
+        <FormValidationOverlay
+            control={checkbox}
+            validationState={validationState} />
+    ) : checkbox;
 });
 
 Checkbox.displayName = 'Checkbox';
@@ -122,6 +131,8 @@ Please ensure you are either using a visible \`FormLabel\` or an \`aria-label\`
     indeterminate: PropTypes.bool,
     /** Internal use only */
     inline: PropTypes.bool,
+    /** Class name to be added to the component `<input>` element */
+    inputClassName: PropTypes.string,
     /** Additional props to be spread to the `<input>` element */
     inputProps: PropTypes.object,
     /** Class name to be added to the component `<label>` element */
@@ -130,8 +141,13 @@ 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,
-    /** State of validation: 'error', 'warning', 'information', 'success' */
-    state: PropTypes.oneOf(FORM_MESSAGE_TYPES),
+    /** 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' */
+        state: PropTypes.oneOf(FORM_MESSAGE_TYPES),
+        /** Text of the validation message */
+        text: PropTypes.string
+    }),
     /** Sets the `value` for the checkbox input */
     value: PropTypes.string,
     /** Callback function when the change event fires on the component */
diff --git a/src/Forms/Checkbox.test.js b/src/Forms/Checkbox.test.js
index 3f14f3422..8a7935e8e 100644
--- a/src/Forms/Checkbox.test.js
+++ b/src/Forms/Checkbox.test.js
@@ -108,6 +108,16 @@ describe('<Checkbox />', () => {
                 wrapper.find('FormLabel').getDOMNode().classList
             ).toContain('wonderful-styles');
         });
+
+        test('should set inputClassName on the input', () => {
+            const wrapper = setup({
+                inputClassName: 'wonderful-styles'
+            });
+
+            expect(
+                wrapper.find('.fd-checkbox').getDOMNode().classList
+            ).toContain('wonderful-styles');
+        });
     });
 
     test('forwards the ref', () => {
diff --git a/src/Forms/__stories__/Checkbox.stories.js b/src/Forms/__stories__/Checkbox.stories.js
index 336733b99..1652707c5 100644
--- a/src/Forms/__stories__/Checkbox.stories.js
+++ b/src/Forms/__stories__/Checkbox.stories.js
@@ -30,12 +30,12 @@ export const compact = () => (
     <Checkbox compact>Text Option</Checkbox>
 );
 
-export const validationState = () => (
+export const validationStates = () => (
     <div className='fddocs-container'>
-        <Checkbox state='error'>Text Option</Checkbox>
-        <Checkbox state='warning'>Text Option</Checkbox>
-        <Checkbox state='success'>Text Option</Checkbox>
-        <Checkbox state='information'>Text Option</Checkbox>
+        <Checkbox validationState={{ state: 'error', text: 'Test validation state' }}>Error State</Checkbox>
+        <Checkbox validationState={{ state: 'warning', text: 'Test validation state' }}>Warning State</Checkbox>
+        <Checkbox validationState={{ state: 'information', text: 'Test validation state' }}>Information State</Checkbox>
+        <Checkbox validationState={{ state: 'success', text: 'Test validation state' }}>Success State</Checkbox>
     </div>
 );
 
@@ -45,12 +45,12 @@ export const dev = () => (
         compact={boolean('compact', false)}
         disabled={boolean('disabled', false)}
         indeterminate={boolean('indeterminate', false)}
-        state={select('State', {
+        validationState={select('Validation State', {
             'none': '',
-            'success': 'success',
-            'error': 'error',
-            'information': 'information',
-            'warning': 'warning'
+            'success': { state: 'success', text: 'placeholder text' },
+            'error': { state: 'error', text: 'placeholder text' },
+            'information': { state: 'information', text: 'placeholder text' },
+            'warning': { state: 'warning', text: 'placeholder text' }
         })}>Text Option</Checkbox>
 );
 
diff --git a/src/Forms/__stories__/__snapshots__/Checkbox.stories.storyshot b/src/Forms/__stories__/__snapshots__/Checkbox.stories.storyshot
index 27d1676d5..d205cde1c 100644
--- a/src/Forms/__stories__/__snapshots__/Checkbox.stories.storyshot
+++ b/src/Forms/__stories__/__snapshots__/Checkbox.stories.storyshot
@@ -195,7 +195,7 @@ exports[`Storyshots Component API/Forms/Checkbox Primary 1`] = `
 </div>
 `;
 
-exports[`Storyshots Component API/Forms/Checkbox Validation State 1`] = `
+exports[`Storyshots Component API/Forms/Checkbox Validation States 1`] = `
 <div
   dir="ltr"
 >
@@ -203,84 +203,148 @@ exports[`Storyshots Component API/Forms/Checkbox Validation State 1`] = `
     className="fddocs-container"
   >
     <div
-      className="fd-form-item"
+      className="fd-popover"
+      onBlur={[Function]}
+      onFocus={[Function]}
     >
-      <input
-        className="fd-checkbox is-error"
-        id="fd-mocked-short-id"
-        onChange={[Function]}
-        type="checkbox"
-      />
-      <label
-        className="fd-form-label fd-checkbox__label"
-        htmlFor="fd-mocked-short-id"
+      <div
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onTouchStart={[Function]}
       >
-        <span
-          className="fd-checkbox__text"
+        <div
+          className="fd-popover__control"
         >
-          Text Option
-        </span>
-      </label>
+          <div
+            className="fd-form-item"
+          >
+            <input
+              className="fd-checkbox is-error"
+              id="fd-mocked-short-id"
+              onChange={[Function]}
+              type="checkbox"
+            />
+            <label
+              className="fd-form-label fd-checkbox__label"
+              htmlFor="fd-mocked-short-id"
+            >
+              <span
+                className="fd-checkbox__text"
+              >
+                Error State
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
     </div>
     <div
-      className="fd-form-item"
+      className="fd-popover"
+      onBlur={[Function]}
+      onFocus={[Function]}
     >
-      <input
-        className="fd-checkbox is-warning"
-        id="fd-mocked-short-id"
-        onChange={[Function]}
-        type="checkbox"
-      />
-      <label
-        className="fd-form-label fd-checkbox__label"
-        htmlFor="fd-mocked-short-id"
+      <div
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onTouchStart={[Function]}
       >
-        <span
-          className="fd-checkbox__text"
+        <div
+          className="fd-popover__control"
         >
-          Text Option
-        </span>
-      </label>
+          <div
+            className="fd-form-item"
+          >
+            <input
+              className="fd-checkbox is-warning"
+              id="fd-mocked-short-id"
+              onChange={[Function]}
+              type="checkbox"
+            />
+            <label
+              className="fd-form-label fd-checkbox__label"
+              htmlFor="fd-mocked-short-id"
+            >
+              <span
+                className="fd-checkbox__text"
+              >
+                Warning State
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
     </div>
     <div
-      className="fd-form-item"
+      className="fd-popover"
+      onBlur={[Function]}
+      onFocus={[Function]}
     >
-      <input
-        className="fd-checkbox is-success"
-        id="fd-mocked-short-id"
-        onChange={[Function]}
-        type="checkbox"
-      />
-      <label
-        className="fd-form-label fd-checkbox__label"
-        htmlFor="fd-mocked-short-id"
+      <div
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onTouchStart={[Function]}
       >
-        <span
-          className="fd-checkbox__text"
+        <div
+          className="fd-popover__control"
         >
-          Text Option
-        </span>
-      </label>
+          <div
+            className="fd-form-item"
+          >
+            <input
+              className="fd-checkbox is-information"
+              id="fd-mocked-short-id"
+              onChange={[Function]}
+              type="checkbox"
+            />
+            <label
+              className="fd-form-label fd-checkbox__label"
+              htmlFor="fd-mocked-short-id"
+            >
+              <span
+                className="fd-checkbox__text"
+              >
+                Information State
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
     </div>
     <div
-      className="fd-form-item"
+      className="fd-popover"
+      onBlur={[Function]}
+      onFocus={[Function]}
     >
-      <input
-        className="fd-checkbox is-information"
-        id="fd-mocked-short-id"
-        onChange={[Function]}
-        type="checkbox"
-      />
-      <label
-        className="fd-form-label fd-checkbox__label"
-        htmlFor="fd-mocked-short-id"
+      <div
+        onFocus={[Function]}
+        onMouseDown={[Function]}
+        onTouchStart={[Function]}
       >
-        <span
-          className="fd-checkbox__text"
+        <div
+          className="fd-popover__control"
         >
-          Text Option
-        </span>
-      </label>
+          <div
+            className="fd-form-item"
+          >
+            <input
+              className="fd-checkbox is-success"
+              id="fd-mocked-short-id"
+              onChange={[Function]}
+              type="checkbox"
+            />
+            <label
+              className="fd-form-label fd-checkbox__label"
+              htmlFor="fd-mocked-short-id"
+            >
+              <span
+                className="fd-checkbox__text"
+              >
+                Success State
+              </span>
+            </label>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>