Add 'CommonFormFullWidthDropdown' to commonForm.js

Auditors: @cezaraugusto

Test Plan:
1. Open about:autofill
2. Click 'Add Address'

app/renderer/components/autofill/autofillAddressPanel.js

@@ -4,7 +4,8 @@
 
 const React = require('react')
 const Immutable = require('immutable')
-const {StyleSheet, css} = require('aphrodite/no-important')
+const {css} = require('aphrodite/no-important')
+
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
@@ -13,7 +14,7 @@ const {
   CommonFormLarge,
   CommonFormSection,
   CommonFormTitle,
-  CommonFormDropdown,
+  CommonFormFullWidthDropdown,
   CommonFormButtonWrapper,
   commonFormStyles
 } = require('../common/commonForm')
@@ -28,7 +29,6 @@ const countryCodes = require('../../../common/constants/countryCodes')
 
 // Styles
 const commonStyles = require('../styles/commonStyles')
-const globalStyles = require('../styles/global')
 
 // Localization
 const locale = require('../../../../js/l10n')
@@ -240,17 +240,14 @@ class AutofillAddressPanel extends React.Component {
                   defaultValue={this.props.postalCode}
                 />
               </div>
-              <div className={css(
-              commonFormStyles.input__marginRow,
-              styles.expirationDate__dropdowns
-              )}>
-                <CommonFormDropdown
+              <div className={css(commonFormStyles.input__marginRow)}>
+                <CommonFormFullWidthDropdown
                   value={this.props.country}
                   onChange={this.onCountryChange}
                   data-test-id='country'
                 >
                   {this.countryList}
-                </CommonFormDropdown>
+                </CommonFormFullWidthDropdown>
               </div>
               <div className={css(commonFormStyles.input__marginRow)}>
                 <input
@@ -294,21 +291,3 @@ class AutofillAddressPanel extends React.Component {
 }
 
 module.exports = ReduxComponent.connect(AutofillAddressPanel)
-
-const styles = StyleSheet.create({
-  // Copied from textbox.js
-  input: {
-    width: '100%'
-  },
-
-  sectionWrapper__expirationDate: {
-    alignItems: 'center',
-    justifyContent: 'flex-end'
-  },
-  expirationDate__dropdowns: {
-    display: 'flex'
-  },
-  dropdown__right: {
-    marginLeft: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
-  }
-})

app/renderer/components/common/commonForm.js

@@ -69,6 +69,12 @@ class CommonFormDropdown extends ImmutableComponent {
   }
 }
 
+class CommonFormFullWidthDropdown extends ImmutableComponent {
+  render () {
+    return <FormDropdown data-isCommonForm='true' data-isFullWidth='true' {...this.props} />
+  }
+}
+
 class CommonFormTextbox extends ImmutableComponent {
   render () {
     return <FormTextbox data-isCommonForm='true' {...this.props} />
@@ -234,6 +240,7 @@ module.exports = {
   CommonFormLarge,
   CommonFormBookmarkHanger,
   CommonFormDropdown,
+  CommonFormFullWidthDropdown,
   CommonFormTextbox,
   CommonFormClickable,
   CommonFormSection,

app/renderer/components/common/dropdown.js

@@ -17,6 +17,7 @@ class Dropdown extends ImmutableComponent {
       styles.dropdown,
       this.props['data-isCommonForm'] && styles.commonForm,
       this.props['data-isSettings'] && styles.settings,
+      this.props['data-isFullWidth'] && styles.fullWidth,
       this.props['data-isBraveryPanel'] && styles.braveryPanel
     )
 
@@ -59,6 +60,7 @@ const styles = StyleSheet.create({
     '-webkit-appearance': 'none',
     width: 'auto'
   },
+
   outlineable: {
     ':focus': {
       outlineColor: globalStyles.color.statsBlue,
@@ -67,13 +69,20 @@ const styles = StyleSheet.create({
       outlineWidth: '1px'
     }
   },
+
   commonForm: {
     backgroundColor: '#fff',
     fontSize: globalStyles.fontSize.flyoutDialog
   },
+
   settings: {
     width: '280px'
   },
+
+  fullWidth: {
+    width: '100%'
+  },
+
   braveryPanel: {
     fontSize: '13px',
     width: '100%'