-
Notifications
You must be signed in to change notification settings - Fork 1k
Adjust menu grouped separator #6201
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
Conversation
src/js/components/Menu/Menu.js
Outdated
<Box | ||
margin={{ | ||
horizontal: 'small', | ||
bottom: index === 0 ? 'none' : 'small', |
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.
The container of the group already has vertical padding. It doesn't feel like we need to add this bottom margin also.
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.
Fixed in latest commit
src/js/components/Menu/Menu.js
Outdated
|
||
return menuItem(item, currentIndex); | ||
})} | ||
<Box pad={theme.menu.group.separator.pad}> |
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.
Should we change where the groupIndex > 0
condition is placed and only render this entire Box when groupIndex > 0
?
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.
Good idea, changed this in the latest commit
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.
Nice work
What does this PR do?
Adjusts the Menu grouped separator to have the same amount of padding/margin as the menu options.
Where should the reviewer start?
What testing has been done on this PR?
How should this be manually tested?
Do Jest tests follow these best practices?
screen
is used for querying.userEvent
is used in place offireEvent
. (Note I had to use firEvent instead of userEvent for the down arrow. User Event wasn't opening the menu)asFragment()
is used for snapshot testing.Any background context you want to provide?
What are the relevant issues?
Closes #6188
Screenshots (if appropriate)
Do the grommet docs need to be updated?
Yes
Should this PR be mentioned in the release notes?
No
Is this change backwards compatible or is it a breaking change?
Backwards compatible