Framework: Update search component (and instances) to use gridicons

[kellychoffman]

This is the first step in cleaning up all the searching instances: removing noticons for gridicons.

Section nav search:
(My Sites > Blog posts for example)

Menu search

Author selector:
(Multi author site editor)

Category search:
(Category accordion in editor)

Location search:
(More options accordion in editor)

(will squash before merging)

[folletto]

Keep an eye open for wonkiness for the first one, we had troubles in the past and the component should be refactored. For reference see #109.

[folletto]

Checked:

• My Sites → Blog Posts ❓
• My Sites → Menus → Post Search ✅
• My Sites → Themes ❓
• Editor → Author Selector ❓
• Editor → Category Search ❓
• Editor → Location Search ❓

(1) My Sites → Blog Posts — the icon is misaligned (too high) when the dropdown is shown:

(2) Editor → Author Selector — Alignment seems off. A top: 9px and left: -3px seems aligning it to me (Chrome).

(3) Editor → Category Search — Alignment is ok, seems slightly better with left: -1px (instead of 0px).

(4) Editor → Location Search — Alignment seems slightly off. Try maybe left: 1px and top: 8px.

(5) My Sites → Themes — Top alignment slightly off. I'd go for 1px higher.

(6) All mobile views seem misaligned:

Themes:

Posts:

[kellychoffman]

Hmm, I'm wondering if something didn't sync... All my screenshots were taken in Chrome. I'll double check and fix the remaining issues. Thanks for the solid review.

[rickybanister]

I fixed the mobile alignment, but we should fix the failing test before merging this

[rickybanister]

I fixed the alignment of several other instances where there had been a hardcoded top defined.

Instead of maintained the top: 50% style and adjusted any custom margin-top to reflect 1/2 the height of the icon (if it was custom sized).

I verified on:

• site-picker
• section-nav: mobile-width
• section-nav: with dropdown
• section-nav: desktop-width
• themes
• new post: site-selector
• editor: author-selector
• editor: location
• editor: category
• devdocs

[kellychoffman]

👍 Thanks @rickybanister. Looks good. Rebased to squash the commits.

[rickybanister]

Just to remind us, we should probably try to (in a new PR) make the gridicons be 18px and margin-top: -9px where necessary for sharper icons.

[timmyc]

@kellychoffman tests should be fixed up with a24b1b1

[kellychoffman]

Just to remind us, we should probably try to (in a new PR) make the gridicons be 18px and margin-top: -9px where necessary for sharper icons.

Updated in here instead of making a new PR d26554b

tests should be fixed up with a24b1b1

Thanks! I'm still seeing errors :/

[kellychoffman]

Checks are passing now. Thanks @timmyc.

[MichaelArestad]

Not sure if related, but go to the posts view on a site and search for something. Then hit the X to cancel a search. Nothing happens.

[kellychoffman]

@MichaelArestad What browser? Can't seem to replicate.

[MichaelArestad]

@kellychoffman Chrome Mac

Tried clearing cache, rebuilding, etc. Definitely up to date on this branch.

Video: https://cloudup.com/cedQ2GRIGVT

[timmyc]

I just hit the same issue @MichaelArestad is showing on a different branch - so the issue is likely in master too. I'd say create a new issue for that specifically and not address it in this PR.

[kellychoffman]

Thanks for the video. I thought you were referring to the close button not clearing the search query out.

Just tested, and I'm not seeing this in Staging.

[timmyc]

@kellychoffman for me I had to toggle around a bit between the various filters first, drafts, trash etc. Then went back to published and opened up the search utility.

[kellychoffman]

You're right. We can address in another PR.

All good here?

[timmyc]

LGTM