Skip to content

chore(docs): add component preview to card list #202

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
coryrylan wants to merge 1 commit into
base: main
Choose a base branch
from
Open

chore(docs): add component preview to card list #202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion projects/core/src/dialog/dialog.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import styles from './dialog.css?inline';

/**
* @element nve-dialog
* @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
* @description Dialog is a component that appears above main content. A modal dialog displays critical information that requires user attention and interrupts user flow.
* @documentation https://nvidia.github.io/elements/docs/elements/dialog/
* @since 0.6.0
* @entrypoint \@nvidia-elements/core/dialog
Expand Down
2 changes: 1 addition & 1 deletion projects/core/src/drawer/drawer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import styles from './drawer.css?inline';

/**
* @element nve-drawer
* @description Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings). Or use [Panel](./docs/elements/panel/) inline as its content couples with or closely relates to the content on the page (details, extra actions/options). [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
* @description Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings).

@coderabbitai coderabbitai Bot Jul 31, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Fix the drawer description grammar.

Drawer are is incorrect. Use a singular subject and a direct description.

As per coding guidelines, TypeScript JSDoc comments are linted by Vale and should follow the repository's technical writing style.

Proposed wording 
- * `@description` Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings).
+ * `@description` A drawer displays content separate from the rest of the page, such as notifications, navigation, or settings.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
* @description Drawer are to display content that is out of context of the rest of the page (notifications, navigation, settings).
* `@description` A drawer displays content separate from the rest of the page, such as notifications, navigation, or settings.
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@projects/core/src/drawer/drawer.ts` at line 21, Update the JSDoc description
for the Drawer symbol to use grammatically correct singular wording and a direct
description of its purpose, preserving the existing examples of notifications,
navigation, and settings.

Source: Coding guidelines

* @documentation https://nvidia.github.io/elements/docs/elements/drawer/
* @since 0.16.0
* @entrypoint \@nvidia-elements/core/drawer
Expand Down
5 changes: 1 addition & 4 deletions projects/core/src/gauge/gauge.examples.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,7 @@ export default {
*/
export const Default = {
render: () => html`
<div nve-layout="row gap:sm">
<nve-gauge value="50">50%</nve-gauge>
<nve-gauge status="accent" value="66">66%</nve-gauge>
</div>
<nve-gauge status="accent" value="66">66%</nve-gauge>
`};

