-
Notifications
You must be signed in to change notification settings - Fork 842
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
Allowed variable gutterSize in EuiFacetGroup #3639
Conversation
Since this is a community submitted pull request, a Jenkins build has not been kicked off automatically. Can an Elastic organization member please verify the contents of this patch and then kick off a build manually? |
jenkins test this |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3639/ |
@miukimiu I updated and wrote the tests, any idea why the tests failed? |
jenkins test this |
The tests failed for this reason: |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3639/ |
@miukimiu so, Do I need to do something, or you'll merge it? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@shrey Thanks for getting this one started, though it looks like this one is going to take some finessing. Just adding margins to the left and bottom of the current display adds way too much white space between items stemming from the height of the button itself as you had mentioned in the issue.
Before
After
Also, vertical aligned items shouldn't have any margin to the right. And horizontal layout should account for collapsing any bottom margin.
Just give us a shout if you need help getting this one over the line.
if not margin, how should I add spacing? |
It has to be |
@cchaos It'd be great if you guys could jump in :) |
I've pushed a commit that takes a design pass at the different gutter sizing and adjusts some examples. |
retest |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3639/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I looked at the code and tested locally. LGMT! 🎉
- Reducing gutter sizes to just none, small, medium, and large - Adjusting that spacing appropriately - Fleshed out tests - Added `innerText` to facet buttons in case of truncation - Fixed color example
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 2 :) Will merge on green
retest |
Preview documentation changes for this PR: https://eui.elastic.co/pr_3639/ |
Summary
Allowing user to choose the size of gutter in EuiFacetGroup, by adding gutterSize
Closes #3621
Checklist
[ ] Checked for breaking changes and labeled appropriately@snide We can put different margin for horizontal and vertical, although that might not be of much use and make the sass code redundant, if you like these changes, I'll add the tests :)