Peppered deltadromeus: ResultItem fixes

[sarahzinger]

Adds back dividers between result items in a results list and takes an optional private prop that will give it a yellow background.

remix: https://peppered-deltadromeus.glitch.me/#StoryResultsList

[ehmorris]

This looks good to me but maybe we should add a lock icon to private rowitems while we're here:

[sarahzinger]

@ehmorris sounds good, now that I think about it, it's probs necessary to have something like that for accessibility stuffs, would you rather have a lock icon instead of the yellow backgrounds or in addition to?

[ehmorris]

@sarahzinger I think it would be best to do both.

[sarahzinger]

so I'm playing around with this a bit and got a little icon to show conditionally:
https://peppered-deltadromeus.glitch.me/#StoryResultsList

But I see now that lock icon is not placed according to your design up above, in relation to the proiect avatar.

I'm not sure we can dictate where the private icon is located there unless we also make ResultItem aware that it might have an avatar inside of it.

Right now ResultItems are sort of unaware of whats (projects/collections/anything?) inside them, I think purposely so. Should ResultItems always have an avatar? Sometimes have an avatar? I could make another version of ResultItem that is like ResultItemWithAvatar or something? Or we could say that shared-components shouldn't know what these things are being used for, and let the consumers of the shared-components library dictate when and how to show avatars and lock icons?

Idk what do you think @ehmorris

[ehmorris]

@sarahzinger The image I posted is just a screenshot from the editor, from "Switch Projects". I think we should implement something like ResultItemWithAvatar later, when we come to it, and release what you've done here now. The only change I'd make is to nudge the icon rightwards a bit, so it's centered between the edge of the box and the text, like this:

[sarahzinger]

yeah hmm the more I think about this the more I realize this is a somewhat interesting problem as we're already "there" in the community site :) for example, right now we show avatars for My Stuff collections in ResultItems:

I'm wondering how this would work/not work when My Stuff is private which is the default. I think it'd be helpful to either decide what we want these thingys to look like across the site and build that widget OR keep this fairly flexible and unopinionated and let consumers of the lib decide (could have examples of how to do it in the docs maybe?)

[ehmorris]

@sarahzinger Maybe a way around this for now is to place the lock icon inline with the title, to avoid competing with whatever icon is rendered in the left column. This could be added through a new generic field like titleIcon.

[sarahzinger]

cool, how about this? We add the privacy icon to ResultName and I show how to do it in the docs

[ehmorris]

That seems good to me!

[keithk]

🚀 PR was released in v0.19.0 🚀