WordPress / wporg-parent-2021

17 stars 10 forks source link

Add gap to `is-style-button-list`. #130

Open StevenDufresne opened 5 months ago

StevenDufresne commented 5 months ago

This PR adds a gap to the buttons introduced in #127. The buttons currently have a border-radius and when they are side by side it doesn't look great. I chose 6px because its the smallest value where the gap is visible and won't have a tremendous impact on the width of the nav in the pattern directory.

Screenshots

Before After
Screenshot 2024-04-05 at 3 06 30 PM Screenshot 2024-04-05 at 3 06 22 PM
ryelle commented 5 months ago

I intentionally left no gap because there's no gap in the designs, but I agree a slight space looks better.

Screenshot 2024-04-05 at 11 09 19 AM

This feels minor, but I think I'd like a quick @WordPress/meta-design check just in case the 0-gap was necessary.

jasmussen commented 5 months ago

I'd tend to avoid the gap for the reasons ryelle mentions. We're a bit space constrained here, so pixels are at a premium.

What we could do if it keeps bugging us is to halve the horizontal padding of the button, and then add the earned pixels on the gap. I'm not crazy about that idea, though, it would make the narrow tabs like "All" a bit too narrow. A third option is a tiny gap, say 4px, that would probably be fine. I'd defer to @fcoveram

fcoveram commented 5 months ago

I agree that it looks tight. A feedback shared time ago about the general layout was reducing spacings to make everything more dense.

The version for small viewports was designed with a 8px gap. I don't see that in current Showcase, so we can perhaps apply this change to all breakpoints. Here is a screenshot from the Filter flow section in the Design Library.

CleanShot 2024-04-08 at 10 05 43@2x

StevenDufresne commented 5 months ago

I agree that it looks tight. A feedback shared time ago about the general layout was reducing spacings to make everything more dense.

Fair. However, I don't think menu items being directly touching is a common UX pattern for these types of navigations. Clear boundaries are expected.