Merge pull request #11064 from luixxiul/reorganize-dropdown

Reorganize dropdown.js
brave · Oct 14, 2017 · c1e9f55 · c1e9f55
2 parents 7796872 + 37ac877
commit c1e9f55
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 66 deletions.
diff --git a/app/extensions/brave/locales/en-US/styles.properties b/app/extensions/brave/locales/en-US/styles.properties
@@ -1,4 +1,7 @@
 actionButton=Action Button
+adsAllow=Allow Ads and Tracking
+adsBlock=Block Ads
+adsShowBrave=Show Brave Ads
 browserButton=Browser Button
 buttons=Buttons
 extensionItem=Extension Item
@@ -20,4 +23,4 @@ styleGuide=Style Guide
 subtleButton=Subtle Button
 switches=Switches
 titles=Titles
-typography=Typography
+typography=Typography
diff --git a/app/renderer/components/autofill/autofillAddressPanel.js b/app/renderer/components/autofill/autofillAddressPanel.js
@@ -14,7 +14,7 @@ const {
   CommonFormLarge,
   CommonFormSection,
   CommonFormTitle,
-  CommonFormFullWidthDropdown,
+  CommonFormDropdown,
   CommonFormButtonWrapper,
   commonFormStyles
 } = require('../common/commonForm')
@@ -241,13 +241,14 @@ class AutofillAddressPanel extends React.Component {
                 />
               </div>
               <div className={css(commonFormStyles.input__marginRow)}>
-                <CommonFormFullWidthDropdown
+                <CommonFormDropdown
+                  data-isFullWidth
+                  data-test-id='country'
                   value={this.props.country}
                   onChange={this.onCountryChange}
-                  data-test-id='country'
                 >
                   {this.countryList}
-                </CommonFormFullWidthDropdown>
+                </CommonFormDropdown>
               </div>
               <div className={css(commonFormStyles.input__marginRow)}>
                 <input

diff --git a/app/renderer/components/common/commonForm.js b/app/renderer/components/common/commonForm.js
@@ -69,12 +69,6 @@ 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} />
@@ -240,7 +234,6 @@ module.exports = {
   CommonFormLarge,
   CommonFormBookmarkHanger,
   CommonFormDropdown,
-  CommonFormFullWidthDropdown,
   CommonFormTextbox,
   CommonFormClickable,
   CommonFormSection,

diff --git a/app/renderer/components/common/dropdown.js b/app/renderer/components/common/dropdown.js
@@ -40,18 +40,6 @@ class SettingDropdown extends ImmutableComponent {
   }
 }
 
-class PanelDropdown extends ImmutableComponent {
-  render () {
-    return <FormDropdown data-isPanel {...this.props} />
-  }
-}
-
-class BraveryPanelDropdown extends ImmutableComponent {
-  render () {
-    return <FormDropdown data-isBraveryPanel {...this.props} />
-  }
-}
-
 const selectPadding = '0.4em'
 
 const styles = StyleSheet.create({
@@ -95,15 +83,12 @@ const styles = StyleSheet.create({
   },
 
   braveryPanel: {
-    fontSize: '13px',
-    width: '100%'
+    fontSize: '13px'
   }
 })
 
 module.exports = {
   Dropdown,
   FormDropdown,
-  SettingDropdown,
-  PanelDropdown,
-  BraveryPanelDropdown
+  SettingDropdown
 }
diff --git a/app/renderer/components/main/braveryPanel.js b/app/renderer/components/main/braveryPanel.js
@@ -11,7 +11,7 @@ const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
 const BrowserButton = require('../common/browserButton')
 const SwitchControl = require('../common/switchControl')
-const {BraveryPanelDropdown} = require('../common/dropdown')
+const {FormDropdown} = require('../common/dropdown')
 
 // Constants
 const config = require('../../../../js/constants/config')
@@ -506,11 +506,18 @@ class BraveryPanel extends React.Component {
                   !this.props.isCompactBraveryPanel && styles.braveryPanel__body__advanced__control__forms__dropdown,
                   this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__forms__dropdown
                 )}>
-                  <BraveryPanelDropdown data-test-id='adsBlockedControl' value={this.props.adControl} onChange={this.onToggleAdControl} disabled={!this.props.shieldsUp}>
+                  <FormDropdown
+                    data-isFullWidth
+                    data-isBraveryPanel
+                    data-test-id='adsBlockedControl'
+                    value={this.props.adControl}
+                    onChange={this.onToggleAdControl}
+                    disabled={!this.props.shieldsUp}
+                  >
                     <option data-l10n-id='showBraveAds' data-test-id='showBraveAds' value='showBraveAds' />
                     <option data-l10n-id='blockAds' data-test-id='blockAdsOption' value='blockAds' />
                     <option data-l10n-id='allowAdsAndTracking' data-test-id='showAdsOption' value='allowAdsAndTracking' />
