feat(NavList): add support for inline and block description

.changeset/happy-clocks-cover.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+feat(NavList): add support for inline and block description

e2e/components/NavList.test.ts

@@ -31,6 +31,10 @@ const stories = [
     title: 'With group expand',
     id: 'components-navlist-features--with-group-expand',
   },
+  {
+    title: 'With Description',
+    id: 'components-navlist-features--with-description',
+  },
 ]
 
 test.describe('NavList', () => {

packages/react/src/NavList/NavList.docs.json

@@ -8,6 +8,7 @@
     {"id": "components-navlist-features--expand-with-custom-items"},
     {"id": "components-navlist-features--expand-with-pages"},
     {"id": "components-navlist-features--group-with-expand-and-custom-items"},
+    {"id": "components-navlist-features--with-description"},
     {"id": "components-navlist-features--with-expand"},
     {"id": "components-navlist-features--with-expand-and-icons"},
     {"id": "components-navlist-features--with-group"},
@@ -88,6 +89,33 @@
         "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes"
       }
     },
+    {
+      "name": "NavList.Description",
+      "props": [
+        {
+          "name": "variant",
+          "type": "'inline' | 'block'",
+          "defaultValue": "'inline'",
+          "description": "`inline` descriptions are positioned beside primary text. `block` descriptions are positioned below primary text."
+        },
+        {
+          "name": "truncate",
+          "type": "boolean",
+          "defaultValue": "false",
+          "description": "Whether the inline description should truncate the text on overflow."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Custom CSS class name."
+        },
+        {
+          "name": "style",
+          "type": "React.CSSProperties",
+          "description": "Custom CSS styles."
+        }
+      ]
+    },
     {
       "name": "NavList.LeadingVisual",
       "props": [

packages/react/src/NavList/NavList.features.stories.tsx

@@ -576,4 +576,49 @@ export const GroupWithExpandAndCustomItems = () => {
   )
 }
 
+export const WithDescription: StoryFn = () => (
+  <NavList>
+    <NavList.Item href="#" aria-current="page">
+      <NavList.LeadingVisual>
+        <RepoIcon />
+      </NavList.LeadingVisual>
+      Main Repository
+      <NavList.Description>Primary project repository</NavList.Description>
+    </NavList.Item>
+    <NavList.Item href="#">
+      <NavList.LeadingVisual>
+        <BookIcon />
+      </NavList.LeadingVisual>
+      Documentation
+      <NavList.Description>User guides and API documentation</NavList.Description>
+    </NavList.Item>
+    <NavList.Item href="#">
+      <NavList.LeadingVisual>
+        <IssueOpenedIcon />
+      </NavList.LeadingVisual>
+      Bug Reports
+      <NavList.Description variant="block">
+        Submit and track bug reports for the project. Include detailed steps to reproduce, expected behavior, and system
+        information.
+      </NavList.Description>
+    </NavList.Item>
+    <NavList.Item href="#">
+      <NavList.LeadingVisual>
+        <PeopleIcon />
+      </NavList.LeadingVisual>
+      Community
+      <NavList.Description variant="block">
+        Connect with other developers, share ideas, and collaborate on features and improvements.
+      </NavList.Description>
+    </NavList.Item>
+    <NavList.Item href="#">
+      <NavList.LeadingVisual>
+        <GitCommitIcon />
+      </NavList.LeadingVisual>
+      Recent Changes
+      <NavList.Description>Latest commits and releases</NavList.Description>
+    </NavList.Item>
+  </NavList>
+)
+
 export default meta

packages/react/src/NavList/NavList.tsx

@@ -384,6 +384,7 @@ const GroupHeading: React.FC<NavListGroupHeadingProps> = ({as = 'h3', className,
 // Export
 
 export const NavList = Object.assign(Root, {
+  Description: ActionList.Description,
   Item,
   SubNav,
   LeadingVisual,