registry api docs user experience

[susanev]

overview

we know the API docs are difficult for users to navigate. with the move to registry lets make this easier for folks to quickly find what they need.

design details

ux designs in figma

filter left-nav

• introduce a left navigation with the label API Navigation
• present a filter box, with the placeholder text Filter
• each type module, resource, function should have an associated icon that displays to the left of the item
  • letters are Gilroy bold, 9px
  • outline circle is 1px width
  • use the current colors for modules, resources, and functions as in the current API docs
• anything that is a module should have a dropdown arrow to the right, indicating it has children
  • these should all be collapsed by default but auto expand if a filter is applied resulting in a child result
  • note: all of these module pages will still have associated pages, so interacting with the label should display the page; interacting with the drop down arrow should expand/collapse the menu
  • dropdown arrow icon should rotate when open/close
• as users type in the filter box we should immediately scope down their view to only include results that match what they are typing (anywhere within the name of the thing)
  • @kimberleyamackenzie is gonna own the debounce decisions
  • any child that is a filter result should also expose the parent path to get to that child even if the parent does not match the filter results
• [ ] when folks first navigate to the API docs, they should land on the first item in the list #38
• when on a selected page, the font-weight should increase in the left nav indicating where they are
• the left navigation should not extend beyond the height of the center -page content, introduce a scroll bar in the left nav when this is the case
• any item that does not fit in the space of the left nav should have a ... appended to it, indicating more content
• style info is available in figma

screenshot

[praneetloke]

For posterity, I split this item out into its own issue:

when folks first navigate to the API docs, they should land on the first item in the list

[EvanBoyle]

closing out as we have sub-issues for the remaining follow-ups.