Adjust SideNav-related components (#280)

Adjust SideNav-related components

Author: felixjung

src/components/Popover/Popover.js

@@ -19,9 +19,12 @@ import { toPopperPlacement, popperModifiers } from './PopoverService';
 const ReferenceWrapper = styled('div')`
   label: popover__button-wrapper;
   display: inline-block;
+
   &:focus {
     outline: none;
   }
+
+  ${({ referenceWrapperStyles, ...rest }) => referenceWrapperStyles(rest)};
 `;
 
 const basePopoverWrapperStyles = ({ theme }) => css`
@@ -129,7 +132,11 @@ class Popover extends Component {
     usePortal: PropTypes.bool,
     modifiers: PropTypes.shape(),
     arrowRenderer: PropTypes.func,
-    referenceElement: PropTypes.element
+    referenceWrapperStyles: PropTypes.func,
+    referenceElement: PropTypes.oneOfType([
+      PropTypes.instanceOf(HTMLElement),
+      PropTypes.element
+    ])
   };
 
   static defaultProps = {
@@ -142,7 +149,8 @@ class Popover extends Component {
     modifiers: {},
     arrowRenderer: () => null,
     renderReference: () => null,
-    referenceElement: null
+    referenceElement: null,
+    referenceWrapperStyles: () => null
   };
 
   componentDidMount() {
@@ -186,6 +194,7 @@ class Popover extends Component {
       renderPopover,
       renderReference,
       referenceElement,
+      referenceWrapperStyles,
       position,
       align,
       isOpen,
@@ -199,6 +208,7 @@ class Popover extends Component {
       <Reference>
         {({ ref }) => (
           <ReferenceWrapper
+            referenceWrapperStyles={referenceWrapperStyles}
             innerRef={this.receiveButtonRef}
             onClick={this.handleReferenceClick}
           >

src/components/SideNav/SideNav.js

@@ -10,6 +10,8 @@ import {
 } from './components';
 import { childrenPropType } from '../../util/shared-prop-types';
 
+import { disableVisually } from '../../styles/style-helpers';
+
 export const COLLAPSED_NAV_WIDTH = 64;
 export const FULL_NAV_WIDTH = 270;
 
@@ -35,12 +37,13 @@ const NavListItem = styled(({ icon, children, ...rest }) => (
   </ListItem>
 ))`
   color: white;
+
   &:hover:not([disabled]) {
     background-color: rgba(15, 19, 26, 0.5);
   }
+
   &[disabled] {
-    pointer-events: none;
-    color: ${({ theme }) => theme.colors.n700};
+    ${disableVisually()};
   }
 `;
 

src/components/SideNav/components/List/List.js

@@ -7,7 +7,7 @@ const { BYTE, KILO, MEGA, GIGA } = sizes;
 
 const listStyles = ({ theme, gutter }) => css`
   margin: 0;
-  padding: ${theme.spacings[gutter]} ${theme.spacings[gutter]} 0;
+  padding: ${theme.spacings[gutter]};
 `;
 
 const List = styled(props => {