From 8071ab0bc62e6ea7991c315955b30efa2f9df6d1 Mon Sep 17 00:00:00 2001
From: Paul Sachs <psachs21@users.noreply.github.com>
Date: Wed, 4 Apr 2018 12:13:04 -0400
Subject: [PATCH] feat(checkbox/overflow-menu): Support wrapping classes (#783)

It's more useful to be able to set the classname on the wrapping element
(which can be used to address internal elements)
---
 src/components/Checkbox/Checkbox-story.js     |  1 +
 src/components/Checkbox/Checkbox.js           | 23 +++++++++++++++----
 .../OverflowMenuItem/OverflowMenuItem.js      | 11 +++++++--
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/components/Checkbox/Checkbox-story.js b/src/components/Checkbox/Checkbox-story.js
index 725d2eb523c9..9d722090d962 100644
--- a/src/components/Checkbox/Checkbox-story.js
+++ b/src/components/Checkbox/Checkbox-story.js
@@ -119,6 +119,7 @@ storiesOf('Checkbox', module)
           id="checkbox-label-2"
           labelText="Checkbox label hidden"
           hideLabel={true}
+          wrapperClassName="wrapper-class"
         />
       </fieldset>
     )
diff --git a/src/components/Checkbox/Checkbox.js b/src/components/Checkbox/Checkbox.js
index d7f062d35124..ec1e32996cc3 100644
--- a/src/components/Checkbox/Checkbox.js
+++ b/src/components/Checkbox/Checkbox.js
@@ -9,16 +9,22 @@ const Checkbox = ({
   onChange,
   indeterminate,
   hideLabel,
+  wrapperClassName,
   ...other
 }) => {
   let input;
-  const wrapperClasses = classNames('bx--checkbox-label', className);
-  const labelClasses = classNames({
+  const labelClasses = classNames('bx--checkbox-label', className);
+  const innerLabelClasses = classNames({
     'bx--visually-hidden': hideLabel,
   });
+  const wrapperClasses = classNames(
+    'bx--form-item',
+    'bx--checkbox-wrapper',
+    wrapperClassName
+  );
 
   return (
-    <div className="bx--form-item bx--checkbox-wrapper">
+    <div className={wrapperClasses}>
       <input
         {...other}
         type="checkbox"
@@ -34,8 +40,8 @@ const Checkbox = ({
           }
         }}
       />
-      <label htmlFor={id} className={wrapperClasses}>
-        <span className={labelClasses}>{labelText}</span>
+      <label htmlFor={id} className={labelClasses}>
+        <span className={innerLabelClasses}>{labelText}</span>
       </label>
     </div>
   );
@@ -45,12 +51,19 @@ Checkbox.propTypes = {
   checked: PropTypes.bool,
   defaultChecked: PropTypes.bool,
   indeterminate: PropTypes.bool,
+  /**
+   * The CSS class name to be placed on inner label element.
+   */
   className: PropTypes.string,
   disabled: PropTypes.bool,
   id: PropTypes.string.isRequired,
   labelText: PropTypes.node.isRequired,
   hideLabel: PropTypes.bool,
   onChange: PropTypes.func,
+  /**
+   * The CSS class name to be placed on the wrapping element
+   */
+  wrapperClassName: PropTypes.string,
 };
 
 Checkbox.defaultProps = {
diff --git a/src/components/OverflowMenuItem/OverflowMenuItem.js b/src/components/OverflowMenuItem/OverflowMenuItem.js
index 8cf2abd2ea2f..e230fbc7287f 100644
--- a/src/components/OverflowMenuItem/OverflowMenuItem.js
+++ b/src/components/OverflowMenuItem/OverflowMenuItem.js
@@ -10,6 +10,7 @@ const OverflowMenuItem = ({
   closeMenu,
   onClick,
   primaryFocus,
+  wrapperClassName,
   ...other
 }) => {
   const overflowMenuBtnClasses = classNames(
@@ -22,7 +23,8 @@ const OverflowMenuItem = ({
     {
       'bx--overflow-menu--divider': hasDivider,
       'bx--overflow-menu-options__option--danger': isDelete,
-    }
+    },
+    wrapperClassName
   );
 
   const handleClick = evt => {
@@ -50,10 +52,15 @@ const OverflowMenuItem = ({
 
 OverflowMenuItem.propTypes = {
   /**
-   * The CSS class names.
+   * The CSS class name to be placed on the button element
    */
   className: PropTypes.string,
 
+  /**
+   * The CSS class name to be placed on the wrapper list item element
+   */
+  wrapperClassName: PropTypes.string,
+
   /**
    * The text in the menu item.
    */