refactor(navigation): use trigger styles for both link and trigger co…

…mponents
giantnodes · May 8, 2024 · 1bc4f1d · 1bc4f1d
1 parent 34accde
commit 1bc4f1d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 11 deletions.
diff --git a/packages/react/src/components/navigation/NavigationLink.tsx b/packages/react/src/components/navigation/NavigationLink.tsx
@@ -32,7 +32,7 @@ const Component: ComponentType = React.forwardRef(
 
     const component = React.useMemo<LinkProps>(
       () => ({
-        className: slots.link({ className: className?.toString() }),
+        className: slots.trigger({ className: className?.toString() }),
         ...rest,
       }),
       [className, rest, slots]

diff --git a/packages/theme/src/components/navigation.ts b/packages/theme/src/components/navigation.ts
@@ -9,23 +9,19 @@ export const navigation = tv({
     brand: ['flex flex-row justify-center flex-nowrap shrink-0'],
     segment: ['flex gap-3', 'list-none'],
     title: ['font-semibold'],
-    item: [
-      'flex items-center gap-x-3 grow',
-      'select-none',
-      'transition-all duration-200',
+    item: ['flex', 'select-none', 'transition-all duration-200', '[&_svg]:hover:text-brand'],
+    divider: ['bg-partition', 'border-partition'],
+    trigger: [
+      'flex items-center grow gap-x-3',
+      'p-2',
       'focus:outline-dashed focus:outline-offset-2 focus:outline-1 focus:outline-partition',
-      '[&_svg]:hover:text-brand',
     ],
-    link: [],
-    divider: ['bg-partition', 'border-partition'],
-    trigger: ['flex items-center'],
   },
   variants: {
     orientation: {
       horizontal: {
         wrapper: ['flex-row items-center', 'w-full', 'px-4 md:px-6'],
         segment: ['items-center'],
-        link: ['py-2 px-6'],
         divider: ['h-full', 'w-px', 'mx-2'],
         trigger: ['py-2 px-6'],
       },
@@ -56,7 +52,8 @@ export const navigation = tv({
     },
     variant: {
       highlight: {
-        item: ['rounded-md', 'hover:bg-foreground'],
+        item: ['rounded-md hover:bg-foreground'],
+        trigger: ['rounded-md'],
       },
     },
     isBordered: {