Foldable Card: Add border between summary and expand button if summary is included

[alternatekev]

During the discussions of #1477 and #1898, it's become clear that we could use a divider between the expand/collapse icon and the action button (if present) on a FoldableCard. This icon helps divide the disclosure icon from a potentially destructive action, like accidentally disabling your Twitter connection.

Instead of forcing every single instance of FoldableCard that has an action button to inherit this style, I'm adding an iconBorder prop to the component, the rendering of which looks like this:

cc @mtias @kellychoffman @folletto

[mtias]

Could we just render the border if there's content in summary?

[alternatekev]

@mtias

Could we just render the border if there's content in summary?

We could but this forces every FoldableCard to inherit this style, which I'm comfortable doing if others are ok with it.

[mtias]

It would be every FoldableCard that has content to display on that right side, otherwise it remains with no border. I think it's a fair expectation and makes it a bit easier to use (instead of having to decide case by case). If there's content to the right, we render border, otherwise we don't.

[alternatekev]

@mtias I went ahead and removed the iconBorder prop and instead based the has-border className on whether there's a summary prop. I can't find a ton of examples of it in use like this, but the one I could find visually was this, which seemed to work well:

[alternatekev]

Also here, on all sites/single plugin view:

...although it doesn't seem super appropriate that it's showing up here?

[kellychoffman]

...although it doesn't seem super appropriate that it's showing up here?

Its only supposed to show when there's a button, right?

[alternatekev]

@kellychoffman It's now basing the line on whether the summary prop is used, as suggested by @mtias, but the summary is being used here to pass a PluginUpdateIndicator on this line:

https://github.com/Automattic/wp-calypso/blob/master/client/my-sites/plugins/plugin-site-jetpack/index.jsx#L57

[kellychoffman]

Okay. I don't think its bad, just doesn't seem needed.

[alternatekev]

Agreed. We can probably update that (little-seen) plugins component to not use the summary prop?

[alternatekev]

This is what it looks like with the Updater component showing:

we can refactor it after the FoldableCard is updated, and have it only pass in the summary prop when there's actually an update, instead of using it every time, update or no. (and obviously, the top one would lose the border in that process) (and we can fix the margin on the button which is weird and unrelated)

[kellychoffman]

Makes sense.

[alternatekev]

Once everything is merged and a tiny css update is made, it'll look like this on sharing @kellychoffman

[kellychoffman]

Once everything is merged and a tiny css update is made, it'll look like this on sharing @kellychoffman

I dig it.

[alternatekev]

Pinging @dmsnell for code review

[dmsnell]

is this a typo?

[folletto]

I thought it was good practice to end all lines in objects with a comma to avoid double-line diffs when a single line gets added (clarity) and making all the lines uniform.

[dmsnell]

I couldn't find this explicit in our style guide. There was one example that included a list and it had the trailing comma. Most of the time I see them I feel like the don't have the trailing comma, but Babel handles it gracefully, so maybe this boils down to personal preference here.

[alternatekev]

Typo, since I had an extra prop defined at first, which I removed. I'll remove the comma here.

[alternatekev]

Fixed.

[dmsnell]

@alternatekev I don't know exactly what summary means, but I like the way of automatically setting this attribute instead of relying on a prop. I'm not against these kinds of boolean props, but I think that if it's true in 95%+ of the cases we use in Calypso, then just making that the default behavior is great.

[alternatekev]

Adding screenshots of more screens that will update with this merge:

Exporter:

[dmsnell]