feat(oc-docs): match playground method dropdown and url bar to Bruno app - #141
Merged
bijin-bruno merged 7 commits intoJul 23, 2026
Conversation
Align the playground query bar's HTTP method control with the Bruno app for visual parity: - Method dropdown items now render as MethodBadge (bold, mono, uppercase, method-coloured) instead of plain text, matching the trigger badge. - Constrain the method dropdown surface to 110-150px width, tighten item spacing (line-height, padding, margin) and surface padding. - Match the dropdown surface background and border to the query bar (app base background and --border-color) so it blends in dark mode. - Left-align the dropdown to the url box border with a 1px gap below it via Tippy offset. - Abbreviate long methods in the url bar trigger (DELETE -> DEL, OPTIONS -> OPT) through a new MethodBadge `short` prop. - Reduce the method trigger's left/right padding to match the docs url bar.
…pdown Address review: the method-menu-dropdown overrides lived in the shared MenuDropdown StyledWrapper. Move them to QueryBar via an Emotion Global so the query-bar-specific styling is owned by QueryBar. A Global is used (rather than QueryBar's nested StyledWrapper) because the dropdown surface is portaled to <body>, so a nested selector can't reach it.
…ound-method-parity # Conflicts: # packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/QueryBar/QueryBar.tsx # packages/oc-docs/src/components/Playground/Content/Views/PlaygroundView/QueryBar/StyledWrapper.ts
The method-menu-dropdown item overrides tied the base .dropdown-item selector (0,2,0) and lost on source order, so items fell back to the shared padding. Qualify with .dropdown to win the cascade.
| const resolvedMethod = method || 'GET'; | ||
| return ( | ||
| <StyledWrapper | ||
| className={['method-badge', className].filter(Boolean).join(' ')} |
Contributor
There was a problem hiding this comment.
Please use cx function from utils
Contributor
Author
There was a problem hiding this comment.
Done in 86eaa82 - switched to cx('method-badge', className).
Comment on lines
+17
to
+22
| expect(html).toContain('>DEL<'); | ||
| expect(html).not.toContain('DELETE'); | ||
| }); | ||
|
|
||
| it('keeps short methods intact when short is set', () => { | ||
| expect(renderToStaticMarkup(<MethodBadge method="GET" short />)).toContain('>GET<'); |
Contributor
There was a problem hiding this comment.
Please confirm these texts with text, and not from html
Contributor
Author
There was a problem hiding this comment.
Done in 86eaa82 - the short-mode tests now assert the rendered text (markup stripped) via a badgeText helper, e.g. expect(badgeText(<MethodBadge method="DELETE" short />)).toBe('DEL'), instead of matching the HTML string.
- Use the cx util for className composition instead of a manual filter/join. - Assert MethodBadge short-mode output by rendered text (strip markup) rather than matching the raw HTML string.
arpit-bruno
approved these changes
Jul 23, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
JIRA : BRU-3753
Summary
Brings the playground query bar's HTTP method control (the method dropdown and the url bar trigger) in line with the Bruno app for visual parity.
Changes
Method dropdown
MethodBadge(bold, monospace, uppercase, method-coloured), matching the trigger badge, instead of plain coloured text.line-height: 1, padding,1pxmargin) and surface padding.--border-color.1pxgap below it (via Tippyoffset).Url bar (method trigger)
DELETE -> DEL,OPTIONS -> OPT) through a newshortprop onMethodBadge; the dropdown list keeps the full names.Implementation notes
MethodBadgegained an optionalshortprop that rendersgetShortMethod(...)while keeping the colour derived from the full method. Default behaviour (full, uppercased) is unchanged, so the sidebar, example cards and docs url bar are unaffected.method-menu-dropdownclass on the sharedMenuDropdownsurface, so other dropdowns are untouched.