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,