32 manage page list styles

[jaredhirsch]

Fixes #32

Testing and Review Notes

Visual updates based on the zeplin mocks linked in #32.

This PR should only impact the management page list view; watch out for unexpected changes to the panel list view.

Questions for dev:

• commit e09991e: I'm not crazy about the amount of panel vs page special case code in here, but it works; suggestions welcome.
• Also in this same commit, I went with the positioned span approach for the right chevron shown in the list items, but based on the use of pseudoelements for list separators (which I adopted for the blue left-side border in commit b27aee8), it kinda seems like an ::after element would be a better option for both the right chevron and the info icon (in the panel list item view). However, item-summary already has the top/bottom border pseudoelements, and I wasn't sure whether it would be a net gain to add yet another wrapper element vs. just rolling with the current positioned span.

Question for UX:

I wasn't clear on the differences between hover, focus, and active states, based on the zeplin mocks. I'm particularly curious if these three states look correct for the list item, the search field, and the '+' button.

Screenshots or Videos

I'm going to skip these, to encourage reviewers to actually exercise the code a bit (afraid I'm missing some edge cases)...but if this seems a little too lazy on my part, I can add side-by-side screenshots for comparison purposes 🙃

[nickbrandt]

Overall, this is fantastic! Everything is just about spot on, with just a couple small nits (and a mistake on my end).

Main List View

• The only thing I'm seeing off, is the sidebar background color. We deviated here from Photon slightly, in order to have contrast with some of the other grays. Color used: #F2F2F4
• Also, I missed removing the chevron on the active entry list item on certain screens (one being the one that was linked in your issue. Sorry!). Can we have that so whichever item is currently selected/active, that the chevron disappears? (now updated on zeplin)

---

Hover States

• ✅ You nailed it! Apologies, we had those defined in Sketch but not uploaded anywhere on Zeplin.

---

Search (I think this is included in your PR)

• The only thing off here is the Search placeholder text color. We have this as Gray 60 (#4a4a4f) for accessibility/color contrast purposes.

Nice work @6a68 ! 👍

[jaredhirsch]

Thanks for the thorough review, @nickbrandt! 💯

[linuxwolf]

r+

Code-wise, I think this looks great. Pending the tweaks @nickbrandt asked for, it's good to

[linuxwolf]

@nickbrandt @6a68 Looking over the existing issues, I think updates to the search bar are to be addressed via #36.

[nickbrandt]

@linuxwolf sounds good!

Made the requested changes 👍