/**
Expand Down
2 changes: 1 addition & 1 deletion projects/core/src/notification/notification.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import styles from './notification.css?inline';

/**
* @element nve-notification
* @description Displays real time updates without interrupting the user's workflow to communicate an important message or status. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
* @description Displays real time updates without interrupting the user's workflow to communicate an important message or status.

@coderabbitai coderabbitai Bot Jul 31, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Clarify and hyphenate the notification description.

Use real-time when it modifies updates. The current sentence is also more complex than necessary.

As per coding guidelines, TypeScript JSDoc comments are linted by Vale and should follow the repository's technical writing style.

Proposed wording 
- * `@description` Displays real time updates without interrupting the user's workflow to communicate an important message or status.
+ * `@description` Displays important messages or status updates without interrupting the user's workflow.
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@projects/core/src/notification/notification.ts` at line 23, Update the JSDoc
`@description` for the notification symbol to use “real-time” as the modifier for
“updates” and simplify the sentence according to the repository’s technical
writing style, while preserving the meaning that notifications communicate
important messages or status without interrupting the user’s workflow.

Source: Coding guidelines

* @documentation https://nvidia.github.io/elements/docs/elements/notification/
* @since 0.6.0
* @entrypoint \@nvidia-elements/core/notification
Expand Down
2 changes: 1 addition & 1 deletion projects/core/src/toast/toast.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import styles from './toast.css?inline';

/**
* @element nve-toast
* @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
* @description A contextual popup that displays a status. Toasts are [triggered](https://w3c.github.io/aria/#tooltip) by clicking, focusing, or tapping an element and cannot have interactive elements within them.
* @documentation https://nvidia.github.io/elements/docs/elements/toast/
* @since 0.6.0
* @entrypoint \@nvidia-elements/core/toast
Expand Down
2 changes: 1 addition & 1 deletion projects/core/src/tooltip/tooltip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import styles from './tooltip.css?inline';

/**
* @element nve-tooltip
* @description A contextual popup that displays a plaintext description. Tooltips are [triggered](https://w3c.github.io/aria/#tooltip) by hovering, focusing, or tapping an element and cannot have interactive elements within them. [MDN Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
* @description A contextual popup that displays a plaintext description. Trigger tooltips by hovering, focusing, or tapping an element and cannot have interactive elements within them.

@coderabbitai coderabbitai Bot Jul 31, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win

Fix the tooltip description grammar.

The sentence joins an imperative with a separate subject. State the tooltip behavior directly.

As per coding guidelines, TypeScript JSDoc comments are linted by Vale and should follow the repository's technical writing style.

Proposed wording 
- * `@description` A contextual popup that displays a plaintext description. Trigger tooltips by hovering, focusing, or tapping an element and cannot have interactive elements within them.
+ * `@description` A contextual popup that displays a plain-text description. Tooltips are triggered by hovering over, focusing on, or tapping an element and cannot contain interactive elements.
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
* @description A contextual popup that displays a plaintext description. Trigger tooltips by hovering, focusing, or tapping an element and cannot have interactive elements within them.
* `@description` A contextual popup that displays a plain-text description. Tooltips are triggered by hovering over, focusing on, or tapping an element and cannot contain interactive elements.
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@projects/core/src/tooltip/tooltip.ts` at line 20, Update the JSDoc
description for the tooltip component to state its behavior directly with
grammatically parallel wording, covering that it appears on hover, focus, or tap
and cannot contain interactive elements. Keep the change limited to the
description text and follow the repository’s technical writing style.

Source: Coding guidelines

* @documentation https://nvidia.github.io/elements/docs/elements/tooltip/
* @since 0.6.0
* @entrypoint \@nvidia-elements/core/tooltip
Expand Down
2 changes: 1 addition & 1 deletion projects/markdown/src/markdown/markdown.examples.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const Default = {
render: () => html`
<nve-markdown>
<template>
# Default
## Markdown

This is a default markdown component in its initial state.

Expand Down
30 changes: 9 additions & 21 deletions projects/site/src/_11ty/layouts/common.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -219,7 +219,7 @@ export const renderDocsNav = data => /* html */ `
<nve-tree-node ${data.page.url.includes('/docs/design-md/') ? 'highlighted selected' : ''}><a href="/docs/design-md/">DESIGN.md</a></nve-tree-node>
</nve-tree-node>

<nve-tree-node ${data.page.url.includes('/docs/elements/') ? 'expanded' : ''} ${data.page.url === '/docs/elements/' ? 'highlighted selected' : ''}>
<nve-tree-node ${data.page.url.includes('/docs/elements/') || data.page.url.includes('/docs/monaco/') || data.page.url.includes('/docs/markdown/') || data.page.url.includes('/docs/code/') ? 'expanded' : ''} ${data.page.url === '/docs/elements/' ? 'highlighted selected' : ''}>
<a href="/docs/elements/">Elements</a>
<nve-tree-node ${data.page.url.includes('/docs/elements/accordion/') ? 'highlighted selected' : ''}><a href="/docs/elements/accordion/">Accordion</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/alert/') ? 'highlighted selected' : ''}><a href="/docs/elements/alert/">Alert</a></nve-tree-node>
Expand All @@ -231,6 +231,7 @@ export const renderDocsNav = data => /* html */ `
<nve-tree-node ${data.page.url.includes('/docs/elements/card/') ? 'highlighted selected' : ''}><a href="/docs/elements/card/">Card</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/chat-message/') ? 'highlighted selected' : ''}><a href="/docs/elements/chat-message/">Chat Message</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/checkbox/') ? 'highlighted selected' : ''}><a href="/docs/elements/checkbox/">Checkbox</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/code/codeblock/') ? 'highlighted selected' : ''}><a href="/docs/code/codeblock/">Codeblock</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/color/') ? 'highlighted selected' : ''}><a href="/docs/elements/color/">Color</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/combobox/') ? 'highlighted selected' : ''}><a href="/docs/elements/combobox/">Combobox</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/copy-button/') ? 'highlighted selected' : ''}><a href="/docs/elements/copy-button/">Copy Button</a></nve-tree-node>
Expand Down Expand Up @@ -285,8 +286,15 @@ export const renderDocsNav = data => /* html */ `
<nve-tree-node ${data.page.url.includes('/docs/elements/input/') ? 'highlighted selected' : ''}><a href="/docs/elements/input/">Input</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/input-group/') ? 'highlighted selected' : ''}><a href="/docs/elements/input-group/">Input Group</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/logo/') ? 'highlighted selected' : ''}><a href="/docs/elements/logo/">Logo</a></nve-tree-node>
<nve-tree-node ${data.page.url.endsWith('/docs/markdown/') ? 'highlighted selected' : ''}><a href="/docs/markdown/">Markdown</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/markdown/styles/') ? 'highlighted selected' : ''}><a href="/docs/markdown/styles/">Markdown CSS</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/menu/') ? 'highlighted selected' : ''}><a href="/docs/elements/menu/">Menu</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/month/') ? 'highlighted selected' : ''}><a href="/docs/elements/month/">Month</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/input/') ? 'highlighted selected' : ''}><a href="/docs/monaco/input/">Monaco Input</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/diff-input/') ? 'highlighted selected' : ''}><a href="/docs/monaco/diff-input/">Monaco Diff Input</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/editor/') ? 'highlighted selected' : ''}><a href="/docs/monaco/editor/">Monaco Editor</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/diff-editor/') ? 'highlighted selected' : ''}><a href="/docs/monaco/diff-editor/">Monaco Diff Editor</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/problems/') ? 'highlighted selected' : ''}><a href="/docs/monaco/problems/">Monaco Problems</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/notification/') ? 'highlighted selected' : ''}><a href="/docs/elements/notification/">Notification</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/page/') ? 'highlighted selected' : ''}><a href="/docs/elements/page/">Page</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/elements/page-header/') ? 'highlighted selected' : ''}><a href="/docs/elements/page-header/">Page Header</a></nve-tree-node>
Expand Down Expand Up @@ -342,26 +350,6 @@ export const renderDocsNav = data => /* html */ `
<nve-tree-node ${data.page.url.includes('/docs/patterns/trend/') ? 'highlighted selected' : ''}><a href="/docs/patterns/trend/">Trend</a></nve-tree-node>
</nve-tree-node>

<nve-tree-node ${data.page.url.includes('/docs/code/') ? 'expanded' : ''}>
<a href="/docs/code/codeblock/">Code</a>
<nve-tree-node ${data.page.url.includes('/docs/code/codeblock/') ? 'highlighted selected' : ''}><a href="/docs/code/codeblock/">Codeblock</a></nve-tree-node>
</nve-tree-node>

<nve-tree-node ${data.page.url.includes('/docs/monaco/') ? 'expanded' : ''}>
<a href="/docs/monaco/input/">Monaco</a>
<nve-tree-node ${data.page.url.includes('/docs/monaco/input/') ? 'highlighted selected' : ''}><a href="/docs/monaco/input/">Input</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/diff-input/') ? 'highlighted selected' : ''}><a href="/docs/monaco/diff-input/">Diff Input</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/editor/') ? 'highlighted selected' : ''}><a href="/docs/monaco/editor/">Editor</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/diff-editor/') ? 'highlighted selected' : ''}><a href="/docs/monaco/diff-editor/">Diff Editor</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/monaco/problems/') ? 'highlighted selected' : ''}><a href="/docs/monaco/problems/">Problems</a></nve-tree-node>
</nve-tree-node>

<nve-tree-node ${data.page.url.includes('/docs/markdown/') ? 'expanded' : ''}>
<a href="/docs/markdown/">Markdown</a>
<nve-tree-node ${data.page.url.endsWith('/docs/markdown/') ? 'highlighted selected' : ''}><a href="/docs/markdown/">Markdown</a></nve-tree-node>
<nve-tree-node ${data.page.url.includes('/docs/markdown/styles/') ? 'highlighted selected' : ''}><a href="/docs/markdown/styles/">CSS Utility</a></nve-tree-node>
</nve-tree-node>

<nve-tree-node ${data.page.url.includes('/docs/labs/') ? 'expanded' : ''} ${data.page.url === '/docs/labs/' ? 'highlighted' : ''}>
<a href="/docs/labs/">Labs</a>
<nve-tree-node ${data.page.url.includes('/docs/labs/layout/responsive/') ? 'expanded' : ''} ${data.page.url === '/docs/labs/layout/responsive/' ? 'highlighted' : ''}>
Expand Down
Loading