Extend Portal component with title, buttons & steps (as per Modal) (#4392)

* Allow Portal to take title & buttons props

* Fix tests

* Portal consistent in screen center

* Allow hiding of Close (e.g. FirstRun usage)

* Set overflow style on body based on open

* Don't lock scroll for child popups (overlaps)

* Override buttons to be white

* Expose ~/ui/Modal/Title as re-usable component

* Use ~/ui/Title to render the Title

* Update tests

* Added a portal example with buttons and steps

* Address PR comments

* Fix AddressSelect with new container withing container

* Move legend to "buttons"

* AddressSelect extra padding

js/src/ui/Form/AddressSelect/addressSelect.js

@@ -180,34 +180,38 @@ class AddressSelect extends Component {
         onClose={ this.handleClose }
         onKeyDown={ this.handleKeyDown }
         open={ expanded }
+        title={
+          <div className={ styles.title }>
+            <label className={ styles.label } htmlFor={ id }>
+              { label }
+            </label>
+            <div className={ styles.outerInput }>
+              <input
+                id={ id }
+                className={ styles.input }
+                placeholder={ ilHint }
+                onBlur={ this.handleInputBlur }
+                onFocus={ this.handleInputFocus }
+                onChange={ this.handleChange }
+                ref={ this.setInputRef }
+              />
+              { this.renderLoader() }
+            </div>
+
+            <div className={ styles.underline }>
+              <TextFieldUnderline
+                focus={ inputFocused }
+                focusStyle={ BOTTOM_BORDER_STYLE }
+                muiTheme={ muiTheme }
+                style={ BOTTOM_BORDER_STYLE }
+              />
+            </div>
+
+            { this.renderCurrentInput() }
+            { this.renderRegistryValues() }
+          </div>
+        }
       >
-        <label className={ styles.label } htmlFor={ id }>
-          { label }
-        </label>
-        <div className={ styles.outerInput }>
-          <input
-            id={ id }
-            className={ styles.input }
-            placeholder={ ilHint }
-            onBlur={ this.handleInputBlur }
-            onFocus={ this.handleInputFocus }
-            onChange={ this.handleChange }
-            ref={ this.setInputRef }
-          />
-          { this.renderLoader() }
-        </div>
-
-        <div className={ styles.underline }>
-          <TextFieldUnderline
-            focus={ inputFocused }
-            focusStyle={ BOTTOM_BORDER_STYLE }
-            muiTheme={ muiTheme }
-            style={ BOTTOM_BORDER_STYLE }
-          />
-        </div>
-
-        { this.renderCurrentInput() }
-        { this.renderRegistryValues() }
         { this.renderAccounts() }
       </Portal>
     );