Skip to content

buttonbar: support dropdowns #91886

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 4 commits into from
May 20, 2025
Merged

buttonbar: support dropdowns #91886

merged 4 commits into from
May 20, 2025

Conversation

JonasBa
Copy link
Member

@JonasBa JonasBa commented May 19, 2025

I noticed noticed this while working on the issues dropdown. The rules we have do not account for the wrapper that is created by out dropdownmenu

Before
CleanShot 2025-05-19 at 14 40 17@2x

After
CleanShot 2025-05-19 at 14 40 23@2x

@JonasBa JonasBa requested a review from a team as a code owner May 19, 2025 18:44
@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label May 19, 2025
@JonasBa JonasBa force-pushed the jb/issues/dropdown branch from 53a2884 to 344cc00 Compare May 19, 2025 19:40
JonasBa
JonasBa commented May 19, 2025
View reviewed changes
static/app/components/actions/resolve.tsx
@@ -269,7 +269,7 @@ function ResolveActions({
itemsHidden={shouldDisplayCta}
items={items}
trigger={(triggerProps, isOpen) => (
<DropdownTrigger
Copy link
Member Author

Choose a reason for hiding this comment

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

This is now properly managed by ButtonBar

TkDodo
TkDodo reviewed May 20, 2025
View reviewed changes
static/app/components/core/button/buttonBar.tsx Outdated
Comment on lines 61 to 64
/* Middle buttons only need one border so we don't get a double line */
&:first-child + *:not(:last-child) {
margin-left: -1px;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

The focus state seems to be cut-off, I think that’s because of the negative margin-left:

Screenshot 2025-05-20 at 14 52 47

FYI, I did something similar for segmentedControl and PageFilterBar but with a different approach, where we set transform: translateX with -1px for each item:

sentry/static/app/components/core/segmentedControl/index.chonk.tsx

Lines 10 to 19 in ab91c44

const getChildTransforms = (count: number) => {
return Array.from(
{length: count},
(_, index) => css`
label:nth-of-type(${index + 1}) {
transform: translateX(-${index}px);
}
`
);
};

Copy link
Member Author

Choose a reason for hiding this comment

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

Uf, good catch. I don't think that fixes it, but I do see that segmentedcontrol uses z-index with a positive value for the active element. I've reused that trick, changed to translate and it looks like it does the job

CleanShot.2025-05-20.at.09.32.28.mp4

Copy link
Contributor

Choose a reason for hiding this comment

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

nice 🙌

@JonasBa JonasBa merged commit 1764d6d into master May 20, 2025
42 checks passed
@JonasBa JonasBa deleted the jb/issues/dropdown branch May 20, 2025 16:52
@scttcper scttcper added the Trigger: Revert Add to a merged PR to revert it (skips CI) label May 20, 2025
@getsentry-bot
Copy link
Contributor

PR reverted: 450d59c

getsentry-bot added a commit that referenced this pull request May 20, 2025
@getsentry-bot @scttcper
Revert "buttonbar: support dropdowns (#91886)"
450d59c 
This reverts commit 1764d6d.

Co-authored-by: scttcper <1400464+scttcper@users.noreply.github.com>
@scttcper
Copy link
Member

reverting as this messed up zindex of dropdowns inside button bars
image

more https://sentry.slack.com/archives/C04KZQBNQ2U/p1747766755547099

@natemoo-re natemoo-re mentioned this pull request May 20, 2025
Closed
JonasBa added a commit that referenced this pull request May 20, 2025
@JonasBa
Reapply "buttonbar: support dropdowns (#91886)"
7750c93 
This reverts commit 450d59c.
andrewshie-sentry pushed a commit that referenced this pull request May 20, 2025
@JonasBa @andrewshie-sentry
buttonbar: support dropdowns (#91886)
66f043e 
I noticed noticed this while working on the issues dropdown. The rules
we have do not account for the wrapper that is created by out
dropdownmenu

Before
![CleanShot 2025-05-19 at 14 40
17@2x](https://github.com/user-attachments/assets/255bf53b-2e63-4638-9889-6094e39334b1)

After
![CleanShot 2025-05-19 at 14 40
23@2x](https://github.com/user-attachments/assets/14e41bc9-3903-44c1-ae8a-aca326d52525)
andrewshie-sentry pushed a commit that referenced this pull request May 20, 2025
@getsentry-bot @scttcper @andrewshie-sentry
Revert "buttonbar: support dropdowns (#91886)"
28289a7 
This reverts commit 1764d6d.

Co-authored-by: scttcper <1400464+scttcper@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@TkDodo TkDodo TkDodo approved these changes

Assignees
No one assigned
Labels
Scope: Frontend Automatically applied to PRs that change frontend components Trigger: Revert Add to a merged PR to revert it (skips CI)
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@JonasBa @getsentry-bot @scttcper @TkDodo