Polish CommonForm

- Replace FlyoutDialog with CommonForm to dismiss the possibility of visual regression
- Reduce components by adding props
- Add 'CommonFormSection title' to bookmark hanger
- Update to the modified BEM style
- Fix data-test-id

Auditors:

Test Plan:
1. Open about:styles
2. Click 'commonForm'
3. Make sure the common form panel is properly displayed

app/renderer/components/autofill/autofillAddressPanel.js

@@ -11,11 +11,9 @@ const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
 const Button = require('../common/button')
 const {
-  CommonFormLarge,
+  CommonForm,
   CommonFormSection,
-  CommonFormTitle,
   CommonFormDropdown,
-  CommonFormButtonWrapper,
   commonFormStyles
 } = require('../common/commonForm')
 
@@ -160,8 +158,8 @@ class AutofillAddressPanel extends React.Component {
 
   render () {
     return <Dialog onHide={this.onHide} testId='autofillAddressPanel' isClickDismiss>
-      <CommonFormLarge onClick={this.onClick}>
-        <CommonFormTitle data-l10n-id='editAddress' />
+      <CommonForm large onClick={this.onClick}>
+        <CommonFormSection title l10nId='editAddress' />
         <CommonFormSection>
           <div className={css(commonFormStyles.sectionWrapper)}>
             <div className={css(commonFormStyles.inputWrapper, commonFormStyles.inputWrapper__label)}>
@@ -273,7 +271,7 @@ class AutofillAddressPanel extends React.Component {
             </div>
           </div>
         </CommonFormSection>
-        <CommonFormButtonWrapper>
+        <CommonFormSection buttons>
           <Button className='whiteButton'
             l10nId='cancel'
             testId='cancelAddressButton'
@@ -285,8 +283,8 @@ class AutofillAddressPanel extends React.Component {
             testId='saveAddressButton'
             onClick={this.onSave}
           />
-        </CommonFormButtonWrapper>
-      </CommonFormLarge>
+        </CommonFormSection>
+      </CommonForm>
     </Dialog>
   }
 }

app/renderer/components/autofill/autofillCreditCardPanel.js

@@ -13,10 +13,8 @@ const Button = require('../common/button')
 const {
   CommonForm,
   CommonFormSection,
-  CommonFormTitle,
   CommonFormDropdown,
   CommonFormTextbox,
-  CommonFormButtonWrapper,
   commonFormStyles
 } = require('../common/commonForm')
 
@@ -128,9 +126,9 @@ class AutofillCreditCardPanel extends React.Component {
   render () {
     return <Dialog onHide={this.onHide} testId='autofillCreditCardPanel' isClickDismiss>
       <CommonForm onClick={this.onClick}>
-        <CommonFormTitle
-          data-test-id='manageAutofillDataTitle'
-          data-l10n-id='editCreditCard'
+        <CommonFormSection title
+          l10nId='editCreditCard'
+          testId='manageAutofillDataTitle'
         />
         <CommonFormSection>
           <div className={css(commonFormStyles.sectionWrapper)}>
@@ -202,7 +200,7 @@ class AutofillCreditCardPanel extends React.Component {
             </div>
           </div>
         </CommonFormSection>
-        <CommonFormButtonWrapper>
+        <CommonFormSection buttons>
           <Button className='whiteButton'
             l10nId='cancel'
             testId='cancelCreditCardButton'
@@ -214,14 +212,12 @@ class AutofillCreditCardPanel extends React.Component {
             testId='saveCreditCardButton'
             onClick={this.onSave}
           />
-        </CommonFormButtonWrapper>
+        </CommonFormSection>
       </CommonForm>
     </Dialog>
   }
 }
 
-module.exports = ReduxComponent.connect(AutofillCreditCardPanel)
-
 const styles = StyleSheet.create({
   // Copied from textbox.js
   input: {
@@ -239,3 +235,5 @@ const styles = StyleSheet.create({
     marginLeft: `calc(${globalStyles.spacing.dialogInsideMargin} / 3)`
   }
 })
+
+module.exports = ReduxComponent.connect(AutofillCreditCardPanel)

app/renderer/components/bookmarks/addEditBookmarkFolder.js

@@ -4,13 +4,15 @@
 
 const React = require('react')
 const Immutable = require('immutable')
-const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
 const AddEditBookmarkFolderForm = require('./addEditBookmarkFolderForm')
-const {CommonFormBookmarkHanger} = require('../common/commonForm')
+const {
+  CommonFormHanger,
+  CommonFormSection
+} = require('../common/commonForm')
 
 // State
 const bookmarkFoldersState = require('../../../common/state/bookmarkFoldersState')
@@ -23,9 +25,6 @@ const windowActions = require('../../../../js/actions/windowActions')
 const cx = require('../../../../js/lib/classSet')
 const bookmarkFoldersUtil = require('../../../common/lib/bookmarkFoldersUtil')
 
-// Styles
-const globalStyles = require('../styles/global')
-
 class AddEditBookmarkFolder extends React.Component {
   constructor (props) {
     super(props)
@@ -68,11 +67,8 @@ class AddEditBookmarkFolder extends React.Component {
     return <Dialog className={cx({
       bookmarkDialog: true
     })} onHide={this.onClose} isClickDismiss>
-      <CommonFormBookmarkHanger onClick={this.onClick}>
-        <div className={cx({
-          [css(styles.commonFormSection)]: true,
-          [css(styles.commonFormTitle)]: true
-        })} data-l10n-id={this.props.heading} />
+      <CommonFormHanger bookmark onClick={this.onClick}>
+        <CommonFormSection title l10nId={this.props.heading} />
         <AddEditBookmarkFolderForm
           folderName={this.props.folderName}
           editKey={this.props.editKey}
@@ -83,21 +79,9 @@ class AddEditBookmarkFolder extends React.Component {
           isDisabled={!this.props.isFolderNameValid}
           hasBookmarks={this.props.hasBookmarks}
         />
-      </CommonFormBookmarkHanger>
+      </CommonFormHanger>
     </Dialog>
   }
 }
 
-const styles = StyleSheet.create({
-  // Copied from commonForm.js
-  commonFormSection: {
-    // PR #7985
-    margin: `${globalStyles.spacing.dialogInsideMargin} 30px`
-  },
-  commonFormTitle: {
-    color: globalStyles.color.braveOrange,
-    fontSize: '1.2em'
-  }
-})
-
 module.exports = ReduxComponent.connect(AddEditBookmarkFolder)

app/renderer/components/bookmarks/addEditBookmarkFolderForm.js

@@ -11,7 +11,6 @@ const BrowserButton = require('../common/browserButton')
 const {
   CommonFormSection,
   CommonFormDropdown,
-  CommonFormButtonWrapper,
   commonFormStyles
 } = require('../common/commonForm')
 
@@ -193,7 +192,7 @@ class AddEditBookmarkFolderForm extends React.Component {
           </div>
         </div>
       </CommonFormSection>
-      <CommonFormButtonWrapper>
+      <CommonFormSection buttons>
         {
           this.props.editKey != null
             ? <BrowserButton groupedItem secondaryColor
@@ -213,7 +212,7 @@ class AddEditBookmarkFolderForm extends React.Component {
           disabled={this.state.isDisabled}
           onClick={this.onSave}
         />
-      </CommonFormButtonWrapper>
+      </CommonFormSection>
     </div>
   }
 }

app/renderer/components/bookmarks/addEditBookmarkForm.js

@@ -12,7 +12,6 @@ const {
   CommonFormSection,
   CommonFormDropdown,
   CommonFormTextbox,
-  CommonFormButtonWrapper,
   commonFormStyles
 } = require('../common/commonForm')
 
@@ -229,7 +228,7 @@ class AddEditBookmarkForm extends React.Component {
           </div>
         </div>
       </CommonFormSection>
-      <CommonFormButtonWrapper>
+      <CommonFormSection buttons>
         {
           this.props.editKey != null
             ? <BrowserButton groupedItem secondaryColor
@@ -249,7 +248,7 @@ class AddEditBookmarkForm extends React.Component {
           disabled={this.state.isDisabled}
           onClick={this.onSave}
         />
-      </CommonFormButtonWrapper>
+      </CommonFormSection>
     </div>
   }
 }

app/renderer/components/bookmarks/addEditBookmarkHanger.js

@@ -11,8 +11,8 @@ const ReduxComponent = require('../reduxComponent')
 const Dialog = require('../common/dialog')
 const AddEditBookmarkForm = require('./addEditBookmarkForm')
 const {
-  CommonFormBookmarkHanger,
-  CommonFormBottomWrapper
+  CommonFormHanger,
+  CommonFormSection
 } = require('../common/commonForm')
 
 // States
@@ -108,8 +108,8 @@ class AddEditBookmarkHanger extends React.Component {
       bookmarkDialog: this.props.isModal,
       bookmarkHanger: !this.props.isModal,
       [css(styles.bookmarkHanger)]: !this.props.isModal
-    })} onHide={this.onClose} isClickDismiss>
-      <CommonFormBookmarkHanger onClick={this.onClick}>
+    })} isClickDismiss>
+      <CommonFormHanger bookmark onClick={this.onClick}>
         {
           !this.props.isModal
           ? <div className={cx({
@@ -118,10 +118,7 @@ class AddEditBookmarkHanger extends React.Component {
           })} />
           : null
         }
-        <div className={cx({
-          [css(styles.commonFormSection)]: true,
-          [css(styles.commonFormTitle)]: true
-        })} data-l10n-id={this.props.heading} />
+        <CommonFormSection title l10nId={this.props.heading} />
         <AddEditBookmarkForm
           title={this.props.title}
           editKey={this.props.editKey}
@@ -136,30 +133,20 @@ class AddEditBookmarkHanger extends React.Component {
         />
         {
           !this.props.isModal
-            ? <CommonFormBottomWrapper>
+            ? <CommonFormSection bottom>
               <div className={css(styles.bookmark__bottomWrapper, styles.bottomWrapper__cursor)}
                 data-test-id='viewBookmarks'
                 data-l10n-id='viewBookmarks'
                 onClick={this.onViewBookmarks} />
-            </CommonFormBottomWrapper>
+            </CommonFormSection>
             : null
         }
-      </CommonFormBookmarkHanger>
+      </CommonFormHanger>
     </Dialog>
   }
 }
 
 const styles = StyleSheet.create({
-  // Copied from commonForm.js
-  commonFormSection: {
-    // PR #7985
-    margin: `${globalStyles.spacing.dialogInsideMargin} 30px`
-  },
-  commonFormTitle: {
-    color: globalStyles.color.braveOrange,
-    fontSize: '1.2em'
-  },
-
   bookmarkHanger: {
     // See: #9040
     justifyContent: 'flex-start !important',