feat(collapsible-sidebar): add wrapperClassName prop (#3295)

Author: greathmaster

src/features/collapsible-sidebar/CollapsibleSidebar.js

@@ -39,6 +39,9 @@ type Props = {
 
     /** Optionally apply "aria-hidden": "true" to CollapsibleSidebar wrapper */
     isHidden?: boolean,
+
+    /** Optionally apply CSS to the CollapsibleSidebar wrapper */
+    wrapperClassName?: string,
 };
 
 class CollapsibleSidebar extends React.Component<Props> {
@@ -84,7 +87,7 @@ class CollapsibleSidebar extends React.Component<Props> {
     };
 
     render() {
-        const { children, className, expanded, isHidden, htmlAttributes } = this.props;
+        const { children, className, expanded, isHidden, htmlAttributes, wrapperClassName } = this.props;
         const navClasses = classNames(
             {
                 'is-expanded': expanded,
@@ -95,7 +98,7 @@ class CollapsibleSidebar extends React.Component<Props> {
         const ariaAttributes = { 'aria-hidden': isHidden ? 'true' : undefined };
         return (
             <div
-                className="bdl-CollapsibleSidebar-wrapper"
+                className={classNames('bdl-CollapsibleSidebar-wrapper', wrapperClassName)}
                 {...htmlAttributes}
                 {...ariaAttributes}
                 data-testid="CollapsibleSidebar-wrapper"

src/features/collapsible-sidebar/__tests__/CollapsibleSidebar.test.js

@@ -14,6 +14,7 @@ describe('components/core/collapsible-sidebar/CollapsibleSidebar', () => {
             children: [<span key="1">abc</span>, <span key="2">def</span>],
             expanded: true,
             className: 'foo',
+            wrapperClassName: 'bar',
         });
 
         expect(sidebar).toMatchSnapshot();

src/features/collapsible-sidebar/__tests__/__snapshots__/CollapsibleSidebar.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`components/core/collapsible-sidebar/CollapsibleSidebar render 1`] = `
 <div
-  className="bdl-CollapsibleSidebar-wrapper"
+  className="bdl-CollapsibleSidebar-wrapper bar"
   data-testid="CollapsibleSidebar-wrapper"
 >
   <CollapsibleSidebar__StyledNav