Repository navigation
Add a finder to the all-APIs landing page - #4539
Merged
Merged
Conversation
Readers could only scroll or use browser find to locate an API or endpoint on the catalog page. The title band now hosts the same `navigation-search` box as the API sidebar, which looks up operations across every API. It follows the sidebar rule: assembler builds only, not air-gapped. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
The preview hero sits outside `.api-catalog`, so the scoped `.api-catalog-finder` rule never applied there. The rule now targets the finder alone. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Contributor
Docs preview (local build)Handbook preview: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4539/ Sample changed pages: |
The preview hero is left-aligned, but the finder's auto margins centred it in the band. It now keeps the hero's alignment, and the custom element fills its container. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
`EuiInputPopover` caps itself at 400px unless it is full width, so the box sat at the left edge of the finder while the title and lede were centred. The cap is lifted inside `.api-catalog-finder` only, so the sidebar box is unchanged. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
The box is rendered by script, so the cards below moved down when it appeared. The container now holds the input's 34px height from the first paint. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
The sidebar box is rendered by script as well, so the navigation tree moved down when it appeared. The min-height now sits on `navigation-search[variant='sidebar']`, which covers the sidebar and the landing page with one rule. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
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
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.
The all-APIs landing page now has the same finder as the API sidebar, so a reader can jump to an API or endpoint without knowing which product it belongs to.
Affects:
API reference,Site UIPrompt summary: Add a box to the API Explorer landing page that lists all Elastic APIs, matching the one on single API pages. It covers every API listed there. elastic/docs-eng-team#1070 tracks the request, and its comment asks for a word other than "search" in the label.
Why
On the landing page, readers can only scroll or use browser find to locate an API or endpoint. Single API pages already have a finder, so the two levels behave differently.
What
Finder in the title band
The catalog hero hosts the
navigation-searchcomponent withtype="api", under the lede. It is the box from the API sidebar, so it looks up operations across every API and not only one product. Pressing/outside a text field focuses it, because no other finder is mounted on this page. It appears in both the classic and thenavigation-previewhero.Same availability as the sidebar finder
The box shows only where
ApiLayoutViewModel.ShowJumpToPageis true: assembler builds that are not air-gapped. Isolated and air-gapped builds keep the page as it was.Label avoids "search"
The placeholder is
Press ❲/❳ to find API, as in #4511. The docs call the box a finder, per the issue comment.docs/data/openapi/api-explorer.mddescribes it, and a small.api-catalog-finderrule inapi-docs.csssizes it to the lede.Verify
Check on the preview
/focuses the box.Out of scope: the box finds operations only. Indexing every API spec version is tracked in elastic/docs-eng-team#724.
Closes elastic/docs-eng-team#1070
🤖 Generated with Claude Code