-
Notifications
You must be signed in to change notification settings - Fork 975
Refactor bookmarksToolbar.js with Aphrodite #7923
Conversation
? <span className={css( | ||
styles.bookmarkToolbarButton__bookmarkFavicon, | ||
styles.bookmarkToolbarButton__bookmarkFolder | ||
) + ' fa fa-folder-o'} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use cx here
@@ -221,7 +241,7 @@ class BookmarkToolbarButton extends ImmutableComponent { | |||
</span> | |||
{ | |||
this.isFolder | |||
? <span className='bookmarkFolderChevron fa fa-chevron-down' /> | |||
? <span className={css(styles.bookmarkToolbarButton__bookmarkFolderChevron) + ' fa fa-chevron-down'} data-test-id='bookmarkFolderChevron' /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use cx here
styles.bookmarksToolbar, | ||
this.props.shouldAllowWindowDrag && styles.bookmarksToolbar__allowDragging, | ||
styles.bookmarksToolbar__showOnlyFavicon | ||
) + ' showFavicon showOnlyFavicon'} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use cx here
className={css( | ||
styles.bookmarksToolbar__bookmarkButton, | ||
styles.bookmarksToolbar__overflowIndicator | ||
) + ' bookmarkButton'} /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use cx here
WebkitUserSelect: 'none', | ||
|
||
':hover': { | ||
background: 'white', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please use HEX code for the color
@NejcZdovc I updated. |
) + ' ' + cx({ | ||
fa: true, | ||
'fa-folder-o': true | ||
})} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was thinking more something like this:
<span className={cx({
fa: true,
'fa-folder-o': true,
[css(styles.bookmarkToolbarButton__bookmarkFavicon)]: true,
[css(styles.bookmarkToolbarButton__bookmarkFolder)]: true
})}
This way you don't need + ' ' +
and it's more readable in my opinion
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like that. I will update later.
Closes #7920 bookmarksToolbarTest.js is updated thanks to the help of @NejcZdovc: https://github.com/luixxiul/browser-laptop/commit/abbd11c3715192617e981493943483a3de28e95f#commitcomment-21504404 Also: #7923 (comment) Auditor: Test Plan: 1. Automated test should be passing (CXX=g++-4.8 NODE_ENV=test TEST_DIR=bookmark-components) 2. Bookmark several pages if you have not 3. Test that creating a bookmark on the bookmarks toolbar works 4. Test that creating a bookmark folder on the bookmarks toolbar works 5. Test that moving a bookmark into a folder by drag and drop on the bookmarks folder works 6. Test that clicking a bookmark in the toolbar loads the bookmark. 7. Test that clicking a bookmark in a bookmark toolbar folder loads the bookmark. 8. Change the window size 9. Make sure the overflow indicator is displayed on the right of the bookmarks toolbar
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Manually tested- looks good. Automated tests had varying results. Locally, the only one perma-failing was the PDF test. On travis-ci, it's passing just fine though.
Test Plan
Description
Closes #7920
bookmarksToolbarTest.js is updated thanks to the help of @NejcZdovc: https://github.com/luixxiul/browser-laptop/commit/abbd11c3715192617e981493943483a3de28e95f#commitcomment-21504404
git rebase -i
to squash commits (if needed).