Conversation
|
| <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.
| className={searchButton} | ||
| onClick={onSearchClick} | ||
| > | ||
| <KeyboardShortcut |
There was a problem hiding this comment.
A subtle one, but can you ensure all elements rendered in here use span elements. Given we wrap it in a button ideally we dont use div elements inside.
|
|
||
| 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 🥸
| "./playroom.config.mts", | ||
| "./src", | ||
| "./scripts", | ||
| "../packages/docs-ui/src/components/KeyboardShortcut" |
There was a problem hiding this comment.
This should not be necessary. Let me know if this is a deliberate work around for something we need to look at.
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
| <Box style={{ textTransform: 'uppercase' }} component="li"> | ||
| <Text size="xsmall" weight="medium" component="h2"> | ||
| {children} | ||
| </Text> | ||
| </Box> |
There was a problem hiding this comment.
I dont think these elements are correct for all usages. I would suggest flipping the Text and Box around and exposing the component prop on the outer Text component, so the element can be set from the call site.
| <Box style={{ textTransform: 'uppercase' }} component="li"> | |
| <Text size="xsmall" weight="medium" component="h2"> | |
| {children} | |
| </Text> | |
| </Box> | |
| <Text component={component} size="xsmall" weight="medium"> | |
| <Box component="span" style={{ textTransform: 'uppercase' }}> | |
| {children} | |
| </Box> | |
| </Text> |
| @@ -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>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