Skip to content

ref(dropdownMenu): Remove showDividers prop & modify default divider rules #40982

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

Merged
merged 2 commits into from
Nov 3, 2022

Conversation

vuluongj20
Copy link
Member

So far the showDividers prop in dropdown menus hasn't been very useful (it's only used in one component). Also, we want to enforce certain rules for when to show dividers in a menu and don't want too much deviation from those rules. I think we can remove the prop in favor of some slightly modified default rules. Those rules include:

  • In any single menu, dividers should appear on either all or none of the items, cause otherwise the menu would look a bit strange (see the before screenshot).
  • If a menu item has details text (small gray text in a second line), it should have dividers around it

Before:
Screen Shot 2022-11-03 at 12 25 03 PM

After:
Screen Shot 2022-11-03 at 12 24 04 PM
Screen Shot 2022-11-03 at 12 23 41 PM

@vuluongj20 vuluongj20 requested a review from a team as a code owner November 3, 2022 19:32
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Nov 3, 2022
Comment on lines 121 to 125
const showDividers = useMemo(
() => stateCollection.some(item => !!item.props.details),
[stateCollection]
);

Copy link
Member Author

Choose a reason for hiding this comment

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

Logical result of the two rules mentioned above: if any item in the menu has some details text, then the entire menu should have dividers.

@github-actions
Copy link
Contributor

github-actions bot commented Nov 3, 2022

size-limit report 📦

Path Size
src/sentry/static/sentry/dist/entrypoints/app.js 20.18 KB (+0.07% 🔺)
src/sentry/static/sentry/dist/entrypoints/sentry.css 33.06 KB (0%)

@@ -118,15 +118,20 @@ function DropdownMenu({
[menuProps, hasFocus]
);

const showDividers = useMemo(
Copy link
Member

Choose a reason for hiding this comment

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

No need for a useMemo here since it returns a primitive and the operation is quick

@vuluongj20 vuluongj20 merged commit 6cd92d2 into master Nov 3, 2022
@vuluongj20 vuluongj20 deleted the vl/issue-header-dropdown branch November 3, 2022 20:32
@github-actions github-actions bot locked and limited conversation to collaborators Nov 19, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants