Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from

Conversation

StevenDufresne
Copy link
Contributor

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
Copy link
Contributor

ryelle commented Apr 5, 2024

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
Copy link

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
Copy link

fcoveram commented Apr 8, 2024

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
Copy link
Contributor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants