fix(navigation): style inconsistencies between link & trigger (#86)

* chore: update storybook to * chore: update storybook to v8.0.10 * fix(navigation): isBordered not being passed though * refactor(navigation): use trigger styles for both link and trigger components * stories(navigation): add isBordered arg type
giantnodes · May 8, 2024 · e5797cd · e5797cd
1 parent e9954ab
commit e5797cd
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 226 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -41,14 +41,14 @@
   },
   "devDependencies": {
     "@jest/types": "^29.6.3",
-    "@storybook/addon-backgrounds": "^8.0.9",
-    "@storybook/addon-essentials": "8.0.10",
-    "@storybook/addon-interactions": "8.0.9",
-    "@storybook/addon-links": "8.0.9",
+    "@storybook/addon-backgrounds": "^8.0.10",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-interactions": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
     "@storybook/addon-themes": "^8.0.10",
-    "@storybook/blocks": "8.0.10",
-    "@storybook/react": "^8.0.9",
-    "@storybook/react-vite": "8.0.9",
+    "@storybook/blocks": "^8.0.10",
+    "@storybook/react": "^8.0.10",
+    "@storybook/react-vite": "^8.0.10",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
     "autoprefixer": "^10.4.19",
@@ -58,7 +58,7 @@
     "prop-types": "15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "8.0.10",
+    "storybook": "^8.0.10",
     "tailwindcss": "^3.4.3",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",

diff --git a/packages/react/src/components/navigation/Navigation.stories.tsx b/packages/react/src/components/navigation/Navigation.stories.tsx
@@ -25,6 +25,9 @@ const Component: Meta<typeof Navigation> = {
       control: { type: 'select' },
       options: ['highlight'],
     },
+    isBordered: {
+      control: { type: 'boolean' },
+    },
   },
 }
 

diff --git a/packages/react/src/components/navigation/Navigation.tsx b/packages/react/src/components/navigation/Navigation.tsx
@@ -30,11 +30,11 @@ const Component: ComponentType = React.forwardRef(
     props: ComponentProps<TElement>,
     ref: Polymophic.Ref<TElement>
   ) => {
-    const { as, children, className, orientation, position, size, variant, ...rest } = props
+    const { as, children, className, orientation, position, size, variant, isBordered, ...rest } = props
 
     const Element = as ?? __ELEMENT_TYPE__
 
-    const context = useNavigation({ orientation, position, size, variant })
+    const context = useNavigation({ orientation, position, size, variant, isBordered })
 
     const component = React.useMemo<React.ComponentPropsWithoutRef<typeof __ELEMENT_TYPE__>>(
       () => ({

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: {