Dapp Account Selection & Defaults (#4355)

* Manage default accounts

* Portal

* Portal

* Allow Portal to be used in as both top-level and popover

* modal/popover variable naming

* Move to Portal

* export Portal in ~/ui

* WIP

* Tags handle empty values

* Export AccountCard in ~/ui

* Allow ETH-only & zero display

* Use ui/Balance for balance display

* Add tests for Balance & Tags component availability

* WIP

* Default overlay display to block (not flex)

* Revert block

* WIP

* Add className, optional handlers only

* WIP

* Properly handle optional onKeyDown

* Selection updated

* Align margins

* Remove old code

* Remove debug logging

* TransitionGroup for animations

* No anim

* Cleanups

* Revert addons removal

* Fix tests

* Pr gumbles

js/src/ui/SectionList/sectionList.css

@@ -39,8 +39,8 @@
     .item {
       box-sizing: border-box;
       cursor: pointer;
+      display: flex;
       flex: 0 1 33.33%;
-      height: 100%;
       opacity: 0.75;
       padding: 0.25em;
       transition: all 0.75s cubic-bezier(0.23, 1, 0.32, 1);
@@ -56,7 +56,6 @@
       }
 
       &:hover {
-        flex: 0 0 50%;
         opacity: 1;
         z-index: 100;
 
@@ -67,6 +66,13 @@
         & [data-hover="show"] {
         }
       }
+
+      &.stretch-on:hover {
+        flex: 0 0 50%;
+      }
+
+      &.stretch-off:hover {
+      }
     }
   }
 }

js/src/ui/SectionList/sectionList.js

@@ -31,8 +31,13 @@ export default class SectionList extends Component {
     className: PropTypes.string,
     items: arrayOrObjectProptype().isRequired,
     renderItem: PropTypes.func.isRequired,
+    noStretch: PropTypes.bool,
     overlay: nodeOrStringProptype()
-  }
+  };
+
+  static defaultProps = {
+    noStretch: false
+  };
 
   render () {
     const { className, items } = this.props;
@@ -75,7 +80,7 @@ export default class SectionList extends Component {
   }
 
   renderItem = (item, index) => {
-    const { renderItem } = this.props;
+    const { noStretch, renderItem } = this.props;
 
     // NOTE: Any children that is to be showed or hidden (depending on hover state)
     // should have the data-hover="show|hide" attributes. For the current implementation
@@ -85,7 +90,10 @@ export default class SectionList extends Component {
     // CSS-only solution to let the browser do all the work via selectors.
     return (
       <div
-        className={ styles.item }
+        className={ [
+          styles.item,
+          styles[`stretch-${noStretch ? 'off' : 'on'}`]
+        ].join(' ') }
         key={ `item_${index}` }
       >
         { renderItem(item, index) }