-                  </BraveryPanelDropdown>
+                  </FormDropdown>
                 </div>
 
                 <SwitchControl className={css(
@@ -552,11 +559,18 @@ class BraveryPanel extends React.Component {
                   this.props.isCompactBraveryPanel && gridStyles.row4col1,
                   this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__forms__dropdown
                 )}>
-                  <BraveryPanelDropdown data-test-id='cookieControl' value={this.props.cookieControl} onChange={this.onToggleCookieControl} disabled={!this.props.shieldsUp}>
+                  <FormDropdown
+                    data-isFullWidth
+                    data-isBraveryPanel
+                    data-test-id='cookieControl'
+                    value={this.props.cookieControl}
+                    onChange={this.onToggleCookieControl}
+                    disabled={!this.props.shieldsUp}
+                  >
                     <option data-l10n-id='block3rdPartyCookie' value='block3rdPartyCookie' />
                     <option data-l10n-id='allowAllCookies' data-test-id='allowAllCookies' value='allowAllCookies' />
                     <option data-l10n-id='blockAllCookies' data-test-id='blockAllCookies' value='blockAllCookies' />
-                  </BraveryPanelDropdown>
+                  </FormDropdown>
                 </div>
 
                 <div className={css(
@@ -580,15 +594,18 @@ class BraveryPanel extends React.Component {
                   this.props.isCompactBraveryPanel && gridStyles.row6col1,
                   this.props.isCompactBraveryPanel && styles.braveryPanel_compact__body__advanced__control__forms__dropdown
                 )}>
-                  <BraveryPanelDropdown
+                  <FormDropdown
+                    data-isFullWidth
+                    data-isBraveryPanel
                     data-test-id='fpControl'
                     value={this.props.fingerprintingProtection}
                     onChange={this.onToggleFp}
-                    disabled={!this.props.shieldsUp}>
+                    disabled={!this.props.shieldsUp}
+                  >
                     <option data-l10n-id='block3rdPartyFingerprinting' data-test-id='block3rdPartyFingerprinting' value='block3rdPartyFingerprinting' />
                     <option data-l10n-id='allowAllFingerprinting' data-test-id='allowAllFingerprinting' value='allowAllFingerprinting' />
                     <option data-l10n-id='blockAllFingerprinting' data-test-id='blockAllFingerprinting' value='blockAllFingerprinting' />
-                  </BraveryPanelDropdown>
+                  </FormDropdown>
                 </div>
 
                 <SwitchControl className={css(

diff --git a/app/renderer/components/preferences/payment/enabledContent.js b/app/renderer/components/preferences/payment/enabledContent.js
@@ -17,7 +17,7 @@ const settings = require('../../../../../js/constants/settings')
 const ImmutableComponent = require('../../immutableComponent')
 const BrowserButton = require('../../common/browserButton')
 const {FormTextbox} = require('../../common/textbox')
-const {PanelDropdown} = require('../../common/dropdown')
+const {FormDropdown} = require('../../common/dropdown')
 const LedgerTable = require('./ledgerTable')
 
 // style
@@ -191,7 +191,8 @@ class EnabledContent extends ImmutableComponent {
         <div className={css(gridStyles.row1col2, styles.enabledContent__walletBar__title)} data-l10n-id='accountBalance' />
         <div className={css(gridStyles.row1col3)} />
         <div className={css(gridStyles.row2col1)}>
-          <PanelDropdown
+          <FormDropdown
+            data-isPanel
             data-test-id='fundsSelectBox'
             value={getSetting(settings.PAYMENTS_CONTRIBUTION_AMOUNT, this.props.settings)}
             onChange={changeSetting.bind(null, this.props.onChangeSetting, settings.PAYMENTS_CONTRIBUTION_AMOUNT)}>
@@ -204,7 +205,7 @@ class EnabledContent extends ImmutableComponent {
                 return <option value={amount}>{amount} BAT {alternative}</option>
               })
             }
-          </PanelDropdown>
+          </FormDropdown>
         </div>
         <div className={css(gridStyles.row2col2)}>
           {

diff --git a/js/about/styles.js b/js/about/styles.js
@@ -15,9 +15,7 @@ const {TextArea, DefaultTextArea} = require('../../app/renderer/components/commo
 const {
   Dropdown,
   FormDropdown,
-  SettingDropdown,
-  PanelDropdown,
-  BraveryPanelDropdown
+  SettingDropdown
 } = require('../../app/renderer/components/common/dropdown')
 
 const BrowserButton = require('../../app/renderer/components/common/browserButton')
@@ -182,6 +180,7 @@ class AboutStyle extends ImmutableComponent {
           </Dropdown>
           <Pre><Code>
             const { '{Dropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
+            {'\n'}
             &lt;Dropdown>{'\n'}
             &nbsp;&nbsp;&lt;option>Select Box&lt;/option>{'\n'}
             &nbsp;&nbsp;&lt;option>Second Choice&lt;/option>{'\n'}
@@ -199,6 +198,7 @@ class AboutStyle extends ImmutableComponent {
           </FormDropdown>
           <Pre><Code>
             const { '{FormDropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
+            {'\n'}
             &lt;FormDropdown>{'\n'}
             &nbsp;&nbsp;&lt;option>Select Box&lt;/option>{'\n'}
             &nbsp;&nbsp;&lt;option>Second Choice&lt;/option>{'\n'}
@@ -207,6 +207,42 @@ class AboutStyle extends ImmutableComponent {
           </Code></Pre>
         </Container>
 
+        <Container>
+          <h2>Dropdown used on Brave Payments; has 180px width (same as Panel Item button below)</h2>
+          <FormDropdown data-isPanel>
+            <option>5 USD</option>
+            <option>10 USD</option>
+            <option>15 USD</option>
+          </FormDropdown>
+          <Pre><Code>
+            const { '{FormDropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
+            {'\n'}
+            &lt;FormDropdown data-isPanel>{'\n'}
+            &nbsp;&nbsp;&lt;option>5 USD&lt;/option>{'\n'}
+            &nbsp;&nbsp;&lt;option>10 USD&lt;/option>{'\n'}
+            &nbsp;&nbsp;&lt;option>15 USD&lt;/option>{'\n'}
+            &lt;/FormDropdown>
+          </Code></Pre>
+        </Container>
+
+        <Container>
+          <h2>Dropdown used on Bravery Panel; has 100% width and 13px font size</h2>
+          <FormDropdown data-isFullWidth data-isBraveryPanel>
+            <option data-l10n-id='adsShowBrave' data-test-id='showBraveAds' value='showBraveAds' />
+            <option data-l10n-id='adsBlock' data-test-id='blockAdsOption' value='blockAds' />
+            <option data-l10n-id='adsAllow' data-test-id='showAdsOption' value='allowAdsAndTracking' />
+          </FormDropdown>
+          <Pre><Code>
+            const { '{FormDropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
+            {'\n'}
+            &lt;FormDropdown data-isFullWidth data-isBraveryPanel>{'\n'}
+            &nbsp;&nbsp;&lt;option data-l10n-id='showBraveAds' data-test-id='showBraveAds' value='showBraveAds' />{'\n'}
+            &nbsp;&nbsp;&lt;option data-l10n-id='blockAds' data-test-id='blockAdsOption' value='blockAds' />{'\n'}
+            &nbsp;&nbsp;&lt;option data-l10n-id='allowAdsAndTracking' data-test-id='showAdsOption' value='allowAdsAndTracking' />{'\n'}
+            &lt;/FormDropdown>
+          </Code></Pre>
+        </Container>
+
         <Container>
           <h2>Dropdown used mostly in Preferences; has a fixed width</h2>
           <SettingDropdown>
@@ -216,6 +252,7 @@ class AboutStyle extends ImmutableComponent {
           </SettingDropdown>
           <Pre><Code>
             const { '{SettingDropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
+            {'\n'}
             &lt;SettingDropdown>{'\n'}
             &nbsp;&nbsp;&lt;option>Select Box&lt;/option>{'\n'}
             &nbsp;&nbsp;&lt;option>Second Choice&lt;/option>{'\n'}
@@ -225,36 +262,20 @@ class AboutStyle extends ImmutableComponent {
         </Container>
 
         <Container>
-          <h2>Dropdown used on Brave Payments; has 180px width (same as Panel Item button below)</h2>
-          <PanelDropdown>
-            <option>5 USD</option>
-            <option>10 USD</option>
-            <option>15 USD</option>
-          </PanelDropdown>
-          <Pre><Code>
-            const { '{PanelDropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
-            &lt;PanelDropdown>{'\n'}
-            &nbsp;&nbsp;&lt;option>5 USD&lt;/option>{'\n'}
-            &nbsp;&nbsp;&lt;option>10 USD&lt;/option>{'\n'}
-            &nbsp;&nbsp;&lt;option>15 USD&lt;/option>{'\n'}
-            &lt;/PanelDropdown>
-          </Code></Pre>
-        </Container>
-
-        <Container>
-          <h2>Dropdown used mostly on Bravery Panel; has 100% width and 13px font size</h2>
-          <BraveryPanelDropdown>
+          <h2>Dropdown used on CommonForm</h2>
+          <CommonFormDropdown>
             <option>Select Box</option>
             <option>Second Choice</option>
             <option>Third Choice</option>
-          </BraveryPanelDropdown>
+          </CommonFormDropdown>
           <Pre><Code>
-            const { '{BraveryPanelDropdown}' } = require('../../app/renderer/components/common/dropdown'){'\n'}
-            &lt;BraveryPanelDropdown>{'\n'}
+            const { '{CommonFormDropdown}' } = require('../../app/renderer/components/common/commonForm'){'\n'}
+            {'\n'}
+            &lt;CommonFormDropdown>{'\n'}
             &nbsp;&nbsp;&lt;option>Select Box&lt;/option>{'\n'}
             &nbsp;&nbsp;&lt;option>Second Choice&lt;/option>{'\n'}
             &nbsp;&nbsp;&lt;option>Third Choice&lt;/option>{'\n'}
-            &lt;/BraveryPanelDropdown>
+            &lt;/CommonFormDropdown>
           </Code></Pre>
         </Container>