addressing PR comments

Author: SEEKilian

.changeset/petite-symbols-lie.md

@@ -0,0 +1,12 @@
+---
+'@braid-design-system/docs-ui': minor
+---
+
+**HeaderNavigation:** Added `onSearchClick` prop to support triggering the search interaction.
+
+**KeyboardShortcut:** Added new component for displaying keyboard shortcut hints.
+
+**EXAMPLE USAGE:**
+```jsx
+<KeyboardShortcut keys={['CTRL', 'S']} shortcutLabel="Save" />
+```

packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.css.ts

@@ -1,25 +1,23 @@
-import { style } from '@vanilla-extract/css';
-import { vars } from 'braid-design-system/css';
+import { createVar, style } from '@vanilla-extract/css';
+import { vars, colorModeStyle } from 'braid-design-system/css';
 
-export const searchButton = style({
-  ':hover': {
-    background: vars.backgroundColor.neutralSoft,
+const searchBg = createVar();
+export const searchButton = style([
+  {
+    ':hover': {
+      background: searchBg,
+    },
   },
-});
-
-
-// import { style } from '@vanilla-extract/css';
-// import { vars, colorModeStyle } from 'braid-design-system/css';
-
-// export const searchButton = style({
-//   ':hover': (
-//     colorModeStyle({
-//       lightMode: {
-//         background: vars.backgroundColor.neutralSoft,
-//       },
-//       darkMode: {
-//         background: vars.backgroundColor.neutralSoft,
-//       },
-//     })
-//   )
-// })
+  colorModeStyle({
+    lightMode: {
+      vars: {
+        [searchBg]: vars.backgroundColor.neutralSoft,
+      }
+    },
+    darkMode: {
+      vars: {
+        [searchBg]: vars.backgroundColor.neutral,
+      }
+    },
+  })
+]);

packages/docs-ui/src/components/HeaderNavigation/HeaderNavigation.tsx

@@ -5,7 +5,6 @@ import {
   HiddenVisually,
   IconSearch,
   Link,
-  Stack,
   Text,
 } from 'braid-design-system';
 import type { ReactNode } from 'react';
@@ -55,7 +54,7 @@ export const HeaderNavigation = ({
         </Link>
       </Text>
     </Box>
-    <Stack space="none">
+    <div>
       <>{themeToggle}</>
       <Bleed horizontal="xxsmall" bottom="xxsmall">
         <Box
@@ -80,6 +79,6 @@ export const HeaderNavigation = ({
           />
         </Box>
       </Bleed>
-    </Stack>
+    </div>
   </Box>
 );

site/src/App/CategoryHeading/CategoryHeading.tsx

@@ -1,12 +1,12 @@
 import { Box, Text } from 'braid-design-system';
-import type { ElementType } from 'react';
+import type { ComponentProps } from 'react';
 
 export const CategoryHeading = ({
   children,
   component,
 }: {
   children: React.ReactNode;
-  component?: ElementType;
+  component?: ComponentProps<typeof Text>['component'];
 }) => (
   <Box style={{ textTransform: 'uppercase' }}>
     <Text size="xsmall" weight="medium" component={component}>

site/src/App/JumpToModal/SearchResults.tsx

@@ -1,5 +1,12 @@
 import { KeyboardShortcut } from '@braid-design-system/docs-ui';
-import { Box, Stack, Text, Bleed, ButtonLink } from 'braid-src/lib/components';
+import {
+  Box,
+  Stack,
+  Text,
+  Bleed,
+  ButtonLink,
+  Spread,
+} from 'braid-src/lib/components';
 
 import { CategoryHeading } from '../CategoryHeading/CategoryHeading';
 
@@ -43,7 +50,7 @@ export const SearchResults = ({
   }
 
   return (
-    <Stack space="large">
+    <Stack space="large" test-id="search-results">
       {(['Foundations', 'Components', 'CSS', 'Logic'] as const).map(
         (category) => {
           const items = groupedResults[category];
@@ -52,26 +59,19 @@ export const SearchResults = ({
           }
 
           return (
-            <Stack key={category} space="xxsmall" component="ul">
-              <Box marginBottom="xsmall" component="li">
-                <CategoryHeading component="h2">{category}</CategoryHeading>
-              </Box>
-              {items.map((item) => {
-                const globalIndex = flatResults.findIndex(
-                  (r) => r.path === item.path,
-                );
-                const isSelected = globalIndex === selectedIndex;
+            <Stack space="xsmall" key={category}>
+              <CategoryHeading component="h2">{category}</CategoryHeading>
+              <Stack space="xxsmall" component="ul">
+                {items.map((item) => {
+                  const globalIndex = flatResults.findIndex(
+                    (r) => r.path === item.path,
+                  );
+                  const isSelected = globalIndex === selectedIndex;
 
-                return (
-                  <Box key={item.path} component="li">
-                    <Bleed horizontal="small">
-                      <Box
-                        display="flex"
-                        alignItems="center"
-                        justifyContent="spaceBetween"
-                        gap="small"
-                      >
-                        <Box>
+                  return (
+                    <Box key={item.path} component="li">
+                      <Bleed left="small">
+                        <Spread space="small" alignY="center">
                           <ButtonLink
                             variant={isSelected ? 'soft' : 'transparent'}
                             tone="formAccent"
@@ -83,19 +83,19 @@ export const SearchResults = ({
                           >
                             {item.name}
                           </ButtonLink>
-                        </Box>
 
-                        {item.hasProps && isSelected && (
-                          <KeyboardShortcut
-                            keys={['⇧', '⏎']}
-                            shortcutLabel="Props"
-                          />
-                        )}
-                      </Box>
-                    </Bleed>
-                  </Box>
-                );
-              })}
+                          {item.hasProps && isSelected && (
+                            <KeyboardShortcut
+                              keys={['⇧', '⏎']}
+                              shortcutLabel="Props"
+                            />
+                          )}
+                        </Spread>
+                      </Bleed>
+                    </Box>
+                  );
+                })}
+              </Stack>
             </Stack>
           );
         },