diff --git a/.changeset/happy-clocks-cover.md b/.changeset/happy-clocks-cover.md
new file mode 100644
index 00000000000..0dde8bfd030
--- /dev/null
+++ b/.changeset/happy-clocks-cover.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+feat(NavList): add support for inline and block description
diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-dark-colorblind-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-dark-colorblind-linux.png
new file mode 100644
index 00000000000..5f2267a3594
Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-dark-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-dark-dimmed-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-dark-dimmed-linux.png
new file mode 100644
index 00000000000..f2f44f032d6
Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-dark-dimmed-linux.png differ
diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-dark-high-contrast-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-dark-high-contrast-linux.png
new file mode 100644
index 00000000000..dbd852858c8
Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-dark-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-dark-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-dark-linux.png
new file mode 100644
index 00000000000..5f2267a3594
Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-dark-linux.png differ
diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-dark-tritanopia-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-dark-tritanopia-linux.png
new file mode 100644
index 00000000000..5f2267a3594
Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-dark-tritanopia-linux.png differ
diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-light-colorblind-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-light-colorblind-linux.png
new file mode 100644
index 00000000000..0eff69d50b4
Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-light-colorblind-linux.png differ
diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-light-high-contrast-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-light-high-contrast-linux.png
new file mode 100644
index 00000000000..9fe54d517dd
Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-light-high-contrast-linux.png differ
diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-light-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-light-linux.png
new file mode 100644
index 00000000000..0eff69d50b4
Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-light-linux.png differ
diff --git a/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-light-tritanopia-linux.png b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-light-tritanopia-linux.png
new file mode 100644
index 00000000000..0eff69d50b4
Binary files /dev/null and b/.playwright/snapshots/components/NavList.test.ts-snapshots/NavList-With-Description-light-tritanopia-linux.png differ
diff --git a/e2e/components/NavList.test.ts b/e2e/components/NavList.test.ts
index eb40c1edd75..8e2b3413e09 100644
--- a/e2e/components/NavList.test.ts
+++ b/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', () => {
diff --git a/packages/react/src/NavList/NavList.docs.json b/packages/react/src/NavList/NavList.docs.json
index a9a220a26c8..aa8c8212d21 100644
--- a/packages/react/src/NavList/NavList.docs.json
+++ b/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": [
diff --git a/packages/react/src/NavList/NavList.features.stories.tsx b/packages/react/src/NavList/NavList.features.stories.tsx
index 5501546cb19..9bc8ecfa226 100644
--- a/packages/react/src/NavList/NavList.features.stories.tsx
+++ b/packages/react/src/NavList/NavList.features.stories.tsx
@@ -576,4 +576,49 @@ export const GroupWithExpandAndCustomItems = () => {
)
}
+export const WithDescription: StoryFn = () => (
+
+
+
+
+
+ Main Repository
+ Primary project repository
+
+
+
+
+
+ Documentation
+ User guides and API documentation
+
+
+
+
+
+ Bug Reports
+
+ Submit and track bug reports for the project. Include detailed steps to reproduce, expected behavior, and system
+ information.
+
+
+
+
+
+
+ Community
+
+ Connect with other developers, share ideas, and collaborate on features and improvements.
+
+
+
+
+
+
+ Recent Changes
+ Latest commits and releases
+
+
+)
+
export default meta
diff --git a/packages/react/src/NavList/NavList.tsx b/packages/react/src/NavList/NavList.tsx
index 8648957d4aa..e0bb35c1867 100644
--- a/packages/react/src/NavList/NavList.tsx
+++ b/packages/react/src/NavList/NavList.tsx
@@ -384,6 +384,7 @@ const GroupHeading: React.FC = ({as = 'h3', className,
// Export
export const NavList = Object.assign(Root, {
+ Description: ActionList.Description,
Item,
SubNav,
LeadingVisual,