feat(checkbox): make focus behavior configurable (#3214)

* feat(checkbox): make focus behavior configurable

* test(checkbox): update test which checks className of Checkbox

* test(checkbox): test for onFocus

* test(checkbox): tests for hideFocusStyle prop

* fix(checkbox): flow type error

* chore(checkbox): remove hideFocusStyles prop

* chore(checkbox): remove --isFocused classname from test; fix flow file

* chore(checkbox): remove unnecessary classnames function call

Co-authored-by: mergify[bot] <37929162+mergify[bot]@users.noreply.github.com>

Author: jcamden

src/components/checkbox/Checkbox.js.flow

@@ -17,6 +17,7 @@ type Props = {
     hideLabel?: boolean,
     /** Unique `id` for the input */
     id?: string,
+    inputClassName?: string,
     /** Checkbox checked state */
     isChecked?: boolean, // @TODO: eventually call this `checked`
     /** Checkbox disabled state */
@@ -29,6 +30,8 @@ type Props = {
     onBlur?: (e: SyntheticInputEvent<HTMLInputElement>) => any,
     /** change callback function called with event as the argument */
     onChange?: (e: SyntheticInputEvent<HTMLInputElement>) => any,
+    /** onFocus - focus callback function that takes the event as the argument  */
+    onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
     /** Subsection below the checkbox */
     subsection?: React.Node,
     /** Info tooltip text next to the checkbox label */
@@ -43,10 +46,12 @@ const Checkbox = ({
     fieldLabel,
     hideLabel,
     id,
+    inputClassName,
     isChecked,
     isDisabled,
     label,
     name,
+    onFocus,
     onChange,
     subsection,
     tooltip,
@@ -60,9 +65,11 @@ const Checkbox = ({
         <span className="checkbox-label">
             <input
                 checked={isChecked}
+                className={classNames(inputClassName)}
                 disabled={isDisabled}
                 id={inputID}
                 name={name}
+                onFocus={onFocus}
                 onChange={onChange}
                 type="checkbox"
                 {...rest}

src/components/checkbox/Checkbox.tsx

@@ -32,6 +32,8 @@ export interface CheckboxProps {
         | {
               (e: React.FocusEvent<HTMLInputElement>): void;
           };
+    /** onFocus - focus callback function that takes the event as the argument  */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
     /** onChange - change callback function that takes the event as the argument */
     onChange?: (e: React.SyntheticEvent<HTMLInputElement, Event>) => string | number | boolean | void;
     /** Subsection below the checkbox */
@@ -53,6 +55,7 @@ const Checkbox = ({
     isDisabled,
     label,
     name,
+    onFocus,
     onChange,
     subsection,
     tooltip,
@@ -71,6 +74,7 @@ const Checkbox = ({
                 disabled={isDisabled}
                 id={inputID}
                 name={name}
+                onFocus={onFocus}
                 onChange={onChange}
                 type="checkbox"
                 {...rest}

src/components/checkbox/__tests__/Checkbox.test.tsx

@@ -1,16 +1,25 @@
 import React, { SyntheticEvent } from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 
-import Checkbox from '..';
+import Checkbox from '../Checkbox';
 
 describe('components/checkbox/Checkbox', () => {
     let wrapper: ShallowWrapper;
     let onChange: (e: SyntheticEvent<HTMLInputElement, Event>) => string | number | boolean | void;
+    let onFocus: (e: SyntheticEvent<HTMLInputElement, Event>) => string | number | boolean | void;
 
     beforeEach(() => {
         onChange = jest.fn();
+        onFocus = jest.fn();
         wrapper = shallow(
-            <Checkbox id="1" inputClassName="inputClassName" label="Check things" name="name" onChange={onChange} />,
+            <Checkbox
+                id="1"
+                inputClassName="inputClassName"
+                label="Check things"
+                name="name"
+                onChange={onChange}
+                onFocus={onFocus}
+            />,
         );
     });
 
@@ -73,6 +82,11 @@ describe('components/checkbox/Checkbox', () => {
         expect(onChange).toBeCalledWith(event);
     });
 
+    test('should call onFocus callback when onFocus triggers', () => {
+        wrapper.find('input').simulate('focus');
+        expect(onFocus).toBeCalledTimes(1);
+    });
+
     test('should render a hidden label when hideLabel is specified', () => {
         wrapper.setProps({ hideLabel: true });
         const label = wrapper.find('.accessibility-hidden');