Add 'Jump to' functionality to Braid Docs#2029
Conversation
🦋 Changeset detectedLatest commit: 69198a8 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
| <Stack space="none"> | ||
| <Box>{themeToggle}</Box> | ||
| <Bleed horizontal="xxsmall" bottom="xxsmall"> | ||
| <Box | ||
| component="button" | ||
| padding="xxsmall" | ||
| paddingRight="xsmall" | ||
| borderRadius="standard" | ||
| className={searchButton} | ||
| onClick={onSearchClick} | ||
| > | ||
| <KeyboardShortcut | ||
| keys={[ | ||
| navigator.platform.startsWith('Mac') || | ||
| navigator.platform === 'iPhone' || | ||
| navigator.platform === 'iPad' || | ||
| navigator.platform === 'iPod' | ||
| ? '⌘' | ||
| : 'Ctrl', | ||
| 'K', | ||
| ]} | ||
| shortcutLabel={<IconSearch />} | ||
| /> | ||
| </Box> | ||
| </Bleed> | ||
| </Stack> |
There was a problem hiding this comment.
Based one where this landed we can remove the wrapping Stack and the Box around the themeToggle.
|
|
||
| export const searchButton = style({ | ||
| ':hover': { | ||
| background: vars.backgroundColor.neutralSoft, |
There was a problem hiding this comment.
When we change the background colour outside of React Context we need to manage the colour mode change manually. So here need to use the colorModeStyle utility and specify the right token for dark mode.
You can test it on the docs site by focusing the window and typing braiddark 🥸
There was a problem hiding this comment.
Need to add a changeset for this new component
There was a problem hiding this comment.
Should add a changeset for this, as its new API for the docs-ui component
| @@ -0,0 +1,13 @@ | |||
| import { Box, Text } from 'braid-src/index'; | |||
There was a problem hiding this comment.
This import path is not right, we might have some setup issues to work through.
There was a problem hiding this comment.
I believe getSearchItems can be a static array rather behind a function call. That will mean it also wont need to be memoised as its value never changes.
| <TextField | ||
| icon={<IconSearch />} | ||
| ref={inputRef} | ||
| label="" |
There was a problem hiding this comment.
We should use aria-label here instead of a blank label
| if (flatResults.length === 0 && searchQuery.trim()) { | ||
| return ( | ||
| <Box | ||
| background="neutralSoft" |
There was a problem hiding this comment.
Favour using neutralLight over neutralSoft, where soft primarily serves the button use case. This will get you dark mode support out the box too.
Maybe a subtle radius on this one too?
| if (!searchQuery.trim()) { | ||
| return ( | ||
| <Box | ||
| background="neutralSoft" | ||
| padding="xxxlarge" | ||
| display="flex" | ||
| justifyContent="center" | ||
| alignItems="center" | ||
| height="full" | ||
| > | ||
| <Text tone="secondary" size="xsmall" align="center"> | ||
| Matching pages will appear here. | ||
| </Text> | ||
| </Box> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Maybe combine with the previous if block or use a component for this placeholder state to keep them consistent.
| <Stack key={category} space="xxsmall" component="ul"> | ||
| <Box marginBottom="xsmall"> | ||
| <CategoryHeading>{category}</CategoryHeading> | ||
| </Box> |
There was a problem hiding this comment.
The use of margin means the stack model is probably not right. This is also highlighted by the separation of the ul and li elements. I suggest something like this:
<Stack space="xsmall">
<CategoryHeading>...</CategoryHeading>
<Stack space="xxsmall" component"ul">
{items.map(() => (
<Bleed component="li">
<Spread space="small">
<ButtonLink>...</ButtonLink>
<KeyboardShortcut />
</Spread>
</Bleed>
))}
</Stack>
</Stack>| component?: ComponentProps<typeof Text>['component']; | ||
| }) => ( | ||
| <Box style={{ textTransform: 'uppercase' }}> | ||
| <Text size="xsmall" weight="medium" component={component}> |
There was a problem hiding this comment.
A consumer setting component would likely be more interested in controlling the container element. Suggest applying to the Box:
| component?: ComponentProps<typeof Text>['component']; | |
| }) => ( | |
| <Box style={{ textTransform: 'uppercase' }}> | |
| <Text size="xsmall" weight="medium" component={component}> | |
| component?: ComponentProps<typeof Box>['component']; | |
| }) => ( | |
| <Box component={component} style={{ textTransform: 'uppercase' }}> | |
| <Text size="xsmall" weight="medium"> |
| variant="transparent" | ||
| size="large" | ||
| label="Back to browse" | ||
| icon={<IconChevron direction="left" />} |
There was a problem hiding this comment.
Recommend using IconArrow for this in favour of Chevron
| } | ||
|
|
||
| return ( | ||
| <Stack space="large" test-id="search-results"> |
There was a problem hiding this comment.
| <Stack space="large" test-id="search-results"> | |
| <Stack space="large"> |
michaeltaranto
left a comment
michaeltaranto
left a comment
There was a problem hiding this comment.
A couple of minor improvements, but im looking forward to this one landing. Nice work.
2 participants
Adds a Modal that allows for quickly jumping to certain Navigation items. Opens with CTRL/CMD+K, as well as an icon below the theme switcher.
JumpToModalcomponent — A new site-level modal (Leverages Braid'sDialog) that lets users search across Foundations, Components, CSS, and Logic by name. Supports arrow-key navigation through results,Enterto navigate,Shift+Enterto jump directly to a component's props page (if present), and auto-focuses the search input on open.SearchResults&getSearchItems— Supporting modules for the modal:getSearchItemsbuilds a flat list of all searchable items from the existing navigation helpers/routes, andSearchResultsrenders them grouped by category.KeyboardShortcut&KeyboardIconcomponents — Newdocs-uicomponents that render styled key cap badges (e.g.⌘,K) alongside a label, used to surface shortcut hints in the UI.HeaderNavigationupdated — Added anonSearchClickprop and a new search trigger button in the header, showing the platform-appropriate shortcut hint (⌘K/Ctrl+K) usingKeyboardShortcut.Navigationupdated — Wires upisSearchOpenstate, rendersJumpToModal, and passesonSearchClickdown to both the fixed and stickyHeaderinstances.useSearchHotkeyhook — Listens for⌘K(macOS) orCtrl+K(other) globally and callsonOpento trigger the modal, with platform detection via a small utility (isMac).CategoryHeadingcomponent — For rendering uppercased category labels within the search results list - will be leveraged withindocDetailsin a follow-up branch