fix: added gap control for directory

Author: 12-aryan

packages/blend/lib/components/Directory/Directory.tsx

@@ -5,36 +5,17 @@ import { createRef, useEffect, useRef } from 'react'
 import type { DirectoryProps } from './types'
 import Section from './Section'
 import Block from '../Primitives/Block/Block'
-import styled from 'styled-components'
 import { handleSectionNavigation } from './utils'
 import { ActiveItemProvider } from './NavItem'
-
-const StyledNav = styled(Block).withConfig({
-    shouldForwardProp: (prop) =>
-        ![
-            'flexGrow',
-            'flexDirection',
-            'gap',
-            'alignItems',
-            'paddingY',
-            'width',
-            'height',
-            'display',
-            'overflow',
-        ].includes(prop),
-})`
-    &::-webkit-scrollbar {
-        display: none;
-    }
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-`
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import { SidebarTokenType } from '../Sidebar/sidebar.tokens'
 
 const Directory = ({ directoryData, className }: DirectoryProps) => {
     const sectionRefs = useRef<Array<React.RefObject<HTMLDivElement | null>>>(
         []
     )
 
+    const tokens = useResponsiveTokens<SidebarTokenType>('SIDEBAR')
     useEffect(() => {
         sectionRefs.current = directoryData.map(() =>
             createRef<HTMLDivElement | null>()
@@ -43,19 +24,20 @@ const Directory = ({ directoryData, className }: DirectoryProps) => {
 
     return (
         <ActiveItemProvider>
-            <StyledNav
+            <Block
                 as="nav"
                 width="100%"
                 height="100%"
                 flexGrow={1}
                 display="flex"
                 flexDirection="column"
-                gap="16px"
                 alignItems="center"
                 overflow="auto"
-                paddingY="16px"
                 className={className}
                 aria-label="Directory navigation"
+                gap={tokens.directory.gap}
+                paddingX={tokens.directory.paddingX}
+                paddingY={tokens.directory.paddingY}
             >
                 {directoryData.map((section, sectionIndex) => (
                     <Section
@@ -71,7 +53,7 @@ const Directory = ({ directoryData, className }: DirectoryProps) => {
                         }
                     />
                 ))}
-            </StyledNav>
+            </Block>
         </ActiveItemProvider>
     )
 }

packages/blend/lib/components/Directory/Section.tsx

@@ -108,7 +108,6 @@ const Section = ({
             flexDirection="column"
             gap="4px"
             width="100%"
-            padding="12px 8px"
             ref={sectionRef}
             data-state={isOpen ? 'open' : 'closed'}
             data-sidebar-section={section.label || `section-${sectionIndex}`}

packages/blend/lib/components/Sidebar/sidebar.tokens.ts

@@ -81,6 +81,12 @@ export type SidebarTokenType = {
         }
     }
 
+    directory: {
+        gap: CSSObject['gap']
+        paddingX: CSSObject['padding']
+        paddingY: CSSObject['padding']
+    }
+
     // Controls the bottom footer section containing actions and information
     footer: {
         backgroundColor: CSSObject['backgroundColor'] // Footer background color
@@ -159,6 +165,12 @@ export const getSidebarTokens = (
                 },
             },
 
+            directory: {
+                gap: foundationToken.unit[24],
+                paddingX: foundationToken.unit[12],
+                paddingY: foundationToken.unit[12],
+            },
+
             // Footer section (bottom actions and info)
             footer: {
                 backgroundColor: foundationToken.colors.gray[25],
@@ -231,6 +243,12 @@ export const getSidebarTokens = (
                 },
             },
 
+            directory: {
+                gap: foundationToken.unit[24],
+                paddingX: foundationToken.unit[12],
+                paddingY: foundationToken.unit[12],
+            },
+
             // Footer section (bottom actions and info)
             footer: {
                 backgroundColor: foundationToken.colors.gray[25],