Sharing: Update to FoldableCard Pattern

[alternatekev]

This PR updates Sharing to the FoldableCard components. Currently in production, Sharing looks like this:

When updating to FoldableCards, this PR looks like this:

This also makes use of the new SocialLogo component introduced by @enejb. Since Twitter doesn't have a box-surrounded version of the icon, I went with mostly non-boxed icons here. We can easily change this to include boxed icons for every logo, but it'd require adding one for Twitter to the SocialLogo component.

Pinging @johnHackworth, @rickybanister and @mtias for reviews.

[rickybanister]

The borderless buttons look just fine to me.

Do you think it would be possible (later on, different PR) to switch to foldable card for these?

[alternatekev]

@rickybanister Yep, that was going to be my next step. Do we even need them foldable if there's no connection? The preview screenshots don't seem to add much.

[kellychoffman]

What is the reasoning behind the change?

[kellychoffman]

switch to foldable card

Do we even need them foldable if there's no connection? The preview screenshots don't seem to add much.

We are planning on updating the page to use more components, such as the foldable card. The preview screenshots are important in that they tell a new user what they can get out of connecting without sending them to a support doc.

[alternatekev]

@kellychoffman Updated to remove the icon:

[kellychoffman]

It looks a bit off when mixed with services that aren't connected. Maybe because it isn't aligned.

Do you think Disconnect looks like a link?

[rickybanister]

@kellychoffman would it be inappropriate for it to be red? Is disconnecting a sharing service a 'scary' thing? It would then be inline with many other 'remove' and 'delete' items.

[gwwar]

Single quotes please. :)

[gwwar]

Besides some minor changes the code looks good 👍 This branch needs to rebased.

Do you think Disconnect looks like a link?

It does. Having this large of a click target for something that looks like a link, is a bit odd to me.

[alternatekev]

So.. I sort of revamped the whole thing and came up with this, which should solve most people's issues with this page for a while. We could probably get rid of the icons though:

[alternatekev]

Here's how it looks icon-less:

[alternatekev]

The above changes would work well also on #1477

[rickybanister]

This isn't my game, but icon-less is better. Ironically we're nearly back to what it was before. Just with the new foldable card style.

[rralian]

@alternatekev is the mock here just a visual mockup or was it a screenshot? The alignment of the icons is inconsistent. Otherwise I don't have a dog in the icon/iconless fight.

[mtias]

I like the compact buttons since they weight less in a page otherwise full of buttons.

[alternatekev]

@rralian This was a screenshot, and you're right about the icon alignment. It was looking super weird to me too, which should probably be its own PR/issue.

[alternatekev]

This isn't my game, but icon-less is better. Ironically we're nearly back to what it was before. Just with the new foldable card style.

Yeah, I got myself to a place where I didn't think the borderless was working here in practice. To be fair, we're using the compact buttons which I think make a ton of difference, especially when taking into account the foldable card updates. It feels correct to me, which isn't to say it 100% is.

[alternatekev]

@kellychoffman what do you think about moving eventbrite up to the main area and treating it the same? does it need to be in its own group down there:

[kellychoffman]

I was out for the past two days... Catching up.

icon-less is better. Ironically we're nearly back to what it was before.

I like that we are back to the buttons, but I'm not convinced compact is better than the original buttons. For a new user, Connecting is the primary (only) action for this page. Also, I agree about the icons - I'm not sure they are adding anything here.

what do you think about moving eventbrite up to the main area and treating it the same? does it need to be in its own group down there:

There's going to be other services down there. Also Eventbrite isn't publicizing, so I'd rather not group it up with those services.

[jkudish]

I agree with @kellychoffman -- grouping the services would be pretty confusing for users. There will eventually be other services there too... What Eventbrite does, and how it works is very different from Publicize. I've even advocated for a different tab for it in the past, though I understand why we didn't do that (at least for now).

[kellychoffman]

I think we should keep the white icons with the colored background. The updated colored icons looks too messy.

[MichaelArestad]

Just out of curiosity, why were the icons taken out of the colored backgrounds? It looked more uniform before.

[alternatekev]

The icons were changed because there's a new SocialLogo component that includes all of the icons within a roundrect except for Twitter. We could go with all roundrect backgrounds but I need one for Twitter added to the component.

[kellychoffman]

Could we use the non roundrect versions of all the logos instead? (I think Facebook is the only one without one) For Facebook, we could use the roundrect version and just make sure it matches the border radius of the others.

[alternatekev]

I really wanted to avoid doing custom CSS for all of the logos except one. If almost all have roundrect versions, it shouldn't be too hard to add just one. Also it makes the alignment of the logo easier because it's being done in SVG vs aligning it around in CSS.

[kellychoffman]

Fair. I think we should avoid making updates to the social icons until we have either all roundrect or all standalone.

[alternatekev]

By adding a roundrect version of Twitter (which I'm just about done with), then this page will have all roundrect. Except Google+ which will be a circle and Eventbrite which will have its off-kilter rectangle. Would that work?

[davewhitley]

By adding a roundrect version of Twitter (which I'm just about done with), then this page will have all roundrect. Except Google+ which will be a circle and Eventbrite which will have its off-kilter rectangle. Would that work?

That works for me. I'm not opposed to including a version of the Twitter logo with a rectangle in Social Logos.

[alternatekev]

Could we use the non roundrect versions of all the logos instead? (I think Facebook is the only one without one) For Facebook, we could use the roundrect version and just make sure it matches the border radius of the others.

@kellychoffman I totally misread this as you wanting to use ALL roundrects. This is currently what this PR does, except for LinkedIn, which also is only in a roundrect format.

Using all non-roundrect except for LinkedIn and Facebook is what this PR does now.

I've already got the SocialLogos component updated with a pending PR to add the Twitter roundrect... we could see how that version stacks up against what's in the screenshot at the top and go from there.

I always forget about Eventbrite I guess. It seems rounrect-enough to me?

[kellychoffman]

Using all non-roundrect except for LinkedIn and Facebook is what this PR does now.

Right, but not with colored backgrounds as it was before.

I always forget about Eventbrite I guess. It seems rounrect-enough to me?

Yeah I think its fine on its own.