Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Refactor forms.less with Aphrodite #7989

Closed
luixxiul opened this issue Mar 30, 2017 · 0 comments
Closed

Refactor forms.less with Aphrodite #7989

luixxiul opened this issue Mar 30, 2017 · 0 comments

Comments

@luixxiul
Copy link
Contributor

luixxiul commented Mar 30, 2017

Refactor forms.less with Aphrodite

@luixxiul luixxiul self-assigned this Mar 30, 2017
@luixxiul luixxiul added this to the Backlog milestone Mar 31, 2017
cezaraugusto pushed a commit that referenced this issue Apr 17, 2017
Closes #8028
Addresses #7989

- Removed isClickDismiss from the dialog
  Installing Widevine influences globally, not specific to a tab which opens the page which requires Widevine. Removing isClickDismiss would clarify to the users that the third party software which we discourage from using is going to be installed on the browser right now.

- Applied commonForm.js to them in order to make styling consistent
- Added CommonFormLarge to commonForm.js
- Added globalStyles.dialogWidth and globalStyles.LargeWidth to global.js
- Added noMargin and noPadding to commonStyles.js
- Added margin-top to the bottom text block on widevineInfo.js
- Added testIds to the buttons and the dialog, modifying dialog.js
  - data-test-id as testId
  - data-test2-id as test2Id
- Added widevinePanelDialog as a testId
- Set cursor:pointer

Auditors:

Test Plan:
1. Visit netflix.com
2. Click outside of the dialog
3. Make sure the dialog is not closed
4. Click "Install and Allow"
5. Log in to the account
6. Make sure movies can be played
cezaraugusto pushed a commit that referenced this issue Apr 18, 2017
Closes #8099
Closes #8100
Addresses #7989

- Refactored with commonForm, replacing it with genericForm
  Aligned labels to the left and input textboxes to the right by applying display:flex

- Added CommonFormLarge
- Added cx to dialog.js for more readability
- Removed .manageAutofillDataPanel from form.less

Also:
- Added testIds
- Edited autofillTest.js and autofill.js
  TODO: refactor autofill.js with Aphrodite
- Edited selectors.js

Auditors:

Test Plan:
1. Automated tests should pass
2. Open about:autofill
3. Add an address
4. Add a credit card
5. Visit https://www.roboform.com/filling-test-all-fields
6. Make sure the input forms can be filled
@luixxiul luixxiul changed the title Refactor form.less with Aphrodite Refactor forms.less with Aphrodite Apr 21, 2017
luixxiul added a commit that referenced this issue Apr 23, 2017
Closes #8028
Addresses #7989

- Removed isClickDismiss from the dialog
  Installing Widevine influences globally, not specific to a tab which opens the page which requires Widevine. Removing isClickDismiss would clarify to the users that the third party software which we discourage from using is going to be installed on the browser right now.

- Applied commonForm.js to them in order to make styling consistent
- Added CommonFormLarge to commonForm.js
- Added globalStyles.dialogWidth and globalStyles.LargeWidth to global.js
- Added noMargin and noPadding to commonStyles.js
- Added margin-top to the bottom text block on widevineInfo.js
- Added testIds to the buttons and the dialog, modifying dialog.js
  - data-test-id as testId
  - data-test2-id as test2Id
- Added widevinePanelDialog as a testId
- Set cursor:pointer

Auditors:

Test Plan:
1. Visit netflix.com
2. Click outside of the dialog
3. Make sure the dialog is not closed
4. Click "Install and Allow"
5. Log in to the account
6. Make sure movies can be played
luixxiul pushed a commit that referenced this issue Apr 23, 2017
Closes #8099
Closes #8100
Addresses #7989

- Refactored with commonForm, replacing it with genericForm
  Aligned labels to the left and input textboxes to the right by applying display:flex

- Added CommonFormLarge
- Added cx to dialog.js for more readability
- Removed .manageAutofillDataPanel from form.less

Also:
- Added testIds
- Edited autofillTest.js and autofill.js
  TODO: refactor autofill.js with Aphrodite
- Edited selectors.js

Auditors:

Test Plan:
1. Automated tests should pass
2. Open about:autofill
3. Add an address
4. Add a credit card
5. Visit https://www.roboform.com/filling-test-all-fields
6. Make sure the input forms can be filled
luixxiul pushed a commit that referenced this issue Apr 23, 2017
Closes #6040
Addresses #7989

- Added CommonFormBookmarkHanger to commonForm.js
- Added globalStyles.spacing.bookmarkHangerMaxWidth to global.js
  Max-width of the bookmark hanger was set to 350px. Also, setting white-space:normal makes it possible for lines to be wrapped.

- Moved Dialog from addEditBookmark.js to addEditBookmarkHanger.js
- Added cancel button with this.onClose as 'fa fa-close' was removed

- Added const arrowUp and dialogHanger
- Added box-shadow to arrowUp

- Added styles.bookmarkHanger which is applied if !this.props.isModal
- Copied CommonFormSection and CommonFormTitle from commonForm.js, adding CommonFormBookmarkHangerTitle to addEditBookmarkHanger.js
  The margin-top of the title should be reduced if this.props.isModal.

- Changed backgroundColor of commonForm to #fff

- Add zindex to elements on navigation bar to let tests pass
  The value was set to higher than that of dialog, which is 3000.

- Updated test code

Also:
- Replaced divs with sections
- Removed styles from form.less
- Removed wideButton from buttons
- Added testIds to buttons (bookmarkHangerRemoveButton, bookmarkHangerCancelButton, bookmarkHangerDoneButton)
- Fixed camel cases

Auditors:

Test Plan 1:
1. Open about:preferences
2. Disable Home button
3. Click the star icon on the URL bar
4. Make sure the arrow up appears exactly under the star
5. Make sure the button appears under the icon
6. Open about:preferences
7. Enable Home button
8. Click the star icon again
9. Make sure th arrow up appears exactly under the star

Test Plan 2:
1. Open about:bookmarks
2. Click the star icon on the URL bar
3. Click "Done"
4. Click the star icon again
5. Click "Remove"
6. Make sure the bookmark is successfully removed

Test Plan 3:
1. Click "Add Folder" icon on about:bookmarks
2. Click "Cancel"
3. Make sure the dialog is closed

Test Plan 4:
1. Create a bookmark folder on about:bookmarks
2. Edit the folder via context menu on about:bookmarks
3. Click "Remove"
4. Make sure the folder is successfully removed

Test Plan 5:
1. Click the star icon on about:bookmarks
2. Click "Cancel"
3. Make sure the dialog is closed
4. Click the star icon again
5. Create a bookmark
6. Edit the bookmark via context menu
7. Click "Remove"
8. Make sure the bookmark is successfully removed
luixxiul pushed a commit that referenced this issue Apr 23, 2017
Closes #8137
Addresses #7989

- Added CommonFormMedium
- Removed styles under checkDefaultBrowserDialog in forms.less

Auditors:

Test Plan:
1. Change your default browser to other than Brave
2. Start Brave
luixxiul pushed a commit that referenced this issue Apr 23, 2017
Closes #8010
Addresses #7989

Auditors:

Test Plan: n/a
luixxiul pushed a commit that referenced this issue Apr 23, 2017
Closes #8192
Addresses #7989

- Added CommonFormSmall to commonForm.js
- Added data-test-id and testIds
- Removed clearBrowsingDataPanel from forms.less
- Updated test code

Auditors:

Test Plan:
1. Open Clear browsing data panel from the menu
2. Test the cancel button works
3. Reopen the panel
4. Test the clear button works
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants