feat(checkbox/overflow-menu): Support wrapping classes (carbon-design…

…-system#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

@@ -119,6 +119,7 @@ storiesOf('Checkbox', module)
           id="checkbox-label-2"
           labelText="Checkbox label hidden"
           hideLabel={true}
+          wrapperClassName="wrapper-class"
         />
       </fieldset>
     )

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 = {

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.
    */