feat(checkbox): add onClick prop (#9827)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Oct 12, 2021 · dd1d037 · dd1d037
1 parent 1730d73
commit dd1d037
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -322,6 +322,7 @@ Map {
     "defaultProps": Object {
       "indeterminate": false,
       "onChange": [Function],
+      "onClick": [Function],
     },
     "displayName": "Checkbox",
     "propTypes": Object {
@@ -354,6 +355,9 @@ Map {
       "onChange": Object {
         "type": "func",
       },
+      "onClick": Object {
+        "type": "func",
+      },
       "title": Object {
         "type": "string",
       },

diff --git a/packages/react/src/components/Checkbox/Checkbox-story.js b/packages/react/src/components/Checkbox/Checkbox-story.js
@@ -76,6 +76,7 @@ const props = () => ({
   hideLabel: boolean('No label (hideLabel)', false),
   wrapperClassName: text('Wrapper CSS class name (wrapperClassName)', ''),
   onChange: action('onChange'),
+  onClick: action('onClick'),
 });
 
 export const playground = () => (

diff --git a/packages/react/src/components/Checkbox/Checkbox.js b/packages/react/src/components/Checkbox/Checkbox.js
@@ -19,6 +19,7 @@ const Checkbox = React.forwardRef(function Checkbox(
     id,
     labelText,
     onChange,
+    onClick,
     indeterminate,
     hideLabel,
     wrapperClassName,
@@ -44,7 +45,15 @@ const Checkbox = React.forwardRef(function Checkbox(
   );
 
   return (
-    <div className={wrapperClasses}>
+    /* 
+      The a11y rules below are disabled because <div> element has checkbox 
+      input and label elements as children that allows keyboard interaction. 
+      The onClick handler facilitates consumers' ability to stop click events 
+      from bubbling beyond the checkbox without having to implement their own 
+      wrapper element around <Checkbox>.
+    */
+    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
+    <div className={wrapperClasses} onClick={(evt) => onClick(evt)}>
       <input
         {...other}
         type="checkbox"
@@ -123,6 +132,14 @@ Checkbox.propTypes = {
    */
   onChange: PropTypes.func,
 
+  /**
+   * Provide an optional click handler that is applied to the wrapper div
+   * containing both the input and the span label. As such, this will be
+   * called twice for every click - once for the input, a second time for the label.
+   * Receives the dom event as its only argument.
+   */
+  onClick: PropTypes.func,
+
   /**
    * Specify a title for the <label> node for the Checkbox
    */
@@ -139,6 +156,7 @@ Checkbox.propTypes = {
 
 Checkbox.defaultProps = {
   onChange: () => {},
+  onClick: () => {},
   indeterminate: false,
 };