fix: improve Remix compatibility

saas-js · Aug 7, 2023 · 493a548 · 493a548
1 parent 9e84807
commit 493a548
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 24 deletions.
diff --git a/.changeset/eleven-pens-guess.md b/.changeset/eleven-pens-guess.md
@@ -0,0 +1,7 @@
+---
+'@saas-ui/theme': patch
+'@saas-ui/core': patch
+'@saas-ui/react': patch
+---
+
+NavItem now renders an aria-current tag when the item is active.
diff --git a/.changeset/strong-bottles-rhyme.md b/.changeset/strong-bottles-rhyme.md
@@ -0,0 +1,6 @@
+---
+'@saas-ui/theme': patch
+'@saas-ui/react': patch
+---
+
+NavItem active state is now compatible with Remix and ReactRouter NavLink
diff --git a/packages/saas-ui-core/src/sidebar/nav-item.tsx b/packages/saas-ui-core/src/sidebar/nav-item.tsx
@@ -134,6 +134,7 @@ export const NavItem = forwardRef<NavItemProps, 'a'>((props, ref) => {
   const link = (
     <chakra.a
       as={as}
+      aria-current={isActive ? 'page' : undefined}
       {...rest}
       ref={ref}
       href={href}

diff --git a/packages/saas-ui-core/src/sidebar/sidebar.stories.tsx b/packages/saas-ui-core/src/sidebar/sidebar.stories.tsx
@@ -69,7 +69,7 @@ Basic.args = {
   children: (
     <>
       <SidebarSection flex="1" overflowY="auto">
-        <NavItem href="/dfdfd">Home</NavItem>
+        <NavItem aria-current="page">Home</NavItem>
         <NavItem>Users</NavItem>
         <NavItem>Settings</NavItem>
       </SidebarSection>
@@ -82,7 +82,7 @@ WithLinks.args = {
   children: (
     <>
       <SidebarSection flex="1" overflowY="auto">
-        <NavItem>Home</NavItem>
+        <NavItem isActive>Home</NavItem>
         <NavItem>Users</NavItem>
         <NavItem>Settings</NavItem>
       </SidebarSection>
@@ -95,7 +95,9 @@ WithFeatherIcons.args = {
   children: (
     <>
       <SidebarSection flex="1" overflowY="auto">
-        <NavItem icon={<FiHome />}>Home</NavItem>
+        <NavItem icon={<FiHome />} isActive>
+          Home
+        </NavItem>
         <NavItem icon={<FiUsers />}>Users</NavItem>
         <NavItem icon={<FiSettings />}>Settings</NavItem>
       </SidebarSection>
@@ -108,7 +110,9 @@ WithFaIcons.args = {
   children: (
     <>
       <SidebarSection flex="1" overflowY="auto">
-        <NavItem icon={<FaHome />}>Home</NavItem>
+        <NavItem icon={<FaHome />} isActive>
+          Home
+        </NavItem>
         <NavItem icon={<FaUsers />}>Users</NavItem>
         <NavItem icon={<FaCog />}>Settings</NavItem>
       </SidebarSection>
@@ -133,7 +137,9 @@ WithHorizontalNav.args = {
         </Menu>
       </SidebarSection>
       <SidebarSection flex="1" overflowY="auto">
-        <NavItem icon={<FiHome />}>Home</NavItem>
+        <NavItem icon={<FiHome />} isActive>
+          Home
+        </NavItem>
         <NavItem icon={<FiUsers />}>Users</NavItem>
         <NavItem icon={<FiSettings />}>Settings</NavItem>
       </SidebarSection>

diff --git a/packages/saas-ui-theme/src/base/components/nav-item.ts b/packages/saas-ui-theme/src/base/components/nav-item.ts
@@ -58,7 +58,15 @@ const baseStyle = definePartsStyle((props) => {
   }
 })
 
+// &[aria-current=page] styles are used for ReactRouter and Remix NavLink components
+
 const variantNeutral = definePartsStyle((props) => {
+  const _active = {
+    bg: 'blackAlpha.200',
+    _dark: {
+      bg: `whiteAlpha.300`,
+    },
+  }
   return {
     link: {
       _hover: {
@@ -67,12 +75,8 @@ const variantNeutral = definePartsStyle((props) => {
           bg: `whiteAlpha.200`,
         },
       },
-      _active: {
-        bg: 'blackAlpha.200',
-        _dark: {
-          bg: `whiteAlpha.300`,
-        },
-      },
+      _active,
+      ['&[aria-current=page]']: _active,
     },
     icon: {
       opacity: 0.8,
@@ -86,6 +90,16 @@ const variantNeutral = definePartsStyle((props) => {
 const variantSubtle = definePartsStyle((props) => {
   const { colorScheme: c, theme } = props
 
+  const _active = {
+    bg: transparentize(`${c}.500`, 0.3)(theme),
+    fontWeight: 'semibold',
+    color: `${c}.600`,
+    _dark: {
+      bg: transparentize(`${c}.500`, 0.3)(theme),
+      color: `${c}.100`,
+    },
+  }
+
   return {
     link: {
       _hover: {
@@ -94,22 +108,17 @@ const variantSubtle = definePartsStyle((props) => {
           bg: `whiteAlpha.200`,
         },
       },
-      _active: {
-        bg: transparentize(`${c}.500`, 0.3)(theme),
-        fontWeight: 'semibold',
-        color: `${c}.600`,
-        _dark: {
-          bg: transparentize(`${c}.500`, 0.3)(theme),
-          color: `${c}.100`,
-        },
-      },
+      _active,
+      ['&[aria-current=page]']: _active,
     },
   }
 })
 
 const variantSolid = definePartsStyle((props) => {
   const { colorScheme: c } = props
-
+  const _active = {
+    bg: `${c}.500`,
+  }
   return {
     link: {
       _hover: {
@@ -118,9 +127,8 @@ const variantSolid = definePartsStyle((props) => {
           bg: `whiteAlpha.200`,
         },
       },
-      _active: {
-        bg: `${c}.500`,
-      },
+      _active,
+      ['&[aria-current=page]']: _active,
       color: 'white',
     },
     icon: {