Skip to content

Conversation

jcfilben
Copy link
Collaborator

@jcfilben jcfilben commented Jun 22, 2022

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.
  • The correct query is used. (Refer to this list of queries)
  • userEvent is used in place of fireEvent. (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

<Box
margin={{
horizontal: 'small',
bottom: index === 0 ? 'none' : 'small',
Copy link
Collaborator

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.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in latest commit

@jcfilben jcfilben requested a review from taysea June 23, 2022 16:52
@taysea taysea added browser related Associated with browser specific errors and removed browser related Associated with browser specific errors labels Jun 23, 2022
@taysea taysea assigned jcfilben and unassigned jcfilben Jun 23, 2022

return menuItem(item, currentIndex);
})}
<Box pad={theme.menu.group.separator.pad}>
Copy link
Collaborator

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 ?

Copy link
Collaborator Author

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

@jcfilben jcfilben requested a review from taysea June 24, 2022 15:07
Copy link
Collaborator

@taysea taysea left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work

@taysea taysea requested a review from ericsoderberghp June 24, 2022 16:09
@ericsoderberghp ericsoderberghp merged commit bd6830a into grommet:master Jun 27, 2022
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.

Menu - Adjust grouped menu separator implementation to accommodate new design direction
3 participants