minor refactor in common components

src/common/Checkbox/styles.less

@@ -9,6 +9,7 @@
     }
 
     .icon {
+        display: block;
         width: var(--icon-size);
         height: var(--icon-size);
         fill: var(--icon-color);

src/common/NavBar/NavBar.js

@@ -1,12 +1,12 @@
 const React = require('react');
-const classnames = require('classnames');
 const PropTypes = require('prop-types');
+const classnames = require('classnames');
 const NavBarButton = require('./NavBarButton');
 const SearchBar = require('./SearchBar');
 const NavMenu = require('./NavMenu');
 const styles = require('./styles');
 
-const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, navMenu }) => {
+const NavBar = React.memo(({ className, backButton = false, tabs = [], title = '', searchBar = false, navMenu = false }) => {
     const onBackButtonClick = React.useCallback(() => {
         window.history.back();
     }, []);

src/common/NavBar/NavBarButton/styles.less

@@ -15,6 +15,7 @@
 
     .icon {
         flex: none;
+        width: 1.5rem;
         height: 1.2rem;
         margin-right: 0.6rem;
         fill: var(--color-surfacelighter);

src/common/NavBar/NavMenu/styles.less

@@ -14,7 +14,7 @@
     }
 
     .icon {
-        display: block;
+        width: 50%;
         height: 50%;
         fill: var(--color-surfacelighter);
     }

src/common/NavBar/styles.less

@@ -51,6 +51,7 @@
         flex-grow: 0;
         flex-shrink: 1;
         flex-basis: calc(var(--nav-bar-height) * 8);
+        min-width: calc(var(--nav-bar-height) * 3);
         height: var(--nav-bar-height);
 
         &+.spacing {

src/common/Popup/Label.js

@@ -12,7 +12,7 @@ Label.propTypes = {
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node
-    ])
+    ]).isRequired
 };
 
 module.exports = Label;

src/common/Popup/Menu.js

@@ -1,6 +1,6 @@
 const PropTypes = require('prop-types');
 
-const Menu = ({ children }) => children;
+const Menu = ({ className, tabIndex, children }) => children;
 
 Menu.displayName = 'Popup.Menu';
 

src/common/Popup/Popup.js

@@ -49,21 +49,23 @@ class Popup extends React.Component {
     }
 
     componentDidUpdate(prevProps, prevState) {
-        if (this.state.open && !prevState.open) {
-            this.updateStyles();
-            this.popupMutationObserver.observe(document.documentElement, {
-                childList: true,
-                attributes: true,
-                characterData: true,
-                subtree: true
-            });
-            if (typeof this.props.onOpen === 'function') {
-                this.props.onOpen();
-            }
-        } else if (!this.state.open && prevState.open) {
-            this.popupMutationObserver.disconnect();
-            if (typeof this.props.onClose === 'function') {
-                this.props.onClose();
+        if (this.state.open !== prevState.open) {
+            this.updateMenuStyles();
+            if (this.state.open) {
+                this.popupMutationObserver.observe(document.documentElement, {
+                    childList: true,
+                    attributes: true,
+                    characterData: true,
+                    subtree: true
+                });
+                if (typeof this.props.onOpen === 'function') {
+                    this.props.onOpen();
+                }
+            } else {
+                this.popupMutationObserver.disconnect();
+                if (typeof this.props.onClose === 'function') {
+                    this.props.onClose();
+                }
             }
         }
     }
@@ -83,7 +85,7 @@ class Popup extends React.Component {
                     menuChildrenRect.y !== prevMenuChildrenRect.y ||
                     menuChildrenRect.width !== prevMenuChildrenRect.width ||
                     menuChildrenRect.height !== prevMenuChildrenRect.height) {
-                    this.updateStyles();
+                    this.updateMenuStyles();
                 }
 
                 prevLabelRect = labelRect;
@@ -95,7 +97,11 @@ class Popup extends React.Component {
         });
     }
 
-    updateStyles = () => {
+    updateMenuStyles = () => {
+        if (!this.state.open) {
+            return;
+        }
+
         this.menuContainerRef.current.removeAttribute('style');
         this.menuScrollRef.current.removeAttribute('style');
         this.menuBorderTopRef.current.removeAttribute('style');
@@ -156,7 +162,7 @@ class Popup extends React.Component {
             menuDirections.left = true;
         }
 
-        if (borderColor) {
+        if (borderColor.length > 0) {
             this.menuBorderTopRef.current.style.height = `${borderSize}px`;
             this.menuBorderRightRef.current.style.width = `${borderSize}px`;
             this.menuBorderBottomRef.current.style.height = `${borderSize}px`;
@@ -199,8 +205,7 @@ class Popup extends React.Component {
     }
 
     onKeyUp = (event) => {
-        if (this.state.open && event.keyCode === 27) { // escape
-            event.stopPropagation();
+        if (this.state.open && event.keyCode === 27) {
             this.close();
         }
     }
@@ -213,22 +218,18 @@ class Popup extends React.Component {
         this.setState({ open: false });
     }
 
-    labelOnClick = (event) => {
-        event.stopPropagation();
-        this.open();
-    }
-
     menuContainerOnClick = (event) => {
-        event.stopPropagation();
+        event.nativeEvent.handled = true;
     }
 
     modalBackgroundOnClick = (event) => {
-        event.stopPropagation();
-        this.close();
+        if (!event.nativeEvent.handled) {
+            this.close();
+        }
     }
 
     renderLabel(labelElement) {
-        return React.cloneElement(labelElement, { ref: this.labelRef, onClick: this.labelOnClick });
+        return React.cloneElement(labelElement, { ref: this.labelRef, onClick: this.open });
     }
 
     renderMenu(menuElement) {
@@ -294,7 +295,7 @@ Popup.propTypes = {
     children: PropTypes.oneOfType([
         PropTypes.arrayOf(PropTypes.node),
         PropTypes.node
-    ])
+    ]).isRequired
 };
 
 module.exports = Popup;